jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 18:06:38 -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

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 {