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

shift asset processing to webpack (#424)

Browse Source 
also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic
This commit is contained in:
Jake Jarvis
2021-06-19 17:19:01 -04:00
committed by GitHub
parent 622432c3e4
commit 363b4edf1c
105 changed files with 4061 additions and 955 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,3 @@
@charset "UTF-8";
// Video Styles
div.layout-etc {
padding-top: 1.5em;
@@ -17,7 +15,7 @@ div.layout-etc {
}
// Responsive
@mixin responsive--etc() {
@mixin responsive() {
div.layout-etc {
h1 {
font-size: 1.6em;

19
assets/sass/pages/_home.scss
View File

@@ -1,4 +1,5 @@
@charset "UTF-8";
@use "../abstracts/functions";
@use "../abstracts/themes";
// Home Styles
div.layout-home {
@@ -52,20 +53,18 @@ div.layout-home {
// easter egg emoji cursor
a#birthday {
&:hover {
cursor: url($icon-wand) 0 0, auto;
cursor: url(themes.$icon-wand) 0 0, auto;
}
}
// non-link colors
span {
&#serverless {
color: $color-serverless;
color: themes.$color-serverless;
}
&#shh {
@include colors() {
color: c(medium-light);
}
@include themes.themed(color, "medium-light");
}
&.wave {
@@ -75,17 +74,17 @@ div.layout-home {
}
// Loop through $colors-home (see abstracts/_variables)
@each $id, $colors in $colors-home {
@each $id, $colors in themes.$colors-home {
@each $theme, $color in $colors {
body.#{$theme} div.layout-home a##{$id} {
@at-root body.#{$theme} div.layout-home a##{$id} {
color: $color;
background-image: underline-hack($color);
background-image: functions.underline-hack($color);
}
}
}
// Responsive
@mixin responsive--home() {
@mixin responsive() {
div.layout-home {
font-size: 0.975em;
padding-top: 1em;

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

@@ -1,4 +1,4 @@
@charset "UTF-8";
@use "../abstracts/themes";
// Archive/List Styles
div.layout-list {
@@ -32,9 +32,7 @@ div.layout-list {
width: 5.25em;
flex-shrink: 0;
@include colors() {
color: c(medium);
}
@include themes.themed(color, "medium");
}
&:last-child {
@@ -45,7 +43,7 @@ div.layout-list {
}
// Responsive
@mixin responsive--list() {
@mixin responsive() {
div.layout-list {
padding-top: 1em;
padding-bottom: 0;

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

@@ -1,4 +1,4 @@
@charset "UTF-8";
@use "../abstracts/themes";
// Video Styles
div.layout-projects {
@@ -38,10 +38,8 @@ div.layout-projects {
border-radius: 6px;
font-size: 0.9em;
@include colors() {
color: c(medium-dark);
border-color: c(kinda-light);
}
@include themes.themed(color, "medium-dark");
@include themes.themed(border-color, "kinda-light");
a.repo-name {
font-size: 1.2em;
@@ -57,9 +55,7 @@ div.layout-projects {
margin-right: 12px;
font-size: 0.925em;
@include colors() {
color: c(medium);
}
@include themes.themed(color, "medium");
svg {
display: inline-block;
@@ -84,7 +80,7 @@ div.layout-projects {
}
// Responsive
@mixin responsive--projects() {
@mixin responsive() {
div.layout-projects {
// stylelint-disable-block block-no-empty
}

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

@@ -1,4 +1,4 @@
@charset "UTF-8";
@use "../abstracts/themes";
// Post Styles
div.layout-single {
@@ -11,9 +11,7 @@ div.layout-single {
letter-spacing: 0.04em;
margin-top: 0.3em;
@include colors() {
color: c(medium);
}
@include themes.themed(color, "medium");
a {
color: inherit;
@@ -47,9 +45,7 @@ div.layout-single {
content: "#"; // cosmetically hashtagify tags
padding-right: 0.125em;
@include colors() {
color: c(light);
}
@include themes.themed(color, "light");
}
&:last-of-type {
@@ -75,7 +71,7 @@ div.layout-single {
}
// Responsive
@mixin responsive--single() {
@mixin responsive() {
div.layout-single {
padding-top: 0.8em;
padding-bottom: 0.4em;

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

@@ -1,4 +1,4 @@
@charset "UTF-8";
@use "../abstracts/themes";
// Video Styles
div.layout-video {
@@ -20,9 +20,7 @@ div.layout-video {
line-height: 1.5;
margin: 1.25em 1em 0.5em 1em;
@include colors() {
color: c(medium-light);
}
@include themes.themed(color, "medium-light");
a {
font-weight: bold;
@@ -37,7 +35,7 @@ div.layout-video {
}
// Responsive
@mixin responsive--videos() {
@mixin responsive() {
div.layout-video {
padding: 1em 0;