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
-
+
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