mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 05:38:26 -04:00
153 lines
3.3 KiB
SCSS
153 lines
3.3 KiB
SCSS
@charset "UTF-8";
|
|
|
|
// Global Styles
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
font-family: $webfont-sans;
|
|
font-kerning: normal;
|
|
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 {
|
|
max-width: $max-width;
|
|
margin: 0 auto;
|
|
padding-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
|
|
|
|
@include themed() {
|
|
color: t(text);
|
|
}
|
|
}
|
|
|
|
/*! Credit for cool link underlines: https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ */
|
|
a {
|
|
text-decoration: none;
|
|
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(links);
|
|
background-image: underline-hack(t(links));
|
|
}
|
|
|
|
&:hover {
|
|
background-size: 100% $link-underline-size;
|
|
}
|
|
|
|
&.no-underline {
|
|
background: none !important;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
letter-spacing: 0.001em;
|
|
}
|
|
|
|
blockquote {
|
|
margin-left: 0;
|
|
padding-left: 1.5em;
|
|
border-left: 3px solid;
|
|
|
|
@include themed() {
|
|
color: t(medium-dark);
|
|
border-color: t(links);
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 1.5em auto;
|
|
height: 2px;
|
|
border: 0;
|
|
|
|
@include themed() {
|
|
background-color: t(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;
|
|
}
|
|
|
|
// make SVG twemojis relative to surrounding text
|
|
// https://github.com/twitter/twemoji#inline-styles
|
|
img.emoji {
|
|
height: 1.1em;
|
|
width: 1.1em;
|
|
padding: 0 0.09em;
|
|
vertical-align: -0.18em;
|
|
|
|
// have cursor act like it's a regular unicode emoji, especially
|
|
// since twemojis can still be copied-and-pasted
|
|
cursor: text;
|
|
}
|
|
// manually set pointer cursor when emoji within link, otherwise it'll
|
|
// keep text cursor above
|
|
a img.emoji {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// white background for entire width content area
|
|
div#wrap {
|
|
width: 100%;
|
|
|
|
@include themed() {
|
|
background-color: t(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%;
|
|
}
|
|
}
|