mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-17 16:45:31 -04:00
dark mode 😎 (#112)
* prepare dark mode stuffs * themed all global colors * store preference in local storage * toggle styling * lightbulb position * minify bundled script with uglify-js instead of hugo * detect whether user has an OS-wide dark mode preference and use that by default * two different colors for each homepage link * inline bulb SVGs into stylesheet * fingerprint and cache styles for a year * fix lightbulb positioning with weird magic numbers, will come back to that * themed syntax highlighting * use terser instead of uglify-js (b/c of ES6)
This commit is contained in:
GitHub
61
assets/js/dark-mode.js
Normal file
61
assets/js/dark-mode.js
Normal file
@@ -0,0 +1,61 @@
|
||||
/* jshint esversion: 6, indent: 2, browser: true */
|
||||
|
||||
// inspired by https://codepen.io/kevinpowell/pen/EMdjOV
|
||||
|
||||
// lightbulb toggle re-appears now that we know user has JS enabled
|
||||
const toggle = document.querySelector('button#dark-mode-toggle');
|
||||
toggle.style.visibility = "visible";
|
||||
|
||||
// check for preset `dark_mode_pref` in localStorage
|
||||
let pref = localStorage.getItem('dark_mode_pref');
|
||||
|
||||
// check for OS dark mode setting
|
||||
// https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
|
||||
const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const isSystemLight = window.matchMedia("(prefers-color-scheme: light)").matches;
|
||||
|
||||
// keep track of current state, no matter how we get there...
|
||||
let currentlyDark = false;
|
||||
|
||||
const activateDarkMode = function() {
|
||||
document.body.classList.remove('light');
|
||||
document.body.classList.add('dark');
|
||||
currentlyDark = true;
|
||||
};
|
||||
|
||||
const activateLightMode = function() {
|
||||
document.body.classList.remove('dark');
|
||||
document.body.classList.add('light');
|
||||
currentlyDark = false;
|
||||
};
|
||||
|
||||
// if user already explicitly enabled dark mode in the past, turn it back on.
|
||||
if (pref === 'true') {
|
||||
activateDarkMode();
|
||||
}
|
||||
|
||||
// user has never clicked the button, so go by their OS preference until/if they do so
|
||||
if (pref !== "true" && pref !== "false") {
|
||||
if (isSystemDark) activateDarkMode();
|
||||
if (isSystemLight) activateLightMode();
|
||||
|
||||
// real-time switching if supported by OS/browser
|
||||
// TODO: these keep listening even when the parent condition becomes false (until refresh or new page)
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode());
|
||||
window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode());
|
||||
}
|
||||
|
||||
// handle toggle click
|
||||
toggle.addEventListener("click", function() {
|
||||
// get current preference, if there is one
|
||||
let pref = localStorage.getItem("dark_mode_pref");
|
||||
|
||||
// switch to the opposite theme & save preference in local storage
|
||||
if (pref !== "true") {
|
||||
activateDarkMode();
|
||||
localStorage.setItem("dark_mode_pref", "true");
|
||||
} else {
|
||||
activateLightMode();
|
||||
localStorage.setItem("dark_mode_pref", "false");
|
||||
}
|
||||
});
|
||||
@@ -6,10 +6,13 @@
|
||||
// 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-underline-opacity);
|
||||
$color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
|
||||
|
||||
// Less compatible but better for light/dark mode switching.
|
||||
$color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);
|
||||
|
||||
// Return non-gradient linear-gradient():
|
||||
@return linear-gradient($color-opaque, $color-opaque);
|
||||
@return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
|
||||
}
|
||||
|
||||
// Web fonts (see components/_fonts.scss)
|
||||
|
||||
118
assets/sass/abstracts/_themes.scss
Normal file
118
assets/sass/abstracts/_themes.scss
Normal file
@@ -0,0 +1,118 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// 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
|
||||
),
|
||||
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
|
||||
)
|
||||
);
|
||||
|
||||
$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: (light: #fb4d42, dark: #ff5146),
|
||||
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;
|
||||
|
||||
// Icons (modified twemojis)
|
||||
// lightbulb on
|
||||
$icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
|
||||
// lightbulb off
|
||||
$icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0NDQ0JDQiIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjN0Q3QTcyIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
|
||||
|
||||
// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
|
||||
@mixin themed() {
|
||||
@each $theme, $map in $themes {
|
||||
body.#{$theme} & {
|
||||
$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;
|
||||
}
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function t($key) {
|
||||
@return map-get($theme-map, $key);
|
||||
}
|
||||
@@ -16,64 +16,10 @@ $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
|
||||
"Menlo", "Courier", monospace;
|
||||
// stylelint-enable indentation
|
||||
|
||||
// Misc Settings
|
||||
// Width at which to switch to mobile styles
|
||||
$responsive-width: 820px;
|
||||
|
||||
// Fancy link underline settings
|
||||
$link-underline-opacity: 40%;
|
||||
$link-underline-size: 2px;
|
||||
|
||||
// Global Colors
|
||||
$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;
|
||||
|
||||
// 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: #fb4d42,
|
||||
javascript: #f48024,
|
||||
node: #6fbc4e,
|
||||
golang: #00acd7,
|
||||
react: #4fb3cd,
|
||||
angular: #c3002f,
|
||||
php: #8892bf,
|
||||
ruby: #d34135,
|
||||
python: #fea500,
|
||||
java: #ab6311,
|
||||
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;
|
||||
$link-opacity-color: #ffffff;
|
||||
|
||||
@@ -16,7 +16,10 @@ div#content {
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid $color-kinda-light;
|
||||
|
||||
@include themed() {
|
||||
border-bottom: 1px solid t(color-kinda-light);
|
||||
}
|
||||
}
|
||||
|
||||
p.image img,
|
||||
@@ -38,8 +41,11 @@ div#content {
|
||||
// image captions
|
||||
figcaption {
|
||||
font-size: 0.95em;
|
||||
color: $color-medium;
|
||||
text-align: center;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,8 +109,7 @@ div#content {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--content() {
|
||||
// stylelint-disable block-no-empty
|
||||
// stylelint-disable-block block-no-empty
|
||||
}
|
||||
|
||||
@@ -7,11 +7,17 @@ footer {
|
||||
line-height: 1.7;
|
||||
padding: 1.25em 1.75em;
|
||||
box-sizing: border-box;
|
||||
color: $color-medium;
|
||||
border-top: 1px solid $color-light;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-medium);
|
||||
border-top: 1px solid t(color-kinda-light);
|
||||
background-color: t(color-super-duper-light);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@include themed() {
|
||||
color: t(color-medium);
|
||||
}
|
||||
}
|
||||
|
||||
div#row {
|
||||
@@ -38,8 +44,11 @@ footer {
|
||||
text-align: right;
|
||||
|
||||
a#source {
|
||||
border-bottom: 1px solid $color-light;
|
||||
padding-bottom: 2px;
|
||||
|
||||
@include themed() {
|
||||
border-bottom: 1px solid t(color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,8 +5,6 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: $color-super-duper-light; // really just the color of header & footer
|
||||
color: $color-text;
|
||||
font-family: $webfont-sans;
|
||||
font-kerning: normal;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
@@ -14,16 +12,25 @@ body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
main {
|
||||
@include themed() {
|
||||
color: t(color-text);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-links);
|
||||
background-image: underline-hack(t(color-links));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-size: 100% $link-underline-size;
|
||||
}
|
||||
@@ -39,42 +46,76 @@ strong {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid $color-links;
|
||||
margin-left: 0.5em;
|
||||
padding-left: 1em;
|
||||
|
||||
@include themed() {
|
||||
border-left: 5px solid t(color-links);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1.5em auto;
|
||||
height: 2px;
|
||||
border: 0;
|
||||
background-color: $color-light;
|
||||
|
||||
@include themed() {
|
||||
background-color: t(color-light);
|
||||
}
|
||||
}
|
||||
|
||||
// button reset
|
||||
button {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
|
||||
// inherit font & color from ancestor
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
|
||||
// corrects inability to style clickable `input` types in iOS
|
||||
appearance: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// all code
|
||||
code {
|
||||
font-family: $webfont-mono;
|
||||
background: $color-super-duper-light;
|
||||
font-size: 0.95em;
|
||||
letter-spacing: 0;
|
||||
page-break-inside: avoid;
|
||||
|
||||
// inline code in paragraphs (single tildes)
|
||||
border: 1px solid $color-light;
|
||||
padding: 0.2em;
|
||||
|
||||
@include themed() {
|
||||
background-color: t(color-super-duper-light);
|
||||
border: 1px solid t(color-light);
|
||||
}
|
||||
}
|
||||
|
||||
// code fences
|
||||
div.highlight {
|
||||
background: $color-super-duper-light;
|
||||
border: 1px solid $color-light;
|
||||
border-left: 3px solid $color-links;
|
||||
line-height: 1.6;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
object-fit: scale-down;
|
||||
margin: 1em 0;
|
||||
|
||||
@include themed() {
|
||||
border: 1px solid t(color-light);
|
||||
border-left: 3px solid t(color-links);
|
||||
background-color: t(color-super-duper-light);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-left: 1.5em;
|
||||
@@ -100,9 +141,31 @@ img.emoji {
|
||||
// white background for entire width content area
|
||||
div#wrap {
|
||||
width: 100%;
|
||||
background-color: $color-background;
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--global() {
|
||||
|
||||
@@ -3,7 +3,11 @@
|
||||
// Global Header Styles
|
||||
header {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $color-kinda-light;
|
||||
|
||||
@include themed() {
|
||||
border-bottom: 1px solid t(color-kinda-light);
|
||||
background-color: t(color-super-duper-light);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
@@ -18,7 +22,10 @@ header {
|
||||
a#logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $color-medium-dark;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-medium-dark);
|
||||
}
|
||||
|
||||
h1#name {
|
||||
margin-left: 0.8em;
|
||||
@@ -34,7 +41,9 @@ header {
|
||||
|
||||
// mix up logo colors on hover
|
||||
&:hover {
|
||||
color: $color-links;
|
||||
@include themed() {
|
||||
color: t(color-links);
|
||||
}
|
||||
|
||||
svg {
|
||||
g#c1 {
|
||||
@@ -65,12 +74,18 @@ header {
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $color-medium;
|
||||
transition: transform 0.15s ease-in-out;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-medium);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
color: $color-links;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-links);
|
||||
}
|
||||
}
|
||||
|
||||
span.icon {
|
||||
@@ -89,11 +104,23 @@ header {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode toggle
|
||||
button#dark-mode-toggle {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 1em;
|
||||
cursor: pointer;
|
||||
|
||||
// hide by default in case user's JS is disabled
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--header() {
|
||||
header nav {
|
||||
@@ -115,7 +142,7 @@ header {
|
||||
font-size: 1.7em;
|
||||
|
||||
li {
|
||||
margin-left: 1em;
|
||||
margin-left: 0.85em;
|
||||
|
||||
a {
|
||||
span.icon {
|
||||
@@ -132,6 +159,14 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode toggle
|
||||
button#dark-mode-toggle {
|
||||
// TODO: figure out need for weird magic numbers here
|
||||
height: 1.025em;
|
||||
width: 0.75em;
|
||||
margin-top: 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,25 +3,39 @@
|
||||
/*! 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;
|
||||
@include themed() {
|
||||
color: t(syntax-k);
|
||||
}
|
||||
}
|
||||
&.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
|
||||
color: #111111;
|
||||
@include themed() {
|
||||
color: t(syntax-n);
|
||||
}
|
||||
}
|
||||
&.na, &.nc, &.nd, &.ne, &.nf, &.nx {
|
||||
color: #068200;
|
||||
@include themed() {
|
||||
color: t(syntax-na);
|
||||
}
|
||||
}
|
||||
&.err, &.nt, &.o, &.ow, &.kn {
|
||||
color: #e8003d;
|
||||
@include themed() {
|
||||
color: t(syntax-err);
|
||||
}
|
||||
}
|
||||
&.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
|
||||
color: #8145ec;
|
||||
@include themed() {
|
||||
color: t(syntax-l);
|
||||
}
|
||||
}
|
||||
&.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
|
||||
color: #b35c00;
|
||||
@include themed() {
|
||||
color: t(syntax-ld);
|
||||
}
|
||||
}
|
||||
&.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
|
||||
color: #6b6859;
|
||||
@include themed() {
|
||||
color: t(syntax-c);
|
||||
}
|
||||
}
|
||||
&.ge {
|
||||
font-style: italic;
|
||||
@@ -32,7 +46,10 @@ div.highlight span {
|
||||
|
||||
// line numbers
|
||||
&.lnt {
|
||||
color: #999999;
|
||||
user-select: none;
|
||||
|
||||
@include themed() {
|
||||
color: t(syntax-lnt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ $base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}/"; // consistent trailin
|
||||
// stylelint-enable
|
||||
|
||||
// Variables & Functions
|
||||
@import 'abstracts/themes';
|
||||
@import 'abstracts/variables';
|
||||
@import 'abstracts/functions';
|
||||
|
||||
|
||||
@@ -17,7 +17,6 @@ main#etc {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--etc() {
|
||||
main#etc {
|
||||
|
||||
@@ -43,21 +43,16 @@ main#home {
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: 1em;
|
||||
padding: 4px;
|
||||
border: 1px solid $color-light;
|
||||
border-radius: 50%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
|
||||
@include themed() {
|
||||
border: 1px solid t(color-light);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
// Loop through $colors-home (see abstracts/_variables)
|
||||
@each $id, $color in $colors-home {
|
||||
&##{$id} {
|
||||
color: $color;
|
||||
background-image: underline-hack($color);
|
||||
}
|
||||
}
|
||||
|
||||
&#blog {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0;
|
||||
@@ -83,11 +78,22 @@ main#home {
|
||||
}
|
||||
|
||||
&#shh {
|
||||
color: $color-medium-light;
|
||||
@include themed() {
|
||||
color: t(color-medium-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through $colors-home (see abstracts/_variables)
|
||||
@each $id, $colors in $colors-home {
|
||||
@each $theme, $color in $colors {
|
||||
body.#{$theme} main#home a##{$id} {
|
||||
color: $color;
|
||||
background-image: underline-hack($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--home() {
|
||||
|
||||
@@ -30,9 +30,12 @@ main#list {
|
||||
margin-bottom: 1em;
|
||||
|
||||
div.date {
|
||||
color: $color-medium;
|
||||
width: 5.25em;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@@ -42,7 +45,6 @@ main#list {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--list() {
|
||||
main#list {
|
||||
|
||||
@@ -7,12 +7,15 @@ main#single {
|
||||
margin: 0 auto;
|
||||
|
||||
div#meta {
|
||||
color: $color-medium;
|
||||
font-size: 0.85em;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 0.8em;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-medium);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -37,7 +40,10 @@ main#single {
|
||||
div#comments {
|
||||
margin-top: 1.5em;
|
||||
padding-top: 0.5em;
|
||||
border-top: 2px solid $color-light;
|
||||
|
||||
@include themed() {
|
||||
border-top: 2px solid t(color-light);
|
||||
}
|
||||
|
||||
div.utterances {
|
||||
max-width: unset;
|
||||
@@ -45,7 +51,6 @@ main#single {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--single() {
|
||||
main#single {
|
||||
|
||||
@@ -19,9 +19,12 @@ main#video {
|
||||
font-size: 0.85em;
|
||||
letter-spacing: -0.005em;
|
||||
line-height: 1.5;
|
||||
color: #777777;
|
||||
margin: 1.25em 1em 0 1em;
|
||||
|
||||
@include themed() {
|
||||
color: t(color-medium-light);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.001em;
|
||||
@@ -35,7 +38,6 @@ main#video {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--videos() {
|
||||
main#video {
|
||||
|
||||
72
assets/vendor/emoji/emoji.js
vendored
72
assets/vendor/emoji/emoji.js
vendored
@@ -1,8 +1,10 @@
|
||||
/*jslint indent: 2, browser: true, bitwise: true, plusplus: true */
|
||||
var twemoji = (function (
|
||||
/*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
|
||||
|
||||
/*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
|
||||
https://github.com/twitter/twemoji/blob/gh-pages/LICENSE
|
||||
*/
|
||||
*/
|
||||
|
||||
var emoji = (function (
|
||||
|
||||
// WARNING: this file is generated automatically via
|
||||
// `node scripts/build.js`
|
||||
@@ -16,7 +18,7 @@ var twemoji = (function (
|
||||
|
||||
var
|
||||
// the exported module object
|
||||
twemoji = {
|
||||
emoji = {
|
||||
|
||||
|
||||
/////////////////////////
|
||||
@@ -48,10 +50,10 @@ var twemoji = (function (
|
||||
* i.e. \uD83D\uDCA9
|
||||
*
|
||||
* @example
|
||||
* twemoji.convert.fromCodePoint('1f1e8');
|
||||
* emoji.convert.fromCodePoint('1f1e8');
|
||||
* // "\ud83c\udde8"
|
||||
*
|
||||
* '1f1e8-1f1f3'.split('-').map(twemoji.convert.fromCodePoint).join('')
|
||||
* '1f1e8-1f1f3'.split('-').map(emoji.convert.fromCodePoint).join('')
|
||||
* // "\ud83c\udde8\ud83c\uddf3"
|
||||
*/
|
||||
fromCodePoint: fromCodePoint,
|
||||
@@ -64,10 +66,10 @@ var twemoji = (function (
|
||||
* @return string utf16 transformed into codepoint, i.e. '1F4A9'
|
||||
*
|
||||
* @example
|
||||
* twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
|
||||
* emoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
|
||||
* // "1f1e8-1f1f3"
|
||||
*
|
||||
* twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~');
|
||||
* emoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~');
|
||||
* // "1f1e8~1f1f3"
|
||||
*/
|
||||
toCodePoint: toCodePoint
|
||||
@@ -84,7 +86,7 @@ var twemoji = (function (
|
||||
* a fallback for network problems is desired.
|
||||
* Automatically added to Image nodes via DOM
|
||||
* It could be recycled for string operations via:
|
||||
* $('img.emoji').on('error', twemoji.onerror)
|
||||
* $('img.emoji').on('error', emoji.onerror)
|
||||
*/
|
||||
onerror: function onerror() {
|
||||
if (this.parentNode) {
|
||||
@@ -99,14 +101,14 @@ var twemoji = (function (
|
||||
* @overloads
|
||||
*
|
||||
* String replacement for `innerHTML` or server side operations
|
||||
* twemoji.parse(string);
|
||||
* twemoji.parse(string, Function);
|
||||
* twemoji.parse(string, Object);
|
||||
* emoji.parse(string);
|
||||
* emoji.parse(string, Function);
|
||||
* emoji.parse(string, Object);
|
||||
*
|
||||
* HTMLElement tree parsing for safer operations over existing DOM
|
||||
* twemoji.parse(HTMLElement);
|
||||
* twemoji.parse(HTMLElement, Function);
|
||||
* twemoji.parse(HTMLElement, Object);
|
||||
* emoji.parse(HTMLElement);
|
||||
* emoji.parse(HTMLElement, Function);
|
||||
* emoji.parse(HTMLElement, Object);
|
||||
*
|
||||
* @param string|HTMLElement the source to parse and enrich with emoji.
|
||||
*
|
||||
@@ -152,23 +154,23 @@ var twemoji = (function (
|
||||
* Object if specified, an object containing the following properties
|
||||
*
|
||||
* callback Function the callback to invoke per each found emoji.
|
||||
* base string the base url, by default twemoji.base
|
||||
* ext string the image extension, by default twemoji.ext
|
||||
* size string the assets size, by default twemoji.size
|
||||
* base string the base url, by default emoji.base
|
||||
* ext string the image extension, by default emoji.ext
|
||||
* size string the assets size, by default emoji.size
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* twemoji.parse("I \u2764\uFE0F emoji!");
|
||||
* emoji.parse("I \u2764\uFE0F emoji!");
|
||||
* // I <img class="emoji" draggable="false" alt="❤️" src="/assets/2764.gif"/> emoji!
|
||||
*
|
||||
*
|
||||
* twemoji.parse("I \u2764\uFE0F emoji!", function(iconId, options) {
|
||||
* emoji.parse("I \u2764\uFE0F emoji!", function(iconId, options) {
|
||||
* return '/assets/' + iconId + '.gif';
|
||||
* });
|
||||
* // I <img class="emoji" draggable="false" alt="❤️" src="/assets/2764.gif"/> emoji!
|
||||
*
|
||||
*
|
||||
* twemoji.parse("I \u2764\uFE0F emoji!", {
|
||||
* emoji.parse("I \u2764\uFE0F emoji!", {
|
||||
* size: 72,
|
||||
* callback: function(iconId, options) {
|
||||
* return '/assets/' + options.size + '/' + iconId + options.ext;
|
||||
@@ -207,7 +209,7 @@ var twemoji = (function (
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* if (twemoji.test(someContent)) {
|
||||
* if (emoji.test(someContent)) {
|
||||
* console.log("emoji All The Things!");
|
||||
* }
|
||||
*/
|
||||
@@ -243,7 +245,7 @@ var twemoji = (function (
|
||||
// just a private shortcut
|
||||
fromCharCode = String.fromCharCode;
|
||||
|
||||
return twemoji;
|
||||
return emoji;
|
||||
|
||||
|
||||
/////////////////////////
|
||||
@@ -333,9 +335,9 @@ var twemoji = (function (
|
||||
* @param Object options containing info about how to parse
|
||||
*
|
||||
* .callback Function the callback to invoke per each found emoji.
|
||||
* .base string the base url, by default twemoji.base
|
||||
* .ext string the image extension, by default twemoji.ext
|
||||
* .size string the assets size, by default twemoji.size
|
||||
* .base string the base url, by default emoji.base
|
||||
* .ext string the image extension, by default emoji.ext
|
||||
* .size string the assets size, by default emoji.size
|
||||
*
|
||||
* @return Element same generic node with emoji in place, if any.
|
||||
*/
|
||||
@@ -420,9 +422,9 @@ var twemoji = (function (
|
||||
* @param Object options containing info about how to parse
|
||||
*
|
||||
* .callback Function the callback to invoke per each found emoji.
|
||||
* .base string the base url, by default twemoji.base
|
||||
* .ext string the image extension, by default twemoji.ext
|
||||
* .size string the assets size, by default twemoji.size
|
||||
* .base string the base url, by default emoji.base
|
||||
* .ext string the image extension, by default emoji.ext
|
||||
* .size string the assets size, by default emoji.size
|
||||
*
|
||||
* @return the string with <img tags> replacing all found and parsed emoji
|
||||
*/
|
||||
@@ -525,11 +527,11 @@ var twemoji = (function (
|
||||
return (typeof what === 'string' ? parseString : parseNode)(what, {
|
||||
callback: how.callback || defaultImageSrcGenerator,
|
||||
attributes: typeof how.attributes === 'function' ? how.attributes : returnNull,
|
||||
base: typeof how.base === 'string' ? how.base : twemoji.base,
|
||||
ext: how.ext || twemoji.ext,
|
||||
size: how.folder || toSizeSquaredAsset(how.size || twemoji.size),
|
||||
className: how.className || twemoji.className,
|
||||
onerror: how.onerror || twemoji.onerror
|
||||
base: typeof how.base === 'string' ? how.base : emoji.base,
|
||||
ext: how.ext || emoji.ext,
|
||||
size: how.folder || toSizeSquaredAsset(how.size || emoji.size),
|
||||
className: how.className || emoji.className,
|
||||
onerror: how.onerror || emoji.onerror
|
||||
});
|
||||
}
|
||||
|
||||
@@ -567,4 +569,4 @@ var twemoji = (function (
|
||||
|
||||
}());
|
||||
|
||||
twemoji.parse(document.body);
|
||||
emoji.parse(document.body);
|
||||
|
||||
2
assets/vendor/emoji/emoji.min.js
vendored
2
assets/vendor/emoji/emoji.min.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user