nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

menu: make width configurable #677

Browse source
This commit is contained in:
Sören Weber 2023-10-05 14:59:27 +02:00
parent 38eefc1d19
commit 87b51bb67f
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 74 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,7 @@ This theme defines the following partials :
- `content-header.html`: header above the title, has a default implementation but you can overwrite it if you don't like it.
- `content-footer.html`: footer below the content, has a default implementation but you can overwrite it if you don't like it.
## Change the logo
## Change the Logo
Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want.
You could use an `img` HTML tag and reference an image created under the _static_ folder, or you could paste a SVG definition!
@ -40,7 +40,7 @@ You could use an `img` HTML tag and reference an image created under the _static
The size of the logo will adapt automatically
{{% /notice %}}
## Change the favicon
## Change the Favicon
If your favicon is a SVG, PNG or ICO, just drop off your image in your local `static/images/` folder and name it `favicon.svg`, `favicon.png` or `favicon.ico` respectively.
@ -59,13 +59,25 @@ If you need to change this default behavior, create a new file in `layouts/parti
<link rel="icon" href="/images/favicon.bmp" type="image/bmp">
```
## Change the colors {#theme-variant}
## Change the Menu Width
If you want to adjust the menu width you can define the following CSS variables in you `custom-header.html`. Note that `--MENU-WIDTH-S` isn't adjustable because the menu is
hidden for small screen widths.
````css
:root {
--MENU-WIDTH-M: 15rem;
--MENU-WIDTH-L: 20rem;
}
````
## Change the Colors {#theme-variant}
The Relearn theme lets you choose between some predefined color variants in light or dark mode, but feel free to add one yourself!
You can preview the shipped variants by changing them in the variant selector at the bottom of the menu.
### Single variant
### Single Variant
Set the `themeVariant` value with the name of your theme file. That's it!
@ -76,7 +88,7 @@ Set the `themeVariant` value with the name of your theme file. That's it!
In the above example your theme file has to be named `theme-relearn-light.css`
### Multiple variants
### Multiple Variants
You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer.
@ -125,10 +137,10 @@ document.addEventListener( 'themeVariantLoaded', function( e ){
});
````
### Roll your own
### Roll your Own
If you are not happy with the shipped variants you can either copy and rename one of the shipped files from `themes/hugo-theme-relearn/static/css` to `static/css`, edit them afterwards to your liking in a text editor and configure the `themeVariant` parameter in your `config.toml` or just use the [interactive variant generator]({{%relref "basics/generator" %}}).
### Output formats
### Output Formats
Certain parts of the theme can be changed for support of your own [output formats](https://gohugo.io/templates/output-formats/). Eg. if you define a new output format `PLAINTEXT` in your `config.toml`, you can add a file `layouts/partials/header.plaintext.html` to change the way, the page header should look like for that output format.

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

@ -22,6 +22,8 @@ This document shows you what's new in the latest release. For a detailed list of
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to print custom taxonomies anywhere in you page. [See the docs]({{% relref "cont/taxonomy#customization" %}}).
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to adjust the menu width for your whole site. [See the docs]({{% relref "basics/customization#change-the-menu-width" %}}).
---
## 5.22.0 (2023-10-02) {#5220}

29
static/css/ie.css
View file

@ -17,6 +17,9 @@
/* theme */
#R-sidebar {
left: 0;
min-width: 18.75rem;
max-width: 18.75rem;
width: 18.75rem;
}
#R-header {
border-right: 1px solid transparent;
@ -42,6 +45,24 @@
}
#R-body {
margin-left: 18.75rem;
min-width: calc( 100% - 18.75rem );
max-width: calc( 100% - 18.75rem );
width: calc( 100% - 18.75rem );
}
#R-body .flex-block-wrapper {
max-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
}
body:not(.print) #R-body .narrow .flex-block-wrapper {
max-width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
}
/* we limit width if we have large screens */
@media screen and ( min-width: 81.25rem ){ /* #R-sidebar/width + ./max-width */
#R-body .flex-block-wrapper {
width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
}
body:not(.print) #R-body .narrow .flex-block-wrapper {
width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
}
}
h2, h3, h4, h5, h6 {
padding-right: 2rem;
@ -89,8 +110,16 @@
left: 1rem;
}
@media screen and (max-width: 59.999rem) {
#R-sidebar {
min-width: 14.375rem;
max-width: 14.375rem;
width: 14.375rem;
}
#R-body {
margin-left: 14.375rem;
min-width: calc( 100% - 14.375rem );
max-width: calc( 100% - 14.375rem );
width: calc( 100% - 14.375rem );
}
}
@media screen and (max-width: 47.999rem) {

41
static/css/theme.css
View file

@ -160,10 +160,10 @@ dd {
inset-inline-start: 0;
line-height: 1.574;
min-height: 100%;
min-width: 18.75rem;
max-width: 18.75rem;
position: fixed;
width: 18.75rem;
min-width: var(--INTERNAL-MENU-WIDTH-L);
max-width: var(--INTERNAL-MENU-WIDTH-L);
width: var(--INTERNAL-MENU-WIDTH-L);
}
#R-sidebar a{
@ -333,13 +333,13 @@ dd {
flex-grow: 1;
flex-shrink: 0;
height: 100%;
margin-inline-start: 18.75rem;
margin-inline-start: var(--INTERNAL-MENU-WIDTH-L);
min-height: 100%;
min-width: calc( 100% - 18.75rem);
max-width: calc( 100% - 18.75rem);
overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
position: relative; /* PS */
width: calc( 100% - 18.75rem);
min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
z-index: 70;
}
@ -424,20 +424,19 @@ article a:focus {
#R-body .flex-block-wrapper {
margin-left: auto;
margin-right: auto;
max-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
width: 100%;
}
body:not(.print) #R-body .narrow .flex-block-wrapper {
max-width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
}
/* we limit width if we have large screens */
@media screen and ( min-width: 81.25rem ){ /* #R-sidebar/width + ./max-width */
#R-body .flex-block-wrapper {
width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
}
body:not(.print) #R-body .narrow .flex-block-wrapper {
width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
}
}
@ -1098,21 +1097,21 @@ html[dir="rtl"] .topbar-button-next i {
@media screen and (max-width: 59.999rem) {
#R-sidebar {
min-width: 14.375rem;
max-width: 14.375rem;
width: 14.375rem;
min-width: var(--INTERNAL-MENU-WIDTH-M);
max-width: var(--INTERNAL-MENU-WIDTH-M);
width: var(--INTERNAL-MENU-WIDTH-M);
}
#R-body {
margin-inline-start: 14.375rem;
min-width: calc( 100% - 14.375rem);
max-width: calc( 100% - 14.375rem);
width: calc( 100% - 14.375rem);
margin-inline-start: var(--INTERNAL-MENU-WIDTH-M);
min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
}
}
@media screen and (max-width: 47.999rem) {
/* we don't support sidebar flyout in mobile */
.mobile-support #R-sidebar {
inset-inline-start: -14.375rem;
inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-M) );
}
.mobile-support #navshow{
display: inline;
@ -1133,7 +1132,7 @@ html[dir="rtl"] .topbar-button-next i {
z-index: 90;
}
.mobile-support.sidebar-flyout #R-body {
margin-inline-start: 14.375rem;
margin-inline-start: var(--INTERNAL-MENU-WIDTH-M);
overflow: hidden;
}
.mobile-support.sidebar-flyout #R-body-overlay{

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

@ -109,4 +109,7 @@
--INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default);
--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-M: var(--MENU-WIDTH-M, 14.375rem);
--INTERNAL-MENU-WIDTH-L: var(--MENU-WIDTH-L, 18.75rem);
}