From c5d077dd2be25789bc02cbc75b3ebd71e9d95902 Mon Sep 17 00:00:00 2001
From: CalicoKaiya <inhbinggi@mail.com>
Date: Fri, 12 Aug 2022 18:56:44 +0100
Subject: Removed redundant CSS lines

Added CSS variables for readability and ease of customization

Optimised 'border' lines
---
 myshit/index.css | 32 +++++++++++++-------
 styles.css       | 90 ++++++++++++++++++++++++++++----------------------------
 2 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/myshit/index.css b/myshit/index.css
index 86ee9c4..8089392 100644
--- a/myshit/index.css
+++ b/myshit/index.css
@@ -1,28 +1,37 @@
 @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
-html, body {
+/* Color variables */
+:root{
+    --background-color: #202124;
+    --text-color: #ff80a4;
+    --link-color: #94216a;
+}
+
+html, body{
     scroll-behavior: smooth;
-    background-color: #202124;
-  }
+    background-color: var(--background-color);
+}
 
-  .header{
+.header{
     font-family: 'fira sans', serif;
-    color: #ff80a4;
+    color: var(--text-color);
     text-align: center;
 }
+
 .notheader{
     font-family: 'fira sans', serif;
-    color: #ff80a4;
+    color: var(--text-color);
     text-align: center;
     font-size: small;
 }
-.center {
+
+.center{
     margin: auto;
     width: 60%;
     padding: 10px;
     text-align: center;
-    }
+}
 
 b{
     font-size: 140%;
@@ -32,10 +41,11 @@ b{
 h3{
     margin-top: 0%;
     font-family: 'fira sans', serif;
-    color: #ff80a4;
-    text-align: center;
+    color: var(--text-color);
+    /*text-align: center;*/
     font-size: small;
 }
+
 .desktop{
     width: 100%;
     height: auto;
@@ -49,7 +59,7 @@ h3{
 }
 
 .link{
-    color: #94216a;
+    color: var(--link-color);
     text-decoration: none;
     font-family: 'google sans';
     font-size: larger;
diff --git a/styles.css b/styles.css
index be039c6..49d8513 100644
--- a/styles.css
+++ b/styles.css
@@ -1,12 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
+
+/* Declare color variables */
+:root{
+  --title-color: #ff80a4;
+  --text-color: #ff2674;
+  --background-color: #202124;
+  --nav-background-color: #333;
+}
+
 /* make the scrolling smooth */
-html, body {
+html, body{
   scroll-behavior: smooth;
 }
+
 .header{
-    color: #202124;
+    color: var(--background-color);
     padding: 10px;
     font-size: 40px;
     font-weight: bold;
@@ -14,10 +24,12 @@ html, body {
     font-family: 'google sans', serif;
     animation: colorchange 7s infinite alternate;
 }
+
 .java{
     vertical-align: middle;
     font-size: 10px;
 }
+
 .javaimg{
     margin-left: 10%;
     width: 50px;
@@ -37,18 +49,11 @@ html, body {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
     margin: auto;
-    width: 100%;
-    overflow: hidden;
-    background-color: #202124;
-    border-bottom: 1px solid #202124;
-    border-top: 1px solid #202124;
-    border-left: 1px solid #202124;
-    border-right: 1px solid #202124;
-    box-shadow: 0px 0px 10px #202124;
+    border: 1px solid var(--background-color);
+    box-shadow: 0px 0px 10px var(--background-color);
     z-index: 1;
-    background-color: #333;
+    background-color: var(--nav-background-color);
     overflow: hidden;
     width: 100%;
 }
@@ -60,26 +65,19 @@ html, body {
       width: 100%;
       margin: auto;
       overflow: hidden;
-      background-color: #202124;
-      border-bottom: 0px solid #202124;
-      border-top: 1px solid #202124;
-      border-left: 1px solid #202124;
-      border-right: 1px solid #202124;
-      box-shadow: 0px 0px 6px #202124;
+       /* Delete these 4 lines after test */
+      border: 1px solid var(--background-color);
+      box-shadow: 0px 0px 6px var(--background-color);
       z-index: 1;
-      background-color: #333;
-      overflow: hidden;
-      width: 100%;
-
-    
+      background-color: var(--nav-background-color);
 }
 
 .imsotired{
   margin-left: 1%;
   font-family: 'fira sans', serif;
-  color: #ff80a4;
+  color: var(--title-color);
 }
-.topnav a {
+.topnav a{
     float: left;
     color: #f2f2f2;
     text-align: center;
@@ -89,20 +87,20 @@ html, body {
     font-size: 15px;
   }
 
-  .topnav a:hover {
+.topnav a:hover{
     background-color: #ddd;
     color: black;
-  }
+}
 
-  .topnav a.active {
-    background-color: #ff80a4;
+.topnav a.active{
+    background-color: var(--title-color);
     color: white;
-  }
+}
 
 .java{
     width: 5%;
     font-family: 'fira sans', serif;
-    color: #ff80a4;
+    color: var(--title-color);
     padding: 10px;
     font-size: 40px;
     font-weight: bold;
@@ -113,18 +111,19 @@ html, body {
 .notjava{
     margin-left: 3%;
     font-family: 'fira sans';
-    color: #ff2674;
+    color: var(--text-color);
 }
 
 .data{
     font-family: 'fira sans', serif;
-    color: #ff80a4;
+    color: var(--title-color);
     padding: 10px;
     font-size: 40px;
     font-weight: bold;
     margin-left: 10%;
     margin-top: 30px;
 }
+
 .header span::before{
   pointer-events: all;
     content: "does ";
@@ -135,24 +134,24 @@ html, body {
 .being{
     margin-left: 11%;
     font-family: 'fira sans';
-    color: #ff2674;
+    color: var(--text-color);
     font-size: 120%
 }
 
 
-.tooltip {
+.tooltip{
   position: relative;
   display: inline-block;
   margin-left: 13%;
   font-family: 'fira sans';
-  color: #ff2674;
+  color: var(--text-color);
   font-size: 120%
 }
 
-.tooltip .tooltiptext {
+.tooltip .tooltiptext{
   visibility: hidden;
   width: 120px;
-  color: #ff80a4;
+  color: var(--title-color);
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
@@ -167,7 +166,7 @@ html, body {
   transition: opacity 1s;
 }
 
-.tooltip:hover .tooltiptext {
+.tooltip:hover .tooltiptext{
   visibility: visible;
   opacity: 1;
 }
@@ -176,13 +175,13 @@ html, body {
 text-decoration: none;
 font-family: 'fira sans';
 font-size: 120%;
-color: #ff80a4;
+color: var(--title-color);
 }
 
 .aboutme{
     margin-left: 13%;
     font-family: 'fira sans';
-    color: #ff2674;
+    color: var(--text-color);
     font-size: 120%
 }
 
@@ -193,7 +192,7 @@ color: #ff80a4;
     margin-left: 10%;
 }
 
-@keyframes colorchange {
+@keyframes colorchange{
     0% {
       color: #16171a;
     }
@@ -228,8 +227,9 @@ color: #ff80a4;
       color: pink;
     }
   }
+
 .mebeinguseless{
-    color: #ff80a4;
+    color: var(--title-color);
     padding: 10px;
     font-size: 15px;
     font-weight: bold;
@@ -238,7 +238,7 @@ color: #ff80a4;
 }
 
 .runaway{
-    color: #ff2674;
+    color: var(--text-color);
     padding: 10px;
     font-size: 15px;
     font-weight: bold;
@@ -269,7 +269,7 @@ color: #ff80a4;
 }
 
 html{
-    background-color: #202124;
+    background-color: var(--background-color);
 }
 
 .go{
-- 
cgit 


From 230172a8cfddd995b9a0e2c097cb67fa4745fbbf Mon Sep 17 00:00:00 2001
From: CalicoKaiya <inhbinggi@mail.com>
Date: Fri, 12 Aug 2022 18:58:41 +0100
Subject: Removed pointless stray comment

Standardised file formatting
---
 styles.css | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/styles.css b/styles.css
index 49d8513..9744380 100644
--- a/styles.css
+++ b/styles.css
@@ -44,7 +44,7 @@ html, body{
     vertical-align: middle;
 }
 
-.topnav {
+.topnav{
     /* make the navbar follow the scroll */
     position: fixed;
     top: 0;
@@ -57,7 +57,8 @@ html, body{
     overflow: hidden;
     width: 100%;
 }
-    .downnav {
+
+.downnav{
       /* make the navbar follow the scroll */
       position: fixed;
       bottom: 0;
@@ -65,7 +66,6 @@ html, body{
       width: 100%;
       margin: auto;
       overflow: hidden;
-       /* Delete these 4 lines after test */
       border: 1px solid var(--background-color);
       box-shadow: 0px 0px 6px var(--background-color);
       z-index: 1;
@@ -77,6 +77,7 @@ html, body{
   font-family: 'fira sans', serif;
   color: var(--title-color);
 }
+
 .topnav a{
     float: left;
     color: #f2f2f2;
@@ -85,7 +86,7 @@ html, body{
     text-decoration: none;
     font-family: "google sans";
     font-size: 15px;
-  }
+}
 
 .topnav a:hover{
     background-color: #ddd;
@@ -262,10 +263,7 @@ color: var(--title-color);
     width: 50%;
     margin-left: 25%;
     transform: scale(0.75);
-
     margin-bottom: -60px
- 
-
 }
 
 html{
-- 
cgit