mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 05:18:28 -04:00
122 lines
2.7 KiB
SCSS
122 lines
2.7 KiB
SCSS
@charset "UTF-8";
|
|
|
|
// Global Styles
|
|
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";
|
|
line-height: 1.5;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
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;
|
|
|
|
&:hover {
|
|
background-size: 100% $link-underline-size;
|
|
}
|
|
|
|
&.no-underline {
|
|
background: none !important;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
letter-spacing: 0.001em;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 5px solid $color-links;
|
|
margin-left: 0.5em;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
hr {
|
|
margin: 1.5em auto;
|
|
height: 2px;
|
|
border: 0;
|
|
background-color: $color-light;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// 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;
|
|
|
|
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 {
|
|
height: 1.1em !important;
|
|
width: 1.1em !important;
|
|
margin: 0 0.09em !important;
|
|
vertical-align: -0.18em !important;
|
|
display: inline !important;
|
|
}
|
|
|
|
// white background for entire width content area
|
|
div#wrap {
|
|
width: 100%;
|
|
background-color: $color-background;
|
|
}
|
|
|
|
|
|
// Responsive
|
|
@mixin responsive--global() {
|
|
body {
|
|
// Safari iOS menu bar reappers 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
|
|
overflow-y: scroll;
|
|
|
|
// 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/
|
|
text-size-adjust: 100%;
|
|
}
|
|
}
|