feat: add asset pipepline
This commit is contained in:
Jake Wiesler
parent
93d3108f28
commit
f2d4ad2e83
|
|
@ -1,3 +1,4 @@
|
|||
node_modules
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
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("vendor", function () {
|
||||
return gulp.src("src/vendor/**/**").pipe(gulp.dest("static/vendor"));
|
||||
});
|
||||
|
||||
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", "vendor"));
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "hugo-theme-codex",
|
||||
"version": "0.2.0",
|
||||
"author": "Jake Wiesler",
|
||||
"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"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 2 version",
|
||||
"> 2%"
|
||||
],
|
||||
"homepage": "https://github.com/jakewies/hugo-theme-codex",
|
||||
"bugs": "https://github.com/jakewies/hugo-theme-codex/issues",
|
||||
"keywords": [
|
||||
"hugo",
|
||||
"blog",
|
||||
"go"
|
||||
]
|
||||
}
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
*/
|
||||
|
||||
function toggleMobileNavState() {
|
||||
const body = document.querySelector('body')
|
||||
body.classList.toggle('nav--active')
|
||||
const body = document.querySelector("body");
|
||||
body.classList.toggle("nav--active");
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -12,8 +12,8 @@ function toggleMobileNavState() {
|
|||
*/
|
||||
|
||||
function initBurger() {
|
||||
const burger = document.querySelector('.burger')
|
||||
burger.addEventListener('click', toggleMobileNavState)
|
||||
const burger = document.querySelector(".burger");
|
||||
burger.addEventListener("click", toggleMobileNavState);
|
||||
}
|
||||
|
||||
initBurger()
|
||||
initBurger();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@import '../_main'
|
||||
@import '../partials/_social-icons'
|
||||
@import '../partials/_github-syntax-highlighting'
|
||||
@import '../partials/_newsletter-signup'
|
||||
|
||||
.post
|
||||
width: 100%
|
||||
|
|
@ -200,6 +199,3 @@ footer
|
|||
.twitter-tweet.twitter-tweet-rendered
|
||||
margin: 1.5rem auto!important
|
||||
width: 375px!important
|
||||
|
||||
.newsletter__buttondown-link
|
||||
display: none
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,412 +1 @@
|
|||
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
|
||||
}
|
||||
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}
|
||||
|
|
@ -1,21 +1,20 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
/*
|
||||
* Handles mobile nav
|
||||
*/
|
||||
|
||||
function toggleMobileNavState() {
|
||||
var body = document.querySelector('body');
|
||||
body.classList.toggle('nav--active');
|
||||
var body = document.querySelector("body");
|
||||
body.classList.toggle("nav--active");
|
||||
}
|
||||
|
||||
/*
|
||||
* Initializes burger functionality
|
||||
*/
|
||||
|
||||
|
||||
function initBurger() {
|
||||
var burger = document.querySelector('.burger');
|
||||
burger.addEventListener('click', toggleMobileNavState);
|
||||
var burger = document.querySelector(".burger");
|
||||
burger.addEventListener("click", toggleMobileNavState);
|
||||
}
|
||||
|
||||
initBurger();
|
||||
Loading…
Reference in New Issue