update

likeich · Sep 17, 2024 · fd064e6 · fd064e6
1 parent acca85e
commit fd064e6
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 45 deletions.
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -2,14 +2,16 @@
 // VARIABLES
 //
 
-// Dark Theme Colors
-$blue: #61dafb;
-$black: #000;
-$darkerGray: #1a1a1a; // Dark background color
-$darkGray: #2a2a2a; // For slightly lighter dark elements
-$gray: #bbbbbb; // Text color
-$lightGray: #333333; // Lighter dark for borders, highlights
-$white: #f0f0f0; // Light text on dark background
+// Colors
+$accent: #4183c4;
+
+// Grays
+$background-dark: #000;
+$heading-color: #222;
+$primary-text: #333;
+$secondary-text: #666;
+$border-color: #eee;
+$background-light: #fff;
 
 // Font stacks
 $helvetica: Helvetica, Arial, sans-serif;

diff --git a/style.scss b/style.scss
@@ -1,7 +1,10 @@
 ---
 ---
 
+//
 // IMPORTS
+//
+
 @import "reset";
 @import "variables";
 // Syntax highlighting @import is at the bottom of this file
@@ -15,9 +18,9 @@ html {
 }
 
 body {
-    background: $darkerGray; // Dark background
+    background: $background-light;
     font: 18px/1.4 $helvetica;
-    color: $gray; // Light text color
+    color: $primary-text;
 }
 
 .container {
@@ -34,7 +37,7 @@ h4,
 h5,
 h6 {
     font-family: $helveticaNeue;
-    color: $white; // Headings in white
+    color: $heading-color;
     font-weight: bold;
 
     line-height: 1.7;
@@ -63,28 +66,27 @@ h3 {
 
 h4 {
     font-size: 18px;
-    color: $gray; // Subtitle headings in gray
+    color: $secondary-text;
 }
 
 p {
     margin: 15px 0;
 }
 
 a {
-    color: $blue; // Links in blue
+    color: $accent;
     text-decoration: none;
     cursor: pointer;
     &:hover,
     &:active {
-        color: lighten($blue, 10%); // Lighten on hover
+        color: $accent;
     }
 }
 
 ul,
 ol {
     margin: 15px 0;
     padding-left: 30px;
-    color: $white; // List items in white
 }
 
 ul {
@@ -115,7 +117,6 @@ i {
 strong,
 b {
     font-weight: bold;
-    color: $white; // Bold text in white
 }
 
 img {
@@ -129,35 +130,52 @@ img {
 
 .date {
     font-style: italic;
-    color: $gray;
+    color: $secondary-text;
 }
 
 // Specify the color of the selection
 ::-moz-selection {
-    color: $black;
-    background: $lightGray;
+    color: $background-dark;
+    background: $border-color;
 }
-
 ::selection {
-    color: $black;
-    background: $lightGray;
+    color: $background-dark;
+    background: $border-color;
 }
 
-// .wrapper-footer
-.wrapper-footer {
-    margin-top: 50px;
-    border-top: 1px solid $lightGray; // Footer border in light gray
-    border-bottom: 1px solid $lightGray;
-    background-color: $darkGray; // Dark footer background
+// Nicolas Gallagher's micro clearfix hack
+// http://nicolasgallagher.com/micro-clearfix-hack/
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
 }
 
-footer {
+.clearfix:after {
+    clear: both;
+}
+
+/*********************/
+/* LAYOUT / SECTIONS */
+/*********************/
+
+//
+// .masthead
+//
+
+.wrapper-masthead {
+    margin-bottom: 50px;
+}
+
+.masthead {
     padding: 20px 0;
-    text-align: center;
-    color: $white; // Footer text in white
+    border-bottom: 1px solid $border-color;
+
+    @include mobile {
+        text-align: center;
+    }
 }
 
-// .site-avatar
 .site-avatar {
     float: left;
     width: 70px;
@@ -175,7 +193,6 @@ footer {
     }
 }
 
-// .site-info
 .site-info {
     float: left;
 
@@ -186,29 +203,26 @@ footer {
     }
 }
 
-// .site-name
 .site-name {
     margin: 0;
-    color: $darkGray;
+    color: $primary-text;
     cursor: pointer;
     font-family: $helveticaNeue;
     font-weight: 300;
     font-size: 28px;
     letter-spacing: 1px;
 }
 
-// .site-description
 .site-description {
     margin: -5px 0 0 0;
-    color: $gray;
+    color: $secondary-text;
     font-size: 16px;
 
     @include mobile {
         margin: 3px 0;
     }
 }
 
-// nav
 nav {
     float: right;
     margin-top: 23px; // @TODO: Vertically middle align
@@ -224,22 +238,25 @@ nav {
 
     a {
         margin-left: 20px;
-        color: $darkGray;
+        color: $primary-text;
         text-align: right;
         font-weight: 300;
         letter-spacing: 1px;
 
         @include mobile {
             margin: 0 10px;
-            color: $blue;
+            color: $accent;
         }
     }
 }
 
+//
 // .main
+//
+
 .posts > .post {
     padding-bottom: 2em;
-    border-bottom: 1px solid $lightGray;
+    border-bottom: 1px solid $border-color;
 }
 
 .posts > .post:last-child {
@@ -250,9 +267,9 @@ nav {
 .post {
     blockquote {
         margin: 1.8em 0.8em;
-        border-left: 2px solid $gray;
+        border-left: 2px solid $secondary-text;
         padding: 0.1em 1em;
-        color: $gray;
+        color: $secondary-text;
         font-size: 22px;
         font-style: italic;
     }
@@ -267,12 +284,11 @@ nav {
     }
 }
 
-// Footer
 .wrapper-footer {
     margin-top: 50px;
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
-    background-color: $lightGray;
+    background-color: $border-color;
 }
 
 footer {
@@ -281,5 +297,6 @@ footer {
 }
 
 // Settled on moving the import of syntax highlighting to the bottom of the CSS
+// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 @import "highlights";
 @import "svg-icons";