jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 18:26:38 -04:00
Code Issues Activity

switch to modern-normalize.css and actually choose a consistent box-sizing preference (#406)

Browse Source
This commit is contained in:
Jake Jarvis
2021-05-22 10:31:05 -04:00
committed by GitHub
parent 8c974c8d5e
commit 2e3be955c8
13 changed files with 90 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,6 @@ footer {
width: 100%;
letter-spacing: -0.005em;
padding: 1.25em 1.5em;
box-sizing: border-box;
border-top: 1px solid;
@include colors() {

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

@ -34,6 +34,7 @@ body {
// stretch background for entire width of content area
main {
width: 100%;
padding: 0 1.5em;
@include colors() {
background-color: c(background-inner);
@ -45,8 +46,6 @@ main {
div.layout {
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
}
@ -110,11 +109,10 @@ hr {
// make SVG twemojis relative to surrounding text
// https://github.com/twitter/twemoji#inline-styles
img.emoji {
height: 1.1em;
width: 1.1em;
margin: 0;
padding: 0 0.09em;
vertical-align: -0.18em;
height: 1.2em;
width: 1.2em;
margin: 0 0.05em;
vertical-align: -0.22em;
border: 0;
display: inline-block;
@ -137,4 +135,9 @@ a img.emoji {
// Allows you to scroll below the viewport; default value is visible
overflow-y: scroll;
}
main {
padding-left: 1.25em;
padding-right: 1.25em;
}
}

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

@ -4,7 +4,6 @@
header {
width: 100%;
padding: 0 1.5em;
box-sizing: border-box;
border-bottom: 1px solid;
@include colors() {
@ -15,7 +14,6 @@ header {
width: 100%;
max-width: $max-width;
margin: 0 auto;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
@ -71,7 +69,7 @@ header {
li {
text-align: right;
margin-left: 2em;
margin-left: 1.75em;
a {
display: inline-block;
@ -91,15 +89,15 @@ header {
}
span.icon {
font-size: 1.35em;
vertical-align: -0.075em;
font-size: 1.3em;
vertical-align: -0.085em;
}
span.text {
font-size: 0.95em;
font-weight: 500;
letter-spacing: -0.002em;
margin-left: 0.6em;
margin-left: 0.65em;
}
}
@ -122,9 +120,10 @@ header {
background-repeat: no-repeat;
background-size: 100% 100%;
height: 1.5em;
width: 1em;
margin-left: 2em;
height: 1.56em; // 24.33px, don't ask
width: 1.56em;
margin-left: 1.4em;
margin-right: -0.3em; // weirdness w/ svg ratio
cursor: pointer;
// hidden by default in case user's JS is disabled, switches to `block` onload in dark-mode.js
@ -178,10 +177,11 @@ 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.15em;
margin-left: 1.15em;
height: 1.08em; // ~27px, don't ask
width: 1.08em;
margin-top: 0.175em;
margin-left: 1em;
margin-right: -0.2em; // weirdness w/ svg ratio
}
}
}