migrate to SCSS
This commit is contained in:
kentnek
parent
07b5416e26
commit
d251fde9fb
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
* Handles mobile nav
|
||||
*/
|
||||
|
||||
function toggleMobileNavState() {
|
||||
const body = document.querySelector("body");
|
||||
body.classList.toggle("nav--active");
|
||||
}
|
||||
|
||||
/*
|
||||
* Initializes burger functionality
|
||||
*/
|
||||
|
||||
function initBurger() {
|
||||
const burger = document.querySelector(".burger");
|
||||
burger.addEventListener("click", toggleMobileNavState);
|
||||
}
|
||||
|
||||
initBurger();
|
||||
|
|
@ -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});
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
$black: #111;
|
||||
$grey: #9B9B9B;
|
||||
$darkGrey: #717171;
|
||||
$white: #fff;
|
||||
$primary: #9013FE;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
$medium: 800px;
|
||||
$large: 1400px;
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
@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;
|
||||
|
||||
code {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import '_colors';
|
||||
@import '_screenSizes';
|
||||
|
||||
$navWidth: 100px;
|
||||
$meatWidth: 28px;
|
||||
$meatHeight: 2px;
|
||||
$burgerContainerHeight: 4rem;
|
||||
45
gulpfile.js
45
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"));
|
||||
|
|
@ -26,7 +26,17 @@
|
|||
{{ end }}
|
||||
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
|
||||
{{ block "stylesheets" . }} {{ end }}
|
||||
|
||||
<!-- Styles -->
|
||||
{{ block "styles" . }} {{ end }} <!-- Get "style_path" variable from "styles" block -->
|
||||
{{ $base_styles := .Scratch.Get "style_path" | default "scss/pages/about.scss" }}
|
||||
{{ $custom_styles := "scss/custom.scss" }}
|
||||
|
||||
{{ range (slice $base_styles $custom_styles) }}
|
||||
{{ $style := resources.Get . | 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 +55,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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
{{ define "stylesheets" }}
|
||||
<link rel="stylesheet" href="/css/posts.css" />
|
||||
{{ define "styles" }}
|
||||
{{ $.Scratch.Set "style_path" "scss/pages/posts.scss" }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ define "main" }}
|
||||
|
||||
<div class="post-list__container">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
{{ define "stylesheets" }}
|
||||
<link rel="stylesheet" href="/css/post.css" />
|
||||
{{ define "styles" }}
|
||||
{{ $.Scratch.Set "style_path" "scss/pages/post.scss" }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ define "main" }}
|
||||
<div class="post">
|
||||
<header class="post__header">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "stylesheets" }}
|
||||
<link rel="stylesheet" href="/css/about.css" />
|
||||
{{ define "styles" }}
|
||||
{{ $.Scratch.Set "style_path" "scss/pages/about.scss" }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "links" }}
|
||||
<link rel="stylesheet" href="/css/tags.css" />
|
||||
{{ define "styles" }}
|
||||
{{ $.Scratch.Set "style_path" "scss/pages/tags.scss" }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
15
package.json
15
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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue