jarv.is/assets/style.scss

/*! Compiled CSS from SASS: https://go.jarv.is/sass-source */

// Global Colors
$color-background:   #ffffff;
$color-text:         #222222;
$color-light:        #666666;
$color-medium-light: #9e9e9e;
$color-super-light:  #dddddd;
$color-super-duper-light: #f4f4f4;
$color-links:        #0e6dc2;

// Colorful Homepage
$colors-home:(
  boston:     #fb4d42,
  javascript: #f48024,
  node:       #6fbc4e,
  golang:     #00acd7,
  react:      #4fb3cd,
  angular:    #c3002f,
  vue:        #486491,
  java:       #ab6311,
  cpp:        #865fc5,
  python:     #fea500,
  php:        #8892bf,
  ruby:       #d34135,
  infosec:    #00b81a,
  server:     #0098ec,
  devops:     #ff6200,
  containers: #c48f49,
  y2k:        #4169e1,
  jbb:        #9932cc,
  github:     #8d4eff,
  linkedin:   #0073b1,
  facebook:   #4267b2,
  twitter:    #00acee,
  dm:         #00acee,
  instagram:  #a37754,
  mastodon:   #6d8ca7,
  resume:     #d54b3d,
  email:      #de0c0c,
  pgp:        #777777,
  sms:        #6fcc01,
  news-1:     #ff1b1b,
  news-2:     #f78200,
  news-3:     #f2b702,
  news-4:     #5ebd3e,
  news-5:     #009cdf,
  news-6:     #3e49bb,
  news-7:     #973999
);
$color-serverless: #87cef7;
$color-fairy: #f23e93;

// Other Settings
$link-opacity: 50%;
$link-underline-size: 2px;

// Gradient hack to get our custom underline to wrap:
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@function underline-hack($color) {
  // Calculate lighter underline color compared to text color by
  // mix()'ing with background (#fff) to give the impression of
  // opacity but with MUCH better compatibility.
  $color-opaque: mix($color, $color-background, $link-opacity);

  // Return non-gradient linear-gradient():
  @return linear-gradient($color-opaque, $color-opaque);
}


// Global Styles
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: $color-background;
  color: $color-text;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300;
  box-sizing: border-box;

  a {
    color: $color-links;
    text-decoration: none;
    background-image: underline-hack($color-links);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% $link-underline-size;
    padding-bottom: $link-underline-size;
    transition: background-size 0.25s ease-in-out;

    &:hover {
      text-decoration: none;
      background-size: 100% $link-underline-size;
    }

    &.no-underline {
      background: none !important;
    }
  }

  // Home Styles
  &#home {
    font-size: 1.5em;
    line-height: 1.5;
    max-width: 1070px;
    padding: 60px;

    h1 {
      margin: 0 0 20px 0;
      font-size: 1.5em;
      font-weight: 500;
      line-height: 1;

      a {
        color: inherit;
      }
    }

    h2 {
      margin: 20px 0;
      font-size: 1.2em;
      font-weight: 400;
      line-height: 1.4;
    }

    p {
      margin: 20px 0;
    }

    sup {
      top: -0.5em;
      font-size: 0.5em;
      line-height: 0;
      position: relative;
      vertical-align: middle;
    }

    img#me {
      float: right;
      margin: 0 0 20px 20px;
      padding: 4px;
      border: 1px solid $color-super-light;
      width: 160px;
      height: 160px;
    }

    a {
      // Loop through $colors-home -- the main reason I switched to SASS :)
      @each $id, $color in $colors-home {
        &##{$id} {
          color: $color;
          background-image: underline-hack($color);
        }
      }
    }

    span {
      &#serverless {
        color: $color-serverless;
      }

      &#shh {
        color: $color-medium-light;
      }

      &#fairy {
        color: $color-fairy;

        &:hover {
          cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
        }
      }
    }

    footer {
      margin: 0;
      height: 40px;
      // TODO: switch to em:
      line-height: 40px;

      div {
        float: left;
        vertical-align: middle;
        height: 100%;

        &#blog {
          width: 40%;
          text-align: left;
          font-size: 0.9em;
        }

        &#panda {
          width: 20%;
          text-align: center;
          font-size: 1.25em;
          line-height: 1.5;

          a {
            display: inline-block;
            transition: transform 0.2s ease-in-out;

            &:hover {
              transform: scale(1.4);
            }
          }
        }

        &#info {
          width: 40%;
          font-size: 0.55em;
          color: $color-light;
          text-align: right;

          a {
            color: inherit;

            &#source {
              border-bottom: 1px solid $color-super-light;
            }
          }
        }
      }
    }

    h1 span#wave {
      display: inline-block;
      animation-name: wave;
      animation-duration: 2.5s;
      animation-iteration-count: infinite;
      transform-origin: 70% 70%;
    }
  }

  // Blog Styles
  &#notes {
    line-height: 1.5;
    font-weight: 400;
    max-width: 1010px;
    padding: 20px 50px;

    header {
      margin: 30px 0;

      a {
        &#more {
          font-size: 1.25em;
        }

        &#logo {
          margin: 20px auto;
          display: block;

          img,
          svg {
            height: 150px;
            width: 100px;
            margin: 0 auto;
            display: block;
          }
        }
      }
    }

    footer {
      border-top: 1px solid $color-super-light;
      height: 40px;
      // TODO: switch to em:
      line-height: 40px;
      padding-top: 16px;
      margin-top: 30px;
      color: $color-light;

      a {
        color: inherit;
      }

      div {
        float: left;
        vertical-align: middle;

        &#copyright,
        &#poweredby {
          width: 40%;
          font-size: 0.85em;
        }

        &#copyright {
          text-align: left;
        }

        &#poweredby {
          text-align: right;

          a#source {
            border-bottom: 1px solid $color-super-light;
          }
        }

        &#panda {
          width: 20%;
          text-align: center;
          font-size: 1.7em;

          a {
            display: inline-block;
            transition: transform 0.2s ease-in-out;

            &:hover {
              transform: scale(1.4);
            }
          }
        }
      }
    }

    main {
      &#single article div {
        &#info {
          text-align: center;

          h1 {
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 2em;
            line-height: 1.4;

            a {
              color: inherit;
            }
          }
        }

        &#meta {
          margin: -5px 0 0 0;
          color: $color-light;
          font-size: 0.85em;
          line-height: 1.5;
          letter-spacing: 1px;

          a {
            color: inherit;
          }

          div#tags {
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 5px;

            span.tag {
              margin: 0 8px;
            }
          }
        }

        &#content {
          line-height: 1.8;
          object-fit: contain;

          h1,
          h2,
          h3 {
            margin-top: 18px;
            margin-bottom: 10px;
            font-weight: 500;
            line-height: 1.5;
          }

          img {
            max-width: 100%;
            margin: 0 auto;
            display: block;
            object-fit: scale-down;
          }

          img + em,
          figure figcaption {
            display: block;
            font-size: 0.9em;
            font-style: normal;
            color: $color-light;
            text-align: center;
            margin-top: 5px;
          }

          blockquote {
            border-left: 6px solid $color-links;
            margin-left: 6px;
            padding-left: 15px;
          }

          ul {
            list-style-position: inside;
            list-style-type: square;
            margin-left: 12px;
            padding-left: 0;
          }

          hr {
            width: 60%;
            margin: 10px auto;
            border: 1px solid $color-super-light;
          }

          video.embed {
            display: block;
            margin: 0 auto;
          }

          div.embed.video-player {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;

            iframe.youtube-player {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border: none;
              margin-bottom: 10px;
              display: inline-block;
            }
          }

          twitter-widget {
            margin: 0 auto;
            display: block;
          }
          
          code {
            // https://markdotto.com/2018/02/07/github-system-fonts/
            font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
            font-size: 0.9em;
            padding: 0.2em;
            background: $color-super-duper-light;
            border: 1px solid $color-super-light;
          }

          pre code {
            display: block;
            padding: 1em 1.5em;
            line-height: 1.6;
            border-left: 3px solid $color-links;
            max-width: 100%;
            overflow-x: scroll;
            page-break-inside: avoid;
            object-fit: scale-down;
          }
        }

        &#commento {
          border-top: 1px solid #ccc;
          padding-top: 20px;
          margin-top: 20px;

          // disable link underline effect in comments
          a {
            background: none;

            &:hover {
              text-decoration: underline;
            }
          }

          div.commento-body {
            a {
              color: $color-links;
            }
          }

          div#commento-footer {
            display: none;
          }
        }
      }

      &#archive section.year {
        ul {
          list-style-type: none;
          padding-left: 0;
          display: block;
        }

        li {
          &::after {
            content: '';
            display: block;
            clear: both;
          }

          &:last-child {
            margin-bottom: 20px;
          }

          + li {
            padding-top: 20px;
          }
        }

        h2 {
          font-size: 1.8em;
        }

        div {
          font-size: 1.1em;

          &.date {
            float: left;
            color: $color-light;
            width: 5.25em;
            font-weight: 400;
          }

          &.title {
            float: left;
            width: calc(100% - 5.25em);
          }
        }
      }
    }
  }
}


// Responsive Awesomeness
@media screen and (max-width: 800px) {
  // Responsive Home
  body#home {
    font-size: 1em;
    padding: 30px;

    h1 {
      margin: 0 0 12px 0;
    }

    h2 {
      margin: 12px 0;
    }

    p {
      font-size: 1.1em;
      line-height: 1.5;
      margin: 12px 0;
    }

    img#me {
      width: 68px;
      height: 68px;
      padding: 2px;
      margin: 0 0 10px 10px;
    }

    footer div {
      line-height: 1.7;

      &#panda {
        display: none;
      }

      &#blog,
      &#info {
        width: 50%;
      }

      &#blog {
        font-size: 1em;
      }

      &#info {
        font-size: 0.7em;

        span#copyright::after {
          content: "\A";
          white-space: pre;
        }
      }
    }
  }

  // Responsive Blog
  body#notes {
    padding: 30px;
    width: 100%;
    max-width: 100%;

    header {
      margin-top: 0;
      margin-bottom: 20px;

      a#logo {
        img,
        svg {
          height: 75px;
          width: 50px;
        }
      }
    }

    footer div {
      line-height: 1.8;

      &#panda {
        display: none;
      }

      &#copyright,
      &#poweredby {
        width: 50%;
      }

      &#poweredby {
        a#hugo::after {
          content: "\A";
          white-space: pre;
        }
      }
    }

    main#archive section.year div {
      font-size: 1em;
    }

    main#single article {
      width: 100%;
      max-width: 100%;

      div#info h1 {
        font-size: 1.7em;
      }
    }
  }
}


/*! Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/ */
@keyframes wave {
  0% { transform: rotate(  0.0deg); }
 10% { transform: rotate(-10.0deg); }
 20% { transform: rotate( 12.0deg); }
 30% { transform: rotate(-10.0deg); }
 40% { transform: rotate(  9.0deg); }
 50% { transform: rotate(  0.0deg); }
100% { transform: rotate(  0.0deg); }
}


/*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
div.highlight span {
  &.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
    color: #03748a;
  }
  &.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
    color: #111111;
  }
  &.na, &.nc, &.nd, &.ne, &.nf, &.nx {
    color: #489c44;
  }
  &.err, &.nt, &.o, &.ow, &.kn {
    color: #e8003d;
  }
  &.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
    color: #8145ec;
  }
  &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
    color: #c17005;
  }
  &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
    color: #6b6859;
  }
  &.ge {
    font-style: italic;
  }
  &.gs {
    font-weight: bold;
  }
}