1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 11:55:31 -04:00

add Prettier to workflow 🎀 (#128)

* prettier init

* prettier ignore

* run on everything 😬

* add prettier check script

* update deps

* Update .prettierignore
This commit is contained in:
2020-05-06 12:19:21 -04:00
committed by GitHub
parent 739f161183
commit 323b3dd9f6
43 changed files with 856 additions and 454 deletions

View File

@@ -16,14 +16,20 @@
}
// Web fonts (see components/_fonts.scss)
@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) {
@mixin font-face(
$family,
$src,
$weight: normal,
$style: normal,
$display: swap
) {
@font-face {
font-family: $family;
font-style: $style;
font-weight: $weight;
font-display: $display;
src: url($base-url + $src + ".woff2") format("woff2"),
url($base-url + $src + ".woff") format("woff"); // stylelint-disable-line indentation
url($base-url + $src + ".woff") format("woff");
// Allow additional declarations to be passed in:
@content;

View File

@@ -6,15 +6,13 @@ $webfont-mono: "Hack", monospace;
// System fonts
// https://markdotto.com/2018/02/07/github-system-fonts/
// stylelint-disable indentation
$system-fonts: 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";
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
$system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
"Menlo", "Courier", monospace;
// stylelint-enable indentation
"Menlo", "Courier", monospace;
// Width at which to switch to mobile styles
$responsive-width: 830px;

View File

@@ -3,45 +3,45 @@
// Dark & Light Themes
$themes: (
light: (
color-background: #ffffff,
color-text: #202020,
color-medium-dark: #494949,
color-medium: #5e5e5e,
color-background: #ffffff,
color-text: #202020,
color-medium-dark: #494949,
color-medium: #5e5e5e,
color-medium-light: #757575,
color-light: #d2d2d2,
color-kinda-light: #e3e3e3,
color-super-light: #f4f4f4,
color-light: #d2d2d2,
color-kinda-light: #e3e3e3,
color-super-light: #f4f4f4,
color-super-duper-light: #fbfbfb,
color-links: #0e6dc2,
syntax-k: #0e6dc2,
syntax-n: #111111,
syntax-na: #337a15,
syntax-err: #d43d2e,
syntax-l: #8d4eff,
syntax-ld: #bd5500,
syntax-c: #6b6859,
syntax-lnt: #999999
color-links: #0e6dc2,
syntax-k: #0e6dc2,
syntax-n: #111111,
syntax-na: #337a15,
syntax-err: #d43d2e,
syntax-l: #8d4eff,
syntax-ld: #bd5500,
syntax-c: #6b6859,
syntax-lnt: #999999,
),
dark: (
color-background: #292929,
color-text: #efefef,
color-medium-dark: #cfcfcf,
color-medium: #b1b1b1,
color-background: #292929,
color-text: #efefef,
color-medium-dark: #cfcfcf,
color-medium: #b1b1b1,
color-medium-light: #929292,
color-light: #646464,
color-kinda-light: #535353,
color-super-light: #272727,
color-light: #646464,
color-kinda-light: #535353,
color-super-light: #272727,
color-super-duper-light: #1f1f1f,
color-links: #85baea,
syntax-k: #3b9dd2,
syntax-n: #cfcfcf,
syntax-na: #78df55,
syntax-err: #f95757,
syntax-l: #d588fb,
syntax-ld: #fd992a,
syntax-c: #929292,
syntax-lnt: #b1b1b1
)
color-links: #85baea,
syntax-k: #3b9dd2,
syntax-n: #cfcfcf,
syntax-na: #78df55,
syntax-err: #f95757,
syntax-l: #d588fb,
syntax-ld: #fd992a,
syntax-c: #929292,
syntax-lnt: #b1b1b1,
),
);
$color-light-background: #fbfbfb;
@@ -53,43 +53,151 @@ $color-logo2: #ffb900;
$color-logo3: #009cdf;
// Colorful Homepage
$colors-home:(
boston: (light: #fb4d42, dark: #ff5146),
jamstack: (light: #04a699, dark: #08bbac),
javascript: (light: #f48024, dark: #e18431),
node: (light: #6fbc4e, dark: #84d95f),
golang: (light: #00acd7, dark: #2ad1fb),
react: (light: #4fb3cd, dark: #6fcbe3),
angular: (light: #c3002f, dark: #f95757),
php: (light: #8892bf, dark: #a4afe3),
ruby: (light: #d34135, dark: #f95a4d),
python: (light: #fea500, dark: #ffbb3c),
java: (light: #ab6311, dark: #e86a2c),
infosec: (light: #00b81a, dark: #57f06d),
server: (light: #0098ec, dark: #43b9fb),
devops: (light: #ff6200, dark: #f46c16),
containers: (light: #c48f49, dark: #ca9249),
y2k: (light: #4169e1, dark: #8ca9ff),
jbb: (light: #9932cc, dark: #d588fb),
birthday: (light: #e40088, dark: #fd40b1),
github: (light: #8d4eff, dark: #a379f0),
linkedin: (light: #0073b1, dark: #3b9dd2),
twitter: (light: #00acee, dark: #3bc9ff),
dm: (light: #00acee, dark: #3bc9ff),
facebook: (light: #4267b2, dark: #5f8dec),
instagram: (light: #a37754, dark: #c49169),
mastodon: (light: #6d8ca7, dark: #87b0d5),
resume: (light: #d54b3d, dark: #f46151),
email: (light: #de0c0c, dark: #ff5050),
pgp: (light: #757575, dark: #979797),
sms: (light: #6fcc01, dark: #8edb34),
news-1: (light: #ff1b1b, dark: #f06060),
news-2: (light: #f78200, dark: #fd992a),
news-3: (light: #f2b702, dark: #ffcc2e),
news-4: (light: #5ebd3e, dark: #78df55),
news-5: (light: #009cdf, dark: #29bfff),
news-6: (light: #3e49bb, dark: #7b87ff),
news-7: (light: #973999, dark: #db60dd)
$colors-home: (
boston: (
light: #fb4d42,
dark: #ff5146,
),
jamstack: (
light: #04a699,
dark: #08bbac,
),
javascript: (
light: #f48024,
dark: #e18431,
),
node: (
light: #6fbc4e,
dark: #84d95f,
),
golang: (
light: #00acd7,
dark: #2ad1fb,
),
react: (
light: #4fb3cd,
dark: #6fcbe3,
),
angular: (
light: #c3002f,
dark: #f95757,
),
php: (
light: #8892bf,
dark: #a4afe3,
),
ruby: (
light: #d34135,
dark: #f95a4d,
),
python: (
light: #fea500,
dark: #ffbb3c,
),
java: (
light: #ab6311,
dark: #e86a2c,
),
infosec: (
light: #00b81a,
dark: #57f06d,
),
server: (
light: #0098ec,
dark: #43b9fb,
),
devops: (
light: #ff6200,
dark: #f46c16,
),
containers: (
light: #c48f49,
dark: #ca9249,
),
y2k: (
light: #4169e1,
dark: #8ca9ff,
),
jbb: (
light: #9932cc,
dark: #d588fb,
),
birthday: (
light: #e40088,
dark: #fd40b1,
),
github: (
light: #8d4eff,
dark: #a379f0,
),
linkedin: (
light: #0073b1,
dark: #3b9dd2,
),
twitter: (
light: #00acee,
dark: #3bc9ff,
),
dm: (
light: #00acee,
dark: #3bc9ff,
),
facebook: (
light: #4267b2,
dark: #5f8dec,
),
instagram: (
light: #a37754,
dark: #c49169,
),
mastodon: (
light: #6d8ca7,
dark: #87b0d5,
),
resume: (
light: #d54b3d,
dark: #f46151,
),
email: (
light: #de0c0c,
dark: #ff5050,
),
pgp: (
light: #757575,
dark: #979797,
),
sms: (
light: #6fcc01,
dark: #8edb34,
),
news-1: (
light: #ff1b1b,
dark: #f06060,
),
news-2: (
light: #f78200,
dark: #fd992a,
),
news-3: (
light: #f2b702,
dark: #ffcc2e,
),
news-4: (
light: #5ebd3e,
dark: #78df55,
),
news-5: (
light: #009cdf,
dark: #29bfff,
),
news-6: (
light: #3e49bb,
dark: #7b87ff,
),
news-7: (
light: #973999,
dark: #db60dd,
),
);
$color-serverless: #87cef7;
@@ -106,7 +214,12 @@ $icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtb
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), "#{$key}");
$theme-map: map-merge($theme-map, ($key: $value)) !global;
$theme-map: map-merge(
$theme-map,
(
$key: $value,
)
) !global;
}
@content;
$theme-map: null !global;

View File

@@ -8,26 +8,50 @@
.beat {
display: inline-block;
animation: beat 2s infinite; // 30 bpm, call 911 if you see this please.
animation: beat 2s infinite; // 30 bpm, call 911 if you see this please.
}
// stylelint-disable indentation
@keyframes wave {
0% { transform: rotate( 0deg); }
10% { transform: rotate(-10deg); }
20% { transform: rotate( 12deg); }
30% { transform: rotate(-10deg); }
40% { transform: rotate( 9deg); }
50% { transform: rotate( 0deg); }
100% { transform: rotate( 0deg); }
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(-10deg);
}
20% {
transform: rotate(12deg);
}
30% {
transform: rotate(-10deg);
}
40% {
transform: rotate(9deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.25); }
20% { transform: scale(1); }
30% { transform: scale(1.25); }
40% { transform: scale(1); }
100% { transform: scale(1); }
0% {
transform: scale(1);
}
10% {
transform: scale(1.25);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.25);
}
40% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
// stylelint-enable indentation

View File

@@ -1,7 +1,7 @@
@charset "UTF-8";
div#content {
font-size: 0.935em; // ~15px
font-size: 0.935em; // ~15px
letter-spacing: -0.008em;
line-height: 1.7;

View File

@@ -3,6 +3,7 @@
// Note to self: got this list after subsetting Inter with glyphhanger:
// https://github.com/filamentgroup/glyphhanger
// ex: glyphhanger --whitelist="" --family="Inter" --formats=woff2,woff --subset="*.woff"
// prettier-ignore
$unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
/*!

View File

@@ -17,7 +17,7 @@ main {
margin: 0 auto;
padding-left: 1.5em;
padding-right: 1.5em;
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
@include themed() {
color: t(color-text);

View File

@@ -2,37 +2,92 @@
/*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
div.highlight span {
&.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
&.k,
&.kc,
&.kd,
&.kp,
&.kr,
&.kt,
&.no {
@include themed() {
color: t(syntax-k);
}
}
&.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
&.n,
&.bp,
&.nb,
&.ni,
&.fm,
&.nl,
&.nn,
&.py,
&.nv,
&.vc,
&.vg,
&.vi,
&.vm,
&.p {
@include themed() {
color: t(syntax-n);
}
}
&.na, &.nc, &.nd, &.ne, &.nf, &.nx {
&.na,
&.nc,
&.nd,
&.ne,
&.nf,
&.nx {
@include themed() {
color: t(syntax-na);
}
}
&.err, &.nt, &.o, &.ow, &.kn {
&.err,
&.nt,
&.o,
&.ow,
&.kn {
@include themed() {
color: t(syntax-err);
}
}
&.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
&.l,
&.se,
&.m,
&.mb,
&.mf,
&.mh,
&.mi,
&.il,
&.mo {
@include themed() {
color: t(syntax-l);
}
}
&.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
&.ld,
&.s,
&.sa,
&.sb,
&.sc,
&.dl,
&.sd,
&.s2,
&.sh,
&.si,
&.sx,
&.sr,
&.s1,
&.ss {
@include themed() {
color: t(syntax-ld);
}
}
&.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
&.c,
&.ch,
&.cm,
&.c1,
&.cs,
&.cp,
&.cpf {
@include themed() {
color: t(syntax-c);
}

View File

@@ -63,8 +63,8 @@ main#home {
// easter egg emoji cursor
&#birthday {
// prettier-ignore
&:hover {
// stylelint-disable-next-line function-url-quotes
cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
}
}

View File

@@ -27,7 +27,7 @@ main#single {
h1#title {
margin-top: 0.3em;
margin-bottom: 0.6em;
margin-left: -0.03em; // TODO: why is this indented slightly?
margin-left: -0.03em; // TODO: why is this indented slightly?
font-size: 2.2em;
line-height: 1.3;
font-weight: 700;