jarv.is/assets/sass/pages/_home.scss

@use "sass:map";

@use "../abstracts/themes";
@use "../abstracts/functions";

// Colorful Homepage
$colors-home: (
  boston: (
    light: #fb4d42,
    dark: #ff5146,
  ),
  js-vanilla: (
    light: #f48024,
    dark: #e18431,
  ),
  js-frameworks: (
    light: #1091b3,
    dark: #6fcbe3,
  ),
  jamstack: (
    light: #04a699,
    dark: #08bbac,
  ),
  node: (
    light: #6fbc4e,
    dark: #84d95f,
  ),
  golang: (
    light: #00acd7,
    dark: #2ad1fb,
  ),
  php: (
    light: #8892bf,
    dark: #a4afe3,
  ),
  ruby: (
    light: #d34135,
    dark: #f95a4d,
  ),
  python: (
    light: #fea500,
    dark: #ffbb3c,
  ),
  infosec: (
    light: #00b81a,
    dark: #57f06d,
  ),
  server: (
    light: #0098ec,
    dark: #43b9fb,
  ),
  devops: (
    light: #ff6200,
    dark: #f46c16,
  ),
  frontend: (
    light: #4169e1,
    dark: #8ca9ff,
  ),
  backend: (
    light: #9932cc,
    dark: #d588fb,
  ),
  birthday: (
    light: #e40088,
    dark: #fd40b1,
  ),
  github: (
    light: #8d4eff,
    dark: #a379f0,
  ),
  linkedin: (
    light: #0073b1,
    dark: #3b9dd2,
  ),
  twitter: (
    light: #00acee,
    dark: #3bc9ff,
  ),
  email: (
    light: #de0c0c,
    dark: #ff5050,
  ),
  pgp: (
    light: #757575,
    dark: #959595,
  ),
  sms: (
    light: #6fcc01,
    dark: #8edb34,
  ),
  news-1: (
    light: #ff1b1b,
    dark: #f06060,
  ),
  news-2: (
    light: #f78200,
    dark: #fd992a,
  ),
  news-3: (
    light: #f2b702,
    dark: #ffcc2e,
  ),
  news-4: (
    light: #5ebd3e,
    dark: #78df55,
  ),
  news-5: (
    light: #009cdf,
    dark: #29bfff,
  ),
  news-6: (
    light: #3e49bb,
    dark: #7b87ff,
  ),
  news-7: (
    light: #973999,
    dark: #db60dd,
  ),
);
$color-serverless: #87cef7;
$icon-wand: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="20" height="20"><g fill="none"><path fill="#292F33" d="M2.651 6.073l26.275 26.276c.391.391 2.888-2.107 2.497-2.497L5.148 3.576c-.39-.391-2.888 2.107-2.497 2.497z"/><path fill="#66757F" d="M29.442 31.23L3.146 4.934l.883-.883 26.296 26.296z"/><path fill="#E1E8ED" d="M33.546 33.483l-.412.412-.671.671a.967.967 0 01-.255.169.988.988 0 01-1.159-.169l-2.102-2.102.495-.495.883-.883 1.119-1.119 2.102 2.102a.999.999 0 010 1.414zM4.029 4.79l-.883.883-.495.495L.442 3.96a.988.988 0 01-.169-1.159.967.967 0 01.169-.255l.671-.671.412-.412a.999.999 0 011.414 0l2.208 2.208L4.029 4.79z"/><path fill="#F5F8FA" d="M30.325 30.497l2.809 2.809-.671.671a.967.967 0 01-.255.169l-2.767-2.767.884-.882zM3.146 5.084L.273 2.211a.967.967 0 01.169-.255l.671-.671 2.916 2.916-.883.883z"/><path fill="#FFAC33" d="M27.897 10.219l1.542.571.6 2.2a.667.667 0 001.287 0l.6-2.2 1.542-.571a.665.665 0 000-1.25l-1.534-.568-.605-2.415a.667.667 0 00-1.293 0l-.605 2.415-1.534.568a.665.665 0 000 1.25m-16.936 9.628l2.61.966.966 2.61a1.103 1.103 0 002.07 0l.966-2.61 2.609-.966a1.103 1.103 0 000-2.07l-2.609-.966-.966-2.61a1.105 1.105 0 00-2.07 0l-.966 2.61-2.61.966a1.104 1.104 0 000 2.07M23.13 4.36l1.383.512.512 1.382a.585.585 0 001.096 0l.512-1.382 1.382-.512a.584.584 0 000-1.096l-1.382-.512-.512-1.382a.585.585 0 00-1.096 0l-.512 1.382-1.383.512a.585.585 0 000 1.096"/></g></svg>';

// ----------------

// Home Styles
div.layout-home {
  font-size: 1em;
  padding-top: 1.2em;
  padding-bottom: 0.6em;

  h1 {
    margin: 0 0 0.3em -0.03em; // TODO: why is this indented slightly?
    font-size: 1.8em;
    font-weight: 500;
    letter-spacing: -0.014em;

    img.emoji {
      margin-left: 0.1em; // a little extra social distancing for the hand
    }
  }

  h2 {
    margin: 0.5em 0 0.5em -0.03em; // TODO: why is this indented slightly?
    font-size: 1.35em;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.4;
  }

  p {
    margin: 0.85em 0;
    letter-spacing: -0.009em;
    line-height: 1.7;
  }

  sup {
    letter-spacing: normal;
    position: relative;

    &#key {
      font-size: 0.65em;
      word-spacing: -0.3em;
      margin-right: 0.1em;

      img.emoji {
        vertical-align: -0.2em; // magic number to align with text :\
        padding: 0;
      }
    }
  }

  // easter egg emoji cursor
  a#birthday {
    &:hover {
      cursor: url($icon-wand) 0 0, auto;
    }
  }

  // non-link colors
  span {
    &#serverless {
      color: $color-serverless;
    }

    &#shh {
      @include themes.themed(
        (
          color: "medium-light",
        )
      );
    }

    &.wave {
      margin-left: 2px;
    }
  }
}

// Loop through $colors-home (see above)
@each $id, $colors in $colors-home {
  @each $theme, $color in $colors {
    @at-root html.#{$theme} div.layout-home a##{$id} {
      color: $color;
      background-image: functions.underline-hack($color, map.get(map.get(themes.$themes, $theme), "background-inner"));
    }
  }
}

// Responsive
@mixin responsive() {
  div.layout-home {
    font-size: 0.975em;
    padding-top: 1em;
    padding-bottom: 0.2em;

    h1 {
      font-size: 1.5em;
      letter-spacing: -0.014em;
      line-height: 1.7;
    }

    h2 {
      font-size: 1.185em;
      letter-spacing: -0.017em;
      line-height: 1.6;
    }

    p {
      letter-spacing: -0.012em;
    }
  }
}