From c5d077dd2be25789bc02cbc75b3ebd71e9d95902 Mon Sep 17 00:00:00 2001 From: CalicoKaiya 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 --- styles.css | 90 +++++++++++++++++++++++++++++++------------------------------- 1 file changed, 45 insertions(+), 45 deletions(-) (limited to 'styles.css') 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 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(-) (limited to 'styles.css') 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