More color changes - added margin for socials

assets/scss/_header.scss

@@ -5,9 +5,11 @@
   justify-content: center;
   position: relative;
   padding: 20px;
+  border-bottom: solid 1px $light-border-color;
 
   .dark-theme & {
     background: $dark-background-secondary;
+    border-bottom: solid 1px $dark-border-color;
   }
 
   &__right {

assets/scss/_main.scss

@@ -303,3 +303,16 @@ hr {
 	width: auto;
 	z-index: 100000;
 }
+
+.socials{
+  margin-top: 50px;
+  a{
+    &:hover{
+      color: $light-hover-link-color;
+      .dark-theme & {
+        color: $dark-hover-link-color;
+      }
+    }
+
+  }
+}

assets/scss/_variables.scss

@@ -2,18 +2,20 @@
 
 /* light theme color */
 $light-background: #fff;
-$light-background-secondary: #eaeaea;
+$light-background-secondary: #fff;
 $light-color: #494949;
-$light-color-secondary: #999;
+$light-color-secondary: rgb(134, 132, 132);
 $light-border-color: #dcdcdc;
-$light-cursor-color: #a85656;
+$light-cursor-color: #d67b7b;
+$light-hover-link-color: #000;
 /* dark theme colors */
-$dark-background: #34363a;
+$dark-background: #404147;
 $dark-background-secondary: #404653;
 $dark-color: #d4d4d4;
 $dark-color-secondary: #a1a1a1;
 $dark-border-color: #4a4b50;
 $dark-cursor-color: #a85656;
+$dark-hover-link-color: #fff;
 
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";

layouts/index.html

@@ -9,10 +9,10 @@
     {{ end }}
 
     {{ with .Site.Params.social }}
-    <div>
+    <div class="socials">
       {{ partial "social-icons.html" . }}
     </div>
     {{ end }}
   </div>
 </main>
-{{ end }}
+{{ end }}