/*
  Layout

  Styles for managing the structural hierarchy of the site.
  Hydeout features the large colored sidebar from Hyde that houses the
  site name, intro, and "footer" content. Sidebar is on top of content on
  mobile and expands into sidebar on larger width displays.

  Sidebar CSS assumes HTML looks like this for post pages:

    body
    > #sidebar
      > header (primary sidebar content -- i.e. title)
        > h1 (home page only, otherwise div or span)
      > secondary nav content we may want to hide on certain pages
    > .container
      > h1 (non-home page)
      > .content

  Basic approach is to color in body, make sidebar background transparent,
  and then fill in the .container or .content elements depending on how far
  we want the sidebar or header to stretch.
*/

body {
  background-attachment: fixed;
  background-color: $sidebar-bg-color;
  background-image: linear-gradient(to bottom, lighten($sidebar-bg-color, 7%), darken($sidebar-bg-color, 7%));
  color: $sidebar-text-color;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#sidebar {
  flex: 0 0 auto;
  padding: $section-spacing;

  .site-title {
    font-family: 'Abril Fatface', serif;
    font-size: $large-font-size;
    font-weight: normal;
    margin-bottom: $heading-spacing;
    margin-top: 0;
  }

  .site-title .back-arrow { margin-right: 0.5rem; }
}

.content {
  background: $body-bg;
  color: $body-color;
  padding: $section-spacing;
}

// Container is flexbox as well -- we want content div to stretch and fill
.container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  > .content {
    flex-grow: 1;
    padding-bottom: $section-spacing * 2;
  }
}

/* -----------------------------------------------------------
  Mobile view
----------------------------------------------------------- */

// Hide secondary nav content in sidebar
// Hide lead paragraph in sidebar
#sidebar {
  header ~ *,
  header ~ nav,
  p.lead {
    display: none;
  }
}

// Make header elements blend into sidebar / background
.container > header {
  background: transparent;
  color: $sidebar-title-color;
  margin:
    ($heading-spacing - $section-spacing)
    $section-spacing
    $section-spacing;

  h1,
  h2 {
    color: inherit;
  }

  h1:last-child,
  h2:last-child {
    margin-bottom: 0;
  }
}

/* -----------------------------------------------------------
  Mobile view for home page)
----------------------------------------------------------- */

.home #sidebar {

  // Center sidebar content
  text-align: center;

  // Bigger title
  .site-title {
    font-size: 3.25rem;
  }

  // Show secondary nav content + lead
  header ~ *,
  p.lead {
    display: block;
  }

  header ~ nav {
    display: flex;
  }

  // Slightly more bottom padding to compensate for heading not match 100% of
  // line-height on top
  > *:last-child {
    margin-bottom: 0.5rem;
  }
}

/* -----------------------------------------------------------
  Tablet / Desktop view
----------------------------------------------------------- */

@media (min-width: $large-breakpoint) {
  body {
    flex-direction: row;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;

    > * {
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
    }
  }

  /* Undo mobile CSS */

  #sidebar,
  .home #sidebar {
    text-align: left;
    width: $sidebar-width;

    > *:last-child {
      margin-bottom: 0;
    }
  }

  #sidebar {
    position: fixed;

    // Attach to bottom or top of window
    @if $sidebar-sticky {
      bottom: 0;
    }

    @else {
      top: 0;
    }

    // Attach to right or left of window
    @if $layout-reverse {
      right: 0;
    }

    @else {
      left: 0;
    }

    .site-title {
      font-size: 3.25rem;
      .back-arrow { display: none; }
    }

    p.lead,
    header ~ * {
      display: block;
    }

    header ~ nav {
      display: flex;
    }
  }

  .index #sidebar { margin-bottom: 0; }

  // Make entire container background white to contrast against sidebar
  .container {
    background: $body-bg;
    color: $body-color;
    min-height: 100vh;
    padding:
      $section-spacing * 2
      $section-spacing * 2
      0;

    @if $layout-reverse {
      margin-right: $sidebar-width;
    }

    @else {
      margin-left: $sidebar-width;
    }

    > header {
      color: $heading-color;
      margin: 0;

      h1,
      h2 {
        color: inherit;

        &:last-child {
          margin-bottom: $heading-spacing;
        }
      }
    }

    > * {
      max-width: 38rem;
      padding: 0;
    }
  }
}

/* -----------------------------------------------------------
  Sidebar links + nav
----------------------------------------------------------- */

#sidebar a {
  color: $sidebar-link-color;

  svg {
    fill: $sidebar-icon-color;
  }
}

#sidebar a:hover,
#sidebar a:focus,
#sidebar a.active {
  svg { fill: $sidebar-icon-color; }
}

#sidebar a:hover,
#sidebar a:focus {
  text-decoration: underline;

  &.icon {
    text-decoration: none;
  }
}

#sidebar a.active {
  font-weight: bold;
}

#sidebar .site-title {
  color: $sidebar-title-color;
  a { color: inherit; }
}

#sidebar nav {
  display: flex;
}

#sidebar-nav-links {
  flex-flow: column nowrap;
}

#sidebar-icon-links {
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 1rem;
  max-width: 100%;

  @media (min-width: $large-breakpoint) {
    justify-content: flex-start;
    margin-left: -0.25em;
  }
}

#sidebar nav > * {
  display: block;
  line-height: 1.75;
}

#sidebar nav > .icon {
  display: inline-block;
  font-size: 1.5rem;
  margin: 0 0.25em;
}

@media print {
  #sidebar {
    display: none;
  }

  body {
    display: block;
  }

  .container {
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding: 0;

    > * {
      max-width: 100%;
    }
  }

  html {
    font-size: normal;
  }
}