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

clean up styles & extend old browser support via autoprefixer/eslint 🧓🏻

Browse Source 
and stop encoding emojis like a caveman
This commit is contained in:
Jake Jarvis
2020-07-04 19:29:18 -04:00
parent e10c3a10f7
commit 426e7d91f1
27 changed files with 631 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
assets/sass/abstracts/_functions.scss
View File

@@ -9,6 +9,7 @@
// $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
// Less compatible but better for light/dark mode switching.
// We fall back to non-alpha hex colors with postcss-color-rgba-fallback to mitigate this.
$color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);
// Return non-gradient linear-gradient():
@@ -31,7 +32,9 @@
// Simple dark/light theme switching via <body> class and $themes map in abstracts/_themes.scss
// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
@mixin themed() {
//
// Note: ONLY color rules should go in here (eg: just `border-color`, not the whole `border` rule)
@mixin colors() {
@each $theme, $map in $themes {
body.#{$theme} & {
$theme-map: () !global;
@@ -50,13 +53,17 @@
}
}
// Just @include themed() and call t() when a rule depends on which theme is active, eg:
// a {
// text-decoration: none;
// @include themed() {
// color: t(links);
// Just @include colors() and call c() when a rule depends on which theme is active.
// The argument is a key in the $themes array in abstracts/_themes.
//
// img {
// border: 1px solid;
//
// @include colors() {
// border-color: c(medium-dark); // ONLY the color rules here.
// }
// }
@function t($key) {
//
@function c($key) {
@return map-get($theme-map, $key);
}

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

@@ -19,8 +19,8 @@ div#content {
padding-bottom: 0.25em;
border-bottom: 1px solid;
@include themed() {
border-color: t(kinda-light);
@include colors() {
border-color: c(kinda-light);
}
}
@@ -45,8 +45,8 @@ div#content {
figcaption {
font-size: 0.95em;
@include themed() {
color: t(medium);
@include colors() {
color: c(medium);
}
}
}

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

@@ -8,14 +8,14 @@ footer {
box-sizing: border-box;
border-top: 1px solid;
@include themed() {
color: t(medium-dark);
border-color: t(kinda-light);
@include colors() {
color: c(medium-dark);
border-color: c(kinda-light);
}
a {
@include themed() {
color: t(medium-dark);
@include colors() {
color: c(medium-dark);
}
}
@@ -45,8 +45,8 @@ footer {
padding-bottom: 2px;
border-bottom: 1px solid;
@include themed() {
border-color: t(light);
@include colors() {
border-color: c(light);
}
}
}

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

@@ -37,8 +37,8 @@ main {
padding-right: 1.5em;
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
@include themed() {
color: t(text);
@include colors() {
color: c(text);
}
}
@@ -51,9 +51,9 @@ a {
padding-bottom: $link-underline-size;
transition: background-size 0.25s ease-in-out;
@include themed() {
color: t(links);
background-image: underline-hack(t(links));
@include colors() {
color: c(links);
background-image: underline-hack(c(links));
}
&:hover {
@@ -75,9 +75,9 @@ blockquote {
padding-left: 1.5em;
border-left: 3px solid;
@include themed() {
color: t(medium-dark);
border-color: t(links);
@include colors() {
color: c(medium-dark);
border-color: c(links);
}
}
@@ -86,8 +86,8 @@ hr {
height: 2px;
border: 0;
@include themed() {
background-color: t(light);
@include colors() {
background-color: c(light);
}
}
@@ -104,7 +104,8 @@ button {
font: inherit;
line-height: normal;
// corrects inability to style clickable `input` types in iOS
// corrects inability to style clickable `input` types on iOS
// stylelint-disable-next-line plugin/no-unsupported-browser-features
appearance: none;
}
@@ -116,30 +117,29 @@ img.emoji {
margin: 0;
padding: 0 0.09em;
vertical-align: -0.18em;
border: 0;
// have cursor act like it's a regular unicode emoji, especially
// since twemojis can still be copied-and-pasted
// have cursor act like it's hovering a regular unicode emoji, especially since twemojis can still be copied/pasted
cursor: text;
}
// manually set pointer cursor when emoji within link, otherwise it'll
// keep text cursor above
// manually unset cursor when emoji's in a link, otherwise it'll keep text cursor set above
a img.emoji {
cursor: pointer;
cursor: inherit;
}
// white background for entire width content area
div#wrap {
width: 100%;
@include themed() {
background-color: t(background);
@include colors() {
background-color: c(background);
}
}
// Responsive
@mixin responsive--global() {
body {
// Safari iOS menu bar reappers below 44px:
// Safari iOS menu bar reappears below 44px:
// https://www.eventbrite.com/engineering/mobile-safari-why/
padding-bottom: 45px !important;
// Allows you to scroll below the viewport; default value is visible
@@ -148,6 +148,7 @@ div#wrap {
// Fix weird font size behavior on iOS Safari: https://github.com/jakejarvis/jarv.is/issues/18
// https://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone
// https://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/
// stylelint-disable-next-line plugin/no-unsupported-browser-features
text-size-adjust: 100%;
}
}

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

@@ -7,8 +7,8 @@ header {
box-sizing: border-box;
border-bottom: 1px solid;
@include themed() {
border-color: t(kinda-light);
@include colors() {
border-color: c(kinda-light);
}
nav {
@@ -24,8 +24,8 @@ header {
display: flex;
align-items: center;
@include themed() {
color: t(medium-dark);
@include colors() {
color: c(medium-dark);
}
h1#name {
@@ -42,8 +42,8 @@ header {
// mix up logo colors on hover
&:hover {
@include themed() {
color: t(links);
@include colors() {
color: c(links);
}
svg {
@@ -78,15 +78,15 @@ header {
display: inline-block;
transition: transform 0.15s ease-in-out;
@include themed() {
color: t(medium-dark);
@include colors() {
color: c(medium-dark);
}
&:hover {
transform: scale(1.15);
@include themed() {
color: t(links);
@include colors() {
color: c(links);
}
}
@@ -102,7 +102,10 @@ header {
}
}
&:first-child {
// no margin on the first child to make more room on narrow windows (before responsiveness kicks in).
// last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
&:first-child,
&:last-child {
margin-left: 0;
}
}
@@ -111,13 +114,13 @@ header {
button.dark-mode-toggle {
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
height: 1.5em;
width: 1em;
margin-left: 1.7em;
cursor: pointer;
// hide by default in case user's JS is disabled
visibility: hidden;
// hidden by default in case user's JS is disabled, switches to `block` onload in dark-mode.js
display: none;
}
}
}
@@ -169,6 +172,7 @@ header {
height: 1.025em;
width: 0.75em;
margin-top: 0.15em;
margin-left: 1.15em;
}
}
}

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

@@ -5,13 +5,14 @@ code {
font-family: $webfont-mono;
font-size: 0.95em;
letter-spacing: 0;
page-break-inside: avoid;
page-break-inside: avoid; // stylelint-disable-line plugin/no-unsupported-browser-features
}
// inline code in paragraphs/elsewhere (single backticks)
:not(pre) > code {
padding: 0.15em 0.3em;
margin: 0 0.1em;
border: 1px solid;
}
// allow for inline code in post/page titles -- override above styles and match title
@@ -28,7 +29,6 @@ div.highlight {
line-height: 1.7;
max-width: 100%;
overflow-x: scroll;
object-fit: scale-down;
margin: 1em 0;
border: 1px solid;
@@ -58,7 +58,7 @@ div.highlight {
// line numbers
.ln,
.lnt {
user-select: none;
user-select: none; // stylelint-disable-line plugin/no-unsupported-browser-features
}
.gh,
.gi,
@@ -86,7 +86,7 @@ body.light {
:not(pre) > code {
color: #313131;
background-color: #fbfbfb;
border: 1px solid #d5d5d5;
border-color: #d5d5d5;
}
.chroma {
@@ -161,7 +161,7 @@ body.dark {
:not(pre) > code {
color: #dfdfdf;
background-color: #1e1e1e;
border: 1px solid #535353;
border-color: #535353;
}
.chroma {

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

@@ -59,8 +59,8 @@ main#home {
border: 1px solid;
border-radius: 50%;
@include themed() {
border-color: t(light);
@include colors() {
border-color: c(light);
}
}
@@ -68,7 +68,7 @@ main#home {
a#birthday {
// prettier-ignore
&:hover {
cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
cursor: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=") 5 5, auto;
}
}
@@ -79,8 +79,8 @@ main#home {
}
&#shh {
@include themed() {
color: t(medium-light);
@include colors() {
color: c(medium-light);
}
}

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

@@ -32,8 +32,8 @@ main#list {
width: 5.25em;
flex-shrink: 0;
@include themed() {
color: t(medium);
@include colors() {
color: c(medium);
}
}

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

@@ -11,8 +11,8 @@ main#single {
letter-spacing: 0.04em;
margin-top: 0.8em;
@include themed() {
color: t(medium);
@include colors() {
color: c(medium);
}
a {

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

@@ -20,8 +20,8 @@ main#video {
line-height: 1.5;
margin: 1.25em 1em 0 1em;
@include themed() {
color: t(medium-light);
@include colors() {
color: c(medium-light);
}
a {