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

thought of a MUCH more logical way to pass in additional CSS transitions

Browse Source
This commit is contained in:
Jake Jarvis
2021-11-01 14:08:37 -04:00
parent 5911c0081e
commit 310da3ebea
18 changed files with 211 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/components/_animation.scss
+5 -1
View File
@@ -36,7 +36,11 @@
}
// 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
+31 -6
View File
@@ -16,7 +16,12 @@ div#content {
padding-left: 1.5em;
border-left: 3px solid;
@include themes.themed($color: "medium-dark", $border-color: "links");
@include themes.themed(
(
color: "medium-dark",
border-color: "links",
)
);
}
h2,
@@ -41,10 +46,18 @@ 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",
)
);
}
}
@@ -58,7 +71,11 @@ 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 {
@@ -80,7 +97,11 @@ div#content {
line-height: 1.5;
margin-top: 0.5em;
@include themes.themed($color: "medium");
@include themes.themed(
(
color: "medium",
)
);
}
}
@@ -99,7 +120,11 @@ div#content {
height: 2px;
border: 0;
@include themes.themed($background-color: "light");
@include themes.themed(
(
background-color: "light",
)
);
}
}
assets/sass/components/_footer.scss
+17 -3
View File
@@ -8,10 +8,19 @@ footer {
padding: 1.25em 1.5em;
border-top: 1px solid;
@include themes.themed($color: "medium-dark", $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 {
@@ -29,7 +38,12 @@ footer {
padding-bottom: 2px;
border-bottom: 1px solid;
@include themes.themed($color: "medium-dark", $border-color: "light");
@include themes.themed(
(
color: "medium-dark",
border-color: "light",
)
);
}
}
assets/sass/components/_global.scss
+21 -11
View File
@@ -19,7 +19,11 @@ body {
font-size: 0.975em;
line-height: 1.5;
@include themes.themed($background-color: "background-outer");
@include themes.themed(
(
background-color: "background-outer",
)
);
// set themed lightbulb icons manually
&.light button.dark-mode-toggle {
@@ -69,7 +73,12 @@ main {
width: 100%;
padding: 0 1.5em;
@include themes.themed($color: "text", $background-color: "background-inner");
@include themes.themed(
(
color: "text",
background-color: "background-inner",
)
);
a {
background-position: 0% 100%;
@@ -77,18 +86,19 @@ 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: #{settings.$theme-transition-function}, ease-in-out;
}
@include themes.themed(
$properties: (
color: "links",
),
$addTransitions: (
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/
// cool link underlines via messy SCSS hacking (see ../abstracts/_functions)
@each $theme, $map in themes.$themes {
@at-root body.#{$theme} #{&} {
background-image: functions.underline-hack(map.get($map, "links"));
background-image: functions.underline-hack(map.get($map, "links"), map.get($map, "background-inner"));
}
}
assets/sass/components/_header.scss
+36 -16
View File
@@ -7,7 +7,11 @@ 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 +25,11 @@ 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 +38,11 @@ header {
border-radius: 50%;
user-select: none;
@include themes.themed($border-color: "light");
@include themes.themed(
(
border-color: "light",
)
);
}
span#header-name {
@@ -41,7 +53,11 @@ header {
}
&:hover {
@include themes.themed($color: "links");
@include themes.themed(
(
color: "links",
)
);
img#header-selfie {
opacity: 90%;
@@ -66,22 +82,26 @@ header {
// 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-duration: #{settings.$theme-transition-duration};
transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
}
@include themes.themed(
$properties: (
color: "medium-dark",
),
$addTransitions: (
transform 0.2s 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-duration: #{settings.$theme-transition-duration};
transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
}
@include themes.themed(
$properties: (
color: "links",
),
$addTransitions: (
transform 0.2s ease-in-out,
)
);
}
span {
assets/sass/components/_syntax.scss
+5 -1
View File
@@ -64,7 +64,11 @@ div.highlight-clipboard-enabled {
line-height: 1;
&:hover {
@include themes.themed($color: "links");
@include themes.themed(
(
color: "links",
)
);
}
}
}