improve social link styling

assets/scss/_content.scss

@@ -86,6 +86,39 @@
     font-weight: bold;
     font-size: 0.95em;
   }
+
+  .social-links {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .social-link-icon {
+    font-size: 1em;
+    height: 2em;
+    margin-bottom: 1rem;
+
+    display: flex;
+
+    &:link {
+      text-decoration: none;
+    }
+
+    &--svg {
+      svg {
+        height: 100%;
+      }
+    }
+
+    &--text {
+      height: auto;
+      font-size: 1.3em;
+      line-height: 1;
+      font-weight: bold;
+    }
+  }
 }
 
 div.content .meta-tag {
@@ -254,7 +287,6 @@ div.content .meta-tag {
           text-transform: uppercase;
           margin-left: 1rem;
           margin-right: 1rem;
-          font-size: 1.6rem;
           &:hover,
           &:focus {
             color: $link-color;
@@ -262,9 +294,6 @@ div.content .meta-tag {
           @media only screen and (max-width: 768px) {
             font-size: 1.4rem;
           }
-          i {
-            font-size: 3.2rem;
-          }
         }
       }
     }

layouts/partials/home.html

@@ -6,17 +6,24 @@
     <h1>{{ .Site.Params.author }}</h1>
     <h2>{{ .Site.Params.info }}</h2>
     {{ with .Site.Params.social }}
-    <ul>
+    <ul class="social-links">
       {{ range sort .}}
         {{ if .icon }}
           <li>
-            <a href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
+            <a class="social-link-icon" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
               <i class="{{ .icon }}" aria-hidden="true"></i>
             </a>
           </li>
+        {{ else if .svg }}
+          <li>
+            <a class="social-link-icon social-link-icon--svg" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
+                {{ $path := printf "svg/%s" .svg }}
+                {{ partial $path . }}
+            </a>
+          </li>
         {{ else }}
           <li>
-            <a href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }}>{{ .name }}</a>
+            <a class="social-link-icon social-link-icon--text" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }}>{{ .name }}</a>
           </li>
         {{ end }}
       {{ end }}