ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix some bugs with mobile toggle and reuse button and link classes for mobile menu.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-05-08 15:49:49 +02:00
commit 06479083fb
4 changed files with 33 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -273,6 +273,7 @@ params:
menuInHeader: true # Move the main menu to the header, default false.
microUsername: "" # Your micro.blog username.
mobileMenu: true # Turn on a mobile menu on small screens, default false.
mobileMenuOutline: true # Mobil menu button as outline, default false.
piwikSiteId: # Matomo site id
piwikTrackerUrl: "" # Matomo url, schemaless and no slash on end (example.org/matomo).
plausibleSiteID: "" # Plausible site id/domain.

28
assets/sass/components/button/_button.scss
View file

@ -27,25 +27,17 @@ button,
cursor: pointer;
color: var(--color-button-text);
background-color: var(--color-button);
border: 0;
border: 1px solid var(--color-button);
border-radius: var(--radius-s);
&:hover,
&:focus,
&:focus-visible,
&:active {
// Override any link underlines and color changes.
text-decoration: none;
color: var(--color-button-text-hover);
background-color: var(--color-button-hover);
}
&:hover {
box-shadow: 2px 2px 5px 1px var(--color-button-hover);
}
&:active {
box-shadow: inset 2px 2px 5px 1px var(--color-button);
}
}
// Add button variations here.
@ -63,7 +55,7 @@ button,
background-color: var(--color-button-hover);
&:hover,
&:focus,
&:focus-visible,
&:active {
color: var(--color-button-text);
background-color: var(--color-button);
@ -73,15 +65,25 @@ button,
&--outline {
color: var(--color-button);
background-color: var(--color-button-text);
border: 1px solid var(--color-button);
border-color: var(--color-button);
&:hover,
&:focus,
&:focus-visible,
&:active {
color: var(--color-button-text);
background-color: var(--color-button);
}
}
&--shadow {
&:hover {
box-shadow: 2px 2px 5px 1px var(--color-button-hover);
}
&:active {
box-shadow: inset 2px 2px 5px 1px var(--color-button);
}
}
}
// The disabled variation should always go last, so that it overrides any

38
assets/sass/mobile.scss
View file

@ -55,41 +55,43 @@
right: var(--gutters);
margin: 0;
padding: 0 .3rem;
border-color: var(--color-button-text-hover);
font-weight: var(--fw-bold);
background-color: var(--color-text-bg);
color: var(--color-text);
z-index: 22;
border: 1px solid var(--color-border);
pointer-events: auto;
@include respond-to(s) {
display: none;
}
.js-nav-open & {
color: var(--color-text-bg);
}
&:hover,
&:focus-visible {
svg {
fill: var(--color-button-text-hover);
}
&:hover svg,
&:focus-visible svg {
fill: var(--color-text-bg);
&.button--outline {
border-color: var(--color-button-text-hover);
}
}
}
&__hamburger {
fill: var(--color-text);
fill: var(--color-button-text-hover);
width: 1.6rem;
margin-left: .1rem;
.button--outline & {
fill: var(--color-button);
}
rect {
transform-origin: center;
}
.js-nav-open & { // stylelint-disable max-nesting-depth
fill: var(--color-text-bg);
rect {
y: 45;
y: 45px;
&:nth-of-type(1) {
transform: rotate(45deg);
@ -115,16 +117,6 @@
transform: translateX(100vw);
z-index: 21;
a {
color: var(--color-text-bg);
text-decoration: none;
&:hover,
&:focus {
color: var(--color-text-bg);
}
}
.js-nav-open & {
visibility: visible;
pointer-events: auto;

4
layouts/partials/mobilemenu.html
View file

@ -1,6 +1,6 @@
<div class="mobile-nav" dir="ltr">
<div class="mobile-nav__cover"></div>
<button class="mobile-nav__toggle" aria-expanded="false" aria-controls="sheet">
<button class="mobile-nav__toggle{{ if $.Param "mobilemenuoutline" }} button--outline{{ end }}" aria-expanded="false" aria-controls="sheet">
{{ i18n "menu_mobile" }}
<svg class="mobile-nav__hamburger" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
<rect width="80" height="12" x="10" y="20" rx="5"></rect>
@ -8,7 +8,7 @@
<rect width="80" height="12" x="10" y="70" rx="5"></rect>
</svg>
</button>
<div class="mobile-nav__sheet" id="sheet" aria-hidden="true">
<div class="mobile-nav__sheet link-inverted link-nav" id="sheet" aria-hidden="true">
<div class="mobile-nav__region">{{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}</div>
<nav class="mobile-nav__main-menu" aria-label="{{ i18n "menu_title" }}">
<ul class="mobile-nav__navbar">