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

a bit more SCSS cleanup

Browse Source
This commit is contained in:
Jake Jarvis
2021-11-01 11:43:12 -04:00
parent 37add71ffb
commit 5911c0081e
6 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/components/_footer.scss
+1 -1
View File
@@ -29,7 +29,7 @@ footer {
padding-bottom: 2px;
border-bottom: 1px solid;
@include themes.themed($border-color: "light");
@include themes.themed($color: "medium-dark", $border-color: "light");
}
}
assets/sass/components/_global.scss
+8 -8
View File
@@ -2,7 +2,7 @@
@use "../abstracts/settings";
@use "../abstracts/themes";
@use "../abstracts/functions" as *;
@use "../abstracts/functions";
// Global Styles
body {
@@ -77,18 +77,18 @@ main {
background-size: 0% settings.$link-underline-size;
padding-bottom: settings.$link-underline-size;
@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;
@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: #{settings.$theme-transition-function}, 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"));
background-image: functions.underline-hack(map.get($map, "links"));
}
}
assets/sass/components/_header.scss
+14 -10
View File
@@ -62,22 +62,26 @@ header {
a {
display: inline-flex;
// hovers are super choppy without this in some browsers
will-change: transform;
@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;
@include themes.themed($color: "medium-dark") {
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, transform;
transition-duration: #{settings.$theme-transition-duration};
transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
}
&:hover {
transform: scale(1.1);
@include themes.themed($color: "links");
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, transform;
transition-timing-function: linear, ease-in-out;
@include themes.themed($color: "links") {
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, transform;
transition-duration: #{settings.$theme-transition-duration};
transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
}
}
span {