From 6aa688c62e2c7672739f8a59ded39078452634c4 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Tue, 8 Oct 2019 09:28:53 -0400 Subject: [PATCH] split up SCSS files --- README.md | 12 +- assets/sass/abstracts/_functions.scss | 13 + assets/sass/abstracts/_variables.scss | 58 ++ assets/sass/components/_syntax.scss | 32 + assets/sass/components/_wave.scss | 12 + assets/sass/main.scss | 21 + assets/sass/pages/_global.scss | 35 ++ assets/sass/pages/_home.scss | 134 +++++ assets/sass/pages/_notes.scss | 290 +++++++++ assets/sass/pages/responsive/_global.scss | 17 + assets/sass/pages/responsive/_home.scss | 45 ++ assets/sass/pages/responsive/_notes.scss | 52 ++ assets/style.scss | 680 ---------------------- layouts/partials/header.html | 2 +- static/humans.txt | 6 +- 15 files changed, 719 insertions(+), 690 deletions(-) create mode 100644 assets/sass/abstracts/_functions.scss create mode 100644 assets/sass/abstracts/_variables.scss create mode 100644 assets/sass/components/_syntax.scss create mode 100644 assets/sass/components/_wave.scss create mode 100644 assets/sass/main.scss create mode 100644 assets/sass/pages/_global.scss create mode 100644 assets/sass/pages/_home.scss create mode 100644 assets/sass/pages/_notes.scss create mode 100644 assets/sass/pages/responsive/_global.scss create mode 100644 assets/sass/pages/responsive/_home.scss create mode 100644 assets/sass/pages/responsive/_notes.scss delete mode 100644 assets/style.scss diff --git a/README.md b/README.md index 94fdf4c3..f04b1ee6 100644 --- a/README.md +++ b/README.md @@ -4,17 +4,17 @@ Personal website of [@jakejarvis](https://github.com/jakejarvis), created and deployed using the following: -- [Hugo](https://github.com/gohugoio/hugo) -- [GitHub Actions](.github/workflows) +- [Hugo extended](https://github.com/gohugoio/hugo) - [GitHub Pages](https://pages.github.com/) -- [Matomo Analytics](https://matomo.org/) +- [GitHub Actions](.github/workflows) +- [Matomo](https://matomo.org/) I keep an ongoing list of [blog post ideas](https://github.com/jakejarvis/jarv.is/issues/1) as an issue in this repo. ## Running a local testing server with Docker -This site runs a [custom version](https://github.com/jakejarvis/hugo) of [Hugo Extended](https://github.com/gohugoio/hugo) with a few (very opinionated) changes. To ensure consistency, the `Dockerfile` in this repository will pull my [pre-built](https://go.jarv.is/30KA6DS) Hugo fork (forked from `v0.53-DEV`, [gohugo/hugo@`a28865c`](https://github.com/gohugoio/hugo/tree/a28865cfc3e296cf0ddd0bd6c1368fcdb2154d0f)) and run a live testing server. +This site runs a [custom version](https://github.com/jakejarvis/hugo) of [Hugo Extended](https://github.com/gohugoio/hugo) with a few (very opinionated) changes. To ensure consistency, the [`Dockerfile`](Dockerfile) in this repository will build my Hugo fork (forked from `v0.53-DEV`, [gohugo/hugo@`a28865c`](https://github.com/gohugoio/hugo/tree/a28865cfc3e296cf0ddd0bd6c1368fcdb2154d0f)) and run a live testing server. Run these commands on the root of this repository: @@ -28,10 +28,10 @@ docker run -v $(pwd):/src -p 1313:1313 jarv.is:develop ## Licenses -![Creative Commons Attribution 4.0 International License](https://github.com/creativecommons/cc-cert-core/blob/master/images/cc-by-88x31.png "CC BY") +![Creative Commons Attribution 4.0 International License](https://raw.githubusercontent.com/creativecommons/cc-cert-core/master/images/cc-by-88x31.png "CC BY") Site content (everything in [`content/notes`](content/notes/)) is published under the [Creative Commons Attribution 4.0 International License](LICENSE.md) (CC-BY-4.0), which means that you can copy, redistribute, remix, transform, and build upon the content for any purpose as long as you give appropriate credit. -All code in this repository (such as my [Hugo theme](layouts/)) is published under the [MIT license](https://opensource.org/licenses/MIT), except the customized Hugo fork which retains Hugo's [original Apache-2.0 license](https://github.com/gohugoio/hugo/blob/master/LICENSE). +All code in this repository (like my [Hugo theme](layouts/)) is published under the [MIT license](https://opensource.org/licenses/MIT), except the customized Hugo fork in the [`Dockerfile`](Dockerfile) which retains Hugo's [original Apache-2.0 license](https://github.com/gohugoio/hugo/blob/master/LICENSE). Everything else (such as the press articles and videos in [`misc`](misc/)) belongs to its respective owner(s) under the original license/copyright. diff --git a/assets/sass/abstracts/_functions.scss b/assets/sass/abstracts/_functions.scss new file mode 100644 index 00000000..e7fab7ee --- /dev/null +++ b/assets/sass/abstracts/_functions.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// Gradient hack to get our custom underline to wrap: +// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ +@function underline-hack($color) { + // Calculate lighter underline color compared to text color by + // mix()'ing with background (#fff) to give the impression of + // opacity but with MUCH better compatibility. + $color-opaque: mix($color, $color-background, $link-opacity); + + // Return non-gradient linear-gradient(): + @return linear-gradient($color-opaque, $color-opaque); +} diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss new file mode 100644 index 00000000..c7579b67 --- /dev/null +++ b/assets/sass/abstracts/_variables.scss @@ -0,0 +1,58 @@ +@charset "UTF-8"; + +// Global Colors +$color-background: #ffffff; +$color-text: #222222; +$color-light: #666666; +$color-medium-light: #757575; +$color-super-light: #dddddd; +$color-super-duper-light: #f4f4f4; +$color-links: #0e6dc2; + +// Colorful Homepage +$colors-home:( + boston: #fb4d42, + javascript: #f48024, + node: #6fbc4e, + golang: #00acd7, + react: #4fb3cd, + angular: #c3002f, + vue: #486491, + java: #ab6311, + cpp: #865fc5, + python: #fea500, + php: #8892bf, + ruby: #d34135, + infosec: #00b81a, + server: #0098ec, + devops: #ff6200, + containers: #c48f49, + y2k: #4169e1, + jbb: #9932cc, + birthday: #e40088, + github: #8d4eff, + linkedin: #0073b1, + facebook: #4267b2, + twitter: #00acee, + dm: #00acee, + instagram: #a37754, + mastodon: #6d8ca7, + resume: #d54b3d, + email: #de0c0c, + pgp: #757575, + sms: #6fcc01, + news-1: #ff1b1b, + news-2: #f78200, + news-3: #f2b702, + news-4: #5ebd3e, + news-5: #009cdf, + news-6: #3e49bb, + news-7: #973999 +); +$color-serverless: #87cef7; + +// Other Settings +$link-opacity: 40%; +$link-underline-size: 2px; + +$responsive-width: 890px; diff --git a/assets/sass/components/_syntax.scss b/assets/sass/components/_syntax.scss new file mode 100644 index 00000000..6b9fa259 --- /dev/null +++ b/assets/sass/components/_syntax.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +/*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */ +div.highlight span { + &.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no { + color: #03748a; + } + &.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p { + color: #111111; + } + &.na, &.nc, &.nd, &.ne, &.nf, &.nx { + color: #489c44; + } + &.err, &.nt, &.o, &.ow, &.kn { + color: #e8003d; + } + &.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo { + color: #8145ec; + } + &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss { + color: #c17005; + } + &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf { + color: #6b6859; + } + &.ge { + font-style: italic; + } + &.gs { + font-weight: bold; + } +} diff --git a/assets/sass/components/_wave.scss b/assets/sass/components/_wave.scss new file mode 100644 index 00000000..63df0cfa --- /dev/null +++ b/assets/sass/components/_wave.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +/*! Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/ */ +@keyframes wave { + 0% { transform: rotate( 0.0deg); } + 10% { transform: rotate(-10.0deg); } + 20% { transform: rotate( 12.0deg); } + 30% { transform: rotate(-10.0deg); } + 40% { transform: rotate( 9.0deg); } + 50% { transform: rotate( 0.0deg); } +100% { transform: rotate( 0.0deg); } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 00000000..e906fb5f --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; + +/*! Compiled CSS from SASS: https://git.io/JeC7I */ + +// Variables & Functions +@import 'abstracts/variables'; +@import 'abstracts/functions'; + +// Global Styles +@import 'pages/global'; + +// Pages +@import 'pages/home'; +@import 'pages/notes'; + +// Responsive Pages +@import 'pages/responsive/global'; + +// Miscellaneous +@import 'components/syntax'; +@import 'components/wave'; diff --git a/assets/sass/pages/_global.scss b/assets/sass/pages/_global.scss new file mode 100644 index 00000000..7eeae736 --- /dev/null +++ b/assets/sass/pages/_global.scss @@ -0,0 +1,35 @@ +@charset "UTF-8"; + +// Global Styles +body { + width: 100%; + height: 100%; + margin: 0 auto; + background-color: $color-background; + color: $color-text; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + box-sizing: border-box; + + a { + color: $color-links; + text-decoration: none; + background-image: underline-hack($color-links); + background-position: 0% 100%; + background-repeat: no-repeat; + background-size: 0% $link-underline-size; + padding-bottom: $link-underline-size; + transition: background-size 0.25s ease-in-out; + + &:hover { + text-decoration: none; + background-size: 100% $link-underline-size; + } + + &.no-underline { + background: none !important; + } + } +} diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss new file mode 100644 index 00000000..34205c03 --- /dev/null +++ b/assets/sass/pages/_home.scss @@ -0,0 +1,134 @@ +@charset "UTF-8"; + +// Home Styles +body#home { + font-size: 1.5em; + font-weight: 300; + line-height: 1.5; + max-width: 1070px; + padding: 50px 65px; + + h1 { + margin: 0; + font-size: 1.5em; + font-weight: 500; + line-height: 1.2; + + a { + color: inherit; + } + } + + h2 { + margin: 0.6em 0; + font-size: 1.2em; + font-weight: 400; + line-height: 1.4; + } + + p { + margin: 0.8em 0; + } + + sup { + top: -0.5em; + font-size: 0.5em; + line-height: 0; + position: relative; + vertical-align: middle; + } + + img#me { + float: right; + margin: 0 0 0.75em 0.75em; + padding: 4px; + border: 1px solid $color-super-light; + width: 160px; + height: 160px; + } + + a { + // Loop through $colors-home -- the main reason I switched to SASS :) + @each $id, $color in $colors-home { + &##{$id} { + color: $color; + background-image: underline-hack($color); + } + } + } + + // easter egg emoji cursor + a#birthday { + &:hover { + cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto; + } + } + + // non-link colors + span { + &#serverless { + color: $color-serverless; + } + + &#shh { + color: $color-medium-light; + } + } + + footer { + height: 1.7em; + + div { + float: left; + vertical-align: middle; + height: 100%; + + &#blog { + width: 40%; + text-align: left; + font-size: 0.9em; + line-height: 1.8; + } + + &#panda { + width: 20%; + text-align: center; + font-size: 1.25em; + line-height: 1.5; + + a { + display: inline-block; + transition: transform 0.2s ease-in-out; + + &:hover { + transform: scale(1.6) rotate(10deg); + } + } + } + + &#info { + width: 40%; + text-align: right; + font-size: 0.55em; + line-height: 3.2; + color: $color-light; + + a { + color: inherit; + + &#source { + border-bottom: 1px solid $color-super-light; + } + } + } + } + } + + h1 span#wave { + display: inline-block; + animation-name: wave; + animation-duration: 2.5s; + animation-iteration-count: infinite; + transform-origin: 70% 70%; + } +} diff --git a/assets/sass/pages/_notes.scss b/assets/sass/pages/_notes.scss new file mode 100644 index 00000000..a7452508 --- /dev/null +++ b/assets/sass/pages/_notes.scss @@ -0,0 +1,290 @@ +@charset "UTF-8"; + +// Blog Styles +body#notes { + line-height: 1.5; + font-weight: 400; + max-width: 1010px; + padding: 35px 50px; + + header { + margin-bottom: 1.75em; + + a { + &#more { + font-size: 1.25em; + } + + &#logo { + img, + svg { + height: 150px; + width: 100px; + margin: 1.5em auto; + display: block; + } + } + } + } + + footer { + border-top: 1px solid $color-super-light; + height: 1.7em; + line-height: 1.7; + padding-top: 1.5em; + margin-top: 2em; + color: $color-light; + + a { + color: inherit; + } + + div { + float: left; + vertical-align: middle; + + &#copyright, + &#poweredby { + width: 40%; + font-size: 0.85em; + line-height: 2; + } + + &#copyright { + text-align: left; + } + + &#poweredby { + text-align: right; + + a#source { + border-bottom: 1px solid $color-super-light; + } + } + + &#panda { + width: 20%; + text-align: center; + font-size: 1.7em; + line-height: 1; + + a { + display: inline-block; + transition: transform 0.2s ease-in-out; + + &:hover { + transform: scale(1.6) rotate(10deg); + } + } + } + } + } + + main { + &#single article div { + &#info { + text-align: center; + + h1 { + margin-top: 0; + margin-bottom: 0.3em; + font-size: 2em; + line-height: 1.4; + + a { + color: inherit; + } + } + } + + &#meta { + color: $color-light; + font-size: 0.85em; + line-height: 1.5; + letter-spacing: 1px; + + a { + color: inherit; + } + + div#tags { + text-transform: uppercase; + letter-spacing: 2px; + margin-top: 0.5em; + + span.tag { + margin: 0 0.6em; + } + } + } + + &#content { + line-height: 1.8; + + h1, + h2, + h3 { + margin-top: 0.9em; + margin-bottom: 0.5em; + font-weight: 500; + line-height: 1.5; + } + + img { + max-width: 100%; + margin: 0 auto; + display: block; + } + + // image captions -- two different markdown hacks + img + em, + figure figcaption { + display: block; + font-size: 0.9em; + font-style: normal; + color: $color-light; + text-align: center; + margin-top: 0.4em; + } + + blockquote { + border-left: 5px solid $color-links; + margin-left: 0.5em; + padding-left: 1em; + } + + ul { + list-style-position: outside; + list-style-type: square; + margin-left: 1.5em; + padding-left: 0; + + li { + padding-left: 0.25em; + } + } + + hr { + width: 60%; + margin: 0.75em auto; + border: 1px solid $color-super-light; + } + + video.embed { + display: block; + margin: 0 auto; + } + + div.embed.video-player { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + + iframe.youtube-player { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + display: inline-block; + } + } + + twitter-widget { + margin: 0 auto; + display: block; + } + + code { + // https://markdotto.com/2018/02/07/github-system-fonts/ + font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; + font-size: 0.9em; + padding: 0.2em; + background: $color-super-duper-light; + border: 1px solid $color-super-light; + } + + pre code { + display: block; + padding: 1em 1.5em; + line-height: 1.6; + border-left: 3px solid $color-links; + max-width: 100%; + overflow-x: scroll; + page-break-inside: avoid; + object-fit: scale-down; + } + } + + &#commento { + border-top: 1px solid #ccc; + padding-top: 1.5em; + margin-top: 1.5em; + + // disable link underline effect in comments + a { + background: none; + + &:hover { + text-decoration: underline; + } + } + + div.commento-body { + a { + color: $color-links; + } + } + + div#commento-footer { + display: none; + } + } + } + + &#archive section.year { + ul { + list-style-type: none; + padding-left: 0; + display: block; + } + + li { + &::after { + content: ''; + display: block; + clear: both; + } + + &:last-child { + margin-bottom: 1.8em; + } + + + li { + margin-top: 1.3em; + } + } + + h2 { + font-size: 1.8em; + } + + div { + font-size: 1.1em; + + &.date { + float: left; + width: 5.25em; + color: $color-light; + } + + &.title { + float: left; + width: calc(100% - 5.25em); + } + } + } + } +} diff --git a/assets/sass/pages/responsive/_global.scss b/assets/sass/pages/responsive/_global.scss new file mode 100644 index 00000000..38ab098d --- /dev/null +++ b/assets/sass/pages/responsive/_global.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// Responsive Awesomeness +@media screen and (max-width: $responsive-width) { + body { + // Safari iOS menu bar reappers below 44px: + // https://www.eventbrite.com/engineering/mobile-safari-why/ + padding-bottom: 50px !important; + // Allows content to fill the viewport and go beyond the bottom + height: 100%; + // Allows you to scroll below the viewport; default value is visible + overflow-y: scroll; + } + + @import 'home'; + @import 'notes'; +} diff --git a/assets/sass/pages/responsive/_home.scss b/assets/sass/pages/responsive/_home.scss new file mode 100644 index 00000000..f2404b6e --- /dev/null +++ b/assets/sass/pages/responsive/_home.scss @@ -0,0 +1,45 @@ +@charset "UTF-8"; + +// Responsive Home +body#home { + font-size: 1em; + padding: 25px; + + p { + font-size: 1.1em; + } + + img#me { + width: 68px; + height: 68px; + padding: 2px; + } + + footer div { + line-height: 1.7; + + &#panda { + display: none; + } + + &#blog, + &#info { + width: 50%; + } + + &#blog { + font-size: 1em; + line-height: 1.5; + } + + &#info { + font-size: 0.7em; + line-height: 2; + + span#copyright::after { + content: "\A"; + white-space: pre; + } + } + } +} diff --git a/assets/sass/pages/responsive/_notes.scss b/assets/sass/pages/responsive/_notes.scss new file mode 100644 index 00000000..854b774c --- /dev/null +++ b/assets/sass/pages/responsive/_notes.scss @@ -0,0 +1,52 @@ +@charset "UTF-8"; + +// Responsive Blog +body#notes { + padding: 20px; + width: 100%; + max-width: 100%; + + header { + margin-bottom: 1.3em; + + a#logo { + img, + svg { + height: 75px; + width: 50px; + } + } + } + + footer div { + &#panda { + display: none; + } + + &#copyright, + &#poweredby { + line-height: 1.8; + width: 50%; + } + + &#poweredby { + a#hugo::after { + content: "\A"; + white-space: pre; + } + } + } + + main#archive section.year div { + font-size: 1em; + } + + main#single article { + width: 100%; + max-width: 100%; + + div#info h1 { + font-size: 1.7em; + } + } +} diff --git a/assets/style.scss b/assets/style.scss deleted file mode 100644 index a40daf5a..00000000 --- a/assets/style.scss +++ /dev/null @@ -1,680 +0,0 @@ -/*! Compiled CSS from SASS: https://go.jarv.is/sass-source */ - -// Global Colors -$color-background: #ffffff; -$color-text: #222222; -$color-light: #666666; -$color-medium-light: #757575; -$color-super-light: #dddddd; -$color-super-duper-light: #f4f4f4; -$color-links: #0e6dc2; - -// Colorful Homepage -$colors-home:( - boston: #fb4d42, - javascript: #f48024, - node: #6fbc4e, - golang: #00acd7, - react: #4fb3cd, - angular: #c3002f, - vue: #486491, - java: #ab6311, - cpp: #865fc5, - python: #fea500, - php: #8892bf, - ruby: #d34135, - infosec: #00b81a, - server: #0098ec, - devops: #ff6200, - containers: #c48f49, - y2k: #4169e1, - jbb: #9932cc, - birthday: #e40088, - github: #8d4eff, - linkedin: #0073b1, - facebook: #4267b2, - twitter: #00acee, - dm: #00acee, - instagram: #a37754, - mastodon: #6d8ca7, - resume: #d54b3d, - email: #de0c0c, - pgp: #757575, - sms: #6fcc01, - news-1: #ff1b1b, - news-2: #f78200, - news-3: #f2b702, - news-4: #5ebd3e, - news-5: #009cdf, - news-6: #3e49bb, - news-7: #973999 -); -$color-serverless: #87cef7; - -// Other Settings -$link-opacity: 40%; -$link-underline-size: 2px; - -// Gradient hack to get our custom underline to wrap: -// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ -@function underline-hack($color) { - // Calculate lighter underline color compared to text color by - // mix()'ing with background (#fff) to give the impression of - // opacity but with MUCH better compatibility. - $color-opaque: mix($color, $color-background, $link-opacity); - - // Return non-gradient linear-gradient(): - @return linear-gradient($color-opaque, $color-opaque); -} - - -// Global Styles -body { - width: 100%; - height: 100%; - margin: 0 auto; - background-color: $color-background; - color: $color-text; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-weight: 300; - box-sizing: border-box; - - a { - color: $color-links; - text-decoration: none; - background-image: underline-hack($color-links); - background-position: 0% 100%; - background-repeat: no-repeat; - background-size: 0% $link-underline-size; - padding-bottom: $link-underline-size; - transition: background-size 0.25s ease-in-out; - - &:hover { - text-decoration: none; - background-size: 100% $link-underline-size; - } - - &.no-underline { - background: none !important; - } - } - - // Home Styles - &#home { - font-size: 1.5em; - line-height: 1.5; - max-width: 1070px; - padding: 50px 65px; - - h1 { - margin: 0; - font-size: 1.5em; - font-weight: 500; - line-height: 1.2; - - a { - color: inherit; - } - } - - h2 { - margin: 0.6em 0; - font-size: 1.2em; - font-weight: 400; - line-height: 1.4; - } - - p { - margin: 0.8em 0; - } - - sup { - top: -0.5em; - font-size: 0.5em; - line-height: 0; - position: relative; - vertical-align: middle; - } - - img#me { - float: right; - margin: 0 0 0.75em 0.75em; - padding: 4px; - border: 1px solid $color-super-light; - width: 160px; - height: 160px; - } - - a { - // Loop through $colors-home -- the main reason I switched to SASS :) - @each $id, $color in $colors-home { - &##{$id} { - color: $color; - background-image: underline-hack($color); - } - } - } - - // easter egg emoji cursor - a#birthday { - &:hover { - cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto; - } - } - - // non-link colors - span { - &#serverless { - color: $color-serverless; - } - - &#shh { - color: $color-medium-light; - } - } - - footer { - margin: 0; - height: 1.7em; - - div { - float: left; - vertical-align: middle; - height: 100%; - - &#blog { - width: 40%; - text-align: left; - font-size: 0.9em; - line-height: 1.8; - } - - &#panda { - width: 20%; - text-align: center; - font-size: 1.25em; - line-height: 1.5; - - a { - display: inline-block; - transition: transform 0.2s ease-in-out; - - &:hover { - transform: scale(1.6) rotate(10deg); - } - } - } - - &#info { - width: 40%; - font-size: 0.55em; - line-height: 3.2; - color: $color-light; - text-align: right; - - a { - color: inherit; - - &#source { - border-bottom: 1px solid $color-super-light; - } - } - } - } - } - - h1 span#wave { - display: inline-block; - animation-name: wave; - animation-duration: 2.5s; - animation-iteration-count: infinite; - transform-origin: 70% 70%; - } - } - - // Blog Styles - &#notes { - line-height: 1.5; - font-weight: 400; - max-width: 1010px; - padding: 35px 50px; - - header { - margin-bottom: 1.75em; - - a { - &#more { - font-size: 1.25em; - } - - &#logo { - img, - svg { - height: 150px; - width: 100px; - margin: 1.5em auto; - display: block; - } - } - } - } - - footer { - border-top: 1px solid $color-super-light; - height: 1.7em; - line-height: 1.7; - padding-top: 1.5em; - margin-top: 2em; - color: $color-light; - - a { - color: inherit; - } - - div { - float: left; - vertical-align: middle; - - &#copyright, - &#poweredby { - width: 40%; - font-size: 0.85em; - line-height: 2; - } - - &#copyright { - text-align: left; - } - - &#poweredby { - text-align: right; - - a#source { - border-bottom: 1px solid $color-super-light; - } - } - - &#panda { - width: 20%; - text-align: center; - font-size: 1.7em; - line-height: 1; - - a { - display: inline-block; - transition: transform 0.2s ease-in-out; - - &:hover { - transform: scale(1.6) rotate(10deg); - } - } - } - } - } - - main { - &#single article div { - &#info { - text-align: center; - - h1 { - margin-top: 0; - margin-bottom: 0.3em; - font-size: 2em; - line-height: 1.4; - - a { - color: inherit; - } - } - } - - &#meta { - color: $color-light; - font-size: 0.85em; - line-height: 1.5; - letter-spacing: 1px; - - a { - color: inherit; - } - - div#tags { - text-transform: uppercase; - letter-spacing: 2px; - margin-top: 0.5em; - - span.tag { - margin: 0 0.6em; - } - } - } - - &#content { - line-height: 1.8; - - h1, - h2, - h3 { - margin-top: 0.9em; - margin-bottom: 0.5em; - font-weight: 500; - line-height: 1.5; - } - - img { - max-width: 100%; - margin: 0 auto; - display: block; - } - - img + em, - figure figcaption { - display: block; - font-size: 0.9em; - font-style: normal; - color: $color-light; - text-align: center; - margin-top: 0.4em; - } - - blockquote { - border-left: 5px solid $color-links; - margin-left: 0.5em; - padding-left: 1em; - } - - ul { - list-style-position: outside; - list-style-type: square; - margin-left: 1.5em; - padding-left: 0; - - li { - padding-left: 0.25em; - } - } - - hr { - width: 60%; - margin: 0.75em auto; - border: 1px solid $color-super-light; - } - - video.embed { - display: block; - margin: 0 auto; - } - - div.embed.video-player { - position: relative; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; - - iframe.youtube-player { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - display: inline-block; - } - } - - twitter-widget { - margin: 0 auto; - display: block; - } - - code { - // https://markdotto.com/2018/02/07/github-system-fonts/ - font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; - font-size: 0.9em; - padding: 0.2em; - background: $color-super-duper-light; - border: 1px solid $color-super-light; - } - - pre code { - display: block; - padding: 1em 1.5em; - line-height: 1.6; - border-left: 3px solid $color-links; - max-width: 100%; - overflow-x: scroll; - page-break-inside: avoid; - object-fit: scale-down; - } - } - - &#commento { - border-top: 1px solid #ccc; - padding-top: 1.5em; - margin-top: 1.5em; - - // disable link underline effect in comments - a { - background: none; - - &:hover { - text-decoration: underline; - } - } - - div.commento-body { - a { - color: $color-links; - } - } - - div#commento-footer { - display: none; - } - } - } - - &#archive section.year { - ul { - list-style-type: none; - padding-left: 0; - display: block; - } - - li { - &::after { - content: ''; - display: block; - clear: both; - } - - &:last-child { - margin-bottom: 1.8em; - } - - + li { - margin-top: 1.3em; - } - } - - h2 { - font-size: 1.8em; - } - - div { - font-size: 1.1em; - - &.date { - float: left; - color: $color-light; - width: 5.25em; - font-weight: 400; - } - - &.title { - float: left; - width: calc(100% - 5.25em); - } - } - } - } - } -} - - -// Responsive Awesomeness -@media screen and (max-width: 850px) { - body { - // Safari iOS menu bar reappers below 44px: - // https://www.eventbrite.com/engineering/mobile-safari-why/ - padding-bottom: 50px !important; - // Allows content to fill the viewport and go beyond the bottom - height: 100%; - // Allows you to scroll below the viewport; default value is visible - overflow-y: scroll; - - // Responsive Home - &#home { - font-size: 1em; - padding: 25px; - - p { - font-size: 1.1em; - } - - img#me { - width: 68px; - height: 68px; - padding: 2px; - } - - footer div { - line-height: 1.7; - - &#panda { - display: none; - } - - &#blog, - &#info { - width: 50%; - } - - &#blog { - font-size: 1em; - line-height: 1.5; - } - - &#info { - font-size: 0.7em; - line-height: 2; - - span#copyright::after { - content: "\A"; - white-space: pre; - } - } - } - } - - // Responsive Blog - &#notes { - padding: 20px; - width: 100%; - max-width: 100%; - - header { - margin-top: 0; - margin-bottom: 1.3em; - - a#logo { - img, - svg { - height: 75px; - width: 50px; - } - } - } - - footer div { - &#panda { - display: none; - } - - &#copyright, - &#poweredby { - line-height: 1.8; - width: 50%; - } - - &#poweredby { - a#hugo::after { - content: "\A"; - white-space: pre; - } - } - } - - main#archive section.year div { - font-size: 1em; - } - - main#single article { - width: 100%; - max-width: 100%; - - div#info h1 { - font-size: 1.7em; - } - } - } - } -} - - -/*! Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/ */ -@keyframes wave { - 0% { transform: rotate( 0.0deg); } - 10% { transform: rotate(-10.0deg); } - 20% { transform: rotate( 12.0deg); } - 30% { transform: rotate(-10.0deg); } - 40% { transform: rotate( 9.0deg); } - 50% { transform: rotate( 0.0deg); } -100% { transform: rotate( 0.0deg); } -} - - -/*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */ -div.highlight span { - &.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no { - color: #03748a; - } - &.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p { - color: #111111; - } - &.na, &.nc, &.nd, &.ne, &.nf, &.nx { - color: #489c44; - } - &.err, &.nt, &.o, &.ow, &.kn { - color: #e8003d; - } - &.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo { - color: #8145ec; - } - &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss { - color: #c17005; - } - &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf { - color: #6b6859; - } - &.ge { - font-style: italic; - } - &.gs { - font-weight: bold; - } -} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 94fe2f0b..fe0a166d 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -30,7 +30,7 @@ - {{ $style := resources.Get "style.scss" | resources.ToCSS (dict "outputStyle" "compact") }} + {{ $style := resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compact") }} diff --git a/static/humans.txt b/static/humans.txt index 26dd974b..2ceb52ff 100644 --- a/static/humans.txt +++ b/static/humans.txt @@ -29,10 +29,10 @@ # TECHNOLOGY - Hugo - GitHub Actions + Hugo extended GitHub Pages - Matomo Analytics + GitHub Actions + Matomo # VIEW SOURCE