assets/css/_main.scss

/* Custom sizes */

:root {
  --font-size-xxjumbo: 3.2rem;
  --line-height-xxjumbo: 3.6rem;
  --font-size-xjumbo: 2.2rem;
  --line-height-xjumbo: 2.5rem;
  --font-size-mini-jumbo: 1.6rem;
  --line-height-mini-jumbo: 1.8rem;
}

/* Animations */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html {
  scroll-padding-top: 2.5rem;
}

/* Containers */

body {
  background-color: white;
  display: flex;
  min-height: 100vh;
  flex-direction: column;

  @media (prefers-color-scheme: dark) {
    background-color: var(--tw-color-gray-1100);
    color: var(--tw-color-gray-faint);
  }
}

main {
  flex: 1;
}

.content {
  padding: var(--feather-grid-mega) 0;
}
.section {
  padding: calc(var(--feather-grid-mega) * 2) 0;
}

.container {
  max-width: var(--feather-grid-page-width);
  margin: 0 auto;
}


// common styles across nav, header, and footer
nav, .header, .footer {
  background-color: var(--tw-color-blue-primary);
  color: white;

  @media (prefers-color-scheme: dark) {
    background-color: black;
  }

  a:not(.Button) {
    color: white;
    text-decoration: none;

    &:hover, &:active {
      text-decoration: none;
      color: var(--tw-color-blue-faded);

      @media (prefers-color-scheme: dark) {
        color: var(--tw-color-gray-light);
      }
    }
  }
}

// Navigation
nav {
  padding: var(--feather-grid-xsmall) var(--feather-grid-mega);
  width: 100%;
  position: fixed;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nav-title { 
  flex-shrink: 0;

  img { 
    height: 1.3em;
    width: 1.3em;
    vertical-align: bottom;
    margin-right: var(--feather-grid-xxsmall);
  }
}

.home-link {
  font-weight: var(--feather-font-weight-bold);
}

#nav-menu {
  margin: 0;
  padding: 0;
  li {
    display: inline-block;
    margin-left: var(--feather-grid-small);
  }
}

#menu-toggle {
  display: none;
}

// Navigation - mobile
@media (max-width: 650px) {
  #nav-menu {
      margin-top: var(--feather-grid-xxsmall);
  }
  html:not(.no-js) {
    #menu-toggle {
      display: block;
    }

    #nav-menu {
      display: none;
      height: 100vh;
      width: 100%;
      margin: 0;
      margin-top: calc(var(--feather-grid-mega) * 2);
      animation: fadein 1.5s;

      li {
        display: block;
        font-weight: var(--feather-font-weight-bold);
        font-size: var(--feather-font-size-jumbo);
        line-height: var(--feather-line-height-jumbo);
        padding: var(--feather-grid-medium) 0;
        margin: 0;
        &:not(:last-child) {
          border-bottom: 1px solid var(--tw-color-blue-faded);
        }
      }
    }

    #nav-menu.active {
      display: block;
    }
  }
}


/* Headers */

.header, .footer {
  padding: var(--feather-grid-mega) 0;
}

.header {
  padding-top: calc(var(--feather-grid-mega) * 3);
}

.large-title {
  font-size: var(--font-size-xxjumbo);
  line-height: var(--line-height-xxjumbo);
}

.subtitle {
  margin: var(--feather-grid-large) 0;
}

/* Footer */

@media (min-width: 800px) {
  .footer .container {
    display: flex;
    flex-wrap: wrap;
  }

  .footer .footer-cell {
    flex: 1 1 25%;
  }
}

a.foot-link {
  display: block;
  line-height: var(--feather-line-height-xlarge);
}

.footer-margin {
  margin-bottom: calc(var(--feather-grid-mega) * 1.25);
}

/* Margins */

.center-margin {
  margin-left: auto;
  margin-right: auto;
}

.same-mega-margin {
  margin-bottom: var(--feather-grid-mega);
}

.mega-margin {
  margin-bottom: var(--feather-grid-mega);
}

.large-margin {
  margin-bottom: var(--feather-grid-large);
}

.medium-margin {
  margin-bottom: var(--feather-grid-medium);
}

.small-margin {
  margin-bottom: var(--feather-grid-small);
}

.xsmall-margin {
  margin-bottom: var(--feather-grid-xsmall);
}

/* Text */

body {
  font-size: 0.8rem; // 16px
  line-height: 1.5;  // 24px
}

h2 {
  margin: 1.5em 0 0.5em;
}

.center-text {
  text-align: center;
}

.small-title {
  font-size: var(--font-size-xjumbo);
  line-height: var(--line-height-xjumbo);
}

br {
  line-height: var(--feather-line-height-xlarge);
}

pre {
  font-size: 0.8em;
  padding: 3px;
}

.hide {
  display: none;
}

/* Media queries */

/* Less than --feather-grid-page-width + (--feather-grid-mega * 2) */
@media (max-width: 1236px) {
  .container {
    margin: 0 var(--feather-grid-mega);
  }

  .large-title {
    font-size: var(--font-size-xjumbo);
    line-height: var(--line-height-xjumbo);
  }

  .small-title {
    font-size: var(--font-size-mini-jumbo);
    line-height: var(--line-height-mini-jumbo);
  }

  .mega-margin {
    margin-bottom: var(--feather-grid-large);
  }

  .large-margin {
    margin-bottom: var(--feather-grid-medium);
  }

  .medium-margin {
    margin-bottom: var(--feather-grid-small);
  }
}

@media (max-width: 800px) {
  .footer-margin {
    margin-bottom: var(--feather-grid-mega);
  }
}

/* Less than 600px */
@media (max-width: 600px) {
  .section {
    padding: calc(var(--feather-grid-mega) * 1.5) 0;
  }

  .container {
    margin: 0 var(--feather-grid-medium);
  }
}

@media (max-width: 480px) {
  .content, .section {
    padding: var(--feather-grid-large) 0;
  }
}