diff --git a/.gitignore b/.gitignore
index 98c941634..5532942c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,7 @@ Thumbs.db
# IDEs
.vscode
+
+# Hugo
+**/resources/_gen
public/
diff --git a/README.md b/README.md
index eebae5cf1..bd89b91d4 100644
--- a/README.md
+++ b/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.
diff --git a/src/js/index.js b/assets/js/index.js
similarity index 100%
rename from src/js/index.js
rename to assets/js/index.js
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
new file mode 100644
index 000000000..ba7efc10f
--- /dev/null
+++ b/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});
+ }
+}
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/assets/scss/pages/about.scss b/assets/scss/pages/about.scss
new file mode 100644
index 000000000..6420ab28f
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/pages/post.scss b/assets/scss/pages/post.scss
new file mode 100644
index 000000000..f6fc41874
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/pages/posts.scss b/assets/scss/pages/posts.scss
new file mode 100644
index 000000000..8b06dd1d2
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/pages/tags.scss b/assets/scss/pages/tags.scss
new file mode 100644
index 000000000..31c2d7f52
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/assets/scss/partials/_burger.scss b/assets/scss/partials/_burger.scss
new file mode 100644
index 000000000..433830624
--- /dev/null
+++ b/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);
+}
diff --git a/assets/scss/partials/_colors.scss b/assets/scss/partials/_colors.scss
new file mode 100644
index 000000000..fd1ccba7f
--- /dev/null
+++ b/assets/scss/partials/_colors.scss
@@ -0,0 +1,5 @@
+$black: #111;
+$grey: #9B9B9B;
+$darkGrey: #717171;
+$white: #fff;
+$primary: #9013FE;
diff --git a/assets/scss/partials/_github-syntax-highlighting.scss b/assets/scss/partials/_github-syntax-highlighting.scss
new file mode 100644
index 000000000..b7c7a7fd6
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/partials/_nav.scss b/assets/scss/partials/_nav.scss
new file mode 100644
index 000000000..7a4f8482e
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/assets/scss/partials/_normalize.scss b/assets/scss/partials/_normalize.scss
new file mode 100644
index 000000000..2278ddc81
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/partials/_pagination.scss b/assets/scss/partials/_pagination.scss
new file mode 100644
index 000000000..0b0129340
--- /dev/null
+++ b/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);
+}
diff --git a/assets/scss/partials/_post-list.scss b/assets/scss/partials/_post-list.scss
new file mode 100644
index 000000000..544bf7071
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/partials/_reset.scss b/assets/scss/partials/_reset.scss
new file mode 100644
index 000000000..7bf1d099a
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/partials/_screenSizes.scss b/assets/scss/partials/_screenSizes.scss
new file mode 100644
index 000000000..52a3d44c4
--- /dev/null
+++ b/assets/scss/partials/_screenSizes.scss
@@ -0,0 +1,2 @@
+$medium: 800px;
+$large: 1400px;
diff --git a/assets/scss/partials/_social-icons.scss b/assets/scss/partials/_social-icons.scss
new file mode 100644
index 000000000..2918b012b
--- /dev/null
+++ b/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);
+}
diff --git a/assets/scss/partials/_typography.scss b/assets/scss/partials/_typography.scss
new file mode 100644
index 000000000..0619c000e
--- /dev/null
+++ b/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;
+}
diff --git a/assets/scss/partials/_vars.scss b/assets/scss/partials/_vars.scss
new file mode 100644
index 000000000..4407877d9
--- /dev/null
+++ b/assets/scss/partials/_vars.scss
@@ -0,0 +1,7 @@
+@import '_colors';
+@import '_screenSizes';
+
+$navWidth: 100px;
+$meatWidth: 28px;
+$meatHeight: 2px;
+$burgerContainerHeight: 4rem;
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index 1f293fb56..000000000
--- a/gulpfile.js
+++ /dev/null
@@ -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"));
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3209aad87..672be00d4 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -26,7 +26,19 @@
{{ end }}
- {{ block "stylesheets" . }} {{ end }}
+
+
+ {{ block "styles" . }} {{ end }}
+ {{ $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 }}
+
+ {{ end }}
+
{{ range .AlternativeOutputFormats }}
{{ printf `` .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }}
{{ end }}
@@ -45,7 +57,8 @@
{{ block "footer" . }} {{ end }}
-
+ {{ $script := resources.Get "js/index.js" | minify | fingerprint }}
+
{{ block "scripts" . }} {{ end }}