Card: fix stacking on Safari, reduce vert. font

assets/sass/main.scss

@@ -35,6 +35,7 @@ $base-dark-orange: #d27b53;
 // $max-page-width: 52em;
 $max-page-width: 45em;
 $phone-width: 800px;
+$vert-phone-width: 500px;
 
 @mixin side-padding-rem($n) {// {{{
   padding-left: $n * 1rem;
@@ -694,16 +695,16 @@ header {// {{{
   }
 }// }}}
 
-#card {
+#card {// {{{
   @include vert-margin-rem(2);
   align-items: center;
   justify-content: center;
   font-family: 'Oxygen Mono', monospace;
 
-  .container {
+  .container {// {{{
     padding-left: 0;
     padding-right: 0;
-  }
+
     .row {
       padding-top: 6rem;
       padding-bottom: 8rem;
@@ -713,9 +714,11 @@ header {// {{{
         padding-bottom: 6rem;
       }
     }
+  }// }}}
+
   // $card-bg: #e8e6df;
   $card-bg: $base07;
-  #presentational-container {
+  #presentational-container {// {{{
     margin-top: 3em;
     margin-bottom: 1em;
     max-width: $max-page-width;
@@ -724,12 +727,17 @@ header {// {{{
     // background-color: #fff;
     // background-color: #e5e5e5;
     background-color: $card-bg;
-  }
-  #email-full {
+  }// }}}
+
+  #email-full {// {{{
     font-size: 50px;
     @media (max-width: $phone-width) {
       font-size: 40px;
     }
+    @media (max-width: $vert-phone-width) {
+      font-size: 33px;
+    }
+
     @include vert-margin-rem(2);
     height: 7em;
 
@@ -740,7 +748,7 @@ header {// {{{
       bottom: -.15em;
     }
 
-    p { 
+    p { // {{{
       position: relative;
       // color: grey;
       color: #151515;
@@ -750,10 +758,24 @@ header {// {{{
         display: inline;
       }
 
-      .social {
+      .social {// {{{
         // display: none;
         display: inline;
         white-space: nowrap;
+        position: absolute;
+        // left: 5.5rem;
+        left: 0rem;
+
+        .safari {
+          display: none;
+        }
+
+        @supports (-webkit-backdrop-filter: blur(1px)) {
+          left: .65rem;
+          .safari {
+            display: inline;
+          }
+        }
 
         .link-text {
           position: relative;
@@ -761,6 +783,9 @@ header {// {{{
         }
 
         $border-thickness: 8px;
+        @media (max-width: $vert-phone-width) {
+          $border-thickness: 5px;
+        }
         .link {
           position: absolute;
           border-color: black;
@@ -813,19 +838,14 @@ header {// {{{
           top: -$line-spacing * 2.65;
           border-color: #d1d0bf;
         }
-      }
+      }// }}}
 
       .spacing {
         opacity: 0;
       }
-      .social {
-        position: absolute;
-        // left: 5.5rem;
-        left: 0rem;
-      }
-    }
-  }
-}
+    }// }}}
+  }// }}}
+}// }}}
 
 // TODO: converted up to here
 

layouts/card/section.html

@@ -14,41 +14,47 @@
             <nobr>
               me@kevin-mok.com
               <span class="social"><span class="spacing">
-                  me</span><span class="link-text">@kevi
+                  me</span><span class="link-text">@kevi<span
+                    class="safari">n</span>
                   <a href="https://fosstodon.org/@Kevin"
                     target="_blank" id="mastodon" class="link link-top">
                     <img src="https://kevin-mok.com/img/social/mastodon.svg" alt=""/>
                   </a></span>
               </span>
               <span class="social"><span class="spacing">
-                  me@</span><span class="link-text">ke
+                  me@</span><span class="link-text">ke<span
+                    class="safari">v</span>
                   <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" 
                     target="_blank" class="link linkedin linkedin-left">
                     <img src="https://kevin-mok.com/img/social/linkedin.svg" alt=""/>
                   </a></span>
               </span>
               <span class="social"><span class="spacing">
-                  me@kevin</span><span class="link-text">-mo
+                  me@kevin</span><span class="link-text">-mo<span
+                    class="safari">k</span>
                   <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" class="link linkedin linkedin-left"></a></span>
               </span>
               <span class="social"><span class="spacing">
-                  me@kev</span><span class="link-text">i
+                  me@kev</span><span class="link-text">i<span
+                    class="safari">n</span>
                   <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" 
                     class="link linkedin linkedin-middle"></a></span>
               </span>
               <span class="social"><span class="spacing">
-                  me@</span><span class="link-text">kevin-mo
+                  me@</span><span class="link-text">kevin-mo<span
+                    class="safari">k</span>
                   <a href="https://github.com/Kevin-Mok" target="_blank" id="github" class="link">
                     <img src="https://kevin-mok.com/img/social/github.svg" alt=""/>
                   </a></span>
               </span>
               <span class="social"><span class="spacing">
-                  me@</span><span class="link-text">kevin-mok.co
+                  me@</span><span class="link-text">kevin-mok.co<span
+                    class="safari">m</span>
                   <a href="https://kevin-mok.com/" target="_blank" id="site" class="link">
                     <img src="https://kevin-mok.com/img/resume/link.svg" alt=""/>
                   </a></span>
               </span>
-              <span class="social"><span class="link-text">me@kevin-mok.co
+              <span class="social"><span class="link-text">me@kevin-mok.co<span class="safari">&nbsp;</span>
                   <a href="mailto:me@kevin-mok.com" target="_blank" id="email" class="link link-top">
                     <img src="https://kevin-mok.com/img/resume/envelope.svg" alt=""/>
                   </a></span>

layouts/partials/base/header.html

@@ -12,7 +12,7 @@
 {{ .Hugo.Generator }}
 <meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="http://livejs.com/live.js" charset="utf-8"></script>
+<script src="https://cdn.khkm.tk/live.js" charset="utf-8"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>