8 files changed, 274 insertions, 0 deletions
diff --git a/_sass/layout/_404.scss b/_sass/layout/_404.scss
new file mode 100644
index 0000000..e206f76
--- /dev/null
+++ b/_sass/layout/_404.scss
@@ -0,0 +1,14 @@
+.layout--404 {
+  .sign {
+    display: table;
+    margin: map-get($spacers, 4) auto;
+    margin-top: map-get($spacers, 5);
+    h1 {
+      font-size: map-get($base, font-size-xl) * 4;
+      line-height: 1;
+    }
+    p {
+      font-size: map-get($base, font-size-xl) * 1.2;
+    }
+  }
+}
diff --git a/_sass/layout/_archive.scss b/_sass/layout/_archive.scss
new file mode 100644
index 0000000..7dc417f
--- /dev/null
+++ b/_sass/layout/_archive.scss
@@ -0,0 +1,5 @@
+.layout--archive {
+  & > .layout--archive__result {
+    margin: map-get($spacers, 4) 0;
+  }
+}
diff --git a/_sass/layout/_article.scss b/_sass/layout/_article.scss
new file mode 100644
index 0000000..dd83384
--- /dev/null
+++ b/_sass/layout/_article.scss
@@ -0,0 +1,29 @@
+.article__sharing {
+  margin: map-get($spacers, 4) 0;
+}
+.article__section-navigator {
+  padding-top: map-get($spacers, 3);
+  margin: map-get($spacers, 4) 0 map-get($spacers, 3) 0;
+  word-wrap: break-word;
+  @include split-line(top, 4px);
+  & > .previous, & > .next {
+    width: 50%;
+    & > span {
+      font-weight: map-get($base, font-weight-bold);
+      color: $text-color-l;
+    }
+    & > a {
+      display: block;
+      @include link-colors($text-color, $main-color-1);
+    }
+  }
+  & > .previous {
+    float: left;
+    padding-right: map-get($spacers, 2);
+  }
+  & > .next {
+    float: right;
+    padding-left: map-get($spacers, 2);
+    text-align: right;
+  }
+}
diff --git a/_sass/layout/_articles.scss b/_sass/layout/_articles.scss
new file mode 100644
index 0000000..85f258c
--- /dev/null
+++ b/_sass/layout/_articles.scss
@@ -0,0 +1,17 @@
+.layout--articles {
+  margin: map-get($spacers, 4) 0;
+  margin-top: map-get($spacers, 5);
+  @include media-breakpoint-down(md) {
+    margin-top: map-get($spacers, 4);
+  }
+  .card__header {
+    font-size: map-get($base, font-size);
+  }
+  .card__image {
+    & > .overlay {
+      &, .card__header {
+        font-size: map-get($base, font-size-sm);
+      }
+    }
+  }
+}
diff --git a/_sass/layout/_base.scss b/_sass/layout/_base.scss
new file mode 100644
index 0000000..6200ec5
--- /dev/null
+++ b/_sass/layout/_base.scss
@@ -0,0 +1,6 @@
+.icon {
+  display: block;
+  > svg {
+    display: block;
+  }
+}
diff --git a/_sass/layout/_home.scss b/_sass/layout/_home.scss
new file mode 100644
index 0000000..298e6b9
--- /dev/null
+++ b/_sass/layout/_home.scss
@@ -0,0 +1,15 @@
+.layout--home {
+  .pagination {
+    margin: map-get($spacers, 4) 0;
+  }
+  .pagination__menu {
+    max-width: 100%;
+    @include overflow(auto);
+  }
+  .pagination__omit {
+    color: $text-color-l;
+  }
+  .items {
+    margin-top: map-get($spacers, 4) * 1.5;
+  }
+}
diff --git a/_sass/layout/_landing.scss b/_sass/layout/_landing.scss
new file mode 100644
index 0000000..752d4e7
--- /dev/null
+++ b/_sass/layout/_landing.scss
@@ -0,0 +1,23 @@
+.layout--landing {
+  .heros {
+    max-width: map-get($layout, content-max-width) * 2;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .hero {
+    img {
+      display: block;
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+  .hero__content {
+    margin-bottom: 0;
+  }
+  .hero__cover {
+    max-width: map-get($layout, content-max-width);
+  }
+  .hero__cover--full-width {
+    max-width: none;
+  }
+}
diff --git a/_sass/layout/_page.scss b/_sass/layout/_page.scss
new file mode 100644
index 0000000..bb42331
--- /dev/null
+++ b/_sass/layout/_page.scss
@@ -0,0 +1,165 @@
+body,
+html,
+.root,
+.layout--page {
+  height: 100%;
+}
+
+.layout--page {
+  &.layout--page--sidebar {
+    .page__viewport,
+    .page__grid {
+      height: 100%;
+    }
+    @include media-breakpoint-down(lg) {
+      .page__main {
+        @include overflow(unset);
+      }
+    }
+  }
+}
+
+.page__main {
+  height: 100%;
+  color: $text-color;
+  .col-aside {
+    display: none;
+    & > aside {
+      position: absolute;
+      width: map-get($layout, aside-width);
+      @include overflow(hidden);
+    }
+  }
+}
+
+.page__main-inner {
+  position: relative;
+  @include flexbox();
+  @include flex-direction(column);
+  min-height: 100%;
+  background-color: $background-color;
+}
+
+.page__content {
+  @include flex(1);
+  width: 100%;
+  margin: 0 auto;
+  @media print {
+    padding-bottom: 0;
+  }
+}
+.hide-footer {
+  .page__content {
+    padding-bottom: 0;
+  }
+}
+
+.page__comments {
+  margin: map-get($spacers, 4) 0;
+}
+
+.page__aside {
+  .toc-aside {
+    padding: map-get($spacers, 5) 0 map-get($spacers, 3) map-get($spacers, 5);
+  }
+}
+
+.page__actions {
+  position: fixed;
+  bottom: map-get($spacers, 5);
+  left: map-get($spacers, 3);
+  z-index: map-get($z-indexes, actions);
+  display: none;
+}
+
+.page__sidebar {
+  z-index: map-get($z-indexes, sidebar);
+  display: block;
+  width: 80%;
+  max-width: map-get($layout, sidebar-width);
+  height: 100%;
+  background-color: $background-color;
+  @include split-line(right);
+  @include transition(transform map-get($animation, duration));
+  @include overflow(auto);
+  .sidebar-toc {
+    padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4);
+  }
+}
+.sidebar-button {
+  @include clickable($text-color-d, rgba($main-color-3, .75));
+}
+
+.page__mask {
+  @include modal(map-get($z-indexes, mask));
+  cursor: pointer;
+}
+.layout--page--sidebar {
+  .page__main {
+    @include overflow(auto);
+    @media print {
+      @include overflow(unset);
+    }
+  }
+}
+
+.has-aside {
+  .col-aside {
+    position: relative;
+    display: block;
+    width: map-get($layout, aside-width);
+    & > aside {
+      &.fixed {
+        position: fixed;
+        -webkit-font-smoothing: subpixel-antialiased;
+      }
+    }
+    @include media-breakpoint-down(lg) {
+      display: none;
+    }
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .page__sidebar {
+    position: fixed;
+    @include transform(translate(- map-get($layout, sidebar-width), 0));
+  }
+
+  .page__actions {
+    display: block;
+  }
+
+  .show-sidebar {
+    .page__actions {
+      visibility: hidden;
+    }
+    .page__sidebar {
+      @include transform(translate(0));
+    }
+    .page__mask {
+      @include modal--show();
+    }
+  }
+}
+
+.hero--light {
+  .article__info {
+    color: $text-color-theme-light;
+  }
+}
+.hero--dark {
+  .article__info {
+    color: $text-color-theme-dark;
+  }
+}
+
+.page__main--immersive {
+  .page__header {
+    position: absolute;
+    width: 100%;
+  }
+  .hero__content {
+    padding-top: map-get($layout, header-height);
+  }
+}