jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 20:08:29 -04:00
Code Issues

fix responsive header

Browse Source
This commit is contained in:
Jake Jarvis 2021-09-29 10:02:24 -04:00
parent 12db17b83c
commit 2b918ea027
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
2 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,7 @@ header {
ul {
list-style: none;
display: flex;
align-items: center;
align-items: baseline;
margin: 0;
padding: 0;
@ -90,6 +90,29 @@ header {
}
}
// Dark mode toggle
&#header-lightbulb {
align-self: center;
button {
// native button reset
border: 0;
padding: 0;
// prepare for lightbulb symbol depending on active theme (set in components/_global)
background-color: transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 1.56em; // 24.33px, don't ask
width: 1.56em;
margin-top: -0.05em;
margin-left: 1.4em;
margin-right: -0.3em; // weirdness w/ svg ratio
cursor: pointer;
}
}
// no margin on the first child to make more room on narrow windows (before responsiveness kicks in).
// last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
&:first-child,
@ -97,25 +120,6 @@ header {
margin-left: 0;
}
}
// Dark mode toggle
button.dark-mode-toggle {
// native button reset
border: 0;
padding: 0;
// prepare for lightbulb symbol depending on active theme (set in components/_global)
background-color: transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 1.56em; // 24.33px, don't ask
width: 1.56em;
margin-top: -0.05em;
margin-left: 1.4em;
margin-right: -0.3em; // weirdness w/ svg ratio
cursor: pointer;
}
}
}
}
@ -143,7 +147,7 @@ header {
}
}
ul.header-menu {
ul {
font-size: 1.6em;
li {
@ -164,16 +168,15 @@ header {
transform: none;
}
}
}
// Dark mode toggle
button.dark-mode-toggle {
// TODO: figure out need for weird magic numbers here
height: 1.08em; // ~27px, don't ask
width: 1.08em;
margin-top: 0.15em;
margin-left: 1em;
margin-right: -0.2em; // weirdness w/ svg ratio
// Dark mode toggle
&#header-lightbulb button.dark-mode-toggle {
// TODO: figure out need for weird magic numbers here
height: 1.08em; // ~27px, don't ask
width: 1.08em;
margin-left: 1em;
margin-right: -0.2em; // weirdness w/ svg ratio
}
}
}
}

2
layouts/partials/page/header.html
View File

@ -16,7 +16,7 @@
</a>
</li>
{{- end }}
<li>
<li id="header-lightbulb">
<button class="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode" style="display: none;"></button>
</li>
</ul>