jekyll-development-theme 0.5.3 → 0.6.0

data/_sass/grids/_footer-contentinfo.scss

@@ -0,0 +1,90 @@
+// ############################################################
+// Page Footer Grid
+// ############################################################
+
+#footer-contentinfo {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+  grid-template-areas:
+    "page-social-media"
+    "page-legal"
+    "page-copyright";
+}
+
+// ============================================================
+// Page Footer Grid Areas
+// ============================================================
+
+#page-social-media {
+  grid-area: page-social-media;
+
+  padding-left: 5rem;
+  border-left: 1px solid #eee;
+  margin-bottom: 4rem;
+
+  &>ul {
+    list-style: none;
+
+    &>li {
+      line-height: 2rem;
+      padding-right: 1rem;
+    }
+
+    &>li:last-child {
+      padding-right: unset;
+    }
+  }
+}
+
+#page-legal {
+  grid-area: page-legal;
+
+  margin-bottom: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  &>nav {
+    display: flex;
+    flex-direction: row;
+
+    &>h6 {
+      padding-right: 1rem;
+      width: 5rem;
+    }
+
+    &>ul {
+
+      list-style: none;
+      display: flex;
+      flex-direction: row;
+
+      &>li {
+        padding-right: 1rem;
+      }
+
+      &>li:last-child {
+        padding-right: unset;
+      }
+    }
+  }
+}
+
+#page-copyright {
+  grid-area: page-copyright;
+
+  margin-bottom: 1rem;
+}
+
+// ============================================================
+// Page Footer Grid Mixins
+// ============================================================
+
+// ------------------------------------------------------------
+// Default
+// ------------------------------------------------------------
+@mixin footer-contentinfo-default() {}

data/_sass/grids/_header-banner.scss

@@ -0,0 +1,26 @@
+// ############################################################
+// Header Banner Grid
+// ############################################################
+
+#header-banner {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+  grid-template-areas:
+    "";
+}
+
+// ============================================================
+// Header Banner Grid Areas
+// ============================================================
+
+// ============================================================
+// Header Banner Grid Mixins
+// ============================================================
+
+// ------------------------------------------------------------
+// Default
+// ------------------------------------------------------------
+@mixin header-banner-default() {}

data/_sass/grids/_main-archive.scss

@@ -0,0 +1,171 @@
+// ############################################################
+// Main Grid
+// ############################################################
+
+main {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: min-content min-content min-content min-content min-content;
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+  grid-template-areas:
+    "main-header"
+    "main-nav"
+    "main-feed"
+    "main-sidebar"
+    "main-footer";
+}
+
+// ============================================================
+// Main Grid Areas
+// ============================================================
+
+main>header {
+  grid-area: main-header;
+
+  background-color: darken($color: #fff, $amount: 2%);
+
+  margin-bottom: 4rem;
+
+  &>h1 {
+    font-weight: 300;
+    font-size: 2rem;
+    letter-spacing: -1px;
+    line-height: 3rem;
+    padding: 1rem;
+  }
+
+  &>span {
+    margin-bottom: 4rem;
+    display: block;
+    font-weight: 300;
+    font-style: italic;
+    padding-left: 3rem;
+
+    &>hr {
+      width: 1rem;
+      margin: 4rem auto 4rem 0;
+      border: 0;
+      text-shadow: unset;
+      border-bottom: 1px solid #000;
+    }
+  }
+}
+
+main>nav {
+  grid-area: main-nav;
+}
+
+main>section[role=feed] {
+  grid-area: main-feed;
+
+  margin-bottom: 4rem;
+
+  h2 {
+    margin-bottom: 4rem;
+    font-weight: 900;
+    font-size: 2rem;
+    letter-spacing: -1px;
+    line-height: 3rem;
+  }
+}
+
+#main-sidebar {
+  grid-area: main-sidebar;
+
+  margin-bottom: 4rem;
+
+  &>section {
+
+    margin-bottom: 4rem;
+
+    &>h3 {
+      margin-bottom: 2rem;
+      font-weight: 300;
+      font-size: 1.4rem;
+      line-height: 2rem;
+    }
+
+    &>ul {
+      list-style: none;
+      margin-left: 3rem;
+      &>li {
+        &>a {
+          font-weight: 300;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+
+main>footer {
+  grid-area: main-footer;
+}
+
+// ============================================================
+// Main Grid Mixins
+// ============================================================
+
+// ------------------------------------------------------------
+// Default
+// ------------------------------------------------------------
+@mixin main-default() {}
+
+// ------------------------------------------------------------
+// 15px * 36 = 540px width
+// ------------------------------------------------------------
+@mixin main-540px() {
+  main {
+
+    min-width: 525px;
+    max-width: 705px;
+
+    grid-template-columns: minmax(240px, 255px) minmax(285px, 450px);
+    grid-template-rows: min-content min-content min-content min-content min-content;
+    grid-column-gap: 1rem;
+    grid-row-gap: 0;
+    grid-template-areas:
+      "main-header  main-feed"
+      "main-sidebar main-feed"
+      "main-nav     main-feed"
+      ".            main-feed"
+      ".            main-footer"
+    ;
+  }
+
+  main>header {
+    height: 16rem;
+    margin-bottom: 8rem;
+  }
+
+  main>section[role=feed] {
+    &>h2 {
+      height: 16rem;
+      padding: 1rem 0;
+      border-bottom: 1px solid darken($color: #fff, $amount: 10%);
+      margin-bottom: 8rem;
+    }
+  }
+
+  #main-sidebar {
+    &>section {
+      &>h3 {
+        margin-bottom: 4rem;
+      }
+    }
+  }
+}
+
+// ------------------------------------------------------------
+// 15px * 57 = 855px width
+// ------------------------------------------------------------
+@mixin main-855px() {
+  main {
+
+    min-width: 810px;
+    max-width: 1455px;
+
+    grid-column-gap: 1.5rem;
+  }
+}

data/_sass/grids/_main.scss

@@ -0,0 +1,105 @@
+// ############################################################
+// Main Grid
+// ############################################################
+
+main {
+  // min-width: 285px;
+  // width: 100%;
+  // margin: 15px auto;
+  // border-top: 1px solid #eee;
+
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: min-content min-content min-content min-content min-content;
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+  grid-template-areas:
+    "main-header"
+    "main-nav"
+    "main-article"
+    "main-sidebar"
+    "main-footer";
+
+}
+
+// ============================================================
+// Main Grid Areas
+// ============================================================
+
+main>header {
+  grid-area: main-header;
+
+  margin-bottom: 4rem;
+
+  &>span {
+
+    display: block;
+
+    &>hr {
+      width: 1rem;
+      margin: 4rem auto 4rem 0;
+      border: 0;
+      text-shadow: unset;
+      border-bottom: 1px solid #000;
+    }
+  }
+}
+
+main>nav {
+  grid-area: main-nav;
+}
+
+main>article {
+  grid-area: main-article;
+
+  margin-bottom: 4rem;
+}
+
+#main-sidebar {
+  grid-area: main-sidebar;
+
+  section {
+    ul {
+      list-style: none;
+    }
+  }
+}
+
+main>footer {
+  grid-area: main-footer;
+}
+
+// ============================================================
+// Main Grid Mixins
+// ============================================================
+
+// ------------------------------------------------------------
+// Default
+// ------------------------------------------------------------
+@mixin main-default() {}
+
+// ------------------------------------------------------------
+// 15px * 27 = 810px width
+// ------------------------------------------------------------
+@mixin main-810px() {
+  main {
+    grid-template-columns: auto 255px;
+    grid-template-rows: min-content min-content min-content;
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+    grid-template-areas:
+      "main-header main-nav"
+      "main-article main-sidebar"
+      "main-article main-footer"
+    ;
+  }
+
+  #main-sidebar {
+    padding-top: 15px;
+
+    h3 {
+      margin-bottom: 4rem;
+    }
+  }
+
+}

data/_sass/grids/_nav-navigation.scss

@@ -0,0 +1,58 @@
+// ############################################################
+// Nav Navigation Grid
+// ############################################################
+
+#nav-navigation {
+
+  line-height: 2rem;
+
+  display: grid;
+  grid-template-columns: auto min-content auto min-content 40px;
+  grid-template-rows: 30px;
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+  grid-template-areas:
+      "logo . network . navigation";
+
+  a {
+    padding: unset;
+    text-decoration: none;
+    border: unset;
+  }
+  a:hover, a:focus {
+    background: unset;
+    padding: unset;
+    color: inherit;
+    text-shadow: inherit;
+  }
+}
+
+// ============================================================
+// Nav Navigation Grid Areas
+// ============================================================
+
+.logo {
+  grid-area: logo;
+  text-align: left;
+  font-weight: 700;
+}
+
+.network {
+  grid-area: network;
+  text-align: center;
+}
+
+.navigation {
+  grid-area: navigation;
+  text-align: right;
+  font-weight: 400;
+}
+
+// ============================================================
+// Nav Navigation Grid Mixins
+// ============================================================
+
+// ------------------------------------------------------------
+// Default
+// ------------------------------------------------------------
+@mixin nav-navigation-default() {}

data/_sass/grids/_page.scss

@@ -0,0 +1,54 @@
+// ############################################################
+// Page Grid
+// ############################################################
+
+body {
+  min-width: 320px;
+
+  margin-top: 15px;
+
+  display: grid;
+  grid-template-columns: 15px auto 15px;
+  grid-template-rows: 30px min-content auto min-content min-content;
+  grid-column-gap: 0;
+  grid-row-gap: 1rem;
+  grid-template-areas:
+    ". nav-navigation     ."
+    ". header-banner      ."
+    ". main               ."
+    ". page-sidebar       ."
+    ". footer-contentinfo .";
+}
+
+// ============================================================
+// Page Grid Areas
+// ============================================================
+
+#header-banner {
+  grid-area: header-banner;
+}
+
+#nav-navigation {
+  grid-area: nav-navigation;
+}
+
+main {
+  grid-area: main;
+}
+
+#page-sidebar {
+  grid-area: page-sidebar;
+}
+
+#footer-contentinfo {
+  grid-area: footer-contentinfo;
+}
+
+// ============================================================
+// Page Grid Mixins
+// ============================================================
+
+// ------------------------------------------------------------
+// Default
+// ------------------------------------------------------------
+@mixin page-default() {}

data/_sass/media-queries/_article.scss

@@ -0,0 +1,29 @@
+// ============================================================
+// Page Grid
+// ============================================================
+
+// ------------------------------------------------------------
+// default
+// ------------------------------------------------------------
+@media screen {
+  @include page-default();
+  @include header-banner-default();
+  @include nav-navigation-default();
+  @include main-default();
+  @include article-default();
+  @include footer-contentinfo-default();
+}
+
+// ------------------------------------------------------------
+// min. 568px
+// ------------------------------------------------------------
+@media screen and (min-width: 568px) {
+  @include article-540px();
+}
+
+// ------------------------------------------------------------
+// min. 896px
+// ------------------------------------------------------------
+@media screen and (min-width: 896px) {
+  @include article-855px();
+}

data/_sass/media-queries/_sitemap.scss

@@ -0,0 +1,15 @@
+// ============================================================
+// Page Grid
+// ============================================================
+
+// ------------------------------------------------------------
+// default
+// ------------------------------------------------------------
+@media screen {
+  @include page-default();
+  @include header-banner-default();
+  @include nav-navigation-default();
+  @include main-default();
+  @include sitemap-default();
+  @include footer-contentinfo-default();
+}

data/about.html

@@ -0,0 +1,37 @@
+---
+layout: page
+title: "About"
+author: "Johnny Dummy"
+description: "About Page"
+keywords: "about"
+language: "en"
+figure: you
+figcaption: You
+---
+<main>
+
+  <article>
+
+    <header>
+      <h1>Dummy Title</h1>
+    </header>
+
+    {% include body/article-figure.html %}
+
+    <div class="content">
+
+      <section>
+        <h2>Dummy Subtitle</h2>
+        <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.</p>
+        <p>Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.</p>
+        <p>The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.</p>
+        <hr>
+      </section>
+
+    </div>
+
+    {% include body/article-aside.html %}
+
+  </article>
+
+</main>

data/assets/css/page.scss

@@ -0,0 +1,4 @@
+---
+---
+
+@import 'page';

data/assets/css/sitemap.scss

@@ -0,0 +1,4 @@
+---
+---
+
+@import 'sitemap';

data/assets/img/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a{fill:url(#a);}</style><pattern id="a" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 32 32"><image width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfjAggMCDOdY6p5AAACY0lEQVRIx63VPWscVxQG4GfurrQrGbaKCSiOSGcL4cSkUBFHikDgIr9AoDY2cnoVqWzX6YOI0wr0GwwL9jpKocphMY47IRw1drVgaUf7MS5mvNKdlRNvyHu6c877cj7uzElE6EDdNStWXDdnFseOtLW0/KVLI2IkJXrNknVr5tWjWKbrUNOufWnjIoEOfGHThs9i2Ujmbzu2HZzVkYzoiW888J2qf0bfE/f8IWucCXRI3PKz6z4ObVse5RJJUfy3fvloei7xo99pSIref7M2AR2afnBAQM2m1YtyEkH40ERXbarlAks2VMrxipqZwmrjYSo2LBHUrbsSx4KaGdMqgqBi2oyaUJa4Yl29aqHcfVAb22ViWpAaxu41C1XL5mPv1Ij+1ht84hKoGkrj1HnLVSvqcWtTYGjPr/7EV+64KWBK3+B8ct2KzstOdt7SLEcrW8wUtpi1Cm+axdmdl8Fc3Gs+72MPPR95n3vouKivtNS5YDYWyBNeexblPfM6io8wO7abSRGK2gpkMnDZjSjthstRfITj4CgWyKc867bFkXfR7aLTQVngqPLTqoW4saoEn/tST+ZTt9xzU4LMaSyQeVLV8r2ZM99AzzSCZV9HD4le/AroalU9dejqeW9PKN7ipREV+nrlCR56GrzQjL1DablUmdPxL4GmF0HXrlfjEidODQwNDZw6uYj+yq5uwL6dcnMMpE4KS8fDDOzYz38oqW2PXYDM0LC8uPd4bFtKaMCB+9omQdv9/DqE4kTs2ZpAom3LXs4M0CDzyF1N/X8l9zXdfX8V/r/TNhL578f1XB0Tnfd31nD5LKIz0E0AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDItMDhUMTA6NDI6MDMrMDE6MDBzwruAAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTAyLTA4VDExOjA4OjUxKzAxOjAwp40mvwAAAABJRU5ErkJggg=="/></pattern></defs><rect class="a" width="30" height="30"/></svg>