decreased base font ans styles for social links

3 files changed, 17 insertions, 18 deletions

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 60a5ab8..d349701 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -5,7 +5,7 @@
     - {{ .Title }}
     {{ end }}
   </title>
-  <meta name="theme-color" content="" />
+  <meta name="theme-color" content="#a3001b" />
   <meta charset="utf-8" />
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <meta name="description" content="{{ .Site.Params.description }}" />
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 7fa7621..caa1e65 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -21,17 +21,15 @@
     </p>
 
     <div class="social-info">
-      {{ range $key, $val := .Site.Params.social }}
-      <small>
+      {{- range $key, $val := .Site.Params.social -}}    
         <a
           class="social-link"
           href="{{ $val }}"
           aria-label="social media links"
         >
           {{- $key -}}
-        </a>
-      </small>
-      {{ end }}
+        </a>    
+      {{- end -}}
     </div>
   </div>
 </header>
diff --git a/static/css/main.css b/static/css/main.css
index 8fd8b7f..f9c31bc 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -9,7 +9,7 @@
   --shadow: black;
 }
 html {
-  font-size: 18px;
+  font-size: 16px;
   overflow-y: scroll;
   background-color: var(--bg);
   box-sizing: border-box;
@@ -218,20 +218,21 @@ svg {
   box-shadow: inset 0 0 2px var(--shadow);
   transition: box-shadow 0.1s;
 }
-.home-icon svg:hover {
-  box-shadow: inset 0 0 6px var(--shadow);
-}
-.home-icon svg:active {
-  box-shadow: inset 0 0 10px var(--shadow);
-}
 .social-link {
   color: var(--bg);
-  margin-right: 0.25em;
-  font-weight: 600;
+  padding: 0.15em 0.35em;
+  border-radius: 5px;
+  font-size: 0.9em;
+  font-weight: 300;
 }
-.social-link::before {
-  content: "@";
-  font-family: "Inconsolata", monospace;
+.home-icon svg:hover,
+.social-link:hover {
+  box-shadow: inset 0 0 6px var(--shadow);
+  text-decoration: none;
+}
+.home-icon svg:active,
+.social-link:active {
+  box-shadow: inset 0 0 10px var(--shadow);
 }
 .archive-table {
   width: 100%;