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:
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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;
|
||||
|
||||
/*!
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user