mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 11:26:37 -04:00
split up SCSS files
This commit is contained in:
12
README.md
12
README.md
@ -4,17 +4,17 @@
|
|||||||
|
|
||||||
Personal website of [@jakejarvis](https://github.com/jakejarvis), created and deployed using the following:
|
Personal website of [@jakejarvis](https://github.com/jakejarvis), created and deployed using the following:
|
||||||
|
|
||||||
- [Hugo](https://github.com/gohugoio/hugo)
|
- [Hugo extended](https://github.com/gohugoio/hugo)
|
||||||
- [GitHub Actions](.github/workflows)
|
|
||||||
- [GitHub Pages](https://pages.github.com/)
|
- [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.
|
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
|
## 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:
|
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
|
## 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.
|
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.
|
Everything else (such as the press articles and videos in [`misc`](misc/)) belongs to its respective owner(s) under the original license/copyright.
|
||||||
|
|||||||
13
assets/sass/abstracts/_functions.scss
Normal file
13
assets/sass/abstracts/_functions.scss
Normal file
@ -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);
|
||||||
|
}
|
||||||
58
assets/sass/abstracts/_variables.scss
Normal file
58
assets/sass/abstracts/_variables.scss
Normal file
@ -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;
|
||||||
32
assets/sass/components/_syntax.scss
Normal file
32
assets/sass/components/_syntax.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
12
assets/sass/components/_wave.scss
Normal file
12
assets/sass/components/_wave.scss
Normal file
@ -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); }
|
||||||
|
}
|
||||||
21
assets/sass/main.scss
Normal file
21
assets/sass/main.scss
Normal file
@ -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';
|
||||||
35
assets/sass/pages/_global.scss
Normal file
35
assets/sass/pages/_global.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
134
assets/sass/pages/_home.scss
Normal file
134
assets/sass/pages/_home.scss
Normal file
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
290
assets/sass/pages/_notes.scss
Normal file
290
assets/sass/pages/_notes.scss
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
17
assets/sass/pages/responsive/_global.scss
Normal file
17
assets/sass/pages/responsive/_global.scss
Normal file
@ -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';
|
||||||
|
}
|
||||||
45
assets/sass/pages/responsive/_home.scss
Normal file
45
assets/sass/pages/responsive/_home.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
52
assets/sass/pages/responsive/_notes.scss
Normal file
52
assets/sass/pages/responsive/_notes.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -30,7 +30,7 @@
|
|||||||
<meta name="msvalidate.01" content="164551986DA47F7F6FC0D21A93FFFCA6">
|
<meta name="msvalidate.01" content="164551986DA47F7F6FC0D21A93FFFCA6">
|
||||||
<meta name="p:domain_verify" content="e8aefab89c04734260da89b6ff26fd5b">
|
<meta name="p:domain_verify" content="e8aefab89c04734260da89b6ff26fd5b">
|
||||||
<meta name="yandex-verification" content="7432e013ad0164ab">
|
<meta name="yandex-verification" content="7432e013ad0164ab">
|
||||||
{{ $style := resources.Get "style.scss" | resources.ToCSS (dict "outputStyle" "compact") }}<link rel="stylesheet" href="{{ $style.Permalink }}">
|
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compact") }}<link rel="stylesheet" href="{{ $style.Permalink }}">
|
||||||
<link rel="dns-prefetch" href="https://stats.jarv.is">
|
<link rel="dns-prefetch" href="https://stats.jarv.is">
|
||||||
<link rel="dns-prefetch" href="https://comments.jarv.is">
|
<link rel="dns-prefetch" href="https://comments.jarv.is">
|
||||||
<link rel="canonical" href="{{ .Permalink }}">
|
<link rel="canonical" href="{{ .Permalink }}">
|
||||||
|
|||||||
@ -29,10 +29,10 @@
|
|||||||
|
|
||||||
# TECHNOLOGY
|
# TECHNOLOGY
|
||||||
|
|
||||||
Hugo
|
Hugo extended
|
||||||
GitHub Actions
|
|
||||||
GitHub Pages
|
GitHub Pages
|
||||||
Matomo Analytics
|
GitHub Actions
|
||||||
|
Matomo
|
||||||
|
|
||||||
# VIEW SOURCE
|
# VIEW SOURCE
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user