jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 11:55:31 -04:00
Code Issues Activity

re-visit light/dark theme colors (especially syntax highlighting)

Browse Source
This commit is contained in:
Jake Jarvis
2020-05-09 09:59:35 -04:00
parent 1458e6e2a9
commit 3fe24f2216
15 changed files with 301 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
assets/sass/abstracts/_themes.scss
View File

@@ -3,55 +3,33 @@
// Dark & Light Themes
$themes: (
light: (
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-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,
background: #ffffff,
background-top: #fcfcfc,
text: #202020,
medium-dark: #515151,
medium: #5e5e5e,
medium-light: #757575,
light: #d2d2d2,
kinda-light: #e3e3e3,
super-light: #f4f4f4,
super-duper-light: #fbfbfb,
links: #0e6dc2,
),
dark: (
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-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,
background: #292929,
background-top: #202020,
text: #efefef,
medium-dark: #d0d0d0,
medium: #b1b1b1,
medium-light: #929292,
light: #646464,
kinda-light: #535353,
super-light: #272727,
super-duper-light: #1f1f1f,
links: #85baea,
),
);
$color-light-background: #fbfbfb;
$color-dark-background: #1f1f1f;
// For nifty color swapping on svg logo hover in components/_header.scss
$color-logo1: #6fbc4e;
$color-logo2: #ffb900;
$color-logo3: #009cdf;
// Colorful Homepage
$colors-home: (
boston: (
@@ -201,6 +179,11 @@ $colors-home: (
);
$color-serverless: #87cef7;
// For nifty color swapping on svg logo hover in components/_header.scss
$color-logo1: #6fbc4e;
$color-logo2: #ffb900;
$color-logo3: #009cdf;
// Icons (modified twemojis)
// lightbulb on
$icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";

4
assets/sass/components/_content.scss
View File

@@ -19,7 +19,7 @@ div#content {
border-bottom: 1px solid;
@include themed() {
border-color: t(color-kinda-light);
border-color: t(kinda-light);
}
}
@@ -47,7 +47,7 @@ div#content {
font-size: 0.95em;
@include themed() {
color: t(color-medium);
color: t(medium);
}
}
}

1
assets/sass/components/_fonts.scss
View File

@@ -31,3 +31,4 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF
* https://github.com/source-foundry/Hack/blob/v3.003/LICENSE.md
*/
@include font-face("Hack", "vendor/hack/hack-regular-subset", 400);
@include font-face("Hack", "vendor/hack/hack-italic-subset", 400, italic);

9
assets/sass/components/_footer.scss
View File

@@ -10,14 +10,13 @@ footer {
border-top: 1px solid;
@include themed() {
color: t(color-medium);
border-color: t(color-kinda-light);
background-color: t(color-super-duper-light);
color: t(medium-dark);
border-color: t(kinda-light);
}
a {
@include themed() {
color: t(color-medium);
color: t(medium-dark);
}
}
@@ -49,7 +48,7 @@ footer {
border-bottom: 1px solid;
@include themed() {
border-color: t(color-light);
border-color: t(light);
}
}
}

102
assets/sass/components/_global.scss
View File

@@ -10,6 +10,24 @@ body {
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
line-height: 1.5;
box-sizing: border-box;
// manually setting light/dark mode backgrounds and bulb icon
// really just the color of header & footer
&.light {
background-color: map-get(map-get($themes, "light"), "background-top");
button.dark-mode-toggle {
background-image: url($icon-bulb-on);
}
}
&.dark {
background-color: map-get(map-get($themes, "dark"), "background-top");
button.dark-mode-toggle {
background-image: url($icon-bulb-off);
}
}
}
main {
@@ -20,7 +38,7 @@ main {
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
@include themed() {
color: t(color-text);
color: t(text);
}
}
@@ -33,8 +51,8 @@ a {
transition: background-size 0.25s ease-in-out;
@include themed() {
color: t(color-links);
background-image: underline-hack(t(color-links));
color: t(links);
background-image: underline-hack(t(links));
}
&:hover {
@@ -52,12 +70,13 @@ strong {
}
blockquote {
margin-left: 0.5em;
padding-left: 1em;
border-left: 5px solid;
margin-left: 0;
padding-left: 1.5em;
border-left: 3px solid;
@include themed() {
border-color: t(color-links);
color: t(medium-dark);
border-color: t(links);
}
}
@@ -67,7 +86,7 @@ hr {
border: 0;
@include themed() {
background-color: t(color-light);
background-color: t(light);
}
}
@@ -93,51 +112,6 @@ button {
}
}
// all code
code {
font-family: $webfont-mono;
font-size: 0.95em;
letter-spacing: 0;
page-break-inside: avoid;
border: 1px solid;
// inline code in paragraphs (single tildes)
padding: 0.2em;
@include themed() {
background-color: t(color-super-duper-light);
border-color: t(color-light);
}
}
// code fences
div.highlight {
line-height: 1.6;
max-width: 100%;
overflow-x: scroll;
object-fit: scale-down;
margin: 1em 0;
border: 1px solid;
border-left: 3px solid;
@include themed() {
border-color: t(color-light);
border-left-color: t(color-links);
background-color: t(color-super-duper-light);
}
pre {
display: block;
margin-left: 1.5em;
}
// overrides inline code styles
code {
border: 0;
padding: 0;
}
}
// make SVG twemojis relative to surrounding text
// https://github.com/twitter/twemoji#inline-styles
img.emoji {
@@ -153,27 +127,7 @@ div#wrap {
width: 100%;
@include themed() {
background-color: t(color-background);
}
}
// manually setting light/dark mode backgrounds and bulb icon
// really just the color of header & footer
body {
&.light {
background-color: $color-light-background;
button.dark-mode-toggle {
background-image: url($icon-bulb-on);
}
}
&.dark {
background-color: $color-dark-background;
button.dark-mode-toggle {
background-image: url($icon-bulb-off);
}
background-color: t(background);
}
}

11
assets/sass/components/_header.scss
View File

@@ -8,8 +8,7 @@ header {
border-bottom: 1px solid;
@include themed() {
border-color: t(color-kinda-light);
background-color: t(color-super-duper-light);
border-color: t(kinda-light);
}
nav {
@@ -26,7 +25,7 @@ header {
align-items: center;
@include themed() {
color: t(color-medium);
color: t(medium-dark);
}
h1#name {
@@ -44,7 +43,7 @@ header {
// mix up logo colors on hover
&:hover {
@include themed() {
color: t(color-links);
color: t(links);
}
svg {
@@ -80,14 +79,14 @@ header {
transition: transform 0.15s ease-in-out;
@include themed() {
color: t(color-medium);
color: t(medium-dark);
}
&:hover {
transform: scale(1.15);
@include themed() {
color: t(color-links);
color: t(links);
}
}

316
assets/sass/components/_syntax.scss
View File

@@ -1,110 +1,222 @@
@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 {
@include themed() {
color: t(syntax-k);
}
}
&.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 {
@include themed() {
color: t(syntax-na);
}
}
&.err,
&.nt,
&.o,
&.ow,
&.kn {
@include themed() {
color: t(syntax-err);
}
}
&.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 {
@include themed() {
color: t(syntax-ld);
}
}
&.c,
&.ch,
&.cm,
&.c1,
&.cs,
&.cp,
&.cpf {
@include themed() {
color: t(syntax-c);
}
}
&.ge {
font-style: italic;
}
&.gs {
font-weight: bold;
// all code
code {
font-family: $webfont-mono;
font-size: 0.95em;
letter-spacing: 0;
page-break-inside: avoid;
}
// inline code in paragraphs (single tildes)
p code {
padding: 0 0.15em;
}
// code fences
div.highlight {
font-size: 0.975em;
line-height: 1.7;
max-width: 100%;
overflow-x: scroll;
object-fit: scale-down;
margin: 1em 0;
border: 1px solid;
@include themed() {
border-color: t(light);
}
// line numbers
&.lnt {
user-select: none;
pre {
padding-left: 1.7em;
}
@include themed() {
color: t(syntax-lnt);
// global table styles for line numbers and font styles
.chroma {
.lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: auto;
overflow: auto;
display: block;
}
// columns
.lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
// line numbers
.ln,
.lnt {
user-select: none;
}
.gh,
.gi,
.gu {
font-weight: bold;
}
.kd,
.nb,
.nl,
//.nv,
.vc,
.vg,
.vi,
.ge {
font-style: italic;
}
.gl {
text-decoration: underline;
}
}
}
/*! Syntax Highlighting - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
body.light {
div.highlight {
color: #464646;
background-color: #fdfdfd;
.chroma {
.k,
.kc,
.kd,
.kp,
.kr,
.kt,
.no {
color: #029cb9;
}
.na,
.nc,
.nd,
.ne,
.nf,
.nx {
color: #70a800;
}
.nt,
.o,
.ow,
.kn {
color: #f92672;
}
.l,
.se,
.m,
.mb,
.mf,
.mh,
.mi,
.il,
.mo {
color: #ae81ff;
}
.ld,
.s,
.sa,
.sb,
.sc,
.dl,
.sd,
.s2,
.sh,
.si,
.sx,
.sr,
.s1,
.ss {
color: #d88200;
}
.c,
.ch,
.cm,
.c1,
.cs,
.cp,
.cpf {
color: #75715e;
}
.lnt {
color: #8a8a8a;
}
}
}
}
/*! Syntax Highlighting - modified from Dracula: https://github.com/dracula/pygments */
body.dark {
div.highlight {
color: #dfdfdf;
background-color: #1f1f1f;
.chroma {
.k,
.kc,
.kd,
.kp,
.kr,
.kt,
.no {
color: #3b9dd2;
}
.na,
.nc,
.nd,
.ne,
.nf,
.nx {
color: #78df55;
}
.nt,
.o,
.ow,
.kn {
color: #f95757;
}
.l,
.se,
.m,
.mb,
.mf,
.mh,
.mi,
.il,
.mo {
color: #d588fb;
}
.ld,
.s,
.sa,
.sb,
.sc,
.dl,
.sd,
.s2,
.sh,
.si,
.sx,
.sr,
.s1,
.ss {
color: #fd992a;
}
.c,
.ch,
.cm,
.c1,
.cs,
.cp,
.cpf {
color: #929292;
}
.lnt {
color: #b1b1b1;
}
}
}
}

4
assets/sass/pages/_home.scss
View File

@@ -49,7 +49,7 @@ main#home {
border-radius: 50%;
@include themed() {
border-color: t(color-light);
border-color: t(light);
}
}
@@ -69,7 +69,7 @@ main#home {
&#shh {
@include themed() {
color: t(color-medium-light);
color: t(medium-light);
}
}

2
assets/sass/pages/_list.scss
View File

@@ -33,7 +33,7 @@ main#list {
flex-shrink: 0;
@include themed() {
color: t(color-medium);
color: t(medium);
}
}

2
assets/sass/pages/_single.scss
View File

@@ -12,7 +12,7 @@ main#single {
margin-top: 0.8em;
@include themed() {
color: t(color-medium);
color: t(medium);
}
a {

2
assets/sass/pages/_videos.scss
View File

@@ -21,7 +21,7 @@ main#video {
margin: 1.25em 1em 0 1em;
@include themed() {
color: t(color-medium-light);
color: t(medium-light);
}
a {