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

theme: switch layout and menu to rem units #466

Browse source
This commit is contained in:
Sören Weber 2023-02-14 20:28:11 +01:00
parent e7a0ef9d9e
commit 4b7409f31c
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
8 changed files with 81 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -215,4 +215,4 @@ landingPageName = "<i class='fas fa-home'></i> Home"
The home button is going to look like this: The home button is going to look like this:
![Default Home Button](home_button_defaults.png?classes=shadow&width=300px) ![Default Home Button](home_button_defaults.png?classes=shadow&width=18.75rem)

2
exampleSite/content/cont/i18n/_index.en.md
View file

@ -10,7 +10,7 @@ The Relearn theme is fully compatible with Hugo multilingual mode.
- Automatic menu generation from multilingual content - Automatic menu generation from multilingual content
- In-browser language switching - In-browser language switching
![I18n menu](i18n-menu.gif?classes=shadow&width=300px) ![I18n menu](i18n-menu.gif?classes=shadow&width=18.75rem)
## Basic configuration ## Basic configuration

2
exampleSite/content/cont/pages/_index.en.md
View file

@ -96,7 +96,7 @@ menuPre = "<i class='fab fa-github'></i> "
+++ +++
``` ```
![Title with icon](frontmatter-icon.png?classes=shadow&width=300px) ![Title with icon](frontmatter-icon.png?classes=shadow&width=18.75rem)
### Ordering sibling menu/page entries ### Ordering sibling menu/page entries

8
exampleSite/layouts/partials/menu-footer.html
View file

@ -1,14 +1,14 @@
<style> <style>
#footer { #footer {
font-size: 13px; font-size: .8125rem;
height: 100px; height: 6.25rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 2rem 1rem; padding: 2rem 1rem;
text-align: center; text-align: center;
min-width: 230px; min-width: 14.375rem;
max-width: 300px; max-width: 18.75rem;
} }
#footer p { #footer p {
margin: 0; margin: 0;

30
layouts/partials/logo.html
View file

@ -11,12 +11,12 @@
color: #282828; color: #282828;
color: var(--MENU-SECTIONS-BG-color); color: var(--MENU-SECTIONS-BG-color);
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif; font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
font-size: 30px; font-size: 1.875rem;
font-weight: 300; font-weight: 300;
margin-top: -13px; margin-top: -.8125rem;
max-width: 60%; max-width: 60%;
text-transform: uppercase; text-transform: uppercase;
width: 226px; width: 14.125rem;
white-space: nowrap; white-space: nowrap;
} }
a#logo:hover { a#logo:hover {
@ -24,33 +24,33 @@
color: var(--MENU-SECTIONS-BG-color); color: var(--MENU-SECTIONS-BG-color);
} }
#logo svg { #logo svg {
margin-bottom: -20px; margin-bottom: -1.25rem;
margin-inline-start: -23.5px; margin-inline-start: -1.47rem;
width: 40.5%; width: 40.5%;
} }
@media only all and (max-width: 59.938em) { @media only all and (max-width: 60rem) {
a#logo { a#logo {
font-size: 25px; font-size: 1.5625rem;
margin-top: -3px; margin-top: -.1875rem;
} }
#logo svg { #logo svg {
margin-bottom: -12px; margin-bottom: -.75rem;
margin-inline-start: -23px; margin-inline-start: -1.47rem;
} }
} }
@media all and (-ms-high-contrast:none) { @media all and (-ms-high-contrast:none) {
{{ "/* IE11s understanding of positioning is weird at best */" | safeCSS }} {{ "/* IE11s understanding of positioning is weird at best */" | safeCSS }}
a#logo { a#logo {
margin-top: -58px; margin-top: -3.625rem;
} }
#logo svg { #logo svg {
margin-bottom: -62px; margin-bottom: -3.875rem;
margin-left: -23.5px; margin-left: -1.47rem;
} }
} }
@media only all and (-ms-high-contrast:none) and (max-width: 59.938em) { @media only all and (-ms-high-contrast:none) and (max-width: 60rem) {
#logo svg { #logo svg {
margin-left: -23px; margin-left: -1.47rem;
} }
} }
</style> </style>

14
static/css/ie.css
View file

@ -44,7 +44,7 @@
padding-left: 1rem; padding-left: 1rem;
} }
#body { #body {
margin-left: 300px; margin-left: 18.75rem;
} }
h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 {
padding-right: 2rem; padding-right: 2rem;
@ -96,19 +96,19 @@
.progress { .progress {
left: 1rem; left: 1rem;
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
.progress { .progress {
left: 4.25rem; left: 4.25rem;
} }
} }
@media screen and (max-width: 59.938em) { @media screen and (max-width: 60rem) {
#body { #body {
margin-left: 230px; margin-left: 14.375rem;
} }
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
.mobile-support #sidebar { .mobile-support #sidebar {
left: -230px; left: -14.375rem;
} }
.mobile-support #body { .mobile-support #body {
margin-left: 0; margin-left: 0;
@ -117,7 +117,7 @@
left: 0; left: 0;
} }
.mobile-support.sidebar-flyout #body { .mobile-support.sidebar-flyout #body {
margin-left: 230px; margin-left: 14.375rem;
} }
} }
.copy-to-clipboard-button { .copy-to-clipboard-button {

2
static/css/nucleus.css
View file

@ -90,7 +90,7 @@ svg:not(:root) {
overflow: hidden; } overflow: hidden; }
figure { figure {
margin: 1em 40px; } margin: 1rem 2.5rem; }
hr { hr {
height: 0; } height: 0; }

97
static/css/theme.css
View file

@ -55,10 +55,10 @@ dd {
inset-inline-start: 0; inset-inline-start: 0;
line-height: 1.574; line-height: 1.574;
min-height: 100%; min-height: 100%;
min-width: 300px; min-width: 18.75rem;
max-width: 300px; max-width: 18.75rem;
position: fixed; position: fixed;
width: 300px; width: 18.75rem;
} }
#header-wrapper { #header-wrapper {
@ -251,7 +251,7 @@ dd {
#sidebar ul li .read-icon { #sidebar ul li .read-icon {
display: none; display: none;
float: right; float: right;
font-size: 13px; font-size: .8125rem;
margin: 4px 0 0 0; margin: 4px 0 0 0;
min-width: 16px; min-width: 16px;
text-align: start; text-align: start;
@ -292,13 +292,13 @@ html[dir="rtl"] #sidebar ul li .read-icon {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
height: 100%; height: 100%;
margin-inline-start: 300px; margin-inline-start: 18.75rem;
min-height: 100%; min-height: 100%;
min-width: calc( 100% - 300px); min-width: calc( 100% - 18.75rem);
max-width: calc( 100% - 300px); max-width: calc( 100% - 18.75rem);
overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */ overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
position: relative; /* PS */ position: relative; /* PS */
width: calc( 100% - 300px); width: calc( 100% - 18.75rem);
z-index: 70; z-index: 70;
} }
@ -325,7 +325,7 @@ html[dir="rtl"] #sidebar ul li .read-icon {
#body img.shadow, #body img.shadow,
#body .video-container.shadow { #body .video-container.shadow {
box-shadow: 0 10px 30px rgba( 200, 200, 200, .666 ); box-shadow: 0 .625rem 1.875rem rgba( 200, 200, 200, .666 );
} }
#body img.inline { #body img.inline {
@ -342,14 +342,14 @@ html[dir="rtl"] #sidebar ul li .read-icon {
padding: 0 3.25rem 4rem 3.25rem; padding: 0 3.25rem 4rem 3.25rem;
position: relative; /* PS */ position: relative; /* PS */
} }
@media screen and (max-width: 59.938em) { @media screen and (max-width: 60rem) {
#body-inner { #body-inner {
padding: 0 2rem 15px 2rem; padding: 0 2rem 1rem 2rem;
} }
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
#body-inner { #body-inner {
padding: 0 1.25rem 5px 1.25rem; padding: 0 1.25rem .375rem 1.25rem;
} }
} }
@ -363,33 +363,38 @@ html[dir="rtl"] #sidebar ul li .read-icon {
margin-top: -1rem; margin-top: -1rem;
} }
/* we limit width if we have large screens */ #body .flex-block-wrapper {
@media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */
#body .flex-block-wrapper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
min-width: calc( 1300px - 300px - 2 * 3.25rem ); max-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
width: calc( 1300px - 300px - 2 * 3.25rem ); }
max-width: calc( 1300px - 300px - 2 * 3.25rem ); body:not(.print) #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 ){ /* #sidebar/width + ./max-width */
#body .flex-block-wrapper {
min-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
} }
body:not(.print) #body .narrow .flex-block-wrapper { body:not(.print) #body .narrow .flex-block-wrapper {
min-width: calc( 1300px - 300px - 2 * 9.75rem ); min-width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
width: calc( 1300px - 300px - 2 * 9.75rem ); width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
max-width: calc( 1300px - 300px - 2 * 9.75rem );
} }
} }
body:not(.print) #body-inner.narrow { body:not(.print) #body-inner.narrow {
padding: 2rem 9.75rem; padding: 2rem 9.75rem;
} }
@media screen and (max-width: 59.938em) { @media screen and (max-width: 60rem) {
body:not(.print) #body-inner.narrow { body:not(.print) #body-inner.narrow {
padding: 15px 6.5rem; padding: 1rem 6.5rem;
} }
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
body:not(.print) #body-inner.narrow { body:not(.print) #body-inner.narrow {
padding: 5px 3.25rem; padding: .375rem 3.25rem;
} }
} }
@ -425,12 +430,12 @@ body:not(.print) #body-inner.narrow h1 {
border-bottom: 4px solid rgba( 134, 134, 134, .125 ); border-bottom: 4px solid rgba( 134, 134, 134, .125 );
font-size: 3.5rem; font-size: 3.5rem;
} }
@media only screen and (min-width: 48em) and (max-width: 59.938em) { @media only screen and (min-width: 48em) and (max-width: 60rem) {
body:not(.print) #body-inner.narrow h1 { body:not(.print) #body-inner.narrow h1 {
font-size: 2.8rem; font-size: 2.8rem;
} }
} }
@media only screen and (max-width: 47.938em) { @media only screen and (max-width: 48rem) {
body:not(.print) #body-inner.narrow h1 { body:not(.print) #body-inner.narrow h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -896,7 +901,7 @@ span.nav i{
html[dir="rtl"] #body #breadcrumbs { html[dir="rtl"] #body #breadcrumbs {
float: right; float: right;
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
#body #breadcrumbs { #body #breadcrumbs {
text-overflow: unset; text-overflow: unset;
} }
@ -909,7 +914,7 @@ html[dir="rtl"] #body #breadcrumbs {
inset-inline-start: 1rem; inset-inline-start: 1rem;
top: 1rem; top: 1rem;
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
.mobile-support #sidebar-toggle-span { .mobile-support #sidebar-toggle-span {
display: inline; display: inline;
} }
@ -922,7 +927,7 @@ html[dir="rtl"] #body #breadcrumbs {
display: inline; display: inline;
padding: 0 .75rem; padding: 0 .75rem;
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
#body #breadcrumbs .links { #body #breadcrumbs .links {
/* we just hide the breadcrumbs instead of display: none; /* we just hide the breadcrumbs instead of display: none;
this makes sure that the breadcrumbs are still usable for this makes sure that the breadcrumbs are still usable for
@ -949,23 +954,23 @@ html[dir="rtl"] #body #breadcrumbs {
text-decoration: none; text-decoration: none;
} }
@media screen and (max-width: 59.938em) { @media screen and (max-width: 60rem) {
#sidebar { #sidebar {
min-width: 230px; min-width: 14.375rem;
max-width: 230px; max-width: 14.375rem;
width: 230px; width: 14.375rem;
} }
#body { #body {
margin-inline-start: 230px; margin-inline-start: 14.375rem;
min-width: calc( 100% - 230px); min-width: calc( 100% - 14.375rem);
max-width: calc( 100% - 230px); max-width: calc( 100% - 14.375rem);
width: calc( 100% - 230px); width: calc( 100% - 14.375rem);
} }
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
/* we don't support sidebar flyout in mobile */ /* we don't support sidebar flyout in mobile */
.mobile-support #sidebar { .mobile-support #sidebar {
inset-inline-start: -230px; inset-inline-start: -14.375rem;
} }
.mobile-support #navshow{ .mobile-support #navshow{
display: inline; display: inline;
@ -986,7 +991,7 @@ html[dir="rtl"] #body #breadcrumbs {
z-index: 90; z-index: 90;
} }
.mobile-support.sidebar-flyout #body { .mobile-support.sidebar-flyout #body {
margin-inline-start: 230px; margin-inline-start: 14.375rem;
overflow: hidden; overflow: hidden;
} }
.mobile-support.sidebar-flyout #sidebar-overlay{ .mobile-support.sidebar-flyout #sidebar-overlay{
@ -1262,7 +1267,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
.progress ul { .progress ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0 15px; padding: 0 1rem;
} }
#TableOfContents { #TableOfContents {
@ -1270,7 +1275,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
font-size: .8125rem !important; font-size: .8125rem !important;
max-height: 90vh; max-height: 90vh;
overflow: hidden; overflow: hidden;
padding: 15px 5px !important; padding: 1rem .375rem !important;
position: relative; /* PS */ position: relative; /* PS */
} }
@ -1379,7 +1384,7 @@ rapi-doc {
margin-left: calc( -8px - 24px ); margin-left: calc( -8px - 24px );
width: calc( 100% + 8px + 24px + 8px ); width: calc( 100% + 8px + 24px + 8px );
} }
@media (max-width: 767px) { @media (max-width: 48rem) {
rapi-doc { rapi-doc {
margin-left: calc( -12px ); margin-left: calc( -12px );
width: calc( 100% + 12px + 4px ); width: calc( 100% + 12px + 4px );
@ -1486,7 +1491,7 @@ html[dir="rtl"] .select-container span {
width: 100%; width: 100%;
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 48rem) {
#breadcrumbs .links { #breadcrumbs .links {
display: none; display: none;
} }