jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-13 00:25:28 -04:00
Code Issues Activity

majorly refactor SCSS and pray nothing breaks

Browse Source
This commit is contained in:
Jake Jarvis
2021-09-29 09:42:36 -04:00
parent ddc0780fbd
commit 12db17b83c
22 changed files with 289 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/components/_content.scss
+45 -27
View File
@@ -6,7 +6,20 @@ div#content {
letter-spacing: -0.004em;
line-height: 1.7;
h1,
b,
strong {
letter-spacing: 0.008em; // not sure why the discrepancy between weights
}
blockquote {
margin-left: 0;
padding-left: 1.5em;
border-left: 3px solid;
@include themes.themed(color, "medium-dark");
@include themes.themed(border-color, "links");
}
h2,
h3,
h4 {
@@ -14,8 +27,34 @@ div#content {
margin-bottom: 0.5em;
letter-spacing: 0.001em;
line-height: 1.5;
// AnchorJS styles
a.anchorjs-link {
display: inline-block;
margin-left: 0.25em;
padding: 0 0.5em 0 0.25em;
background: none;
opacity: 0;
font-weight: 300;
line-height: 1;
&::before {
content: "\0023"; // pound sign
}
@include themes.themed(color, "medium-light");
&:hover {
@include themes.themed(color, "links");
}
}
&:hover > a.anchorjs-link {
opacity: 1; // '#' link appears on hover over entire sub-heading line
}
}
// special bottom border for H2s
h2 {
padding-bottom: 0.25em;
border-bottom: 1px solid;
@@ -56,33 +95,12 @@ div#content {
}
}
// AnchorJS styles
h2,
h3,
h4 {
a.anchorjs-link {
display: inline-block;
margin-left: 0.25em;
padding: 0 0.5em 0 0.25em;
background: none;
opacity: 0;
font-weight: 300;
line-height: 1;
hr {
margin: 1.5em auto;
height: 2px;
border: 0;
&::before {
content: "\0023"; // pound sign
}
@include themes.themed(color, "medium-light");
&:hover {
@include themes.themed(color, "links");
}
}
&:hover > a.anchorjs-link {
opacity: 1; // '#' link appears on hover over entire sub-heading line
}
@include themes.themed(background-color, "light");
}
}
assets/sass/components/_footer.scss
+3 -3
View File
@@ -15,7 +15,7 @@ footer {
@include themes.themed(color, "medium-dark");
}
div.row {
div.footer-row {
display: flex;
width: 100%;
max-width: settings.$max-width;
@@ -26,7 +26,7 @@ footer {
}
// underline View Source link
a#source {
a#footer-view-source {
padding-bottom: 2px;
border-bottom: 1px solid;
@@ -40,7 +40,7 @@ footer {
padding: 1em 1.25em 0 1.25em;
// stack columns on left instead of flexboxing across
div.row {
div.footer-row {
display: block;
line-height: 2;
}
assets/sass/components/_global.scss
+43 -48
View File
@@ -55,13 +55,8 @@ pre,
}
}
// stretch background for entire width of content area
main {
width: 100%;
padding: 0 1.5em;
@include themes.themed(color, "text");
@include themes.themed(background-color, "background-inner");
a {
text-decoration: none;
}
// this is what's extended by different layouts (in ../pages)
@@ -71,53 +66,53 @@ div.layout {
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
}
a {
text-decoration: none;
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% settings.$link-underline-size;
padding-bottom: settings.$link-underline-size;
// stretch background for entire width of content area
main {
width: 100%;
padding: 0 1.5em;
@include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
@include themes.themed(color, "text");
@include themes.themed(background-color, "background-inner");
// cool link underlines (via messy SCSS hacking):
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@each $theme, $map in themes.$themes {
@at-root body.#{$theme} #{&} {
background-image: underline-hack(map-get($map, "links"));
a {
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% settings.$link-underline-size;
padding-bottom: settings.$link-underline-size;
@include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
// cool link underlines (via messy SCSS hacking):
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@each $theme, $map in themes.$themes {
@at-root body.#{$theme} #{&} {
background-image: underline-hack(map-get($map, "links"));
}
}
&:hover {
background-size: 100% settings.$link-underline-size;
}
// set an anchor's class to `no-underline` to disable all of this
&.no-underline {
background: none !important;
padding-bottom: 0;
}
}
&:hover {
background-size: 100% settings.$link-underline-size;
// page titles
h1 {
margin-top: 0;
letter-spacing: -0.005em;
a {
// disable fancy underline without `.no-underline`
color: inherit !important;
background: none !important;
padding-bottom: 0;
}
}
&.no-underline {
background: none !important;
padding-bottom: 0;
}
}
b,
strong {
letter-spacing: 0.008em; // not sure why the discrepancy between weights
}
blockquote {
margin-left: 0;
padding-left: 1.5em;
border-left: 3px solid;
@include themes.themed(color, "medium-dark");
@include themes.themed(border-color, "links");
}
hr {
margin: 1.5em auto;
height: 2px;
border: 0;
@include themes.themed(background-color, "light");
}
// make SVG twemojis relative to surrounding text
assets/sass/components/_header.scss
+28 -23
View File
@@ -17,22 +17,23 @@ header {
align-items: center;
justify-content: space-between;
a#logo {
a#header-logo {
display: flex;
align-items: center;
@include themes.themed(color, "medium-dark");
img#selfie {
img#header-selfie {
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
user-select: none;
@include themes.themed(border-color, "light");
}
span#name {
span#header-name {
margin: 0 0.6em;
font-size: 1.25em;
font-weight: 500;
@@ -42,7 +43,7 @@ header {
&:hover {
@include themes.themed(color, "links");
img#selfie {
img#header-selfie {
opacity: 0.9;
}
}
@@ -57,11 +58,10 @@ header {
padding: 0;
li {
text-align: right;
margin-left: 1.75em;
a {
display: inline-block;
display: inline-flex;
will-change: transform;
@include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out"));
@@ -72,16 +72,21 @@ header {
@include themes.themed(color, "links", ("transform 0.15s ease-in-out"));
}
span.icon {
font-size: 1.3em;
vertical-align: -0.085em;
}
span {
align-self: center;
span.text {
font-size: 0.95em;
font-weight: 500;
letter-spacing: -0.002em;
margin-left: 0.65em;
&.header-menu-icon {
font-size: 1.3em;
vertical-align: -0.085em;
user-select: none;
}
&.header-menu-text {
font-size: 0.95em;
font-weight: 500;
letter-spacing: -0.002em;
margin-left: 0.65em;
}
}
}
@@ -121,36 +126,36 @@ header {
padding: 0.5em 1.25em;
nav {
a#logo {
img#selfie {
a#header-logo {
img#header-selfie {
width: 70px;
height: 70px;
}
span#name {
span#header-name {
display: none;
}
&:hover {
img#selfie {
img#header-selfie {
opacity: 1;
}
}
}
ul {
ul.header-menu {
font-size: 1.6em;
li {
margin-left: 1.15em;
a {
span.icon {
a.header-menu-item {
span.header-menu-icon {
font-size: 0.9em;
}
// hide text next to emojis on mobile
span.text {
span.header-menu-text {
display: none;
}