jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 11:38:28 -04:00
Code Issues

remove overboard hover effect on header items

Browse Source
This commit is contained in:
Jake Jarvis 2021-11-05 13:01:52 -04:00
parent 8ce59f3448
commit 18719a4990
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
1 changed files with 10 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/sass/components/_header.scss
View File

@ -79,27 +79,16 @@ header {
a { a {
display: inline-flex; display: inline-flex;
// hovers are super choppy without this in some browsers
will-change: transform;
@include themes.themed( @include themes.themed(
$properties: ( (
color: "medium-dark", color: "medium-dark",
),
$addTransitions: (
transform 0.2s ease-in-out,
) )
); );
&:hover { &:hover {
transform: scale(1.1);
@include themes.themed( @include themes.themed(
$properties: ( (
color: "links", color: "links",
),
$addTransitions: (
transform 0.2s ease-in-out,
) )
); );
} }
@ -130,19 +119,17 @@ header {
// native button reset // native button reset
border: 0; border: 0;
padding: 0; padding: 0;
width: 1.56em; // 24.33px, don't ask
height: 1.56em;
margin-top: -0.05em;
margin-left: 1.4em;
margin-right: -0.3em; // weirdness w/ svg ratio
cursor: pointer;
// prepare for lightbulb symbol depending on active theme (set in components/_global) // prepare for lightbulb symbol depending on active theme (set in components/_global)
background-color: transparent; background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
// 24.33px, don't ask
height: 1.56em;
width: 1.56em;
margin-top: -0.05em;
margin-left: 1.4em;
margin-right: -0.3em; // weirdness w/ svg ratio
cursor: pointer;
} }
} }
@ -195,18 +182,12 @@ header {
span.header-menu-text { span.header-menu-text {
display: none; display: none;
} }
// disable hover scale effect
&:hover {
transform: none;
}
} }
// Dark mode toggle // Dark mode toggle
&#header-lightbulb button.dark-mode-toggle { &#header-lightbulb button.dark-mode-toggle {
// TODO: figure out need for weird magic numbers here width: 1.08em; // ~27px, don't ask
height: 1.08em; // ~27px, don't ask height: 1.08em;
width: 1.08em;
margin-left: 1em; margin-left: 1em;
margin-right: -0.2em; // weirdness w/ svg ratio margin-right: -0.2em; // weirdness w/ svg ratio
} }