Updated the main page and page structures

1 files changed, 38 insertions, 25 deletions

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,