blog/styles/main.scss

$small: 600px;

$accent-dark: #66BB6A;
$accent-light: #33691E;

$bg-dark: #202020;
$bg-light: #fefefe;

$fg-dark: #fefefe;
$fg-light: #101010;

$primary-light: #81C784;
$primary-dark: #81C784;

@font-face {
  font-family: "sterla";
  src: url("/STERLA.otf")
}

@font-face {
  font-family: "grotesk";
  src: url("/SpaceGrotesk-Medium.ttf");
}

@font-face {
  font-family: "walkind";
  src: url("/walkind.ttf");
}

body, html {
  padding: 0;
  margin: 0;
  background-color: $bg-light;
  color: $fg-light;
  font-family: sans;

  a {
    color: $accent-light;
  }
}

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

.tag {
  background-color: $primary-light;
  padding: 5px;
  margin-right: 5px;
  color: $accent-light;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.verbatim {
  background-color: #505050;
  color: $fg-dark;
  padding: 2px;
  border-radius: 3px;
}

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

header {
  font-family: walkind, sans-serif;
  width: 80vw;
  margin-left: 10vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;

  #logo {
    a {
      color: $fg-light;
      text-decoration: none !important;
    }
  }

  #nav {
    font-family: sans-serif;
    
    a {
      text-decoration: none !important;
      margin-left: 10px;
    }
  }
}

#hero {
  opacity: .9;
  height: 30vh;
  width: 80vw;
  margin-left: 10vw;
  margin-bottom: 50px;
  background-image: url("/images/waterfall.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  object-fit: cover;

  @media screen and (max-width: $small) {
    height: 15vh;
    width: 90vw;
    margin-left: 5vw;
  }
}

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

#page {
  width: 80vw;
  margin-left: 10vw;

  display: flex;
  justify-content: space-between;

  @media screen and (max-width: $small) {
    width: 90vw;
    margin-left: 5vw;
    flex-direction: column;
  }

  #content {
    width: calc(80% - 20px);
    padding-bottom: 100px;

    @media screen and (max-width: $small) {
      width: 100%;
    }
  }

  #sidebar {
    width: 20%;
    border-left: 1px solid #bbb;
    padding-left: 10px;

    @media screen and (max-width: $small) {
      width: 90vw;
      border: none;
    }

    #tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      
      a {
	@extend .tag;
      }
    }
  }

  h1, h2, h3, h4, h5 {
    color: $accent-light;
    font-family: walkind, serif;
  }

  h1, h2 {
    margin-top: 10px;
  }

  .highlight {    
    pre {
      padding: 10px;
      overflow-x: scroll;
      border-radius: 5px;
    }
  }
}

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

.article {
  margin-bottom: 20px;
  
  article {
    display: flex;
    gap: 20px;
    align-items: start;

    .date {
      color: #999;
      font-weight: bold;
    }

    .description {
      color: #999;
    }

    .reading-time {
      margin-top: -10px;
      font-style: italic;
      color: #999;
      font-size: .8em;
    }

    .article-tags {
      display: flex;

      .tag {
	font-size: .8em;
      }
    }
  }
  
  a {
    color: $fg-light !important;
    text-decoration: none !important;

    h3 {
      color: $fg-light !important;
      font-family: sans-serif !important;
      font-weight: 400 !important;
      line-height: 0;
    }
  }
}


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

.info-block, .warning-block, .success-block, .note-block {
  border-radius: 5px;
  padding: 2px 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
  margin: 10px 0;
}


.info-block {
  background: #BBDEFB;
  color: #0D47A1;

  p::before {
    content: "ℹ️ "
  }
}

.warning-block {
  background: #FFE0B2;
  color: #E65100;

  p::before {
    content: "⚠️ ";
  }
}

.success-block {
  background: #C8E6C9;
  color: #1B5E20;

  p::before {
    content: "✅ ";
  }
}

.note-block {
  background: #D7CCC8;
  color: #3E2723;

  p::before {
    content: "📝 ";
  }
}

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

table {
  thead {
    background-color: $primary-light;
  }

  tr {
    border-bottom: 1px solid red;
  }
}


dt {
  &::before {
    content: "-";
  }
}