Merge pull request #2 from calicokaiya/optimisedcode

🔥 

2 files changed, 70 insertions, 62 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..9744380 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;
@@ -32,27 +44,21 @@ html, body {
     vertical-align: middle;
 }
 
-.topnav {
+.topnav{
     /* make the navbar follow the scroll */
     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%;
 }
-    .downnav {
+
+.downnav{
       /* make the navbar follow the scroll */
       position: fixed;
       bottom: 0;
@@ -60,26 +66,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;
+      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;
@@ -87,22 +86,22 @@ html, body {
     text-decoration: none;
     font-family: "google sans";
     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 +112,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 +135,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 +167,7 @@ html, body {
   transition: opacity 1s;
 }
 
-.tooltip:hover .tooltiptext {
+.tooltip:hover .tooltiptext{
   visibility: visible;
   opacity: 1;
 }
@@ -176,13 +176,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 +193,7 @@ color: #ff80a4;
     margin-left: 10%;
 }
 
-@keyframes colorchange {
+@keyframes colorchange{
     0% {
       color: #16171a;
     }
@@ -228,8 +228,9 @@ color: #ff80a4;
       color: pink;
     }
   }
+
 .mebeinguseless{
-    color: #ff80a4;
+    color: var(--title-color);
     padding: 10px;
     font-size: 15px;
     font-weight: bold;
@@ -238,7 +239,7 @@ color: #ff80a4;
 }
 
 .runaway{
-    color: #ff2674;
+    color: var(--text-color);
     padding: 10px;
     font-size: 15px;
     font-weight: bold;
@@ -262,14 +263,11 @@ color: #ff80a4;
     width: 50%;
     margin-left: 25%;
     transform: scale(0.75);
-
     margin-bottom: -60px
- 
-
 }
 
 html{
-    background-color: #202124;
+    background-color: var(--background-color);
 }
 
 .go{