jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 05:25:33 -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

72
assets/sass/components/_content.scss
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");
}
}

6
assets/sass/components/_footer.scss
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;
}

91
assets/sass/components/_global.scss
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

51
assets/sass/components/_header.scss
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;
}

6
assets/sass/pages/_etc.scss
View File

@@ -4,13 +4,7 @@ div.layout-etc {
padding-bottom: 1.5em;
h1 {
margin-top: 0;
text-align: center;
letter-spacing: -0.005em;
a {
color: inherit;
}
}
}

6
assets/sass/pages/_list.scss
View File

@@ -5,7 +5,7 @@ div.layout-list {
padding-top: 1.5em;
padding-bottom: 0.25em;
section.year {
section.list-section-year {
font-size: 1.05em;
h2 {
@@ -28,7 +28,7 @@ div.layout-list {
line-height: 1.75;
margin-bottom: 1em;
div.date {
div.list-item-date {
width: 5.25em;
flex-shrink: 0;
@@ -48,7 +48,7 @@ div.layout-list {
padding-top: 1em;
padding-bottom: 0;
section.year {
section.list-section-year {
font-size: 1em;
h2 {

50
assets/sass/pages/_projects.scss
View File

@@ -6,14 +6,8 @@ div.layout-projects {
padding-bottom: 0.75em;
h1 {
margin-top: 0;
margin-bottom: 0.4em;
text-align: center;
letter-spacing: -0.005em;
a {
color: inherit;
}
}
div#content > p {
@@ -62,28 +56,34 @@ div.layout-projects {
}
div.repo-meta {
display: inline-block;
margin-right: 1.2em;
font-size: 0.925em;
display: flex;
flex-wrap: wrap;
@include themes.themed(color, "medium");
svg {
div.repo-meta-item {
display: inline-block;
position: relative;
top: 0.25em;
margin-right: 0.2em;
fill: currentColor;
}
align-self: baseline;
margin-right: 1.5em;
font-size: 0.925em;
span.repo-language-color {
display: inline-block;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
position: relative;
top: 0.235em;
margin-right: 0.2em;
@include themes.themed(color, "medium");
svg {
display: inline-block;
position: relative;
top: 0.25em;
margin-right: 0.2em;
fill: currentColor;
}
span.repo-language-color {
display: inline-block;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
position: relative;
top: 0.235em;
margin-right: 0.2em;
}
}
}
}

44
assets/sass/pages/_single.scss
View File

@@ -6,26 +6,37 @@ div.layout-single {
padding-bottom: 1em;
div#meta {
display: flex;
flex-wrap: wrap;
margin-top: 0.3em;
font-size: 0.825em;
line-height: 2.3;
letter-spacing: 0.04em;
margin-top: 0.3em;
@include themes.themed(color, "medium");
a {
color: inherit;
// disable fancy underline without `.no-underline`
background: none !important;
padding-bottom: 0;
}
> div {
display: inline-block;
margin-right: 1.25em;
display: inline-flex;
margin-right: 1.6em;
white-space: nowrap;
img.emoji {
margin-right: 0.25em;
vertical-align: -0.22em;
cursor: inherit;
span.meta-icon {
margin-right: 0.4em;
user-select: none;
img.emoji {
margin-right: 0.25em;
vertical-align: -0.22em;
cursor: inherit;
}
}
&:last-of-type {
@@ -33,13 +44,22 @@ div.layout-single {
}
}
div#meta-date,
div#meta-edit {
a {
display: inline-flex;
}
}
div#meta-tags {
white-space: normal;
display: inline-flex;
flex-wrap: wrap;
span {
span.meta-tag {
text-transform: lowercase;
white-space: nowrap;
margin-right: 0.4em;
margin-right: 0.75em;
&::before {
content: "#"; // cosmetically hashtagify tags
@@ -54,7 +74,7 @@ div.layout-single {
}
}
div#hit-spinner {
div#meta-hits-loading {
display: inline-block;
width: 20px;
@@ -73,10 +93,6 @@ div.layout-single {
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.006em;
a {
color: inherit;
}
}
}

9
assets/sass/pages/_videos.scss
View File

@@ -5,15 +5,6 @@ div.layout-video {
padding: 1.5em 0;
text-align: center;
h1 {
margin-top: 0;
letter-spacing: -0.005em;
a {
color: inherit;
}
}
p {
font-size: 0.85em;
letter-spacing: -0.005em;