jekyll-theme-elementary-blog 1.0.0 → 1.0.1

data/_sass/_featured.scss

@@ -0,0 +1,149 @@
+.featured {
+  border-radius: 0.5rem;
+  color: inherit;
+  display: block;
+  font-size: 0;
+  opacity: 1;
+  padding: 1rem;
+  text-decoration: none;
+  transition: background-color 250ms ease, color 250ms ease;
+
+  &:hover {
+    background: var(--secondary-bg-color);
+  }
+
+  header {
+    display: inline-block;
+    font-size: 1rem;
+    padding-left: 1em;
+    vertical-align: middle;
+    width: 100%;
+
+    @media (min-width: 600px) {
+      width: 50%;
+    }
+
+
+    @media (min-width: 800px) {
+      width: 33.33%;
+    }
+
+    h2 {
+      margin-top: 0;
+    }
+
+    .byline {
+      max-width: 100%;
+    }
+  }
+
+  .excerpt {
+    display: inline-block;
+    font-size: 1rem;
+    padding: 0 1rem;
+    vertical-align: middle;
+    width: 100%;
+
+    @media (min-width: 600px) {
+      width: 50%;
+    }
+
+    @media (min-width: 800px) {
+      width: 66.66%;
+    }
+
+    span {
+      font-family: var(--ui-font);
+      font-size: 0.8em;
+      opacity: 0.75;
+    }
+  }
+
+  .featured-image {
+    background-color: var(--silver-100);
+    background-origin: border-box;
+    background-position: 50%;
+    background-size: cover;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
+      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
+      0 1px 3px rgba(0, 0, 0, 0.05),
+      0 1px 2px rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    height: 320px;
+    margin-bottom: 1rem;
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+    width: 100%;
+
+    @media (min-width: 600px) {
+      margin-bottom: 0;
+      width: 50%;
+    }
+
+    @media (min-width: 800px) {
+      width: calc(66.66% - 0.66rem);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--silver-900);
+      border: 1px solid black;
+      box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+        inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
+        0 1px 3px rgba(0, 0, 0, 0.1),
+        0 1px 2px rgba(0, 0, 0, 0.2);
+    }
+
+    img {
+      left: 50%;
+      max-width: 100%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+@media (min-width: 800px) {
+  .latest {
+    font-size: 0;
+    margin-top: 2rem;
+
+    .featured {
+      padding: 1rem;
+
+      &:nth-child(n+2) {
+        display: inline-block;
+        vertical-align: top;
+        width: 33.33%;
+
+        header {
+          font-size: 0.8rem;
+          padding: 0;
+          width: 100%;
+
+          h3 {
+            margin-top: -1em;
+          }
+        }
+
+        .excerpt {
+          padding: 0;
+          width: 100%;
+        }
+
+        .featured-image {
+          height: 200px;
+          margin-bottom: 0.5rem;
+          width: 100%;
+        }
+      }
+    }
+  }
+}

data/_sass/_figures.scss

@@ -0,0 +1,150 @@
+figure {
+  font-size: 0; // fix whitespace causing percentage issues
+  margin: 2rem 0;
+  position: relative;
+  text-align: center;
+
+  article & p {
+    max-width: 100%; // Fix Markdown wrapping images in `<p>` and setting max-width
+  }
+
+  * {
+    margin: 0;
+    max-width: 100%;
+  }
+
+  img,
+  video {
+    display: inline;
+    transition: transform 250ms ease;
+    vertical-align: middle;
+
+    &:active,
+    &:focus {
+      outline: none;
+      position: relative; // Fixes z-index issues on transform
+      z-index: 1;
+    }
+  }
+
+  .highlighter-rouge {
+    font-size: 1rem;
+    margin-bottom: 0;
+  }
+
+  &.embed {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    padding-top: 56.25%; // 16:9
+    position: relative;
+    width: var(--content-width);
+
+    iframe {
+      border: none;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  figcaption {
+    font-family: var(--ui-font);
+    font-size: 0.8rem;
+    margin: 1em auto 4em;
+    opacity: 0.67;
+    text-align: center;
+  }
+
+  &.third {
+    img,
+    video {
+      cursor: zoom-in;
+      margin: 1%;
+      max-width: 31.33%;
+
+      &:focus {
+        cursor: zoom-out;
+      }
+
+      &:nth-child(3n+1):active,
+      &:nth-child(3n+1):focus {
+        transform: translateX(100%) scale(3);
+      }
+
+      &:nth-child(3n+2):active,
+      &:nth-child(3n+2):focus {
+        transform: translateX(0) scale(3);
+      }
+
+      &:nth-child(3n+3):active,
+      &:nth-child(3n+3):focus {
+        transform: translateX(-100%) scale(3);
+      }
+    }
+  }
+
+  &.half {
+    img,
+    video {
+      cursor: zoom-in;
+      margin: 1%;
+      max-width: 48%;
+
+      &:focus {
+        cursor: zoom-out;
+      }
+
+      &:nth-child(odd):active,
+      &:nth-child(odd):focus {
+        transform: translateX(50%) scale(2);
+      }
+
+      &:nth-child(even):active,
+      &:nth-child(even):focus {
+        transform: translateX(-50%) scale(2);
+      }
+    }
+  }
+
+  &.full-bleed {
+    img,
+    video {
+      left: 50%;
+      max-width: 100vw;
+      position: relative;
+      transform: translateX(-50%);
+      width: 100vw;
+    }
+  }
+
+  &.constrained {
+    img,
+    video {
+      width: var(--content-width);
+    }
+  }
+
+  &.circle {
+    img,
+    video {
+      border-radius: 50%;
+    }
+  }
+
+  &.card {
+    img,
+    video {
+      background-color: var(--silver-100);
+      box-shadow:
+        0 0 0 1px rgba(0, 0, 0, 0.05),
+        0 3px 3px rgba(0, 0, 0, 0.22);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--silver-900);
+      }
+    }
+  }
+}

data/_sass/_layout.scss

@@ -0,0 +1,168 @@
+:root {
+  --page-width: 60rem;
+  --content-width: 40rem;
+}
+
+body > section {
+  margin: 0 auto;
+  max-width: var(--page-width);
+  padding: 0 1rem;
+}
+
+body > footer {
+  background-color: var(--secondary-bg-color);
+  display: flex;
+  flex-flow: wrap-reverse;
+  justify-content: space-between;
+  overflow-x: auto;
+  padding: 0 1rem;
+
+  ul {
+    display: inline-block;
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: inline-block;
+    list-style: none;
+    vertical-align: middle;
+  }
+
+  a {
+    display: inline-block;
+    opacity: 1;
+    padding: 0 0.4rem;
+    text-decoration: none;
+  }
+
+  a,
+  p {
+    color: var(--secondary-fg-color);
+    font-family: var(--ui-font);
+    font-size: 0.6rem;
+    line-height: 3em;
+    margin: 0;
+  }
+}
+
+article {
+  margin-bottom: 4rem;
+
+  p,
+  ul,
+  ol,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--content-width);
+  }
+
+  img,
+  video {
+    display: block;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+  }
+
+  > table {
+    font-family: var(--ui-font);
+    margin: 2em auto;
+    max-width: 100%;
+
+    th,
+    td {
+      padding: 0 0.5rem;
+    }
+  }
+
+  .thanks {
+    .links {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0.75em -1.5em;
+
+        a {
+          margin: 0.75em 1.5em;
+        }
+
+        svg {
+          color: var(--fg-color);
+          height: 2em;
+        }
+    }
+  }
+}
+
+hr {
+  border: 0;
+  margin: 3em auto;
+  max-width: 50%;
+
+  &::before {
+    content: "...";
+    display: block;
+    font-weight: bold;
+    letter-spacing: 1em;
+    text-align: center;
+  }
+}
+
+.license {
+  display: block;
+  font-family: var(--ui-font);
+  font-size: 0.75rem;
+  margin: 0 auto;
+  max-width: var(--content-width);
+  text-align: center;
+
+  a,
+  svg {
+    color: var(--secondary-fg-color);
+    vertical-align: middle;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  svg {
+    height: 1.25em;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
+}
+
+.up-next {
+  margin: 8rem auto 0;
+}
+
+aside.outdated {
+  background: var(--warning-bg-color);
+  bottom: 0;
+  color: var(--warning-fg-color);
+  display: block;
+  font-family: var(--ui-font);
+  font-size: 0.8rem;
+  left: 50%;
+  opacity: 0.8;
+  padding: 0.5em 1em;
+  position: relative;
+  text-align: center;
+  transform: translateX(-50%);
+  width: 100vw;
+  z-index: 1;
+}