From 4ba339984d239180a526a5ae8ffbb558f1b5642a Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Thu, 12 Sep 2024 13:11:16 +0000
Subject: Updated the main page and page structures

---
 src/scss/_framework.scss | 63 +++++++++++++++++++++++++++++-------------------
 src/scss/_navbar.scss    | 10 ++++----
 src/scss/_variables.scss | 30 ++++++-----------------
 3 files changed, 51 insertions(+), 52 deletions(-)

(limited to 'src/scss')

diff --git a/src/scss/_framework.scss b/src/scss/_framework.scss
index 0b80359..e1e0c13 100644
--- a/src/scss/_framework.scss
+++ b/src/scss/_framework.scss
@@ -6,16 +6,29 @@
 }
 
 html {
-	font-family: $font-family-base;
+	font-family:
+		"Jost",
+		-apple-system,
+		blinkmacsystemfont,
+		"Segoe UI",
+		roboto,
+		"Helvetica Neue",
+		arial,
+		"Noto Sans",
+		sans-serif,
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		"Noto Color Emoji";
 	font-size: 62.5%;
 	min-height: 100%;
 	overflow-y: scroll;
 }
 
 body {
-	background-color: $color-bg;
-	color: $color-text;
-	font-size: $font-size-base;
+	background-color: $colorBg;
+	color: $colorText;
+	font-size: $fontSizeBase;
 	font-synthesis: weight style small-caps;
 	font-weight: 400;
 	line-height: 1.5;
@@ -28,7 +41,7 @@ body {
 
 @media (width <=684px) {
 	body {
-		font-size: $font-size-base * 0.85;
+		font-size: $fontSizeBase * 0.85;
 		padding: 4em 1em 2em;
 	}
 }
@@ -84,16 +97,16 @@ sup {
 }
 
 hr {
-	border-color: $color-blossom;
+	border-color: $colorBlossom;
 }
 
 a {
-	color: $color-blossom;
+	color: $colorBlossom;
 	text-decoration: inherit;
 	transition: color 0.25s;
 
 	&:visited {
-		color: $color-blossom;
+		color: $colorBlossom;
 	}
 
 	&:active,
@@ -114,8 +127,8 @@ li {
 }
 
 blockquote {
-	background-color: $color-bg-alt;
-	border-left: 5px solid $color-blossom;
+	background-color: $colorBgAlt;
+	border-left: 5px solid $colorBlossom;
 	margin-bottom: 2.5rem;
 	margin-left: 0;
 	margin-right: 0;
@@ -136,9 +149,9 @@ video {
 }
 
 pre {
-	background-color: $color-bg-alt;
+	background-color: $colorBgAlt;
 	border-radius: 4px;
-	border: 1px solid $color-bg-alt;
+	border: 1px solid $colorBgAlt;
 	display: block;
 	font-size: 0.9em;
 	margin-bottom: 2.5rem;
@@ -150,7 +163,7 @@ pre {
 code,
 kbd,
 samp {
-	background-color: $color-bg-code;
+	background-color: $colorBgCode;
 	border-radius: 4px;
 	font-size: 0.9em;
 	padding: 0 0.2em;
@@ -172,7 +185,7 @@ table {
 
 td,
 th {
-	border-bottom: 1px dashed $color-blossom;
+	border-bottom: 1px dashed $colorBlossom;
 	padding: 0.5em;
 }
 
@@ -185,11 +198,11 @@ button,
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
-	background-color: $color-blossom;
-	border: 1px solid $color-blossom;
+	background-color: $colorBlossom;
+	border: 1px solid $colorBlossom;
 	border-radius: 1px;
 	box-sizing: border-box;
-	color: $color-bg;
+	color: $colorBg;
 	cursor: pointer;
 	display: inline-block;
 	padding: 5px 10px;
@@ -204,9 +217,9 @@ input[type="button"] {
 
 	&:focus:enabled,
 	&:hover:enabled {
-		background-color: $color-fade;
-		border-color: $color-fade;
-		color: $color-bg;
+		background-color: $colorFade;
+		border-color: $colorFade;
+		color: $colorBg;
 		outline: 0;
 	}
 }
@@ -214,23 +227,23 @@ input[type="button"] {
 textarea,
 select,
 input {
-	background-color: $color-bg-alt;
-	border: 1px solid $color-bg-alt;
+	background-color: $colorBgAlt;
+	border: 1px solid $colorBgAlt;
 	border-radius: 4px;
 	box-shadow: none;
 	box-sizing: border-box;
-	color: $color-text;
+	color: $colorText;
 	margin-bottom: 10px;
 	padding: 6px 10px;
 
 	&:focus {
-		border: 1px solid $color-blossom;
+		border: 1px solid $colorBlossom;
 		outline: 0;
 	}
 }
 
 input[type="checkbox"]:focus {
-	outline: 1px dotted $color-blossom;
+	outline: 1px dotted $colorBlossom;
 }
 
 label,
diff --git a/src/scss/_navbar.scss b/src/scss/_navbar.scss
index ee07ae4..9dea596 100644
--- a/src/scss/_navbar.scss
+++ b/src/scss/_navbar.scss
@@ -1,7 +1,7 @@
 header {
-	background-color: $color-bg;
-	border-bottom: 1px solid $color-header;
-	box-shadow: 0 5px 5px $color-bg;
+	background-color: $colorBg;
+	border-bottom: 1px solid $colorHeader;
+	box-shadow: 0 5px 5px $colorBg;
 	left: 0;
 	line-height: 3.5em;
 	opacity: 0.975;
@@ -17,11 +17,11 @@ nav {
 	text-align: right;
 
 	a {
-		color: $color-text;
+		color: $colorText;
 		padding: 0 1em;
 
 		&:visited {
-			color: $color-text;
+			color: $colorText;
 		}
 	}
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 9c69c8f..5b65f2a 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,22 +1,8 @@
-$color-bg: #212529;
-$color-bg-alt: hwb(0deg 0% 100% / 20%);
-$color-bg-code: #3b3d42;
-$color-blossom: #6da13f;
-$color-fade: #598332;
-$color-header: #1b1f22;
-$color-text: #dee2e6;
-$font-family-base:
-	"Jost",
-	-apple-system,
-	blinkmacsystemfont,
-	"Segoe UI",
-	roboto,
-	"Helvetica Neue",
-	arial,
-	"Noto Sans",
-	sans-serif,
-	"Apple Color Emoji",
-	"Segoe UI Emoji",
-	"Segoe UI Symbol",
-	"Noto Color Emoji";
-$font-size-base: 1.8rem;
+$colorBg: #212529;
+$colorBgAlt: hwb(0deg 0% 100% / 20%);
+$colorBgCode: #3b3d42;
+$colorBlossom: #6da13f;
+$colorFade: #598332;
+$colorHeader: #1b1f22;
+$colorText: #dee2e6;
+$fontSizeBase: 1.8rem;
-- 
cgit v1.2.3