Merge pull request #33 from kentnek/kent-scss

.gitignore

@@ -6,4 +6,7 @@ Thumbs.db
 
 # IDEs
 .vscode
+
+# Hugo
+**/resources/_gen
 public/

README.md

@@ -4,6 +4,12 @@ A minimal blog theme built for [Hugo](https://gohugo.io/) 🍜
 
 - An about page 👋🏻 and a blog 📝
 - Blog posts can be tagged 🏷
+- Mathematical notations are supported with KaTex
+- Sass/SCSS for styling
+
+### Prerequisites
+
+Hugo extended version (for Sass/SCSS support).
 
 ### Getting started
 
@@ -93,6 +99,33 @@ In your site's `config.toml`, add a new menu definition for say, "photos":
 
 Then, put your posts under "content/photos". 
 
+### Custom styling
+
+In your site's folder, create `assets/scss/custom.scss` and put your custom styling there. For example, the snippet below 
+changes the dot's color on your About page to blue:
+
+```scss
+// custom.scss
+.fancy {
+  color: #1e88e5;
+}
+```
+
+You can even use Hugo variables/params in your custom styles too!
+
+```scss
+// custom.scss
+.fancy {
+  color: {{ .Site.Params.colors.fancy | default "#1e88e5" }}
+}
+```
+
+```toml
+# config.toml
+[params.colors]
+    fancy = "#f06292"
+```
+
 ### Tags
 
 Right now `hugo-theme-codex` uses the `tags` taxonomy for blog posts. You can view all the blog posts of a given tag by going to `/tags/:tag-name`, where `:tag-name` is the name of your tag.

assets/scss/_main.scss

@@ -0,0 +1,23 @@
+@import 'partials/normalize';
+@import 'partials/vars';
+@import 'partials/reset';
+@import 'partials/typography';
+@import 'partials/nav';
+@import 'partials/social-icons';
+
+body.nav--active {
+  overflow: hidden;
+}
+
+main {
+  padding: 3rem 1.5rem;
+
+
+  @media screen and (min-width: $medium) {
+    padding-left: calc(1.5rem + #{$navWidth});
+  }
+
+  @media screen and (max-width: $medium - 1) {
+    padding-top: calc(3rem + #{$burgerContainerHeight});
+  }
+}

assets/scss/pages/about.scss

@@ -0,0 +1,59 @@
+@import '../main';
+
+.splash-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+
+  @media screen and (min-width: $medium) {
+    font-size: 18px;
+  }
+}
+
+.splash {
+  h1 {
+    font-size: 3em;
+    line-height: 1;
+    letter-spacing: -0.03em;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 2.25em;
+    font-weight: 500;
+    line-height: 1.25;
+    max-width: 22em;
+    letter-spacing: -0.03em;
+  }
+}
+
+.fancy {
+  color: $primary;
+}
+
+.handle {
+  display: inline-block;
+  margin-top: 0.275em;
+  color: $grey;
+  letter-spacing: 0.5px;
+}
+
+.writing {
+  text-decoration: none;
+  color: $primary;
+}
+
+/* overrides */
+
+main {
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 100%;
+}
+
+.social-icons {
+  justify-content: flex-start;
+  padding-top: 2rem;
+}

assets/scss/pages/post.scss

@@ -0,0 +1,238 @@
+@import '../main';
+@import '../partials/github-syntax-highlighting';
+
+.post {
+  width: 100%;
+  max-width: 34rem;
+  margin: 0 auto;
+
+  h2, h3 {
+    position: relative;
+    padding-top: 10px;
+
+    .anchor {
+      text-decoration: none;
+      position: absolute;
+      left: -1rem;
+      color: $grey;
+      font-size: 1.2rem;
+      font-weight: 400;
+    }
+
+    .anchor:hover {
+      color: $darkGrey;
+    }
+  }
+
+  blockquote {
+    width: 95%;
+    margin: 0 auto;
+    font-size: 1rem;
+
+    a {
+      color: $darkGrey;
+      text-decoration: underline;
+    }
+  }
+
+  img {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.post__content a {
+  font-weight: 400;
+  color: #0366d6;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.post__title {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.post__date {
+  color: $grey;
+  font-size: 0.8rem;
+}
+
+.cp_embed_wrapper {
+  margin-top: 1.5rem;
+}
+
+.codepen__caption {
+  display: block;
+  width: 75%;
+  margin: 0.5rem auto 0;
+  color: $grey;
+  font-size: 0.8rem;
+  font-weight: 300;
+  text-align: center;
+}
+
+.note {
+  width: 90%;
+  margin: 1rem auto 0;
+  font-size: 12px;
+  text-align: center;
+  line-height: 1.5;
+  color: $grey;
+
+  code {
+    font-size: 12px;
+    color: $darkGrey;
+    background-color: transparent;
+
+    &:before,
+    &:after {
+      content: '`';
+    }
+  }
+
+  a {
+    color: $darkGrey;
+    text-decoration: underline;
+  }
+}
+
+.tags__list {
+  padding-right: 1.5rem;
+  margin: 1.5rem 0 0;
+  list-style: none;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tag__item {
+  margin-right: 1rem;
+  display: inline-block;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.tag__link {
+  display: inline-block;
+  text-decoration: none;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  background: lighten($primary, 41%);
+  color: $primary;
+  font-size: 0.8rem;
+
+  &:hover {
+    background: lighten($primary, 38%);
+  }
+}
+
+.gif {
+  margin-top: 1.5rem;
+
+  img {
+    max-width: 375px;
+  }
+}
+
+p.warning {
+  background: #FFF9DF;
+  padding: 1rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: #747160;
+  border-left: 2px solid #747160;
+
+  a {
+    color: #747160;
+    text-decoration: underline;
+  }
+}
+
+.pagination {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1.5rem;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.pagination__item {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+
+  &:nth-child(2) {
+    margin-top: 1.5rem;
+  }
+
+  @media screen and (min-width: 600px) {
+    width: 275px;
+    padding: 15px;
+    border-radius: 4px;
+    &:first-of-type {
+      padding-right: 15px;
+    }
+    &:last-of-type {
+      margin-top: 0;
+    }
+    &:hover {
+      background-color: #f6f9fc;
+    }
+  }
+}
+
+.pagination__label {
+  color: $grey;
+  font-size: 0.8rem;
+}
+
+.pagination__title {
+  color: $black;
+  font-weight: 700;
+  margin-top: 0.25rem;
+}
+
+footer {
+  text-align: center;
+  padding: 0 1.5rem;
+  background: #ffffff;
+
+  p {
+    color: $grey;
+    font-size: 0.65rem;
+  }
+}
+
+
+/* overrides */
+.post__content {
+  ul {
+    list-style: none;
+
+    li {
+      margin-bottom: 0.5rem;
+
+      &::before {
+        content: '-';
+        color: $darkGrey;
+        position: absolute;
+        margin-left: -15px;
+      }
+    }
+  }
+}
+
+.twitter-tweet.twitter-tweet-rendered {
+  margin: 1.5rem auto !important;
+  width: 375px !important;
+}

assets/scss/pages/posts.scss

@@ -0,0 +1,57 @@
+@import '../main';
+@import '../partials/post-list';
+
+.tags__list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 50px;
+  flex-shrink: 0;
+
+  @media screen and (max-width: $medium - 1) {
+    display: none;
+  }
+}
+
+.post__header .tags__list {
+  display: none;
+  padding-left: 0;
+
+  @media screen and (max-width: $medium - 1) {
+    display: block;
+  }
+
+  .tag__item {
+    display: inline-block;
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .tag__link {
+    font-size: 0.8rem;
+  }
+}
+
+.tag__link {
+  text-decoration: none;
+  color: $grey;
+  font-size: 0.9rem;
+
+  &::before {
+    content: '#';
+    font-size: 0.7rem;
+    padding-right: 1px;
+  }
+
+  &:hover {
+    color: $darkGrey;
+  }
+}
+
+/* page overrides */
+.post-list__container {
+  display: flex;
+  justify-content: space-between;
+}

assets/scss/pages/tags.scss

@@ -0,0 +1,27 @@
+@import '../main';
+@import '../partials/post-list';
+
+.tag__header {
+  align-items: baseline;
+  display: flex;
+  margin: 0 auto 3rem;
+
+  a, .separator {
+    color: $grey;
+    font-size: 1.5rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .separator {
+    align-self: center;
+    margin: 0 5px;
+  }
+
+  .tag__term {
+    margin: 0;
+    font-weight: 600;
+  }
+}

assets/scss/partials/_burger.scss

@@ -0,0 +1,57 @@
+@import "vars";
+
+.burger__container {
+  height: $burgerContainerHeight;
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  position: fixed;
+  width: 100%;
+  background: #fff;
+  z-index: 2;
+
+  @media screen and (min-width: $medium) {
+    display: none;
+  }
+}
+
+.burger {
+  position: relative;
+  width: $meatWidth;
+  height: $meatWidth;
+  cursor: pointer;
+}
+
+.burger__meat {
+  position: absolute;
+  width: $meatWidth;
+  height: $meatHeight;
+  background: $black;
+  top: calc(50% - #{$meatHeight} / 2);
+  left: calc(50% - #{$meatWidth} / 2);
+  transition: all 150ms ease-in;
+}
+
+.burger__meat--1 {
+  transform: translateY(-10px);
+}
+
+.burger__meat--2 {
+  width: calc(#{$meatWidth} - 6px);
+}
+
+.burger__meat--3 {
+  transform: translateY(10px);
+}
+
+.nav--active .burger__meat--1 {
+  transform: rotate(45deg);
+}
+
+.nav--active .burger__meat--2 {
+  opacity: 0;
+}
+
+.nav--active .burger__meat--3 {
+  transform: rotate(-45deg);
+}

assets/scss/partials/_colors.scss

@@ -0,0 +1,5 @@
+$black: #111;
+$grey: #9B9B9B;
+$darkGrey: #717171;
+$white: #fff;
+$primary: #9013FE;

assets/scss/partials/_github-syntax-highlighting.scss

@@ -0,0 +1,105 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #24292e;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata,
+.token.plain-text {
+  color: #6a737d;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.operator {
+  color: #d73a49;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #22863a;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #032f62;
+}
+
+.token.function,
+.token.class-name {
+  color: #6f42c1;
+}
+
+/* language-specific */
+
+/* JSX */
+.language-jsx .token.punctuation,
+.language-jsx .token.tag .token.punctuation,
+.language-jsx .token.tag .token.script,
+.language-jsx .token.plain-text {
+  color: #24292e;
+}
+
+.language-jsx .token.tag .token.attr-name {
+  color: #6f42c1;
+}
+
+.language-jsx .token.tag .token.class-name {
+  color: #005cc5;
+}
+
+.language-jsx .token.tag .token.script-punctuation,
+.language-jsx .token.attr-value .token.punctuation:first-child {
+  color: #d73a49;
+}
+
+.language-jsx .token.attr-value {
+  color: #032f62;
+}
+
+.language-jsx span[class="comment"]{
+  color: pink;
+}
+
+/* HTML */
+.language-html .token.tag .token.punctuation {
+  color: #24292e;
+}
+
+.language-html .token.tag .token.attr-name {
+  color: #6f42c1;
+}
+
+.language-html .token.tag .token.attr-value,
+.language-html .token.tag .token.attr-value .token.punctuation:not(:first-child) {
+  color: #032f62;
+}
+
+/* CSS */
+.language-css .token.selector {
+  color: #6f42c1;
+}
+
+.language-css .token.property {
+  color: #005cc5;
+}

assets/scss/partials/_nav.scss

@@ -0,0 +1,79 @@
+@import 'burger';
+
+.nav {
+  font-size: 16px;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  visibility: hidden;
+  z-index: 1;
+
+  @media screen and (min-width: $medium) {
+    display: block;
+    visibility: visible;
+    padding-top: 3em;
+    width: $navWidth;
+  }
+}
+
+.nav--active .nav {
+  visibility: visible;
+  height: 100%;
+  width: 100%;
+}
+
+.nav__list {
+  text-align: right;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 50%;
+
+  @media screen and (min-width: $medium) {
+    width: auto;
+  }
+
+
+  @media screen and (max-width: $medium - 1) {
+    transform: translateY(-25px);
+    opacity: 0;
+    .nav--active & {
+      transform: translateY(0);
+      opacity: 1;
+      transition: all 500ms ease;
+    }
+  }
+}
+
+.nav__list li {
+  margin-bottom: 3em;
+  line-height: 1.5em;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  @media screen and (min-width: $medium) {
+    margin-bottom: 1.75em;
+  }
+}
+
+.nav__list a {
+  color: $grey;
+  text-decoration: none;
+  font-size: 2em;
+
+  &.active {
+    color: $black;
+  }
+
+  &:hover {
+    color: $black;
+  }
+
+  @media screen and (min-width: $medium) {
+    font-size: 1em;
+  }
+}

assets/scss/partials/_normalize.scss

@@ -0,0 +1,14 @@
+button,
+button[type="button"],
+button[type="reset"],
+button[type="submit"] {
+  -webkit-appearance: button;
+}
+
+input,
+input[type=text],
+input[type=email] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

assets/scss/partials/_pagination.scss

@@ -0,0 +1,19 @@
+.paginator-container {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
+.paginator {
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  margin: 0 1.5rem;
+  background-image: url(/icons/chevron-left.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.paginator--right {
+  transform: rotate(180deg);
+}

assets/scss/partials/_post-list.scss

@@ -0,0 +1,34 @@
+.post-list__container {
+  margin: 0 auto;
+  max-width: 1200px;
+  width: 100%;
+
+  @media screen and (min-width: $medium) {
+    padding-left: 50px;
+  }
+}
+
+.post-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.post {
+  margin-bottom: 1.5rem;
+}
+
+.post__title {
+  margin-top: 0;
+  font-weight: 500;
+
+  a {
+    color: $black;
+    text-decoration: none;
+  }
+}
+
+.post__date {
+  color: $grey;
+  font-size: 0.8rem;
+}

assets/scss/partials/_reset.scss

@@ -0,0 +1,17 @@
+@import "colors";
+
+html, body {
+  background-color: $white;
+  color: $black;
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  padding: 0;
+  margin: 0;
+  box-sizing: inherit;
+}

assets/scss/partials/_screenSizes.scss

@@ -0,0 +1,2 @@
+$medium: 800px;
+$large: 1400px;

assets/scss/partials/_social-icons.scss

@@ -0,0 +1,20 @@
+.social-icons {
+  display: flex;
+  justify-content: center;
+}
+
+.social-icons__icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.social-icons__icon--twitter {
+  background-image: url(/icons/twitter.svg);
+  margin-right: 2rem;
+}
+
+.social-icons__icon--github {
+  background-image: url(/icons/github.svg);
+}

assets/scss/partials/_typography.scss

@@ -0,0 +1,119 @@
+@import "vars";
+
+$baseFontSize: 16;
+$fontSizeMobile: 14;
+$baseLineHeight: 1.5;
+$scale: 1.414;
+$leading: $baseLineHeight * 1rem;
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-size: 95%;
+
+  @media screen and (min-width: $medium) {
+    font-size: 100%;
+  }
+
+  @media screen and (min-width: $large) {
+    font-size: 115%;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: $leading;
+  margin-bottom: 0;
+  line-height: $leading;
+}
+
+h1 {
+  font-size: 1.5 * $scale * 1rem;
+  line-height: 1.5 * $leading;
+  margin-top: 1.5 * $leading;
+}
+
+h2 {
+  font-size: $scale * 1rem;
+}
+
+h3 {
+  font-size: ($scale / 1.2) * 1rem;
+}
+
+h4 {
+  font-size: ($scale / 1.44) * 1rem;
+}
+
+h5 {
+  font-size: ($scale / 1.728) * 1rem;
+}
+
+p {
+  margin-top: $leading;
+  margin-bottom: 0;
+  line-height: $leading;
+}
+
+ul,
+ol {
+  padding-left: $leading;
+  margin-top: $leading;
+  margin-bottom: $leading;
+
+  li {
+    line-height: $leading;
+  }
+
+  ul,
+  ol {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+blockquote {
+  margin-top: $leading;
+  margin-bottom: $leading;
+  line-height: $leading;
+  color: $darkGrey;
+  font-style: italic;
+}
+
+pre {
+  line-height: 1.45;
+  margin-top: $leading;
+  padding: 16px;
+  word-wrap: normal;
+  overflow: auto;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+}
+
+code {
+  font-size: 85%;
+  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+}
+
+pre > code {
+  word-break: normal;
+  white-space: pre;
+}
+
+pre code {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.lead {
+  font-size: $scale * 1rem;
+}

assets/scss/partials/_vars.scss

@@ -0,0 +1,7 @@
+@import '_colors';
+@import '_screenSizes';
+
+$navWidth: 100px;
+$meatWidth: 28px;
+$meatHeight: 2px;
+$burgerContainerHeight: 4rem;

gulpfile.js

@@ -1,45 +0,0 @@
-var gulp = require("gulp");
-var babel = require("gulp-babel");
-var stylus = require("gulp-stylus");
-var sourcemaps = require("gulp-sourcemaps");
-var autoprefixer = require("gulp-autoprefixer");
-var gulpIf = require("gulp-if");
-var gutil = require("gulp-util");
-
-const isDev = () => gutil.env.env === "dev";
-
-gulp.task("styles", function () {
-  return gulp
-    .src("src/styles/pages/*.styl")
-    .pipe(gulpIf(isDev(), sourcemaps.init()))
-    .pipe(
-      stylus({
-        compress: true,
-      })
-    )
-    .pipe(autoprefixer())
-    .pipe(gulpIf(isDev(), sourcemaps.write()))
-    .pipe(gulp.dest("static/css"));
-});
-
-gulp.task("js", function () {
-  return gulp
-    .src("src/js/**/*.js")
-    .pipe(
-      babel({
-        presets: ["@babel/preset-env"],
-      })
-    )
-    .pipe(gulp.dest("static/js"));
-});
-
-gulp.task("watch", function () {
-  gulp.watch("src/styles/**/*.styl", gulp.series("styles"));
-  gulp.watch("src/js/**/*.js", gulp.series("js"));
-});
-
-// The default task is run on yarn watch:assets. This will build styles and js
-// before watching the src/styles and src/js directoryies
-gulp.task("default", gulp.series(gulp.parallel("styles", "js"), "watch"));
-// The build task is run on yarn build:assets
-gulp.task("build", gulp.parallel("styles", "js"));

layouts/_default/baseof.html

@@ -26,7 +26,19 @@
   {{ end }}
 
   <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
-  {{ block "stylesheets" . }} {{ end }}
+
+  <!-- Styles -->
+  {{ block "styles" . }} {{ end }} <!-- Get "style_opts" variable from "styles" block -->
+  {{ $base_styles_opts := .Scratch.Get "style_opts" | default (dict "src" "scss/pages/about.scss" "dest" "css/about.css") }}
+  {{ $custom_styles_opts := (dict "src" "scss/custom.scss" "dest" "css/custom.css") }}
+  
+  {{ $current_page := . }}
+  
+  {{ range (slice $base_styles_opts $custom_styles_opts) }}
+    {{ $style := resources.Get .src | resources.ExecuteAsTemplate .dest $current_page | toCSS | minify | fingerprint }}
+    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}"/>
+  {{ end }}
+  
   {{ range .AlternativeOutputFormats }} 
   {{ printf `<link rel="%s" type="%s+%s" href="%s" title="%s" />` .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }} 
   {{ end }} 
@@ -45,7 +57,8 @@
 
   {{ block "footer" . }} {{ end }}
 
-  <script src="/js/index.js"></script>
+  {{ $script := resources.Get "js/index.js" | minify | fingerprint }}
+  <script src="{{ $script.Permalink }}" integrity="{{ $script.Data.Integrity | safeHTMLAttr }}" crossorigin="anonymous"></script>
   {{ block "scripts" . }} {{ end }}
 </body>
 

layouts/_default/list.html

@@ -1,8 +1,7 @@
-{{ define "stylesheets" }}
-<link rel="stylesheet" href="/css/posts.css" /> 
+{{ define "styles" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/posts.scss" "dest" "css/posts.css") }}
 {{ end }}
 
-
 {{ define "main" }}
 
 <div class="post-list__container">

layouts/_default/single.html

@@ -1,8 +1,7 @@
-{{ define "stylesheets" }}
-<link rel="stylesheet" href="/css/post.css" /> 
+{{ define "styles" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/post.scss" "dest" "css/post.css") }}
 {{ end }}
 
-
 {{ define "main" }}
 <div class="post">
   <header class="post__header">

layouts/index.html

@@ -1,5 +1,5 @@
-{{ define "stylesheets" }}
-<link rel="stylesheet" href="/css/about.css" /> 
+{{ define "styles" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/about.scss" "dest" "css/about.css") }}
 {{ end }}
 
 {{ define "main" }}

layouts/taxonomy/tag.html

@@ -1,5 +1,5 @@
-{{ define "links" }}
-<link rel="stylesheet" href="/css/tags.css" /> 
+{{ define "styles" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/tags.scss" "dest" "css/tags.css") }}
 {{ end }}
 
 {{ define "main" }} 

package.json

@@ -5,20 +5,7 @@
   "description": "A minimal blog theme for Hugo",
   "license": "MIT",
   "scripts": {
-    "develop": "hugo server -s ./exampleSite/",
-    "watch:assets": "gulp --env=dev",
-    "build:assets": "gulp build"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^7.0.1",
-    "gulp-babel": "^8.0.0",
-    "gulp-if": "^3.0.0",
-    "gulp-sourcemaps": "^2.6.5",
-    "gulp-stylus": "^2.7.0",
-    "gulp-util": "^3.0.8"
+    "develop": "hugo server -s ./exampleSite/"
   },
   "browserslist": [
     "last 2 version",

src/styles/_main.styl

@@ -1,18 +0,0 @@
-@import 'partials/_normalize'
-@import 'partials/_vars'
-@import 'partials/_reset'
-@import 'partials/_typography'
-@import 'partials/_nav'
-
-body.nav--active
-  overflow: hidden
-
-main
-  padding: 3rem 1.5rem
-
-  // compensates for the nav sidebar on tablet and desktop
-  @media screen and (min-width: $medium)
-    padding-left: "calc(1.5rem + %s)" % $navWidth
-
-  @media screen and (max-width: $medium - 1)
-    padding-top: "calc(3rem + %s)" % $burgerContainerHeight

src/styles/pages/about.styl

@@ -1,54 +0,0 @@
-@import '../_main'
-@import '../partials/_social-icons'
-
-
-.splash-container
-  height: 100%
-  display: flex
-  justify-content: center
-  align-items: center
-  font-size: 14px
-
-  @media screen and (min-width: $medium)
-    font-size: 18px
-
-
-
-.splash
-
-  h1
-    font-size: 3em
-    line-height: 1
-    letter-spacing: -0.03em
-    margin: 0
-
-  h2
-    font-size: 2.25em
-    font-weight: 500
-    line-height: 1.25
-    max-width: 22em
-    letter-spacing: -0.03em
-
-.fancy
-  color: $primary
-
-.handle
-  display: inline-block
-  margin-top: 0.275em
-  color: $grey
-  letter-spacing: 0.5px
-
-.writing
-  text-decoration: none
-  color: $primary
-
-/* overrides */
-
-main
-  padding-top: 0
-  padding-bottom: 0
-  height: 100%
-
-.social-icons
-  justify-content: flex-start
-  padding-top: 2rem

src/styles/pages/post.styl

@@ -1,201 +0,0 @@
-@import '../_main'
-@import '../partials/_social-icons'
-@import '../partials/_github-syntax-highlighting'
-
-.post
-  width: 100%
-  max-width: 34rem
-  margin: 0 auto
-
-  h2,
-  h3
-    position: relative
-    padding-top: 10px
-
-    .anchor
-      text-decoration: none
-      position: absolute
-      left: -1rem
-      color: $grey
-      font-size: 1.2rem
-      font-weight: 400
-
-    .anchor:hover
-      color: $darkGrey
-      
-  blockquote
-    width: 95%
-    margin: 0 auto
-    font-size: 1rem
-
-    a
-      color: $darkGrey
-      text-decoration: underline
-
-  img
-    width: 100%
-    max-width: 500px
-    margin: 0 auto
-    display: block
-
-.post__content a
-  font-weight: 400
-  color: #0366d6
-  text-decoration: none
-
-  &:hover
-    text-decoration: underline
-
-.post__title 
-  margin-top: 0
-  margin-bottom: 0.5rem
-
-.post__date
-  color: $grey
-  font-size: 0.8rem
-
-.cp_embed_wrapper 
-  margin-top: 1.5rem
-
-.codepen__caption
-  display: block
-  width: 75%
-  margin: 0.5rem auto 0
-  color: $grey
-  font-size: .8rem
-  font-weight: 300
-  text-align: center
-
-.note
-  width: 90%
-  margin: 1rem auto 0
-  font-size: 12px
-  text-align: center
-  line-height: 1.5
-  color: $grey
-
-  code 
-    font-size: 12px
-    color: $darkGrey
-    background-color: transparent;
-
-    &:before,
-    &:after
-      content: '`'
-
-  a
-    color: $darkGrey
-    text-decoration: underline
-
-.tags__list
-  padding-right: 1.5rem
-  margin: 1.5rem 0 0
-  list-style: none
-  display: flex
-  justify-content: flex-end
-
-.tag__item
-  margin-right: 1rem
-  display: inline-block
-
-  &:last-child 
-    margin-right: 0
-
-.tag__link
-  display: inline-block
-  text-decoration: none
-  padding: .2em .4em
-  border-radius: 3px
-  background: lighten($primary, 90%)
-  color: $primary
-  font-size: 0.8rem
-
-  &:hover
-    background: lighten($primary, 81%)
-
-.gif
-  margin-top: 1.5rem
-
-  img
-    max-width: 375px
-
-p.warning
-  background: #FFF9DF
-  padding: 1rem
-  font-size: 0.8rem
-  line-height: 1.5
-  color: #747160
-  border-left: 2px solid #747160
-
-  a
-    color: #747160
-    text-decoration: underline
-
-.pagination
-  display: flex
-  flex-direction: column
-  margin-top: 1.5rem
-
-  @media screen and (min-width: 600px)
-    flex-direction: row
-    justify-content: space-between
-
-.pagination__item
-  text-decoration: none
-  display: flex
-  flex-direction: column
-  
-  &:nth-child(2)
-    margin-top: 1.5rem
-
-  @media screen and (min-width: 600px)
-    width: 275px
-    padding: 15px
-    border-radius: 4px
-
-    &:first-of-type
-      padding-right: 15px
-
-    &:last-of-type
-      margin-top: 0
-  
-    &:hover
-      background-color: #f6f9fc
-
-.pagination__label
-  color: $grey
-  font-size: 0.8rem
-
-.pagination__title  
-  color: $black
-  font-weight: 700
-  margin-top: 0.25rem
-
-footer
-  text-align: center
-  padding: 0 1.5rem
-  background: #ffffff
-
-  p
-    color: $grey
-    font-size: 0.65rem
-
-
-/* overrides */
-.post__content
-
-  ul
-    list-style: none
-
-    li
-      margin-bottom: 0.5rem
-
-      &::before
-        content: '-'
-        color: $darkGrey
-        position: absolute
-        margin-left: -15px
-
-.twitter-tweet.twitter-tweet-rendered
-  margin: 1.5rem auto!important
-  width: 375px!important

src/styles/pages/posts.styl

@@ -1,47 +0,0 @@
-@import '../_main'
-@import '../partials/_post-list'
-
-.tags__list
-  list-style: none
-  padding: 0;
-  margin: 0;
-  padding-left: 50px
-  flex-shrink: 0
-
-  @media screen and (max-width: $medium - 1)
-    display: none
-
-.post__header .tags__list
-  display: none
-  padding-left: 0
-
-  @media screen and (max-width: $medium - 1)
-    display: block
-
-  .tag__item
-    display: inline-block
-    margin-right: 10px
-
-    &:last-child
-      margin-right: 0
-
-  .tag__link
-    font-size: 0.8rem
-    
-.tag__link
-  text-decoration: none 
-  color: $grey
-  font-size: 0.9rem
-
-  &::before
-    content: '#'
-    font-size: 0.7rem
-    padding-right: 1px
-
-  &:hover
-    color: $darkGrey
-
-/* page overrides */
-.post-list__container
-  display: flex
-  justify-content: space-between

src/styles/pages/tags.styl

@@ -1,24 +0,0 @@
-@import '../_main'
-@import '../partials/_post-list'
-
-.tag__header
-  align-items: baseline
-  display: flex
-  margin: 0 auto
-  margin-bottom: 3rem
-
-  a,
-  .separator
-    color: $grey
-    font-size: 1.5rem
-
-  a
-    text-decoration: none  
-
-  .separator
-    align-self: center
-    margin: 0 5px
-  
-  .tag__term
-    margin: 0
-    font-weight: 600

src/styles/partials/_burger.styl

@@ -1,47 +0,0 @@
-.burger__container
-  height: $burgerContainerHeight
-  display: flex
-  align-items: center
-  padding: 0 1.5rem
-  position: fixed
-  width: 100%
-  background: #fff
-  z-index: 2
-
-  @media screen and (min-width: $medium)
-    display: none
-
-
-.burger
-  position: relative
-  width: $meatWidth
-  height: $meatWidth
-  cursor: pointer
-
-.burger__meat
-  position: absolute
-  width: $meatWidth
-  height: $meatHeight
-  background: $black
-  top: "calc(50% - %s / 2)" % $meatHeight
-  left: "calc(50% - %s / 2)" % $meatWidth
-  transition: all 150ms ease-in
-
-.burger__meat--1 
-  transform: translateY(-10px)
-
-.burger__meat--2
-  width: "calc(%s - 6px)" % $meatWidth
-
-.burger__meat--3
-  transform: translateY(10px)
-
-
-.nav--active .burger__meat--1 
-  transform: rotate(45deg)
-
-.nav--active .burger__meat--2
-  opacity: 0
-
-.nav--active .burger__meat--3
-  transform: rotate(-45deg)

src/styles/partials/_colors.styl

@@ -1,5 +0,0 @@
-$black      = #111
-$grey       = #9B9B9B
-$darkGrey   = #717171
-$white      = #fff
-$primary    = #9013FE

src/styles/partials/_github-syntax-highlighting.styl

@@ -1,89 +0,0 @@
-code[class*="language-"],
-pre[class*="language-"]  
-  color: #24292e
-  -moz-tab-size: 4
-  -o-tab-size: 4
-  tab-size: 4
-
-  -webkit-hyphens: none
-  -moz-hyphens: none
-  -ms-hyphens: none
-  hyphens: none
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata,
-.token.plain-text
-	color: #6a737d
-
-.token.atrule,
-.token.attr-value,
-.token.keyword,
-.token.operator
-	color: #d73a49
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted 
-  color: #22863a
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted 
-	color: #032f62
-
-
-.token.function,
-.token.class-name 
-	color: #6f42c1
-
-/* language-specific */
-
-/* JSX */
-.language-jsx .token.punctuation,
-.language-jsx .token.tag .token.punctuation,
-.language-jsx .token.tag .token.script,
-.language-jsx .token.plain-text
-  color: #24292e
-
-.language-jsx .token.tag .token.attr-name
-  color: #6f42c1
-
-.language-jsx .token.tag .token.class-name
-  color: #005cc5
-
-.language-jsx .token.tag .token.script-punctuation,
-.language-jsx .token.attr-value .token.punctuation:first-child
-  color: #d73a49
-
-.language-jsx .token.attr-value
-  color: #032f62
-
-.language-jsx span.[class="comment"]
-  color: pink
-
-/* HTML */
-.language-html .token.tag .token.punctuation
-  color: #24292e
-
-.language-html .token.tag .token.attr-name
-  color: #6f42c1
-
-.language-html .token.tag .token.attr-value,
-.language-html .token.tag .token.attr-value .token.punctuation:not(:first-child)
-  color: #032f62
-
-/* CSS */
-.language-css .token.selector 
-  color: #6f42c1
-
-.language-css .token.property
-  color: #005cc5

src/styles/partials/_nav.styl

@@ -1,69 +0,0 @@
-@import '_burger'
-
-.nav 
-  font-size: 16px
-  position: fixed
-  display: flex
-  justify-content: center
-  align-items: center
-  background: #fff
-  visibility: hidden
-  z-index: 1
-
-  @media screen and (min-width: $medium)
-    display: block
-    visibility: visible
-    padding-top: 3em
-    width: $navWidth
-
-.nav--active .nav
-  visibility: visible
-  height: 100%
-  width: 100%
-
-
-.nav__list
-  text-align: right
-  list-style: none
-  margin: 0
-  padding: 0
-  width: 50%
-
-  @media screen and (min-width: $medium)
-    width: auto
-
-  // Creates a drop-in animation when opening the mobile menu
-  @media screen and (max-width: $medium - 1)
-    transform: translateY(-25px)
-    opacity: 0
-    
-    .nav--active &
-      transform: translateY(0)
-      opacity: 1
-      transition: all 500ms ease
-
-
-.nav__list li
-  margin-bottom: 3em
-  line-height: 1.5em
-
-  &:last-of-type
-    margin-bottom: 0
-
-  @media screen and (min-width: $medium)
-    margin-bottom: 1.75em
-
-
-.nav__list a
-  color: $grey
-  text-decoration: none
-  font-size: 2em
-
-  &.active
-    color: $black
-    
-  &:hover
-    color: $black
-
-  @media screen and (min-width: $medium)
-    font-size: 1em

src/styles/partials/_normalize.styl

@@ -1,12 +0,0 @@
-button,
-button[type="button"],
-button[type="reset"],
-button[type="submit"] 
-  -webkit-appearance: button
-
-input,
-input[type=text],
-input[type=email]
-  -webkit-appearance: none
-  -moz-appearance: none
-  appearance: none

src/styles/partials/_pagination.styl

@@ -1,16 +0,0 @@
-.paginator-container
-  position: absolute
-  width: 100%
-  text-align: center
-
-.paginator
-  display: inline-block
-  height: 24px
-  width: 24px
-  margin: 0 1.5rem
-  background-image: url(/icons/chevron-left.svg)
-  background-size: contain
-  background-repeat: no-repeat
-  
-.paginator--right
-  transform: rotate(180deg)

src/styles/partials/_post-list.styl

@@ -1,27 +0,0 @@
-.post-list__container
-  margin: 0 auto
-  max-width: 1200px
-  width: 100%
-
-  @media screen and (min-width: $medium)
-    padding-left: 50px
-
-.post-list
-  list-style: none
-  margin: 0
-  padding: 0
-
-.post
-  margin-bottom: 1.5rem
-  
-.post__title 
-  margin-top: 0
-  font-weight: 500
-
-  a 
-    color: $black
-    text-decoration: none
-
-.post__date
-  color: $grey
-  font-size: 0.8rem

src/styles/partials/_reset.styl

@@ -1,15 +0,0 @@
-html,
-body 
-  background-color: $white
-  color: $black
-  height: 100%
-
-html
-  box-sizing: border-box
-  
-*,
-*:before,
-*:after
-  padding: 0
-  margin: 0
-  box-sizing: inherit 

src/styles/partials/_screenSizes.styl

@@ -1,2 +0,0 @@
-$medium = 800px
-$large = 1400px

src/styles/partials/_social-icons.styl

@@ -1,16 +0,0 @@
-.social-icons
-  display: flex
-  justify-content: center
-
-.social-icons__icon
-  width: 1.2rem
-  height: 1.2rem
-  background-size: contain
-  background-repeat: no-repeat
-
-.social-icons__icon--twitter
-  background-image: url(/icons/twitter.svg)
-  margin-right: 2rem
-
-.social-icons__icon--github
-  background-image: url(/icons/github.svg)

src/styles/partials/_typography.styl

@@ -1,106 +0,0 @@
-$baseFontSize = 16
-$fontSizeMobile = 14
-$baseLineHeight = 1.5
-$scale          = 1.414
-$leading        = $baseLineHeight * 1rem
- 
-html
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,Cantarell, "Helvetica Neue", sans-serif
-  -webkit-font-smoothing: antialiased
-  font-size: 95%
-
-  @media screen and (min-width: $medium)
-    font-size: 100%
-
-  @media screen and (min-width: $large)
-    font-size: 115%
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6
-  margin-top: $leading
-  margin-bottom: 0
-  line-height: $leading
-
-  code
-    // font-size: inherit
-
-h1
-  font-size: 1.5 * $scale * 1rem
-  line-height: 1.5 * $leading
-  margin-top: 1.5 * $leading
-
-h2
-  font-size: $scale * 1rem
-
-h3 
-  font-size: $scale / 2 * 1rem
-
-h4
-  font-size: $scale / 3 * 1rem
-
-h5
-  font-size: $scale / 4 * 1rem
-
-p
-  margin-top: $leading
-  margin-bottom: 0
-  line-height: $leading
-
-ul,
-ol
-  padding-left: $leading
-  margin-top: $leading
-  margin-bottom: $leading
-
-  li
-    line-height: $leading
-
-  ul,
-  ol
-    margin-top: 0
-    margin-bottom: 0
-
-blockquote
-  margin-top: $leading
-  margin-bottom: $leading
-  line-height: $leading
-  color: $darkGrey
-  font-style: italic
-
-pre
-  line-height: 1.45
-  margin-top: $leading
-  padding: 16px
-  word-wrap: normal
-  overflow: auto
-  background-color: #f6f8fa
-  border-radius: 3px
-
-code
-  font-size: 85%
-  font-family: "SFMono-Regular", Consolas, Menlo, monospace
-  padding: 0.2em 0.4em
-  margin: 0
-  background-color: rgba(27,31,35,0.05)
-  border-radius: 3px
-
-pre>code 
-  word-break: normal
-  white-space: pre
-
-pre code 
-  display: inline
-  padding: 0
-  margin: 0
-  overflow: visible
-  line-height: inherit
-  word-wrap: normal
-  background-color: transparent
-  border: 0
-
-.lead
-  font-size: $scale * 1rem

src/styles/partials/_vars.styl

@@ -1,7 +0,0 @@
-@import '_colors'
-@import '_screenSizes'
-
-$navWidth = 100px
-$meatWidth = 28px
-$meatHeight = 2px
-$burgerContainerHeight = 4rem

static/css/tags.css

@@ -1 +0,0 @@
-button,button[type="button"],button[type="reset"],button[type="submit"]{-webkit-appearance:button}input,input[type=text],input[type=email]{-webkit-appearance:none;-moz-appearance:none;appearance:none}html,body{background-color:#fff;color:#111;height:100%}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{padding:0;margin:0;-webkit-box-sizing:inherit;box-sizing:inherit}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;font-size:95%}@media screen and (min-width:800px){html{font-size:100%}}@media screen and (min-width:1400px){html{font-size:115%}}h1,h2,h3,h4,h5,h6{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}h1{font-size:2.121rem;line-height:2.25rem;margin-top:2.25rem}h2{font-size:1.414rem}h3{font-size:1.414/2rem}h4{font-size:1.414/3rem}h5{font-size:1.414/4rem}p{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}ul,ol{padding-left:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem}ul li,ol li{line-height:1.5rem}ul ul,ol ul,ul ol,ol ol{margin-top:0;margin-bottom:0}blockquote{margin-top:1.5rem;margin-bottom:1.5rem;line-height:1.5rem;color:#717171;font-style:italic}pre{line-height:1.45;margin-top:1.5rem;padding:16px;word-wrap:normal;overflow:auto;background-color:#f6f8fa;border-radius:3px}code{font-size:85%;font-family:"SFMono-Regular",Consolas,Menlo,monospace;padding:.2em .4em;margin:0;background-color:rgba(27,31,35,0.05);border-radius:3px}pre>code{word-break:normal;white-space:pre}pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.lead{font-size:1.414rem}.burger__container{height:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 1.5rem;position:fixed;width:100%;background:#fff;z-index:2}@media screen and (min-width:800px){.burger__container{display:none}}.burger{position:relative;width:28px;height:28px;cursor:pointer}.burger__meat{position:absolute;width:28px;height:2px;background:#111;top:calc(50% - 2px / 2);left:calc(50% - 28px / 2);-webkit-transition:all 150ms ease-in;transition:all 150ms ease-in}.burger__meat--1{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.burger__meat--2{width:calc(28px - 6px)}.burger__meat--3{-webkit-transform:translateY(10px);transform:translateY(10px)}.nav--active .burger__meat--1{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nav--active .burger__meat--2{opacity:0}.nav--active .burger__meat--3{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.nav{font-size:16px;position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#fff;visibility:hidden;z-index:1}@media screen and (min-width:800px){.nav{display:block;visibility:visible;padding-top:3em;width:100px}}.nav--active .nav{visibility:visible;height:100%;width:100%}.nav__list{text-align:right;list-style:none;margin:0;padding:0;width:50%}@media screen and (min-width:800px){.nav__list{width:auto}}@media screen and (max-width:799px){.nav__list{-webkit-transform:translateY(-25px);transform:translateY(-25px);opacity:0}.nav--active .nav__list{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 500ms ease;transition:all 500ms ease}}.nav__list li{margin-bottom:3em;line-height:1.5em}.nav__list li:last-of-type{margin-bottom:0}@media screen and (min-width:800px){.nav__list li{margin-bottom:1.75em}}.nav__list a{color:#9b9b9b;text-decoration:none;font-size:2em}.nav__list a.active{color:#111}.nav__list a:hover{color:#111}@media screen and (min-width:800px){.nav__list a{font-size:1em}}body.nav--active{overflow:hidden}main{padding:3rem 1.5rem}@media screen and (min-width:800px){main{padding-left:calc(1.5rem + 100px)}}@media screen and (max-width:799px){main{padding-top:calc(3rem + 4rem)}}.post-list__container{margin:0 auto;max-width:1200px;width:100%}@media screen and (min-width:800px){.post-list__container{padding-left:50px}}.post-list{list-style:none;margin:0;padding:0}.post{margin-bottom:1.5rem}.post__title{margin-top:0;font-weight:500}.post__title a{color:#111;text-decoration:none}.post__date{color:#9b9b9b;font-size:.8rem}.tag__header{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;margin-bottom:3rem}.tag__header a,.tag__header .separator{color:#9b9b9b;font-size:1.5rem}.tag__header a{text-decoration:none}.tag__header .separator{-ms-flex-item-align:center;align-self:center;margin:0 5px}.tag__header .tag__term{margin:0;font-weight:600}

static/js/index.js

@@ -1,20 +0,0 @@
-"use strict";
-
-/*
- * Handles mobile nav
- */
-function toggleMobileNavState() {
-  var body = document.querySelector("body");
-  body.classList.toggle("nav--active");
-}
-/*
- * Initializes burger functionality
- */
-
-
-function initBurger() {
-  var burger = document.querySelector(".burger");
-  burger.addEventListener("click", toggleMobileNavState);
-}
-
-initBurger();