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

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

19
assets/sass/abstracts/_functions.scss
View File

@@ -1,15 +1,14 @@
@use "sass:math";
@use "sass:color";
@use "settings";
// Gradient hack to get our custom underline to wrap:
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@function underline-hack($color) {
// Less compatible but better for light/dark mode switching. We fall back to non-alpha hex colors with
// postcss-color-rgba-fallback to mitigate this.
// stylelint-disable-next-line color-function-notation
$color-opaque-alpha: rgba($color, math.div(settings.$link-underline-opacity, 100%));
// Figure out the color of the "transparent" link underlines:
@function underline-hack($color, $background: #ffffff) {
// Calculate underline color by mix()'ing it with a given background to give the impression of opacity but with much
// better efficiency and compatibility.
$color-transparentized: color.mix($color, $background, settings.$link-underline-opacity);
// Return non-gradient linear-gradient():
@return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
// Return a "gradient" as a hack to get the fancy underline to wrap:
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@return linear-gradient($color-transparentized, $color-transparentized);
}

1
assets/sass/abstracts/_settings.scss
View File

@@ -27,7 +27,6 @@ $font-stack-mono-variable: list.join($webfont-mono-variable, $system-fonts-monos
// Fancy link underline settings:
$link-underline-opacity: 40%;
$link-underline-size: 2px;
$link-opacity-color: #ffffff;
// Default fading style when switching between light/dark themes:
$theme-transition-duration: 0.15s;

35
assets/sass/abstracts/_themes.scss
View File

@@ -1,45 +1,42 @@
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "settings";
// Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
// ex. @include themes.themed($color: "text", $background-color: "background-inner");
@mixin themed($colors...) {
$selectors: "#{&}";
// keep track of each property we're theming
$properties: ();
@each $property, $color in meta.keywords($colors) {
$properties: list.append($properties, $property);
// ex. @include themes.themed((color: "text", background-color: "background-inner"));
// Also accepts additional transitions (in shorthand) to tack on.
@mixin themed($properties, $addTransitions: ()) {
// generate CSS transition shorthand for each themed property w/ default duration and function
$defaults: ();
@each $property, $color in $properties {
$shorthand: $property settings.$theme-transition-duration settings.$theme-transition-function;
$defaults: list.append($defaults, $shorthand);
}
// list themed properties under CSS transitions for fancy fading
transition-property: list.join($properties, (), $separator: comma);
transition-duration: #{settings.$theme-transition-duration};
transition-timing-function: #{settings.$theme-transition-function};
// list all transitions separated by commas (with additional shorthand(s) passed in)
transition: list.join($addTransitions, $defaults, $separator: comma);
// keep track of the original selector(s) calling this mixin for below
$selectors: "#{&}";
// add corresponding body.light and body.dark root selectors
@each $theme, $map in $themes {
@at-root body.#{$theme} {
// support root body element
// support theming root body element
@if $selectors == "body" {
@each $property, $color in meta.keywords($colors) {
@each $property, $color in $properties {
#{$property}: map.get($map, $color);
}
} @else {
#{$selectors} {
@each $property, $color in meta.keywords($colors) {
@each $property, $color in $properties {
#{$property}: map.get($map, $color);
}
}
}
}
}
// allow anything above to be overridden manually by passing in a content block
@content;
}
// ----------------

6
assets/sass/components/_animation.scss
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",
)
);
}
}

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

20
assets/sass/components/_footer.scss
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",
)
);
}
}

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

52
assets/sass/components/_header.scss
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 {

6
assets/sass/components/_syntax.scss
View File

@@ -64,7 +64,11 @@ div.highlight-clipboard-enabled {
line-height: 1;
&:hover {
@include themes.themed($color: "links");
@include themes.themed(
(
color: "links",
)
);
}
}
}

34
assets/sass/pages/_contact.scss
View File

@@ -34,7 +34,13 @@ div.layout-contact {
border-radius: 0.3em;
font-size: 0.9em;
@include themes.themed($color: "text", $background-color: "super-duper-light", $border-color: "light");
@include themes.themed(
(
color: "text",
background-color: "super-duper-light",
border-color: "light",
)
);
}
textarea {
@@ -58,11 +64,21 @@ div.layout-contact {
line-height: 1.5;
user-select: none;
@include themes.themed($color: "text", $background-color: "kinda-light");
@include themes.themed(
(
color: "text",
background-color: "kinda-light",
)
);
&:hover,
&:focus {
@include themes.themed($color: "super-duper-light", $background-color: "links");
@include themes.themed(
(
color: "super-duper-light",
background-color: "links",
)
);
}
img.emoji {
@@ -76,11 +92,19 @@ div.layout-contact {
font-weight: 600;
&#contact-form-result-success {
@include themes.themed($color: "success");
@include themes.themed(
(
color: "success",
)
);
}
&#contact-form-result-error {
@include themes.themed($color: "error");
@include themes.themed(
(
color: "error",
)
);
}
}
}

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

@@ -1,3 +1,5 @@
@use "sass:map";
@use "../abstracts/themes";
@use "../abstracts/functions";
@@ -184,7 +186,11 @@ div.layout-home {
}
&#shh {
@include themes.themed($color: "medium-light");
@include themes.themed(
(
color: "medium-light",
)
);
}
&.wave {
@@ -198,7 +204,7 @@ div.layout-home {
@each $theme, $color in $colors {
@at-root body.#{$theme} div.layout-home a##{$id} {
color: $color;
background-image: functions.underline-hack($color);
background-image: functions.underline-hack($color, map.get(map.get(themes.$themes, $theme), "background-inner"));
}
}
}

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

@@ -32,7 +32,11 @@ div.layout-list {
width: 5.25em;
flex-shrink: 0;
@include themes.themed($color: "medium");
@include themes.themed(
(
color: "medium",
)
);
}
&:last-child {

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

@@ -42,7 +42,12 @@ div.layout-projects {
border-radius: 0.5em;
font-size: 0.9em;
@include themes.themed($color: "medium-dark", $border-color: "kinda-light");
@include themes.themed(
(
color: "medium-dark",
border-color: "kinda-light",
)
);
a.repo-name {
font-size: 1.2em;
@@ -63,7 +68,11 @@ div.layout-projects {
margin-right: 1.5em;
font-size: 0.925em;
@include themes.themed($color: "medium");
@include themes.themed(
(
color: "medium",
)
);
svg {
display: inline-block;

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

@@ -13,7 +13,11 @@ div.layout-single {
line-height: 2.3;
letter-spacing: 0.04em;
@include themes.themed($color: "medium");
@include themes.themed(
(
color: "medium",
)
);
a {
color: inherit;
@@ -65,7 +69,11 @@ div.layout-single {
content: "#"; // cosmetically hashtagify tags
padding-right: 0.125em;
@include themes.themed($color: "light");
@include themes.themed(
(
color: "light",
)
);
}
&:last-of-type {

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

@@ -11,7 +11,11 @@ div.layout-video {
line-height: 1.5;
margin: 1.25em 1em 0.5em 1em;
@include themes.themed($color: "medium-light");
@include themes.themed(
(
color: "medium-light",
)
);
a {
font-weight: bold;