steve-for-jekyll 1.0 → 1.1.1

data/_sass/steve/_layout.scss

@@ -1,397 +1,472 @@
-body {
-  display: flex;
-  flex-flow: column nowrap;
-  min-height: 100vh;
-  max-width: var(--container);
-  margin: var(--gap) auto;
-  padding-left: calc(var(--gap) / 2);
-  padding-right: calc(var(--gap) / 2);
-}
-
-/*
-  Site Header
-*/
-
-.masthead {
-  margin-bottom: calc(var(--gap) * 2);
-
-  .site-title {
-    font-size: 2rem;
-    font-weight: bold;
-    line-height: 1.2;
-    margin-bottom: var(--gap);
-    text-align: center;
-    color: var(--color-link);
-    overflow: visible;
-
-    .logo {
-      display: inline-block;
-      max-width: 250px;
-      margin: calc(var(--gap) / 4);
-      box-shadow: none;
-      filter: drop-shadow(0 0 var(--gap) var(--color-details-lighter));
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
-.site-menu {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-
-  @media screen and (max-width: 600px) {
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    overflow-x: auto;
-    margin-left: calc(var(--gap) / -2);
-    margin-right: calc(var(--gap) / -2);
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &::before,
-  &::after {
-    content: " ";
-    display: block;
-  }
-
-  &::before {
-    margin-left: auto;
-    padding-left: calc(var(--gap) / 2);
-  }
-
-  &::after {
-    margin-right: auto;
-    padding-right: calc(var(--gap) / 2);
-  }
-}
-
-.menu-item {
-  flex: 0 0 auto;
-  color: rgba(255, 255, 255, 0.7);
-  background-color: var(--color-link);
-  border-radius: 1.5rem;
-  font-weight: bolder;
-  padding: 0.5rem 1rem;
-
-  &:not(:last-child) {
-    margin-right: var(--gap);
-
-    @media screen and (max-width: 600px) {
-      margin-right: calc(var(--gap) / 2);
-    }
-  }
-
-  &:hover,
-  &:focus {
-    color: rgba(255, 255, 255, 1);
-    text-decoration: none;
-  }
-}
-
-/*
-  Content
-*/
-
-.content {
-  background-color: var(--color-bg);
-  padding: calc(var(--gap) * 2);
-  margin-bottom: var(--gap);
-
-  @media screen and (max-width: 600px) {
-    padding-left: var(--gap);
-    padding-right: var(--gap);
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.content-header {
-  margin-bottom: var(--gap);
-  text-align: center;
-
-  .content-title {
-    font-size: 2rem;
-
-    a {
-      color: var(--color-text);
-    }
-  }
-
-  .content-meta {
-    font-size: 0.75rem;
-
-    a {
-      color: var(--color-details);
-      display: inline-block;
-
-      &:not(:last-child) {
-        margin-right: calc(var(--gap) / 2);
-      }
-    }
-  }
-}
-
-.content-body > :last-child {
-  margin-bottom: 0;
-}
-
-.content-footer {
-  margin-top: var(--gap);
-  font-size: 0.75rem;
-  color: var(--color-details);
-
-  .content-tags {
-    display: block;
-    list-style: none;
-    margin-left: 0;
-
-    li {
-      display: inline-block;
-      font-size: 0.875rem;
-
-      &:not(:last-child) {
-        &::after {
-          padding-left: calc(var(--gap) / 4);
-          padding-right: calc(var(--gap) / 4);
-          content: "/";
-          color: var(--color-details-lighter);
-        }
-      }
-
-      a {
-        color: var(--color-details-darker);
-      }
-    }
-  }
-}
-
-.content-navigation {
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 600) {
-    flex-flow: column nowrap;
- }
-
-  .nav-link {
-    background: var(--color-bg);
-    padding: calc(var(--gap) / 2) var(--gap);
-
-    @media screen and (max-width: 600px) {
-      width: 100%;
-      margin-bottom: var(--gap);
-    }
-
-    &.prev-link {
-      justify-self: flex-start;
-      margin-right: auto;
-    }
-
-    &.next-link {
-      justify-self: flex-end;
-      margin-left: auto;
-      text-align: right;
-    }
-  }
-}
-
-// The Blog Layout
-.layout-blog,
-.layout-post,
-.layout-archive,
-.layout-home {
-  .container {
-    display: grid;
-    gap: var(--gap);
-    grid-template-columns: 2fr 1fr;
-    grid-template-areas:
-      "content sidebar"
-      "content sidebar"
-      "content .";
-
-    @media screen and (max-width: 600px) {
-      grid-template-columns: 100%;
-      grid-template-areas:
-        "search"
-        "content"
-        "sidebar";
-    }
-  }
-}
-
-.blog-page {
-  grid-area: content;
-  min-width: 0;
-}
-
-// The Archive Layout
-.archive-header {
-  padding: var(--gap);
-  background: var(--color-bg);
-  margin-bottom: var(--gap);
-
-  h1 {
-    font-size: 0.75rem;
-    font-weight: normal;
-    color: var(--color-details);
-
-    strong {
-      font-size: 1.75rem;
-      color: var(--color-text);
-      text-transform: uppercase;
-    }
-  }
-}
-
-// Sidebar
-.widget {
-  background-color: var(--color-bg);
-  padding: var(--gap);
-}
-
-.-search {
-  grid-area: sidebar;
-  grid-row: 1;
-
-  @media screen and (max-width: 600px) {
-    grid-area: search;
-  }
-}
-
-.-sidebar {
-  grid-area: sidebar;
-  grid-row: 2;
-
-  @media screen and (max-width: 600px) {
-    grid-row: auto;
-  }
-
-  & > *:not(:last-child) {
-    margin-bottom: calc(var(--gap) * 2);
-  }
-}
-
-.social-links {
-  margin-left: 0;
-  list-style: none;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-items: center;
-
-  .link {
-    display: inline-block;
-    margin: calc(var(--gap) / 2);
-    margin-top: 0;
-
-    svg {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-  }
-}
-
-.blogroll {
-  .blogroll-title {
-    font-weight: normal;
-    margin-bottom: calc(var(--gap) / 2);
-  }
-
-  .blogroll-list {
-    list-style: none;
-    margin-left: 0;
-
-    .link {
-      padding-top: calc(var(--gap) / 2);
-      padding-bottom: calc(var(--gap) / 2);
-      border-bottom: 1px solid var(--color-details-lighter);
-
-      &:first-child {
-        border-top: 1px solid var(--color-details-lighter);
-      }
-
-      a {
-        color: var(--color-details);
-
-        &:hover,
-        &:focus {
-          color: var(--color-details-darker);
-        }
-      }
-    }
-  }
-}
-
-// Search Form
-
-label[for="search_terms"] {
-  display: inline-block;
-  margin-bottom: calc(var(--gap) / 2);
-}
-
-.search-controls {
-  display: flex;
-  flex-flow: row nowrap;
-  font-size: 0.75rem;
-
-  input[name="q"] {
-    max-width: 400px;
-    width: 100%;
-  }
-}
-
-/*
-  Site Footer
-*/
-
-.colophon {
-  margin-top: calc(var(--gap) * 2);
-  font-size: 0.875rem;
-
-  h5 {
-    a {
-      color: currentColor;
-    }
-  }
-
-  .site-info {
-    text-align: center;
-  }
-
-  .external-links {
-    text-align: center;
-    list-style: none;
-    margin: calc(var(--gap) / 2) 0;
-
-    .link {
-      display: inline-block;
-
-      a {
-        color: var(--color-details-darker);
-        display: inline-block;
-      }
-
-      &:not(:last-child) {
-        &::after {
-          content: "/";
-          color: var(--color-details-lighter);
-          display: inline-block;
-          margin-left: calc(var(--gap) / 4);
-          margin-right: calc(var(--gap) / 4);
-        }
-      }
-    }
-  }
-}
+body {
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 100vh;
+  max-width: var(--container);
+  margin: var(--gap) auto;
+  padding-left: calc(var(--gap) / 2);
+  padding-right: calc(var(--gap) / 2);
+}
+
+/*
+  Site Header
+*/
+
+.masthead {
+  margin-bottom: calc(var(--gap) * 2);
+
+  .site-title {
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1.2;
+    margin-bottom: var(--gap);
+    text-align: center;
+    color: var(--color-link);
+    overflow: visible;
+
+    .logo {
+      display: inline-block;
+      max-width: 250px;
+      margin: calc(var(--gap) / 4);
+      box-shadow: none;
+      filter: drop-shadow(0 0 var(--gap) var(--color-details-lighter));
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+.site-menu {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+
+  @media screen and (max-width: 600px) {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    overflow-x: auto;
+    margin-left: calc(var(--gap) / -2);
+    margin-right: calc(var(--gap) / -2);
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &::before,
+  &::after {
+    content: " ";
+    display: block;
+  }
+
+  &::before {
+    margin-left: auto;
+    padding-left: calc(var(--gap) / 2);
+  }
+
+  &::after {
+    margin-right: auto;
+    padding-right: calc(var(--gap) / 2);
+  }
+}
+
+.menu-item {
+  flex: 0 0 auto;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: var(--color-link);
+  border-radius: 1.5rem;
+  font-weight: bolder;
+  padding: 0.5rem 1rem;
+
+  &:not(:last-child) {
+    margin-right: var(--gap);
+
+    @media screen and (max-width: 600px) {
+      margin-right: calc(var(--gap) / 2);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    color: rgba(255, 255, 255, 1);
+    text-decoration: none;
+  }
+}
+
+/*
+  Content
+*/
+
+.content {
+  background-color: var(--color-bg);
+  padding: calc(var(--gap) * 2);
+  margin-bottom: var(--gap);
+
+  @media screen and (max-width: 600px) {
+    padding-left: var(--gap);
+    padding-right: var(--gap);
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.content-header {
+  margin-bottom: var(--gap);
+  text-align: center;
+
+  .content-title {
+    font-size: 2rem;
+
+    a {
+      color: var(--color-text);
+    }
+  }
+
+  .content-meta {
+    font-size: 0.75rem;
+
+    a {
+      color: var(--color-details);
+      display: inline-block;
+
+      &:not(:last-child) {
+        margin-right: calc(var(--gap) / 2);
+      }
+    }
+  }
+}
+
+.content-body > :last-child {
+  margin-bottom: 0;
+}
+
+.content-footer {
+  margin-top: var(--gap);
+  font-size: 0.75rem;
+  color: var(--color-details);
+
+  .content-tags {
+    display: block;
+    list-style: none;
+    margin-left: 0;
+
+    li {
+      display: inline-block;
+      font-size: 0.875rem;
+
+      &:not(:last-child) {
+        &::after {
+          padding-left: calc(var(--gap) / 4);
+          padding-right: calc(var(--gap) / 4);
+          content: "/";
+          color: var(--color-details-lighter);
+        }
+      }
+
+      a {
+        color: var(--color-details-darker);
+      }
+    }
+  }
+}
+
+.content-navigation {
+  display: flex;
+  align-items: center;
+
+  @media screen and (max-width: 600) {
+    flex-flow: column nowrap;
+ }
+
+  .nav-link {
+    background: var(--color-bg);
+    padding: calc(var(--gap) / 2) var(--gap);
+
+    @media screen and (max-width: 600px) {
+      width: 100%;
+      margin-bottom: var(--gap);
+    }
+
+    &.prev-link {
+      justify-self: flex-start;
+      margin-right: auto;
+    }
+
+    &.next-link {
+      justify-self: flex-end;
+      margin-left: auto;
+      text-align: right;
+    }
+  }
+}
+
+// The Blog Layout
+.layout-blog,
+.layout-post,
+.layout-archive,
+.layout-home {
+  .container {
+    display: grid;
+    gap: var(--gap);
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      "content sidebar"
+      "content sidebar"
+      "content .";
+
+    @media screen and (max-width: 600px) {
+      grid-template-columns: 100%;
+      grid-template-areas:
+        "search"
+        "content"
+        "sidebar";
+    }
+  }
+}
+
+.blog-page {
+  grid-area: content;
+  min-width: 0;
+}
+
+// The Archive Layout
+.archive-header {
+  padding: var(--gap);
+  background: var(--color-bg);
+  margin-bottom: var(--gap);
+
+  h1 {
+    font-size: 0.75rem;
+    font-weight: normal;
+    color: var(--color-details);
+
+    strong {
+      font-size: 1.75rem;
+      color: var(--color-text);
+      text-transform: uppercase;
+    }
+  }
+}
+
+// Sidebar
+.widget {
+  background-color: var(--color-bg);
+  padding: var(--gap);
+}
+
+.-search {
+  grid-area: sidebar;
+  grid-row: 1;
+
+  @media screen and (max-width: 600px) {
+    grid-area: search;
+  }
+}
+
+.-sidebar {
+  grid-area: sidebar;
+  grid-row: 2;
+
+  @media screen and (max-width: 600px) {
+    grid-row: auto;
+  }
+
+  & > *:not(:last-child) {
+    margin-bottom: calc(var(--gap) * 2);
+  }
+}
+
+.social-links {
+  margin-left: 0;
+  list-style: none;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+
+  .link {
+    display: inline-block;
+    margin: calc(var(--gap) / 2);
+    margin-top: 0;
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+}
+
+.blogroll {
+  .blogroll-title {
+    font-weight: normal;
+    margin-bottom: calc(var(--gap) / 2);
+  }
+
+  .blogroll-list {
+    list-style: none;
+    margin-left: 0;
+
+    .link {
+      padding-top: calc(var(--gap) / 2);
+      padding-bottom: calc(var(--gap) / 2);
+      border-bottom: 1px solid var(--color-details-lighter);
+
+      &:first-child {
+        border-top: 1px solid var(--color-details-lighter);
+      }
+
+      a {
+        color: var(--color-details);
+
+        &:hover,
+        &:focus {
+          color: var(--color-details-darker);
+        }
+      }
+    }
+  }
+}
+
+// Search Form
+
+label[for="search_terms"] {
+  display: inline-block;
+  margin-bottom: calc(var(--gap) / 2);
+}
+
+.search-controls {
+  display: flex;
+  flex-flow: row nowrap;
+  font-size: 0.75rem;
+
+  input[name="q"] {
+    max-width: 400px;
+    width: 100%;
+  }
+}
+
+// Comments
+
+.comments-title {
+  margin-bottom: var(--gap);
+}
+
+.comments-notice {
+  margin-top: calc(var(--gap) / 2);
+  margin-bottom: calc(var(--gap) / 2);
+  color: var(--color-details-darker);
+}
+
+.comments-list {
+  list-style: none;
+  margin-left: 0;
+  margin-bottom: var(--gap);
+
+  .comment-item {
+    margin-bottom: var(--gap);
+    padding-bottom: var(--gap);
+    border-bottom: 3px dotted var(--color-details-lighter);
+  }
+}
+
+.comment {
+  font-size: 95%;
+
+  .comment-meta {
+    margin-bottom: 1rem;
+  }
+
+  .author-avatar {
+    width: 2.5rem;
+    border-radius: 5px;
+    box-shadow: 0 0 2px var(--color-details);
+    float: left;
+    margin-right: 1rem;
+  }
+
+  .comment-body > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.comment-message-area {
+  margin-bottom: calc(var(--gap) / 2);
+}
+
+.message-area {
+  width: 100%;
+  resize: vertical;
+}
+
+.comment-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: calc(var(--gap) / 2);
+  margin-bottom: calc(var(--gap) / 2);
+
+  @media screen and (max-width: 800px) {
+    grid-template-columns: 1fr;
+    flex-flow: column nowrap;
+  }
+
+  input {
+    min-width: 0;
+    width: auto;
+  }
+}
+
+.comment-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/*
+  Site Footer
+*/
+
+.colophon {
+  margin-top: calc(var(--gap) * 2);
+  font-size: 0.875rem;
+
+  h5 {
+    a {
+      color: currentColor;
+    }
+  }
+
+  .site-info {
+    text-align: center;
+  }
+
+  .external-links {
+    text-align: center;
+    list-style: none;
+    margin: calc(var(--gap) / 2) 0;
+
+    .link {
+      display: inline-block;
+
+      a {
+        color: var(--color-details-darker);
+        display: inline-block;
+      }
+
+      &:not(:last-child) {
+        &::after {
+          content: "/";
+          color: var(--color-details-lighter);
+          display: inline-block;
+          margin-left: calc(var(--gap) / 4);
+          margin-right: calc(var(--gap) / 4);
+        }
+      }
+    }
+  }
+}