diff --git a/.gitignore b/.gitignore
index c0c0be14..20742ef2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,3 @@ builds/
resources/
.DS_Store
-.vscode/
diff --git a/README.md b/README.md
index 165e76ee..29a70466 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# 🏡 [jarv.is](https://jarv.is/)
-
+  
Personal website of [@jakejarvis](https://github.com/jakejarvis), created and deployed using the following:
diff --git a/assets/style.scss b/assets/style.scss
new file mode 100644
index 00000000..d7ede88f
--- /dev/null
+++ b/assets/style.scss
@@ -0,0 +1,681 @@
+/* JJ SCSS */
+/* Compiled from https://github.com/jakejarvis/jarv.is/blob/master/assets/style.scss */
+
+
+// Main Colors
+$color-text: #202020;
+$color-links: #036e9b;
+$color-light: #666666;
+$color-medium-light: #9e9e9e;
+$color-super-light: #dddddd;
+$color-super-duper-light: #f4f4f4;
+$color-read-more: #0077a7;
+
+// Colorful Homepage
+$colors-home:(
+ boston: #fb4d42,
+ javascript: #f48024,
+ node: #6fbc4e,
+ golang: #566468,
+ react: #4fb3cd,
+ angular: #c3002f,
+ vue: #486491,
+ java: #ab6311,
+ cpp: #865fc5,
+ python: #fea500,
+ php: #8892bf,
+ ruby: #d34135,
+ infosec: #00b81a,
+ server: #0098ec,
+ serverless: #87cef7,
+ devops: #ff6200,
+ containerization: #c48f49,
+ y2k: #4169e1,
+ jbb: #9932cc,
+ github: #8d4eff,
+ linkedin: #0073b1,
+ facebook: #4267b2,
+ twitter: #00acee,
+ instagram: #a37754,
+ mastodon: #6d8ca7,
+ resume: #d54b3d,
+ email: #de0c0c,
+ pgp: #777777,
+ sms: #6fcc01,
+ news-1: #ff1b1b,
+ news-2: #f78200,
+ news-3: #f2b702,
+ news-4: #5ebd3e,
+ news-5: #009cdf,
+ news-6: #3e49bb,
+ news-7: #973999
+);
+$color-fairy: #f23e93;
+
+
+// Global Styles
+
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ 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;
+ font-size: 24px;
+ line-height: 1.5em;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+a {
+ background-color: transparent;
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+}
+
+body {
+ a {
+ color: $color-links;
+ &:hover {
+ border-color: $color-links;
+ border-color: unquote($color-links + '60');
+ }
+ }
+
+ // Home Styles
+ &#home {
+ max-width: 1070px;
+ padding: 60px;
+
+ img#me {
+ float: right;
+ margin: 0 0 20px 20px;
+ padding: 4px;
+ border: 1px solid $color-super-light;
+ width: 160px;
+ height: 160px;
+ }
+
+ h1 {
+ margin: 0 0 20px 0;
+ font-size: 1.5em;
+ font-weight: 500;
+ line-height: 1em;
+ }
+
+ h2 {
+ margin: 20px 0;
+ font-size: 1.2em;
+ font-weight: 400;
+ line-height: 1.4em;
+ }
+
+ p {
+ margin: 20px 0;
+ font-size: 1em;
+ }
+
+ sup {
+ top: -0.5em;
+ font-size: 0.5em;
+ line-height: 0;
+ position: relative;
+ vertical-align: middle;
+ }
+
+ h1 a {
+ color: inherit;
+ border: none;
+ }
+
+ a {
+ // Loop through $colors-home -- the main reason I'm using SASS :)
+ @each $key, $color in $colors-home {
+ &##{$key} {
+ color: $color;
+ &:hover {
+ border-color: $color;
+ border-color: unquote($color + '60');
+ }
+ }
+ }
+ }
+
+ span {
+ &#shh {
+ color: $color-medium-light;
+ }
+
+ &#fairy {
+ color: $color-fairy;
+ &:hover {
+ cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
+ }
+ }
+ }
+
+ footer {
+ margin: 0;
+ height: 40px;
+
+ div {
+ float: left;
+ vertical-align: middle;
+ line-height: 40px;
+ height: 100%;
+
+ &#blog {
+ width: 40%;
+ text-align: left;
+ font-size: 0.9em;
+ }
+
+ &#panda {
+ width: 20%;
+ text-align: center;
+ font-size: 1em;
+
+ span {
+ text-align: center;
+ width: 12px;
+ }
+ }
+
+ &#info {
+ width: 40%;
+ font-size: 0.55em;
+ color: $color-light;
+ text-align: right;
+
+ a {
+ color: $color-light;
+
+ &#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 {
+ font-size: 18px;
+ font-weight: 400;
+ max-width: 1010px;
+ padding: 20px 50px;
+
+ header {
+ font-size: 16px;
+ margin-top: 20px;
+ margin-bottom: 40px;
+
+ a {
+ &#more {
+ border: none;
+ font-size: 18px;
+ font-weight: 400;
+ }
+
+ &#logo {
+ border: none;
+ margin: 20px auto;
+ display: block;
+
+ img, svg {
+ height: 150px;
+ width: 100px;
+ margin: 0 auto;
+ display: block;
+ border: none;
+ }
+ }
+ }
+ }
+
+ footer {
+ border-top: 1px solid $color-super-light;
+ height: 40px;
+ font-size: 24px;
+ padding-top: 16px;
+ margin-top: 30px;
+ margin-bottom: 20px;
+
+ a {
+ color: $color-light;
+ border: none;
+ }
+
+ div {
+ float: left;
+ vertical-align: middle;
+ line-height: 40px;
+ height: 100%;
+
+ &#copyright, &#poweredby {
+ width: 40%;
+ font-size: 0.55em;
+ color: $color-light;
+ }
+
+ &#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: 1em;
+
+ span {
+ text-align: center;
+ width: 12px;
+ }
+ }
+ }
+ }
+
+ main {
+ &#single article div {
+ &#content {
+ font-size: 16px;
+ line-height: 1.7;
+ object-fit: contain;
+
+ p {
+ font-size: 16px;
+ line-height: 1.7;
+ object-fit: contain;
+ }
+ }
+
+ &#info {
+ text-align: center;
+
+ h1 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ font-size: 32px;
+ line-height: 1.4em;
+
+ a {
+ color: $color-text;
+ border: none;
+ }
+ }
+ }
+
+ &#content {
+ h1, h2, h3 {
+ margin-top: 18px;
+ margin-bottom: 10px;
+ font-weight: 500;
+ line-height: 1.5em;
+ }
+ }
+
+ &.meta {
+ margin: -5px 0 0 0;
+ color: $color-light;
+ font-size: 13px;
+ line-height: 1.5em;
+ letter-spacing: 1px;
+
+ a {
+ color: $color-light;
+ border: none;
+ }
+
+ div.tags {
+ text-transform: uppercase;
+ line-height: 1.5em;
+ letter-spacing: 2px;
+ margin-top: 5px;
+
+ span.tag {
+ color: $color-light;
+ border: none;
+ margin: 0 7px;
+
+ a {
+ color: $color-light;
+ border: none;
+ }
+ }
+ }
+ }
+
+ &#content {
+ img {
+ max-width: 100%;
+ margin: 0 auto;
+ display: block;
+ object-fit: scale-down;
+
+ + em {
+ display: block;
+ text-align: center;
+ font-size: 15px;
+ color: $color-light;
+ margin-top: 5px;
+ }
+ }
+
+ figure figcaption {
+ display: block;
+ text-align: center;
+ font-size: 15px;
+ color: $color-light;
+ margin-top: 5px;
+ }
+
+ blockquote {
+ border-left: 6px solid $color-links;
+ margin-left: 6px;
+ padding-left: 15px;
+ }
+
+ ul {
+ list-style-position: inside;
+ list-style-type: square;
+ margin-left: 12px;
+ padding-left: 0;
+ }
+
+ code {
+ font-family: monospace;
+ background: $color-super-duper-light;
+ padding: 0.2em;
+ border: 1px solid $color-super-light;
+ font-size: 16px;
+ }
+
+ pre code {
+ padding: 1em 1.5em;
+ line-height: 1.6;
+ page-break-inside: avoid;
+ border: 1px solid $color-super-light;
+ border-left: 3px solid $color-links;
+ overflow-x: scroll;
+ display: block;
+ max-width: 100%;
+ object-fit: scale-down;
+ }
+
+ hr {
+ width: 60%;
+ margin: 10px 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;
+ margin-bottom: 10px;
+ display: inline-block;
+ }
+ }
+
+ twitter-widget {
+ margin: 0 auto;
+ display: block;
+ }
+ }
+
+ &#commento {
+ border-top: 1px solid #ccc;
+ padding-top: 20px;
+ margin-top: 20px;
+
+ 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: 20px;
+ }
+
+ + li {
+ padding-top: 20px;
+ }
+ }
+
+ div {
+ &.date {
+ float: left;
+ color: $color-light;
+ width: 100px;
+ font-weight: 400;
+ }
+
+ &.title {
+ float: left;
+ width: calc(100% - 100px);
+ }
+ }
+ }
+ }
+ }
+}
+
+
+// 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); }
+}
+
+
+// Responsive Awesomeness
+
+@media screen and (max-width: 800px) {
+ // Responsive Home
+ body#home {
+ font-size: 16px;
+ padding: 30px;
+
+ img#me {
+ width: 70px;
+ height: 70px;
+ padding: 2px;
+ margin: 0 0 10px 10px;
+ }
+
+ h1 {
+ margin: 0 0 12px 0;
+ }
+
+ h2 {
+ margin: 12px 0;
+ }
+
+ p {
+ font-size: 1.1em;
+ line-height: 1.5em;
+ margin: 12px 0;
+ }
+
+ footer div {
+ &#panda {
+ display: none;
+ }
+
+ &#blog {
+ width: 50%;
+ line-height: 20px;
+ }
+
+ &#info {
+ width: 50%;
+ line-height: 20px;
+ font-size: 0.7em;
+ }
+
+ &#blog {
+ font-size: 1em;
+ }
+
+ &#info span#copyright::after {
+ content: "\A";
+ white-space: pre;
+ }
+ }
+ }
+
+ // Responsive Blog
+ body#notes {
+ padding: 30px;
+ width: 100%;
+ max-width: 100%;
+
+ main#single article {
+ width: 100%;
+ max-width: 100%;
+ }
+
+ header {
+ margin-top: 0;
+ margin-bottom: 20px;
+
+ a#logo {
+ img, svg {
+ height: 75px;
+ width: 50px;
+ }
+ }
+ }
+
+ footer {
+ margin-bottom: 30px;
+
+ div {
+ &#panda {
+ display: none;
+ }
+
+ &#copyright {
+ width: 50%;
+ font-size: 14px;
+ line-height: 1.8em;
+ }
+
+ &#poweredby {
+ width: 50%;
+ font-size: 14px;
+ line-height: 1.8em;
+
+ a#hugo::after {
+ content: "\A";
+ white-space: pre;
+ }
+ }
+ }
+ }
+
+ main#single article div.meta {
+ font-size: 14px;
+ }
+ }
+}
+
+
+// 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;
+ }
+}
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 655f1c32..566743b3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -30,7 +30,7 @@
-
+ {{ $style := resources.Get "style.scss" | resources.ToCSS }}
diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index f65d30fc..00000000
--- a/static/style.css
+++ /dev/null
@@ -1,924 +0,0 @@
-/*! JJ CSS */
-
-body {
- width: 100%;
- height: 100%;
- margin: 0 auto;
- color: #202020;
- 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;
- font-size: 24px;
- line-height: 1.5em;
-}
-
-* {
- box-sizing: border-box;
-}
-
-a {
- background-color: transparent;
- text-decoration: none;
- border-bottom: 1px solid transparent;
-}
-
-
-
-/*! Home Styles */
-
-body#home {
- max-width: 1070px;
- padding: 60px;
-}
-
-body#home img#me {
- float: right;
- margin: 0 0 20px 20px;
- padding: 4px;
- border: 1px solid #ddd;
- width: 160px;
- height: 160px;
-}
-
-body#home h1 {
- margin: 0 0 20px 0;
- font-size: 1.5em;
- font-weight: 500;
- line-height: 1em;
-}
-
-body#home h2 {
- margin: 20px 0;
- font-size: 1.2em;
- font-weight: 400;
- line-height: 1.4em;
-}
-
-body#home p {
- margin: 20px 0;
- font-size: 1em;
-}
-
-body#home sup {
- top: -0.5em;
- font-size: 0.5em;
- line-height: 0;
- position: relative;
- vertical-align: middle;
-}
-
-body#home h1 a {
- color: inherit;
- border: none;
-}
-
-
-/* Colo[u]rful Links */
-
-body#home a#boston {
- color: #fb4d42;
-}
-body#home a#boston:hover {
- border-color: #fb4d42; /* First color for hex alpha (#RRGGBBAA) backwards compatibility: */
- border-color: #fb4d4260; /* https://meyerweb.com/eric/thoughts/2019/04/01/color-me-face1e55/ */
-}
-
-body#home a#javascript {
- color: #f48024;
-}
-body#home a#javascript:hover {
- border-color: #f48024;
- border-color: #f4802460;
-}
-
-body#home a#node {
- color: #6fbc4e;
-}
-body#home a#node:hover {
- border-color: #6fbc4e;
- border-color: #6fbc4e60;
-}
-
-body#home a#golang {
- color: #00acd7;
-}
-body#home a#golang:hover {
- border-color: #00acd7;
- border-color: #00acd760;
-}
-
-body#home a#react {
- color: #4fb3cd;
-}
-body#home a#react:hover {
- border-color: #4fb3cd;
- border-color: #4fb3cd60;
-}
-
-body#home a#angular {
- color: #c3002f;
-}
-body#home a#angular:hover {
- border-color: #c3002f;
- border-color: #c3002f60;
-}
-
-body#home a#vue {
- color: #486491;
-}
-body#home a#vue:hover {
- border-color: #486491;
- border-color: #48649160;
-}
-
-body#home a#java {
- color: #ab6311;
-}
-body#home a#java:hover {
- border-color: #ab6311;
- border-color: #ab631160;
-}
-
-body#home a#cpp {
- color: #865fc5;
-}
-body#home a#cpp:hover {
- border-color: #865fc5;
- border-color: #865fc560;
-}
-
-body#home a#python {
- color: #fea500;
-}
-body#home a#python:hover {
- border-color: #fea500;
- border-color: #fea50060;
-}
-
-body#home a#php {
- color: #8892bf;
-}
-body#home a#php:hover {
- border-color: #8892bf;
- border-color: #8892bf60;
-}
-
-body#home a#ruby {
- color: #d34135;
-}
-body#home a#ruby:hover {
- border-color: #d34135;
- border-color: #d3413560;
-}
-
-body#home a#infosec {
- color: #00b81a;
-}
-body#home a#infosec:hover {
- border-color: #00b81a;
- border-color: #00b81a60;
-}
-
-body#home a#server {
- color: #0098ec;
-}
-body#home a#server:hover {
- border-color: #0098ec;
- border-color: #0098ec60;
-}
-body#home a#server span#serverless {
- color: #87cef7;
-}
-
-body#home a#devops {
- color: #ff6200;
-}
-body#home a#devops:hover {
- border-color: #ff6200;
- border-color: #ff620060;
-}
-
-body#home a#containerization {
- color: #c48f49;
-}
-body#home a#containerization:hover {
- border-color: #c48f49;
- border-color: #c48f4960;
-}
-
-/* default-ish web colors from the 90s are on purpose :) */
-body#home a#y2k {
- color: #4169e1;
-}
-body#home a#y2k:hover {
- border-color: #4169e1;
- border-color: #4169e160;
-}
-body#home a#jbb {
- color: #9932cc;
-}
-body#home a#jbb:hover {
- border-color: #9932cc;
- border-color: #9932cc60;
-}
-body#home span#shh {
- color: #9e9e9e;
-}
-
-body#home span#fairy {
- color: #f23e93;
-}
-body#home span#fairy:hover {
- cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
-}
-
-body#home a#github {
- color: #8d4eff;
-}
-body#home a#github:hover {
- border-color: #8d4eff;
- border-color: #8d4eff60;
-}
-
-body#home a#linkedin {
- color: #0073b1;
-}
-body#home a#linkedin:hover {
- border-color: #0073b1;
- border-color: #0073b160;
-}
-
-body#home a#facebook {
- color: #4267b2;
-}
-body#home a#facebook:hover {
- border-color: #4267b2;
- border-color: #4267b260;
-}
-
-body#home a.twitter {
- color: #00acee;
-}
-body#home a.twitter:hover {
- border-color: #00acee;
- border-color: #00acee60;
-}
-
-body#home a#instagram {
- color: #a37754;
-}
-body#home a#instagram:hover {
- border-color: #a37754;
- border-color: #a3775460;
-}
-
-body#home a#mastodon {
- color: #6d8ca7;
-}
-body#home a#mastodon:hover {
- border-color: #6d8ca7;
- border-color: #6d8ca760;
-}
-
-body#home a#news-1 {
- color: #ff1b1b;
-}
-body#home a#news-1:hover {
- border-color: #ff1b1b;
- border-color: #ff1b1b60;
-}
-
-body#home a#news-2 {
- color: #f78200;
-}
-body#home a#news-2:hover {
- border-color: #f78200;
- border-color: #f7820060;
-}
-
-body#home a#news-3 {
- color: #f2b702;
-}
-body#home a#news-3:hover {
- border-color: #f2b702;
- border-color: #f2b70260;
-}
-
-body#home a#news-4 {
- color: #5ebd3e;
-}
-body#home a#news-4:hover {
- border-color: #5ebd3e;
- border-color: #5ebd3e60;
-}
-
-body#home a#news-5 {
- color: #009cdf;
-}
-body#home a#news-5:hover {
- border-color: #009cdf;
- border-color: #009cdf60;
-}
-
-body#home a#news-6 {
- color: #3e49bb;
-}
-body#home a#news-6:hover {
- border-color: #3e49bb;
- border-color: #3e49bb60;
-}
-
-body#home a#news-7 {
- color: #973999;
-}
-body#home a#news-7:hover {
- border-color: #973999;
- border-color: #97399960;
-}
-
-body#home a#resume {
- color: #d54b3d;
-}
-body#home a#resume:hover {
- border-color: #d54b3d;
- border-color: #d54b3d60;
-}
-
-body#home a#email {
- color: #de0c0c;
-}
-body#home a#email:hover {
- border-color: #de0c0c;
- border-color: #de0c0c60;
-}
-
-body#home a#pgp {
- color: #777777;
-}
-body#home a#pgp:hover {
- border-color: #777777;
- border-color: #77777760;
-}
-
-body#home a#sms {
- color: #6fcc01;
-}
-body#home a#sms:hover {
- border-color: #6fcc01;
- border-color: #6fcc0160;
-}
-
-
-/* Footer */
-
-body#home footer {
- margin: 0;
- height: 40px;
-}
-
-body#home footer div {
- float: left;
- vertical-align: middle;
- line-height: 40px;
- height: 100%;
-}
-
-body#home footer div#blog {
- width: 40%;
- text-align: left;
- font-size: 0.9em;
-}
-
-body#home footer div#blog a {
- color: #0077a7;
-}
-body#home footer div#blog a:hover {
- border-color: #0077a7;
- border-color: #0077a760;
-}
-
-body#home footer div#panda {
- width: 20%;
- text-align: center;
- font-size: 1em;
-}
-
-body#home footer div#panda span {
- text-align: center;
- width: 12px;
-}
-
-body#home footer div#info {
- width: 40%;
- font-size: 0.55em;
- color: #666;
- text-align: right;
-}
-
-body#home footer div#info a {
- color: #666;
-}
-
-body#home footer div#info a#source {
- border-bottom: 1px solid #ddd;
-}
-
-
-/* Responsive Awesomeness */
-
-@media screen and (max-width: 800px) {
- body#home {
- font-size: 16px;
- padding: 30px;
- }
-
- body#home img#me {
- width: 70px;
- height: 70px;
- padding: 2px;
- margin: 0 0 10px 10px;
- }
-
- body#home h1 {
- margin: 0 0 12px 0;
- }
-
- body#home h2 {
- margin: 12px 0;
- }
-
- body#home p {
- font-size: 1.1em;
- line-height: 1.5em;
- margin: 12px 0;
- }
-
- body#home footer div#panda {
- display: none;
- }
-
- body#home footer div#blog, body#home footer div#info {
- width: 50%;
- line-height: 20px;
- }
-
- body#home footer div#info {
- font-size: 0.7em;
- }
-
- body#home footer div#blog {
- font-size: 1em;
- }
-
- body#home footer div#info span#copyright::after {
- content: "\A";
- white-space: pre;
- }
-}
-
-
-/* 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); }
-}
-
-body#home h1 span#wave {
- display: inline-block;
- animation-name: wave;
- animation-duration: 2.5s;
- animation-iteration-count: infinite;
- transform-origin: 70% 70%;
-}
-
-
-
-/*! Blog Styles */
-
-body#notes {
- font-size: 18px;
- font-weight: 400;
- max-width: 1010px;
- padding: 20px 50px;
-}
-
-body#notes a {
- color: #036e9b;
-}
-body#notes a:hover {
- border-color: #036e9b;
- border-color: #036e9b60;
-}
-
-
-/* Header */
-
-body#notes header {
- font-size: 16px;
- margin-top: 20px;
- margin-bottom: 40px;
-}
-
-body#notes header a#more {
- border: none;
- font-size: 18px;
- font-weight: 400;
-}
-
-body#notes header a#logo {
- border: none;
- margin: 20px auto;
- display: block;
-}
-
-body#notes header a#logo img, body#notes header a#logo svg {
- height: 150px;
- width: 100px;
- margin: 0 auto;
- display: block;
- border: none;
-}
-
-
-/* Footer */
-
-body#notes footer {
- border-top: 1px solid #ccc;
- height: 40px;
- font-size: 24px;
- padding-top: 16px;
- margin-top: 30px;
- margin-bottom: 20px;
-}
-
-body#notes footer a {
- color: #666;
- border: none;
-}
-
-body#notes footer div {
- float: left;
- vertical-align: middle;
- line-height: 40px;
- height: 100%;
-}
-
-body#notes footer div#copyright, body#notes footer div#poweredby {
- width: 40%;
- font-size: 0.55em;
- color: #666;
-}
-
-body#notes footer div#copyright {
- text-align: left;
-}
-
-body#notes footer div#poweredby {
- text-align: right;
-}
-
-body#notes footer div#poweredby a#source {
- border-bottom: 1px solid #ddd;
-}
-
-body#notes footer div#panda {
- width: 20%;
- text-align: center;
- font-size: 1em;
-}
-
-body#notes footer div#panda span {
- text-align: center;
- width: 12px;
-}
-
-
-/* Single Post */
-
-body#notes main#single article div#content, body#notes main#single article div#content p {
- font-size: 16px;
- line-height: 1.7;
- object-fit: contain;
-}
-
-body#notes main#single article div#info {
- text-align: center;
-}
-
-body#notes main#single article div#info h1 {
- margin-top: 0;
- margin-bottom: 20px;
- color: #222;
- font-size: 32px;
- line-height: 1.4em;
-}
-
-body#notes main#single article div#info h1 a {
- color: #222;
- border: none;
-}
-
-body#notes main#single article div#content h1, body#notes main#single article div#content h2, body#notes main#single article div#content h3 {
- margin-top: 18px;
- margin-bottom: 10px;
- font-weight: 500;
- line-height: 1.5em;
-}
-
-body#notes main#single article div.meta {
- margin: -5px 0 0 0;
- color: #666;
- font-size: 13px;
- line-height: 1.5em;
- letter-spacing: 1px;
-}
-
-body#notes main#single article div.meta a {
- color: #666;
- border: none;
-}
-
-body#notes main#single article div.meta div.tags {
- text-transform: uppercase;
- line-height: 1.5em;
- letter-spacing: 2px;
- margin-top: 5px;
-}
-body#notes main#single article div.meta div.tags span.tag {
- color: #666;
- border: none;
- margin: 0 7px;
-}
-body#notes main#single article div.meta div.tags span.tag a {
- color: #666;
- border: none;
-}
-
-body#notes main#single article div#content img {
- max-width: 100%;
- margin: 0 auto;
- display: block;
- object-fit: scale-down;
-}
-body#notes main#single article div#content img + em,
-body#notes main#single article div#content figure figcaption {
- display: block;
- text-align: center;
- font-size: 15px;
- color: #555;
- margin-top: 5px;
-}
-
-body#notes main#single article div#content blockquote {
- border-left: 6px solid #0087be;
- margin-left: 6px;
- padding-left: 15px;
-}
-
-body#notes main#single article div#content ul {
- list-style-position: inside;
- list-style-type: square;
- margin-left: 12px;
- padding-left: 0;
-}
-
-body#notes main#single article div#content code {
- font-family: monospace;
- background: #f4f4f4;
- padding: 0.2em;
- border: 1px solid #ccc;
- font-size: 16px;
-}
-
-body#notes main#single article div#content pre code {
- padding: 1em 1.5em;
- line-height: 1.6;
- page-break-inside: avoid;
- border: 1px solid #ddd;
- border-left: 3px solid #0087be;
- overflow-x: scroll;
- display: block;
- max-width: 100%;
- object-fit: scale-down;
-}
-
-body#notes main#single article div#content hr {
- width: 60%;
- margin: 10px auto;
- border: 1px solid #ccc;
-}
-
-body#notes main#single article div#content video.embed {
- display: block;
- margin: 0 auto;
-}
-
-body#notes main#single article div#content div.embed.video-player {
- position: relative;
- padding-bottom: 56.25%;
- height: 0;
- overflow: hidden;
-}
-
-body#notes main#single article div#content div.embed.video-player iframe.youtube-player {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: none;
- margin-bottom: 10px;
- display: inline-block;
-}
-
-body#notes main#single article div#content twitter-widget {
- margin: 0 auto;
- display: block;
-}
-
-body#notes main#single article div#commento {
- border-top: 1px solid #ccc;
- padding-top: 20px;
- margin-top: 20px;
-}
-
-body#notes main#single article div#commento div#commento-footer {
- display: none;
-}
-
-
-
-/* Archive List */
-
-body#notes main#archive section.year ul {
- list-style-type: none;
- padding-left: 0;
- display: block;
-}
-
-body#notes main#archive section.year li::after {
- content: '';
- display: block;
- clear: both;
-}
-
-body#notes main#archive section.year li:last-child {
- margin-bottom: 20px;
-}
-
-body#notes main#archive section.year li+li {
- padding-top: 20px;
-}
-
-body#notes main#archive section.year div.date {
- float: left;
- color: #666;
- width: 100px;
- font-weight: 400;
-}
-
-body#notes main#archive section.year div.title {
- float: left;
- width: calc(100% - 100px);
-}
-
-
-/* Responsiveness */
-
-@media screen and (max-width: 800px) {
- body#notes {
- padding: 30px;
- }
-
- body#notes, body#notes main#single article {
- width: 100%;
- max-width: 100%;
- }
-
- body#notes header {
- margin-top: 0;
- margin-bottom: 20px;
- }
-
- body#notes header a#logo img, body#notes header a#logo svg {
- height: 75px;
- width: 50px;
- }
-
- body#notes footer {
- margin-bottom: 30px;
- }
-
- body#notes footer div#panda {
- display: none;
- }
-
- body#notes footer div#copyright, body#notes footer div#poweredby {
- width: 50%;
- font-size: 14px;
- line-height: 1.8em;
- }
-
- body#notes footer div#poweredby a#hugo::after {
- content: "\A";
- white-space: pre;
- }
-
- body#notes main#single article div.meta {
- font-size: 14px;
- }
-}
-
-
-/*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
-
-div.highlight span.k,
-div.highlight span.kc,
-div.highlight span.kd,
-div.highlight span.kp,
-div.highlight span.kr,
-div.highlight span.kt,
-div.highlight span.no {
- color: #03748a;
-}
-div.highlight span.n,
-div.highlight span.bp,
-div.highlight span.nb,
-div.highlight span.ni,
-div.highlight span.fm,
-div.highlight span.nl,
-div.highlight span.nn,
-div.highlight span.py,
-div.highlight span.nv,
-div.highlight span.vc,
-div.highlight span.vg,
-div.highlight span.vi,
-div.highlight span.vm,
-div.highlight span.p {
- color: #111111;
-}
-div.highlight span.na,
-div.highlight span.nc,
-div.highlight span.nd,
-div.highlight span.ne,
-div.highlight span.nf,
-div.highlight span.nx {
- color: #489c44;
-}
-div.highlight span.err,
-div.highlight span.nt,
-div.highlight span.o,
-div.highlight span.ow,
-div.highlight span.kn {
- color: #e8003d;
-}
-div.highlight span.l,
-div.highlight span.se,
-div.highlight span.m,
-div.highlight span.mb,
-div.highlight span.mf,
-div.highlight span.mh,
-div.highlight span.mi,
-div.highlight span.il,
-div.highlight span.mo {
- color: #8145ec;
-}
-div.highlight span.ld,
-div.highlight span.s,
-div.highlight span.sa,
-div.highlight span.sb,
-div.highlight span.sc,
-div.highlight span.dl,
-div.highlight span.sd,
-div.highlight span.s2,
-div.highlight span.sh,
-div.highlight span.si,
-div.highlight span.sx,
-div.highlight span.sr,
-div.highlight span.s1,
-div.highlight span.ss {
- color: #c17005;
-}
-div.highlight span.c,
-div.highlight span.ch,
-div.highlight span.cm,
-div.highlight span.c1,
-div.highlight span.cs,
-div.highlight span.cp,
-div.highlight span.cpf {
- color: #6b6859;
-}
-div.highlight span.ge {
- font-style: italic;
-}
-div.highlight span.gs {
- font-weight: bold;
-}