Copy resume CSS

https://github.com/gohugoio/hugo/issues/6759#issuecomment-592015342

.gitignore

@@ -3,5 +3,8 @@ public/
 resources/_gen/
 themes/base16*
 
+*.pdf
+
 commit-msg.txt
+.hugo_build.lock
 static/server-apps.json

assets/sass/main.scss

@@ -2,14 +2,10 @@
 
 //  base colors {{{ // 
 
-$base00: #2d2d2d;
-$base01: #393939;
 $base02: #515151;
 $base03: #747369;
 $base04: #a09f93;
 $base05: #d3d0c8; 
-$base06: #e8e6df;
-$base07: #f2f0ec;
 $base-red: #f2777a;
 $base-orange: #f99157;
 $base-yellow: #ffcc66;
@@ -19,6 +15,13 @@ $base-blue: #6699cc;
 $base-violet: #cc99cc;
 $base-dark-orange: #d27b53;
 
+/* .base00 { color: #2d2d2d; }
+.base01 { color: #393939; }
+.base02 { color: #515151; }
+.base03 { color: #747369; }
+.base04 { color: #a09f93; }
+.base06 { color: #e8e6df; }
+.base07 { color: #f2f0ec; } */
 .base08 { color: $base-red; }
 .base09 { color: $base-orange; }
 .base0a { color: $base-yellow; }
@@ -35,7 +38,6 @@ $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;
@@ -88,23 +90,14 @@ $vert-phone-width: 500px;
   }
 }// }}}
 
-@mixin a-no-underline() {// {{{
-  a {
-    text-decoration: none;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}// }}}
-
 //  }}} mixins // 
 
 //  general elements {{{ // 
 
-$background-color: #2d2d2d;
+// $background-color: #2d2d2d;
-$color: #f2f0ec;
+// $color: #f2f0ec;
-// $background-color: white;
+$background-color: white;
-// $color: black;
+$color: black;
 
 body {
   margin: 0;
@@ -112,7 +105,8 @@ body {
   color: $color;
   line-height: 1.5;
   // font-size: 100%;
-  font-size: 15px;
+  // font-size: 15px;
+  font-size: 20px;
   /* font-family: 'Source Code Pro', monospace; */
   font-family: 'Hack', monospace;
   display: flex;
@@ -214,7 +208,6 @@ footer {
         position: relative;
         padding-right: $side-padding;
         // padding-right: .9em;
-        @include a-no-underline();
 
         img {
           height: 1.5em;
@@ -256,22 +249,22 @@ p {
   margin-bottom: 1rem;
 }
 
-h1 {
+// h1 {
-  font-size: 2rem;
+  // font-size: 2rem;
 
-  @media (max-width: $phone-width) {
+  // @media (max-width: $phone-width) {
-    font-size: 1.75rem;
+    // font-size: 1.75rem;
-  }
+  // }
-}
+// }
-h2 {
+// h2 {
-  font-size: 1.5rem;
+  // font-size: 1.5rem;
 
-  @media (max-width: $phone-width) {
+  // @media (max-width: $phone-width) {
-    font-size: 1.4rem;
+    // font-size: 1.4rem;
-  }
+  // }
-}
+// }
 h3 { font-size: 1.25rem }
-h4 { font-size: 1rem }
+// h4 { font-size: 1rem }
 h5 { font-size: .875rem }
 h6 { font-size: .75rem }
 
@@ -486,25 +479,31 @@ header {// {{{
 
 #print-icon {// {{{
   float: right;
+  display: none;
 
   img {
-    height: 2em !important;
+    height: 1.75em;
-    position: absolute;
+    position: relative;
     top: 1em;
   }
 }// }}}
 
 #contact-info {// {{{
   @include side-margin-em(0);
-  @include side-padding-rem(0);
   // @include vert-padding-rem(0.5);
   @include a-color($base-sky-blue);
-  width: 100%;
+  // min-width: $max-page-width;
-  // @media (min-width: 1200px) {
+  @media (min-width: 1200px) {
-      // .container{
+      .container{
-        // min-width: $max-page-width;
+        min-width: $max-page-width;
-      // }
+      }
-  // }
+  }
+  a {// {{{
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }// }}}
 
   font-size: .9em;
 
@@ -531,11 +530,11 @@ header {// {{{
     margin-left: 5px;
     // position: relative;
     // left: -8px;
-    @media (max-width: $phone-width) {
+    // @media (max-width: $phone-width) {
-      // display: none;
+      // // display: none;
-      // font-size: 10px;
+      // // font-size: 10px;
-      font-size: .8em;
+      // font-size: .8em;
-    }
+    // }
   }
 
 }// }}}
@@ -550,45 +549,44 @@ header {// {{{
 
   h1 {// {{{
     color: $base-orange;
-    margin-top: 1rem;
+    margin-top: 1.3rem;
 
-    @media (max-width: $phone-width) {
+    // @media (max-width: $phone-width) {
-      margin-top: .75rem;
+      // margin-top: .75rem;
-    }
+    // }
   }// }}}
   h2 {// {{{
     color: $base-orange;
     margin-top: .5rem;
 
-    @media (max-width: $phone-width) {
+    // @media (max-width: $phone-width) {
-      font-size: 1.2em;
+      // font-size: 1.2em;
-      margin-top: .75rem;
+      // margin-top: .75rem;
-    }
+    // }
   }// }}}
   h4 {// {{{
     color: $base-yellow;
     margin-top: .5rem;
 
-    @media (max-width: $phone-width) {
+    // @media (max-width: $phone-width) {
-      font-size: 1.2em;
+      // font-size: 1.2em;
-      margin-top: .75rem;
+      // margin-top: .75rem;
-    }
+    // }
   }// }}}
 
   .date {// {{{
-    padding-top: .8em;
     float: right;
     color: $base03;
     
-    @media (max-width: $phone-width) {
+    // @media (max-width: $phone-width) {
-      padding-top: 0em;
+      // padding-top: 0em;
-    }
+    // }
   }// }}}
 
   #projects {// {{{
-    h1 {
+    // // h1 {
-      margin-bottom: 3px;
+      // // margin-bottom: 3px;
-    }
+    // // }
 
     .project {// {{{
       @include vert-padding-rem(.2);
@@ -602,6 +600,10 @@ header {// {{{
         height: 1.2em;
       }
 
+      .project-header {
+        margin-bottom: .6em;
+      }
+
       .project-link {
         &:hover {
           text-decoration: none;
@@ -653,13 +655,14 @@ header {// {{{
     }
   }// }}}
 
-  @media (max-width: $phone-width) {
+  // @media (max-width: $phone-width) {
-    font-size: 14px;
+    // font-size: 14px;
-    // font-size: 1em;
+    // // font-size: 1em;
-  }
+  // }
 
   &.letter {
     margin-top: 2em;
+    line-height: 1.5em;
 
     img {
       height: 4.5em;
@@ -668,21 +671,19 @@ header {// {{{
     h2 {
       color: $base-red;
       margin-top: 0em;
+      margin-bottom: .4em;
     }
 
     p {
-      margin-bottom: 1.5em;
+      margin-bottom: 1em;
     }
     
     .no-line-spacing {
       line-height: .5em;
-      margin-bottom: 2.15em;
+      margin-bottom: 1.75em;
       p {
         margin-bottom: 1em;
       }
-      strong {
-        line-height: 1.25em;
-      }
     }
   }
 }// }}}
@@ -737,168 +738,6 @@ header {// {{{
   }
 }// }}}
 
-#card {// {{{
-  @include vert-margin-rem(2);
-  align-items: center;
-  justify-content: center;
-  font-family: 'Oxygen Mono', monospace;
-
-  .container {// {{{
-    padding-left: 0;
-    padding-right: 0;
-
-    .row {
-      padding-top: 6rem;
-      padding-bottom: 8rem;
-      
-      @media (max-width: $phone-width) {
-        padding-top: 5rem;
-        padding-bottom: 6rem;
-      }
-    }
-  }// }}}
-
-  // $card-bg: #e8e6df;
-  $card-bg: $base07;
-  #presentational-container {// {{{
-    margin-top: 3em;
-    margin-bottom: 1em;
-    max-width: $max-page-width;
-    box-shadow: 2px 2px 10px 5px black;
-    // card bg
-    // background-color: #fff;
-    // background-color: #e5e5e5;
-    background-color: $card-bg;
-  }// }}}
-
-  #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;
-
-    img {
-      height: .5em;
-      position: absolute;
-      left: -.8em;
-      bottom: -.15em;
-    }
-
-    p { // {{{
-      position: relative;
-      // color: grey;
-      color: #151515;
-      // color: #133337;
-
-      div {
-        display: inline;
-      }
-
-      .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;
-          width: 100%;
-        }
-
-        $border-thickness: 8px;
-        @media (max-width: $vert-phone-width) {
-          $border-thickness: 5px;
-        }
-        .link {
-          position: absolute;
-          border-color: black;
-          border-style: solid;
-          border-width: 0 $border-thickness $border-thickness $border-thickness;
-          height: .45em;
-          width: 100%;
-          left: 0;
-          img {
-            position: absolute;
-            left: -1em;
-          }
-
-          &.link-top {
-            border-width: $border-thickness $border-thickness 0 $border-thickness;
-
-            img {
-              position: absolute;
-              top: -.2em;
-            }
-          }
-
-          &:hover {
-            opacity: .6;
-          }
-        }
-
-        $line-spacing: .65em;
-        #mastodon {
-          top: -$line-spacing * 1.1;
-          border-color: #3088d4;
-        }
-        .linkedin {
-          bottom: -$line-spacing * 1.1;
-          border-color: #0077b7;
-
-          &.linkedin-middle {
-            border-style: dotted;
-            border-width: 0 0 3.5px 0;
-          }
-        }
-        #github {
-          bottom: -$line-spacing * 2.7;
-        }
-        #site {
-          bottom: -$line-spacing * 4.25;
-          border-color: #ff7058;
-        }
-        #email {
-          top: -$line-spacing * 2.65;
-          border-color: #d1d0bf;
-        }
-      }// }}}
-
-      .spacing {
-        opacity: 0;
-      }
-    }// }}}
-  }// }}}
-}// }}}
-
-#letter-home {// {{{
-
-  #letter-instr {
-    text-align: center;
-    margin-top: 1.5em;
-    // margin-top: 25vh;
-    font-size: 1.4em;
-  }
-}// }}}
-
 // TODO: converted up to here
 
 //  hero {{{ // 
@@ -917,20 +756,20 @@ h1.site-title {// {{{
     text-decoration: none;
   }
 
-  @media (max-width: $max-page-width) {
+  // @media (max-width: $phone-width) {
-    font-size: 3em;
+    // font-size: 3em;
-  }
+  // }
 
-  @media (max-width: $phone-width) {
+  // @media (max-width: $phone-width) {
-    font-size: 3.5em;
+    // font-size: 3.5em;
-    @include vert-margin-rem(.3);
+    // @include vert-margin-rem(.3);
-    // font-size: 2.5em;
+    // // font-size: 2.5em;
-    // font-size: 2em;
+    // // font-size: 2em;
 
-    .surrounding {
+    // .surrounding {
-      display: none;
+      // display: none;
-    }
+    // }
-  }
+  // }
 }// }}}
 
 .hero-logo img {

config.yaml

@@ -1,5 +1,5 @@
-# baseURL: http://localhost:1313/
+baseURL: http://localhost:1313/
-baseURL: https://kevin-mok.com/
+# baseURL: https://kevin-mok.com/
 # baseURL: /home/kevin/coding/mf-site/public
 languageCode: en-us
 # title: Kevin Mok's Website
@@ -36,9 +36,13 @@ menu:
     # url: /credits
     # weight: 20
     
-blackfriday:
+# blackfriday:
-  plainIDAnchors: true
+  # plainIDAnchors: true
-  hrefTargetBlank: true
+  # hrefTargetBlank: true
 
 disableKinds: ["RSS"]
 
+markup:
+  goldmark:
+    renderer:
+      unsafe: true

layouts/partials/base/footer.html

@@ -19,20 +19,30 @@
             <img src="{{ "img/social/github.svg" | relURL }}"
             alt="github-logo">
           </a>
-          <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank">
-            <img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-logo">
-          </a>
           <a href="https://git.kevin-mok.com/" target="_blank">
             <img src="{{ "img/social/gitea.svg" | relURL }}" alt="gitea-logo">
           </a>
+          · 
+          <a href="https://twitter.com/Kev_Mok" target="_blank">
+            <img src="{{ "img/social/twitter.svg" | relURL }}"
+            alt="twitter-logo">
+          </a>
+          <a rel="me" href="https://fosstodon.org/@Kevin" target="_blank">
+            <img src="{{ "img/social/mastodon.svg" | relURL }}"
+            alt="mastodon-logo">
+          </a>
+          <a href="https://www.reddit.com/u/Kevin-Mok" target="_blank">
+            <img src="{{ "img/social/reddit.svg" | relURL }}"
+            alt="reddit-logo">
+          </a>
+          . 
+          <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank">
+            <img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-logo">
+          </a>
           <a href="mailto:me@kevin-mok.com" target="_blank">
             <img src="{{ "img/social/email.svg" | relURL }}"
             alt="envelope">
           </a>
-          <a href="https://fosstodon.org/@Kevin" target="_blank">
-            <img src="{{ "img/social/mastodon.svg" | relURL }}"
-            alt="mastodon-logo">
-          </a>
         </span>
         <span class="col-xs-2">
         </span>

layouts/partials/base/header.html

@@ -9,16 +9,16 @@
 {{- with $.Param "author" }}
 <meta name="author" content="{{ . }}">
 {{- end }}
-{{ .Hugo.Generator }}
+{{ hugo.Generator }}
 <meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="https://cdn.khkm.tk/live.js" charset="utf-8"></script>
+<!-- <script src="https://cdn.khkm.gq/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>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css"> -->
-<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
+<!-- <link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'> -->
 <!-- <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css" media="all" /> -->
 <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css">
 {{ $main_sass := resources.Get "sass/main.scss" }}

layouts/shortcodes/resume/project.html

@@ -9,7 +9,6 @@
         aria-expanded="false" aria-controls="{{ .Get "name" | lower | urlize }}-details">
         <h2 class="project-title">
           {{ .Get "name" }}
-          <!-- <img class="down-triangle" src="{{ "img/resume/down-triangle.svg" | relURL }}" alt="link-icon"> -->
           <img class="down-triangle" src="{{ "img/resume/down-triangle.png" | relURL }}" alt="link-icon">
         </h2>
       </button>
@@ -17,9 +16,8 @@
     <div class="col-4 text-right date">{{ .Get "date" }}</div>
   </div>
   <div class="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details">
-  <!-- <div class="show" id="{{ .Get "name" | lower | urlize }}-details"> -->
     <div>
       {{ .Inner }}
-    </div>
+</div>
   </div>
 </div>

static/img/social/reddit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#FFF" d="M12.193 19.555c-1.94-1.741-4.79-1.727-6.365.029-1.576 1.756-1.301 5.023.926 6.632L12.193 19.555zM35.807 19.555c1.939-1.741 4.789-1.727 6.365.029 1.575 1.756 1.302 5.023-.927 6.632L35.807 19.555zM38.32 6.975A3.5 3.5 0 1 0 38.32 13.975 3.5 3.5 0 1 0 38.32 6.975z"/><path fill="#FFF" d="M24.085 15.665000000000001A18.085 12.946 0 1 0 24.085 41.557A18.085 12.946 0 1 0 24.085 15.665000000000001Z"/><g><path fill="#D84315" d="M30.365 23.506A2.884 2.884 0 1 0 30.365 29.274 2.884 2.884 0 1 0 30.365 23.506zM17.635 23.506A2.884 2.884 0 1 0 17.635 29.274 2.884 2.884 0 1 0 17.635 23.506z"/></g><g><path fill="#37474F" d="M24.002 34.902c-3.252 0-6.14-.745-8.002-1.902 1.024 2.044 4.196 4 8.002 4 3.802 0 6.976-1.956 7.998-4C30.143 34.157 27.254 34.902 24.002 34.902zM41.83 27.026l-1.17-1.621c.831-.6 1.373-1.556 1.488-2.623.105-.98-.157-1.903-.721-2.531-.571-.637-1.391-.99-2.307-.994-.927.013-1.894.365-2.646 1.041l-1.336-1.488c1.123-1.008 2.545-1.523 3.991-1.553 1.488.007 2.833.596 3.786 1.658.942 1.05 1.387 2.537 1.221 4.081C43.961 24.626 43.121 26.096 41.83 27.026zM6.169 27.026c-1.29-.932-2.131-2.401-2.306-4.031-.166-1.543.279-3.03 1.221-4.079.953-1.062 2.297-1.651 3.785-1.658.009 0 .018 0 .027 0 1.441 0 2.849.551 3.965 1.553l-1.336 1.488c-.753-.676-1.689-1.005-2.646-1.041-.916.004-1.735.357-2.306.994-.563.628-.826 1.55-.721 2.53.115 1.067.657 2.023 1.488 2.624L6.169 27.026zM25 16.84h-2c0-2.885 0-10.548 4.979-10.548 2.154 0 3.193 1.211 3.952 2.096.629.734.961 1.086 1.616 1.086h1.37v2h-1.37c-1.604 0-2.453-.99-3.135-1.785-.67-.781-1.198-1.398-2.434-1.398C25.975 8.292 25 11.088 25 16.84z"/><path fill="#37474F" d="M24.085 16.95c9.421 0 17.085 5.231 17.085 11.661 0 6.431-7.664 11.662-17.085 11.662S7 35.042 7 28.611C7 22.181 14.664 16.95 24.085 16.95M24.085 14.95C13.544 14.95 5 21.066 5 28.611c0 7.546 8.545 13.662 19.085 13.662 10.54 0 19.085-6.116 19.085-13.662C43.17 21.066 34.625 14.95 24.085 14.95L24.085 14.95zM38.32 7.975c1.379 0 2.5 1.122 2.5 2.5s-1.121 2.5-2.5 2.5-2.5-1.122-2.5-2.5S36.941 7.975 38.32 7.975M38.32 5.975c-2.484 0-4.5 2.015-4.5 4.5s2.016 4.5 4.5 4.5c2.486 0 4.5-2.015 4.5-4.5S40.807 5.975 38.32 5.975L38.32 5.975z"/></g></svg>

static/img/social/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="240px" height="240px"><linearGradient id="_osn9zIN2f6RhTsY8WhY4a" x1="10.341" x2="40.798" y1="8.312" y2="38.769" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"/><stop offset="1" stop-color="#007ad9"/></linearGradient><path fill="url(#_osn9zIN2f6RhTsY8WhY4a)" d="M46.105,11.02c-1.551,0.687-3.219,1.145-4.979,1.362c1.789-1.062,3.166-2.756,3.812-4.758	c-1.674,0.981-3.529,1.702-5.502,2.082C37.86,8.036,35.612,7,33.122,7c-4.783,0-8.661,3.843-8.661,8.582	c0,0.671,0.079,1.324,0.226,1.958c-7.196-0.361-13.579-3.782-17.849-8.974c-0.75,1.269-1.172,2.754-1.172,4.322	c0,2.979,1.525,5.602,3.851,7.147c-1.42-0.043-2.756-0.438-3.926-1.072c0,0.026,0,0.064,0,0.101c0,4.163,2.986,7.63,6.944,8.419	c-0.723,0.198-1.488,0.308-2.276,0.308c-0.559,0-1.104-0.063-1.632-0.158c1.102,3.402,4.299,5.889,8.087,5.963	c-2.964,2.298-6.697,3.674-10.756,3.674c-0.701,0-1.387-0.04-2.065-0.122C7.73,39.577,12.283,41,17.171,41	c15.927,0,24.641-13.079,24.641-24.426c0-0.372-0.012-0.742-0.029-1.108C43.483,14.265,44.948,12.751,46.105,11.02"/></svg>