nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

menu: use --MENU-WIDTH-S to adjust mobile flyout #761

Browse source
This commit is contained in:
Sören Weber 2024-01-21 13:39:15 +01:00
parent df39abcbc9
commit cc97ab0600
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
exampleSite/content/basics/customization/_index.en.md
View file

@ -129,10 +129,11 @@ The menu width adjusts automatically for different screen sizes.
The values for the screen width breakpoints aren't configurable.
If you want to adjust the menu width you can define the following CSS variables in your `custom-header.html`. Note that `--MENU-WIDTH-S` doesn't exist as the menu is always hidden for small screen sizes.
If you want to adjust the menu width you can define the following CSS variables in your `custom-header.html`. Note that `--MENU-WIDTH-S` applies to the menu flyout width in mobile mode for small screen sizes.
````css
:root {
--MENU-WIDTH-S: 14.375rem;
--MENU-WIDTH-M: 14.375rem;
--MENU-WIDTH-L: 18.75rem;
}

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -36,6 +36,8 @@ This document shows you what's new in the latest release and flags it with one o
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} On taxonomy and term pages you can now use prev/next navigation as within the normal page structure.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} In additiion to the existing [menu width customization](basics/customization#change-the-menu-width), it is now alsow possible to set the width of the menu flyout for for small screen sizes with the `--MENU-WIDTH-S` CSS property.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Improvements for accessibility when tabbing thru the page for images, links and tab handles.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The themes [config](basics/configuration) and [frontmatter](cont/frontmatter) options received a comprehensive documentation update. In addition the theme switched from `config.toml` to `hugo.toml`.

7
static/css/theme.css
View file

@ -1158,7 +1158,10 @@ html[dir="rtl"] .topbar-button-next i {
@media screen and (max-width: 47.999rem) {
/* we don't support sidebar flyout in mobile */
.mobile-support #R-sidebar {
inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-M) );
inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-S) );
min-width: var(--INTERNAL-MENU-WIDTH-S);
max-width: var(--INTERNAL-MENU-WIDTH-S);
width: var(--INTERNAL-MENU-WIDTH-S);
}
.mobile-support #navshow{
display: inline;
@ -1179,7 +1182,7 @@ html[dir="rtl"] .topbar-button-next i {
z-index: 90;
}
.mobile-support.sidebar-flyout #R-body {
margin-inline-start: var(--INTERNAL-MENU-WIDTH-M);
margin-inline-start: var(--INTERNAL-MENU-WIDTH-S);
overflow: hidden;
}
.mobile-support.sidebar-flyout #R-body-overlay{

1
static/css/variant-internal.css
View file

@ -109,6 +109,7 @@
--INTERNAL-PRINT-OPENAPI-theme: var(--PRINT-OPENAPI-theme, var(--PRINT-SWAGGER-theme, light));
--INTERNAL-PRINT-OPENAPI-CODE-theme: var(--PRINT-OPENAPI-CODE-theme, idea);
--INTERNAL-MENU-WIDTH-S: var(--MENU-WIDTH-S, 14.375rem);
--INTERNAL-MENU-WIDTH-M: var(--MENU-WIDTH-M, 14.375rem);
--INTERNAL-MENU-WIDTH-L: var(--MENU-WIDTH-L, 18.75rem);
}