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:
![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
- 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

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

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

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

30
layouts/partials/logo.html
View file

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

14
static/css/ie.css
View file

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

2
static/css/nucleus.css
View file

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

97
static/css/theme.css
View file

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