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

completely overhaul SCSS theming logic

Browse Source
This commit is contained in:
Jake Jarvis
2021-11-01 10:23:24 -04:00
parent c7fdda36af
commit 37add71ffb
21 changed files with 112 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/components/_animation.scss
+1 -1
View File
@@ -36,7 +36,7 @@
}
// stylelint-enable rule-empty-line-before
@include themes.themed(background-color, "medium-light");
@include themes.themed($background-color: "medium-light");
}
}
assets/sass/components/_content.scss
+6 -7
View File
@@ -16,8 +16,7 @@ div#content {
padding-left: 1.5em;
border-left: 3px solid;
@include themes.themed(color, "medium-dark");
@include themes.themed(border-color, "links");
@include themes.themed($color: "medium-dark", $border-color: "links");
}
h2,
@@ -42,10 +41,10 @@ div#content {
content: "\0023"; // pound sign
}
@include themes.themed(color, "medium-light");
@include themes.themed($color: "medium-light");
&:hover {
@include themes.themed(color, "links");
@include themes.themed($color: "links");
}
}
@@ -59,7 +58,7 @@ div#content {
padding-bottom: 0.25em;
border-bottom: 1px solid;
@include themes.themed(border-color, "kinda-light");
@include themes.themed($border-color: "kinda-light");
}
p.center {
@@ -81,7 +80,7 @@ div#content {
line-height: 1.5;
margin-top: 0.5em;
@include themes.themed(color, "medium");
@include themes.themed($color: "medium");
}
}
@@ -100,7 +99,7 @@ div#content {
height: 2px;
border: 0;
@include themes.themed(background-color, "light");
@include themes.themed($background-color: "light");
}
}
assets/sass/components/_embeds.scss
+5
View File
@@ -50,3 +50,8 @@ div.embed {
}
}
}
// Responsive
// stylelint-disable-next-line block-no-empty
@mixin responsive() {
}
assets/sass/components/_footer.scss
+3 -4
View File
@@ -8,11 +8,10 @@ footer {
padding: 1.25em 1.5em;
border-top: 1px solid;
@include themes.themed(color, "medium-dark");
@include themes.themed(border-color, "kinda-light");
@include themes.themed($color: "medium-dark", $border-color: "kinda-light");
a {
@include themes.themed(color, "medium-dark");
@include themes.themed($color: "medium-dark");
}
div.footer-row {
@@ -30,7 +29,7 @@ footer {
padding-bottom: 2px;
border-bottom: 1px solid;
@include themes.themed(border-color, "light");
@include themes.themed($border-color: "light");
}
}
assets/sass/components/_global.scss
+9 -6
View File
@@ -19,6 +19,8 @@ body {
font-size: 0.975em;
line-height: 1.5;
@include themes.themed($background-color: "background-outer");
// set themed lightbulb icons manually
&.light button.dark-mode-toggle {
background-image: url(themes.$icon-bulb-on);
@@ -29,9 +31,6 @@ body {
}
}
// need to set light/dark mode backgrounds outside of the body selector
@include themes.themed(background-color, "background-outer");
code,
pre,
.monospace {
@@ -70,8 +69,7 @@ main {
width: 100%;
padding: 0 1.5em;
@include themes.themed(color, "text");
@include themes.themed(background-color, "background-inner");
@include themes.themed($color: "text", $background-color: "background-inner");
a {
background-position: 0% 100%;
@@ -79,7 +77,12 @@ main {
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"));
@include themes.themed($color: "links");
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, background-size;
transition-duration: #{settings.$theme-transition-duration}, 0.25s;
transition-timing-function: linear, ease-in-out;
// cool link underlines (via messy SCSS hacking):
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
assets/sass/components/_header.scss
+14 -6
View File
@@ -7,7 +7,7 @@ header {
padding: 0.7em 1.5em;
border-bottom: 1px solid;
@include themes.themed(border-color, "kinda-light");
@include themes.themed($border-color: "kinda-light");
nav {
width: 100%;
@@ -21,7 +21,7 @@ header {
display: flex;
align-items: center;
@include themes.themed(color, "medium-dark");
@include themes.themed($color: "medium-dark");
img#header-selfie {
width: 50px;
@@ -30,7 +30,7 @@ header {
border-radius: 50%;
user-select: none;
@include themes.themed(border-color, "light");
@include themes.themed($border-color: "light");
}
span#header-name {
@@ -41,7 +41,7 @@ header {
}
&:hover {
@include themes.themed(color, "links");
@include themes.themed($color: "links");
img#header-selfie {
opacity: 90%;
@@ -64,12 +64,20 @@ header {
display: inline-flex;
will-change: transform;
@include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out"));
@include themes.themed($color: "medium-dark");
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, transform;
transition-timing-function: linear, ease-in-out;
&:hover {
transform: scale(1.1);
@include themes.themed(color, "links", ("transform 0.15s ease-in-out"));
@include themes.themed($color: "links");
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, transform;
transition-timing-function: linear, ease-in-out;
}
span {
assets/sass/components/_syntax.scss
+1 -1
View File
@@ -64,7 +64,7 @@ div.highlight-clipboard-enabled {
line-height: 1;
&:hover {
@include themes.themed(color, "links");
@include themes.themed($color: "links");
}
}
}
assets/sass/components/_typography.scss
-46
View File
@@ -1,46 +0,0 @@
@use "@fontsource/inter/scss/mixins" as Inter;
@use "@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "@fontsource/comic-neue/scss/mixins" as ComicNeue;
/*!
* Inter typeface - https://rsms.me/inter/
*
* Copyright (c) 2016-2020 The Inter Project Authors.
* Licensed under the SIL Open Font License, Version 1.1:
* https://github.com/rsms/inter/blob/master/LICENSE.txt
*/
// Variable
@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full");
// Legacy
@include Inter.fontFace($fontName: "Inter", $weight: 400);
@include Inter.fontFace($fontName: "Inter", $weight: 500);
@include Inter.fontFace($fontName: "Inter", $weight: 700);
/*!
* Roboto Mono typeface - https://fonts.google.com/specimen/Roboto+Mono
*
* Copyright (c) 2015 The Roboto Mono Project Authors.
* Licensed under the Apache License, Version 2.0:
* https://github.com/google/fonts/blob/main/apache/robotomono/LICENSE.txt
*/
// Variable
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var");
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic);
// Legacy
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700);
/*!
* Comic Neue typeface - http://comicneue.com/
*
* Copyright (c) 2014 The Comic Neue Project Authors.
* Licensed under the SIL Open Font License, Version 1.1:
* https://github.com/crozynski/comicneue/blob/master/OFL.txt
*/
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400);
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700);