quiet-comic 0.1.0

data/_pages/demo-3.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_pages/demo-4.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_pages/demo-5.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_pages/demo-6.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_pages/demo-7.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_pages/demo-8.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_pages/demo-9.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_pages/demo.md

@@ -0,0 +1,7 @@
+---
+title: Demo Comic Page
+page_number: 1
+image: 'placeholder-page.jpg'
+---
+
+# Hello!

data/_sass/quiet_comic.scss

@@ -0,0 +1,48 @@
+@charset "utf-8";
+
+// fonts
+@font-face {
+  font-family: "Gloria Hallelujah";
+  src: url("fonts/GloriaHallelujah.ttf");
+}
+
+@font-face {
+  font-family: "Permanent Marker";
+  src: url("fonts/PermanentMarker.ttf")
+}
+
+// VARIABLES
+
+// fonts
+$base-font-family: "Gloria Hallelujah", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$secondary-font-family: "Permanent Marker", Helvetica, Arial, sans-serif !default;
+$base-font-size: 16px !default;
+$small-font-size: $base-font-size * 0.875 !default;
+$base-font-weight: 400px !default;
+$base-line-height: 1.5 !default;
+
+// colors
+$text-color: hsl(203, 17%, 27%) !default;
+$text-color-light: lighten($text-color, 40%) !default;
+$text-color-dark: darken($text-color, 40%) !default;
+$background-color: #FFF !default;
+$brand-color: hsl(205, 30%, 45%) !default;
+$link-color: lighten($brand-color, 40%) !default;
+
+// header
+$min-header-height: 80px;
+
+// min breakpoint widths
+$break-sm: 300px;
+$break-md: 600px;
+$break-lg: 900px;
+$break-xl: 1200px;
+
+// import partials
+@import
+  "quiet_comic/mixins",
+  "quiet_comic/base",
+  "quiet_comic/components",
+  "quiet_comic/grid",
+  "quiet_comic/syntax_highlighting"
+;

data/_sass/quiet_comic/base.scss

@@ -0,0 +1,97 @@
+// reset basic elements
+html, body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr, dl, dd, dt,
+ul, ol, li, figure, table, thead, tbody,
+tfoot, tr, td, th, article, header, footer, nav {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  font-weight: $base-font-weight;
+  line-height: $base-line-height;
+
+  color: $text-color;
+  background-color: $background-color;
+
+  // Sticky footer
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  flex: 1;
+}
+
+h6 {
+  font-size: $base-font-size * 1.125;
+  margin: $base-font-size * 1.825 0;
+}
+
+h5 {
+  font-size: $base-font-size * 1.25;
+  margin: $base-font-size * 1.75 0;
+}
+
+h4 {
+  font-size: $base-font-size * 1.5;
+  margin: $base-font-size * 1.5 0;
+}
+
+h3 {
+  font-size: $base-font-size * 1.625;
+  margin: $base-font-size * 1.357 0;
+}
+
+h2 {
+  font-size: $base-font-size * 1.8;
+  margin: $base-font-size * 1.2  0;
+}
+
+h1 {
+  font-size: $base-font-size * 1.925;
+  margin: $base-font-size * 1.075  0;
+}
+
+p, blockquote, pre, ul, ol, dl, figure {
+  margin: $base-font-size 0;
+}
+
+a {
+  @include border-slide-bottom($text-color, 0.15em);
+  color: $link-color;
+  text-decoration: none;
+
+  &:visited {
+    color: darken($brand-color, 10%);
+  }
+
+  &:hover {
+    color: $text-color;
+  }
+}
+
+// code blocks
+pre,
+code {
+  font-size: $base-font-size * 0.9375;
+  border-radius: 3px;
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}

data/_sass/quiet_comic/components.scss

@@ -0,0 +1,226 @@
+// header
+header {
+  list-style: none;
+  position: relative;
+  z-index: 1;
+
+  ul {
+    margin: 0 1rem;
+    min-height: $min-header-height;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  li {
+    display: inline-block;
+    padding: 0.5rem;
+  }
+
+  .active:after {
+    width: 100%;
+  }
+
+  .nav-home-button {
+    margin-right: auto;
+
+    a {
+      transition: opacity 0.4s ease-in-out;
+
+      &:after {
+        content: none;
+      }
+
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+// footer
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  margin: 5em 3em;
+  margin-bottom: 1em;
+
+  .bio-container {
+    h5 {
+      margin-bottom: 0;
+    }
+  }
+
+  .social-links {
+    display: flex;
+    margin-left: auto;
+
+    li {
+      display: inline-block;
+      margin: 0.4rem;
+
+      a {
+        transition: opacity 0.4s ease-in-out;
+
+        &:after {
+          content: none;
+        }
+
+        &:hover {
+          opacity: 0.4;
+        }
+      }
+
+      img {
+        width: 50px;
+      }
+    }
+
+  }
+}
+
+
+// home page
+.Home-img {
+  min-height: 100vh;
+  // temporary color
+  background-color: hsla(31, 15%, 50%, 0.1);
+  margin-top: -$min-header-height;
+
+  .main-feed-link {
+    width: 30px;
+    position: absolute;
+    bottom: 3rem;
+    right: 3rem;
+    transition: opacity 0.4s ease-in-out;
+
+    &:after {
+      content: none;
+    }
+
+    &:hover {
+      opacity: 0.4;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
+// pages and gallery
+.pages-layout, .gallery-layout {
+
+  .Grid-cell {
+    display: flex;
+    align-items: stretch;
+  }
+
+}
+
+.thumbnail-link {
+  @include overlay-on-hover($brand-color);
+
+  flex: 1;
+  text-align: center;
+  background-size: cover;
+
+  &:hover {
+
+    .thumbnail-title {
+      opacity: 1;
+    }
+  }
+}
+
+.thumbnail-title {
+  z-index: 1;
+  color: #fff;
+  padding: 0.5em;
+  opacity: 0;
+  filter: brightness(100%);
+  transition: opacity 0.4s ease-in-out;
+}
+
+// page and artwork
+.page-header, .artwork-header {
+  display: flex;
+  align-items: stretch;
+}
+
+.header-date {
+  color: $text-color-light;
+  font-size: 0.7em;
+  align-self: center;
+  margin-left: 1em;
+}
+
+.pager-container,
+.size-buttons-container {
+  font-size: 0.5em;
+  align-self: center;
+}
+
+.pager {
+  list-style: none;
+  display: inline-block;
+
+  li {
+    display: inline-block;
+  }
+
+  a {
+    margin: 0 0.3em;
+  }
+}
+
+
+.size-buttons-container {
+  margin-left: auto;
+  margin-right: 2em;
+}
+
+#width-50 {
+  flex: 0 0 50%;
+  display: none;
+
+  &:target {
+    display: block;
+
+    & ~ #width-100 {
+      display: none;
+    }
+  }
+}
+
+#width-75 {
+  flex: 0 0 75%;
+  display: none;
+
+  &:target {
+    display: block;
+
+    & ~ #width-100 {
+      display: none;
+    }
+  }
+}
+
+.main-image {
+  margin: auto;
+}
+
+#width-100 {
+  flex: 0 0 100%;
+
+  &:target {
+    display: block;
+  }
+}
+
+// comments
+.comments-container {
+  margin: 5em 0;
+}

data/_sass/quiet_comic/grid.scss

@@ -0,0 +1,420 @@
+.Container--fluid {
+  width: 80%;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.Container--fixed {
+  max-width: 80%;
+  width: 1000px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.Grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.Grid-cell {
+  flex: 1;
+}
+
+// cell order
+.cell--first {
+  order: 1;
+}
+
+.cell--last {
+  order: 100;
+}
+
+@media (min-width: $break-sm) {
+  .sm-cell--first {
+    order: 1;
+  }
+
+  .sm-cell--last {
+    order: 100;
+  }
+}
+
+@media (min-width: $break-md) {
+  .md-cell--first {
+    order: 1;
+  }
+
+  .md-cell--last {
+    order: 100;
+  }
+}
+
+
+@media (min-width: $break-lg) {
+  .lg-cell--first {
+    order: 1;
+  }
+
+  .lg-cell--last {
+    order: 100;
+  }
+}
+
+
+@media (min-width: $break-xl) {
+  .xl-cell--first {
+    order: 1;
+  }
+
+  .xl-cell--last {
+    order: 100;
+  }
+}
+
+.Grid-cell-inner {
+  padding: 1rem;
+}
+
+.Demo {
+  width: 100%;
+  background-color: hsla(31, 15%, 50%, .1);
+  padding: 1rem;
+  text-align: center;
+}
+
+// group alignment
+.Grid--top {
+  align-items: flex-start;
+}
+
+.Grid-bottom {
+  align-items: flex-end;
+}
+
+.Grid--center {
+  align-items: center;
+}
+
+.Grid--justifyCenter {
+  justify-content: center;
+}
+
+// Individual alignment
+.Grid-cell--top {
+  align-self: flex-start;
+}
+
+.Grid-cell--bottom {
+  align-self: flex-end;
+}
+
+.Grid-cell--center {
+  align-self: center;
+}
+
+.Grid-cell--autoSize {
+  flex: none;
+}
+
+//  Group sizing
+//  baseline flex-basis
+.Grid--1of1 > .Grid-cell {
+  flex: 0 0 100%;
+}
+
+.Grid--1of2 > .Grid-cell {
+  flex: 0 0 50%;
+}
+
+.Grid--1of3 > .Grid-cell {
+  flex: 0 0 33.33333%;
+}
+
+.Grid--1of4 > .Grid-cell {
+  flex: 0 0 25%;
+}
+
+.Grid--1of6 > .Grid-cell {
+  flex: 0 0 16.666666%;
+}
+
+
+// flex-basis at different breakpoints
+@media (min-width: $break-sm) {
+  .sm-Grid--fit > .Grid-cell {
+    flex: 1;
+  }
+
+  .sm-Grid--1of1 > .Grid-cell {
+    flex: 0 0 100%;
+  }
+
+  .sm-Grid--1of2 > .Grid-cell {
+    flex: 0 0 50%;
+  }
+
+  .sm-Grid--1of3 > .Grid-cell {
+    flex: 0 0 33.33333%;
+  }
+
+  .sm-Grid--1of4 > .Grid-cell {
+    flex: 0 0 25%;
+  }
+
+  .sm-Grid--1of6 > .Grid-cell {
+  flex: 0 0 16.666666%;
+}
+
+
+
+}
+
+@media (min-width: $break-md) {
+  .md-Grid--fit > .Grid-cell {
+    flex: 1;
+  }
+
+  .md-Grid--1of1 > .Grid-cell {
+    flex: 0 0 100%;
+  }
+
+  .md-Grid--1of2 > .Grid-cell {
+    flex: 0 0 50%;
+  }
+
+  .md-Grid--1of3 > .Grid-cell {
+    flex: 0 0 33.33333%;
+  }
+
+  .md-Grid--1of4 > .Grid-cell {
+    flex: 0 0 25%;
+  }
+
+  .md-Grid--1of6 > .Grid-cell {
+    flex: 0 0 16.666666%;
+  }
+
+}
+
+@media (min-width: $break-lg) {
+  .lg-Grid--fit > .Grid-cell {
+    flex: 1;
+  }
+
+  .lg-Grid--1of1 > .Grid-cell {
+    flex: 0 0 100%;
+  }
+
+  .lg-Grid--1of2 > .Grid-cell {
+    flex: 0 0 50%;
+  }
+
+  .lg-Grid--1of3 > .Grid-cell {
+    flex: 0 0 33.33333%;
+  }
+
+  .lg-Grid--1of4 > .Grid-cell {
+    flex: 0 0 25%;
+  }
+
+  .lg-Grid--1of6 > .Grid-cell {
+    flex: 0 0 16.666666%;
+  }
+}
+
+@media (min-width: $break-xl) {
+  .xl-Grid--fit > .Grid-cell {
+    flex: 1;
+  }
+
+  .xl-Grid--1of1 > .Grid-cell {
+    flex: 0 0 100%;
+  }
+
+  .xl-Grid--1of2 > .Grid-cell {
+    flex: 0 0 50%;
+  }
+
+  .xl-Grid--1of3 > .Grid-cell {
+    flex: 0 0 33.33333%;
+  }
+
+  .xl-Grid--1of4 > .Grid-cell {
+    flex: 0 0 25%;
+  }
+
+  .lg-Grid--1of6 > .Grid-cell {
+    flex: 0 0 16.666666%;
+  }
+}
+
+//  individual sizing per cell
+//  baseline widths
+.cell--1of1 {
+  width: 100% !important;
+  flex: none !important;
+}
+
+.cell--1of2 {
+  width: 50% !important;
+  flex: none !important;
+}
+
+.cell--1of3 {
+  width: 33.33333% !important;
+  flex: none !important;
+}
+
+.cell--2of3 {
+  width: 66.666666% !important;
+  flex: none !important;
+}
+
+
+.cell--1of4 {
+  width: 25% !important;
+  flex: none !important;
+}
+
+// widths at different breakpoints
+@media (min-width: $break-sm) {
+  .sm-cell--1of1 {
+    width: 100% !important;
+    flex: none !important;
+  }
+
+  .sm-cell--1of2 {
+    width: 50% !important;
+    flex: none !important;
+  }
+
+  .sm-cell--1of3 {
+    width: 33.33333% !important;
+    flex: none !important;
+  }
+
+  .sm-cell--2of3 {
+    width: 66.666666% !important;
+    flex: none !important;
+  }
+
+  .sm-cell--1of4 {
+    width: 25% !important;
+    flex: none !important;
+  }
+}
+
+@media (min-width: $break-md) {
+  .md-cell--1of1 {
+    width: 100% !important;
+    flex: none !important;
+  }
+
+  .md-cell--1of2 {
+    width: 50% !important;
+    flex: none !important;
+  }
+
+  .md-cell--1of3 {
+    width: 33.33333% !important;
+    flex: none !important;
+  }
+
+  .md-cell--2of3 {
+    width: 66.666666% !important;
+    flex: none !important;
+  }
+
+  .md-cell--1of4 {
+    width: 25% !important;
+    flex: none !important;
+  }
+}
+
+@media (min-width: $break-lg) {
+  .lg-cell--1of1 {
+    width: 100% !important;
+    flex: none !important;
+  }
+
+  .lg-cell--1of2 {
+    width: 50% !important;
+    flex: none !important;
+  }
+
+  .lg-cell--1of3 {
+    width: 33.33333% !important;
+    flex: none !important;
+  }
+
+  .lg-cell--2of3 {
+    width: 66.666666% !important;
+    flex: none !important;
+  }
+
+  .lg-cell--1of4 {
+    width: 25% !important;
+    flex: none !important;
+  }
+}
+
+@media (min-width: $break-xl) {
+  .xl-cell--1of1 {
+    width: 100% !important;
+    flex: none !important;
+  }
+
+  .xl-cell--1of2 {
+    width: 50% !important;
+    flex: none !important;
+  }
+
+  .xl-cell--1of3 {
+    width: 33.33333% !important;
+    flex: none !important;
+  }
+
+  .xl-cell--2of3 {
+    width: 66.666666% !important;
+    flex: none !important;
+  }
+
+  .xl-cell--1of4 {
+    width: 25% !important;
+    flex: none !important;
+  }
+}
+
+// Gutters
+.Grid--gutters {
+  // we have negative margins so that we can pad
+  // the grid cells on the top and left
+  // and so that grids will stack on top of each other nicely
+  margin: -1rem 0 1rem -1rem;
+}
+
+.Grid--gutters > .Grid-cell {
+  padding: 1rem 0 0 1rem;
+}
+
+.Grid--guttersLg {
+  margin: -1.5rem 0 1.5rem -1.5rem;
+}
+
+.Grid--guttersLg > .Grid-cell {
+  padding: 1.5rem 0 0 1.5rem;
+}
+
+.Grid--guttersXL {
+  margin: -2rem 0 2rem -2rem;
+}
+
+.Grid--guttersXL > .Grid-cell {
+  padding: 2rem 0 0 2rem;
+}