/* This styling will probably need to be factored out into modules

  but I'm not yet 100% sure what I want the site to look like,
  so this it's still pretty hastily coded. I'll extract things out into
  separate files when I'm a little surer what I want.
*/

body, html {

height: 100%;
margin: 0;
width: 100%;
font-family: $proportional-body-font;

} pre {

font-family: $fixed-code-font;

}

h1 h2 h3 h4 h5 h6 {

font-family: $header-font;

} nav, .page-content, aside, footer { padding: 5px}

@media (max-width: 768px) {

.grid-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
nav {
  order: 1;
}
aside {
  order: 2;
}
posts {
  order: 2;
}
.about {
  order: 3;
}
.page-content {
  order: 1;
}
footer {
  order: 3;
}

}

@media (min-width: 768px) {

.grid-container {
  display: grid;
  height: auto;
  grid-gap: 1rem;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr repeat(auto-fit, minmax(500px,1fr)) auto;

  grid-auto-rows: min-content max-content auto;
  grid-template-areas:
      "navbar  navbar navbar"
      "sidebar main about"
      "sidebar main posts"
      "footer footer footer";
}
.about {
  border-radius: 5px;
}
footer {
  text-align: center;
  div {
    display: inline-block;
    padding: .25em;
  }
}

} ul, menu, dir { padding-inline-start: 0px;}

.page-content ul { padding-inline-start: 1.5em;}

nav {

grid-area: navbar;
background-color: #253B4A;
ul {
  list-style: none;
  li {
    display: inline;
  }
}
> ul > li {
  border-right: 1px dotted gray;
  padding-left: 3px;
  &:last-child {
    border: 0;
  }
  &:first-child {
    padding-left: 0px;
  }
}
@include unprominent-links(pink);
@include color-links(white, white, white, white);

}

.about {

grid-area: about;
background-color: $about-section-background-color;
color: $about-section-text-color;
padding: 1rem;

}

aside {

grid-area: sidebar;
background-color: $sidebar-background-color;
color: $sidebar-text-color;
padding: 3px;
@include unprominent-links(yellow);
@include color-links(black, black, black, darkgray);

}

.page-content {

grid-area: main;
background-color: $main-content-background-color;
color: $main-content-text-color;
width: 100%;
height: 100%;

}

.posts {

grid-area: posts;
background-color: $posts-background-color;

}

footer {

grid-area: footer;
background-color: $footer-background-color;
color: $footer-text-color;
@include color-links(lightyellow, lightyellow, yellow, lightgray);
padding: 0.5em;

}

ul.social-media-list {

list-style: none;
margin-left: 0;
padding-inline-start:3px;

}

.social-media-list a:hover {

text-decoration: none;

.username {
  text-decoration: underline;
}

}

.post-title {

@include color-links(blue, blue, red, red);
@include unprominent-links(yellow);

} .svg-icon {

width: 16px;
height: 16px;
display: inline-block;
fill: #{$grey-color};
padding-right: 0px;
vertical-align: text-top;

}