jekyll-thenerdlife 0.1.3

data/_sass/components/_table.scss

@@ -0,0 +1,21 @@
+table {
+  display: table;
+  width: 100%;
+  overflow-x: scroll;
+  margin-bottom: 1.25rem;
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 1px solid $border;
+  border-radius: 4px;
+  font-size: 14.5px;
+
+  th {
+    background-color: $light-bg-color;
+  }
+
+  th,
+  td {
+    padding: 6px 13px;
+    border: 1px solid $border;
+  }
+}

data/_sass/layout/_footer.scss

@@ -0,0 +1,35 @@
+footer {
+  padding: 2.8125rem 0;
+  border-top: 1px solid #f0f0f0;
+  text-align: center;
+  font-size: 0.875rem;
+  color: rgba(33,33,33,0.6);
+
+  a {
+    color: rgba(33,33,33,0.6);
+    border-bottom: 0;
+
+    &:hover {
+      color: $primary;
+      border-bottom: 0;
+    }
+  }
+}
+
+.social {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  max-width: 200px;
+  margin: 0 auto 25px;
+}
+
+.social__link:not(:last-child) {
+  margin-right: 1.125rem;
+}
+
+.social__icon {
+  fill: currentColor;
+  height: 1.5rem;
+  width: 1.5rem;
+}

data/_sass/layout/_grid.scss

@@ -0,0 +1,23 @@
+.container {
+  padding: 0 20px;
+
+  @include breakpoint($xs) {
+    @include container(auto);
+  }
+
+  @include breakpoint($sm) {
+    @include container(540px);
+  }
+
+  @include breakpoint($md) {
+    @include container(720px);
+  }
+
+  @include breakpoint($lg) {
+    @include container(960px);
+  }
+
+  @include breakpoint($xl) {
+    @include container(1170px);
+  }
+}

data/_sass/layout/_nav.scss

@@ -0,0 +1,196 @@
+.header {
+  background-color: $bg-color;
+  color: $text-color;
+  position: absolute;
+  z-index: 4;
+  width: 100%;
+  top: 0;
+  left: 0;
+  will-change: transform;
+  transition: transform .3s, background-color 0.5s ease;
+  transform: translateY(0%);
+
+  a {
+    display: flex;
+    align-items: center;
+    border-bottom: 0;
+
+  }
+
+  &.fix-nav {
+    position: fixed;
+    background-color: $bg-color;
+    transition: transform .3s, background-color 0.5s ease;
+    z-index: 5;
+  }
+
+  &.hide-nav {
+    transform: translateY(-120%);
+    transition: transform .3s;
+  }
+}
+
+.header__logo {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  padding: 19px 0;
+  margin-right: 1.25rem;
+  outline: 0;
+  border-bottom: 0;
+  color: $heading-color;
+
+  &:hover {
+    color: $heading-color;
+    border-bottom: 0;
+  }
+
+  .header__logo--container {
+    width: 58px;
+
+    .logo {
+      fill: currentColor;
+    }
+  }
+}
+
+.header__inner {
+  display: flex;
+  align-items: center;
+  height: 3.75em;
+  justify-content: space-between;
+}
+
+.header__links {
+  padding-bottom: .5rem;
+  display: none;
+  position: absolute;
+  top: 3.75em;
+  left: 0;
+  width: 100%;
+  height: auto;
+  background: $bg-color;
+}
+
+.header__link {
+  color: $text-color;
+  padding: .938rem 0;
+  border-top: 1px solid $border;
+}
+
+
+.header__toggle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 44px;
+  height: 100%;
+  background-color: transparent;
+  padding-left: 1.25rem;
+  cursor: pointer;
+
+  span {
+    display: block;
+    position: relative;
+    margin-top: 4px;
+    background-color: $text-color;
+    width: 100%;
+    height: 2px;
+    border-radius: 1px;
+    transition: all 0.2s cubic-bezier(1, 0.13, 0.35, 1.09);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  &.--open {
+    span {
+
+      &:first-child {
+        transform: rotate(45deg) translate(4px, 4px);
+      }
+
+      &:nth-child(2n) {
+        opacity: 0;
+      }
+
+      &:last-child {
+        transform: rotate(-45deg) translate(4px, -4px);
+      }
+    }
+  }
+}
+
+.header__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  background-color: rgba(0, 0 , 0, .75);
+  z-index: 2;
+  transition: opacity 1s ease 0.1s;
+
+  &.--open {
+    width: 100%;
+    height: 120%;
+    opacity: 1;
+  }
+}
+
+@media (min-width: $lg) {
+  .header__toggle {
+    display: none;
+    visibility: hidden;
+  }
+
+  .header__links {
+    position: static;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    visibility: visible;
+    width: auto;
+    height: 100%;
+  }
+
+  .header__links-wrapper {
+    display: flex;
+    height: 100%;
+    padding: 0;
+  }
+
+  .header__link {
+    position: relative;
+    padding: .938rem 1rem;
+    border: 0;
+    height: 100%;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: 3px;
+      width: 100%;
+      transform: scaleX(0);
+      background: $link-color;
+      transition: color 0.2s ease-in-out, transform .2s ease-in-out;
+    }
+
+    &:hover {
+      color: darken($link-color, 20%);
+    }
+
+    &:hover::after,
+    :active::after,
+    :focus::after {
+      transform: scaleX(1);
+      color: darken($link-color, 20%);
+      transition: transform .2s ease-in-out;
+    }
+  }
+}

data/_sass/main.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+// 1. Configuration and helpers
+@import
+  "abstracts/variables",
+  "abstracts/mixins";
+
+// 2. Vendors
+@import
+  "vendor/normalize",
+  "vendor/breakpoint";
+
+// 3. Base
+@import
+  "base/base",
+  "base/typography",
+  "base/helpers";
+
+// 4. Layout
+@import
+  "layout/grid",
+  "layout/nav",
+  "layout/footer";
+
+// 5. Components
+@import
+  "components/btn",
+  "components/card",
+  "components/pagination",
+  "components/form",
+  "components/modal",
+  "components/table",
+  "components/syntax";
+
+// 6. Page-specific styles
+@import
+  "pages/page",
+  "pages/post";

data/_sass/pages/_page.scss

@@ -0,0 +1,101 @@
+.hero {
+  margin: 3.75rem auto 0;
+  min-height: 16.25rem;
+  width: 100%;
+  position: relative;
+  background-color: #dde5ea;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: cover;
+
+  @include breakpoint($lg) {
+    margin: 0 auto;
+    height: 36em;
+  }
+
+  &::before {
+    position: absolute;
+    display: block;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(52, 56, 81, .8);
+  }
+}
+
+.hero--small {
+  margin: 3.75rem auto 0;
+  min-height: 8.75rem;
+  width: 100%;
+  position: relative;
+  background-color: $dark-light;
+
+  @include breakpoint($lg) {
+    height: 12.5em;
+  }
+
+  &::before {
+    position: absolute;
+    display: block;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(52, 56, 81, .8);
+  }
+}
+
+.hero__wrap {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  width: 100%;
+  max-width: 90%;
+  z-index: 1;
+
+  @include breakpoint($md) {
+    max-width: 40em;
+  }
+
+  .hero__title {
+    font-size: 1.8em;
+    color: $bg-color;
+
+
+    @include breakpoint($md) {
+      font-size: 2.625em;
+      line-height: 3.125rem;
+    }
+  }
+}
+
+.page-content {
+  max-width: 52.5rem;
+  margin: 0 auto;
+  padding: 2.5em 0;
+
+  @include breakpoint($md) {
+    padding: 3.75rem 0;
+  }
+}
+
+.blog {
+  background-color: #f9f9f9;
+}
+
+.post-list {
+  padding-top: 2.5em;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 0 auto;
+
+  @include breakpoint($md) {
+    padding-top: 5em;
+  }
+}

data/_sass/pages/_post.scss

@@ -0,0 +1,62 @@
+.post-content {
+  max-width: 52.5rem;
+  margin: 0 auto;
+  padding-top: 2.5em;
+
+  @include breakpoint($md) {
+    padding-top: 5em;
+  }
+}
+
+.comments {
+  padding: 50px 0;
+  background-color: #fafafa;
+}
+
+.controls__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.375rem 0 1.25rem;
+  border-top: 1px solid $border;
+
+  .prev {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .next {
+    align-items: flex-end;
+    text-align: right;
+  }
+}
+
+.controls__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  span {
+    font-size: 0.875rem;
+    color: $grey;
+  }
+
+  a {
+    color: $heading-color;
+    font-weight: bold;
+    border-bottom: 0;
+
+    svg {
+      transition: all .2s linear;
+    }
+
+    &:hover {
+      color: $primary;
+      border-bottom: 0;
+
+      svg {
+        fill: $primary;
+      }
+    }
+  }
+}