jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-22 19:11:18 -04:00
Code Issues Activity

fix responsive header

Browse Source
This commit is contained in:
Jake Jarvis
2021-09-29 10:02:24 -04:00
parent 12db17b83c
commit 2b918ea027
2 changed files with 34 additions and 31 deletions
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 { ul {
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: baseline;
margin: 0; margin: 0;
padding: 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). // 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). // last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
&:first-child, &:first-child,
@@ -97,25 +120,6 @@ header {
margin-left: 0; 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; font-size: 1.6em;
li { li {
@@ -164,16 +168,15 @@ header {
transform: none; transform: none;
} }
} }
}
// Dark mode toggle // Dark mode toggle
button.dark-mode-toggle { &#header-lightbulb button.dark-mode-toggle {
// TODO: figure out need for weird magic numbers here // TODO: figure out need for weird magic numbers here
height: 1.08em; // ~27px, don't ask height: 1.08em; // ~27px, don't ask
width: 1.08em; width: 1.08em;
margin-top: 0.15em; margin-left: 1em;
margin-left: 1em; margin-right: -0.2em; // weirdness w/ svg ratio
margin-right: -0.2em; // weirdness w/ svg ratio }
} }
} }
} }

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

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