malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Set top/wide header logo max width to 100%

Browse Source
This commit is contained in:
Tetrakern 2024-09-21 09:28:43 +02:00
parent 4d059dabda
commit 4c57df693a
4 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/customize/header-style-top-split.css
View File

@ -1 +1 @@
.top-header{background:var(--top-header-background);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header__logo{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--header-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header:not(._no-text-shadow) .top-header__title{text-shadow:var(--site-title-text-shadow)}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}
.top-header{background:var(--top-header-background);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header__logo{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--header-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;max-width:100%;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header:not(._no-text-shadow) .top-header__title{text-shadow:var(--site-title-text-shadow)}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}

2
css/customize/header-style-wide.css
View File

@ -1 +1 @@
.main-navigation{margin:0 auto}.main-navigation__wrapper{--v: var(--header-wide-vertical-padding, 20px);align-items:center;justify-content:space-between;padding:var(--v) 4px var(--v) clamp(10px,18.1818181818vw - 48.1818181818px,20px);width:100%;max-width:max(var(--site-width),1440px)}@media only screen and (min-width: 1024px){.main-navigation__wrapper{padding:var(--v) 40px}}.wide-header-logo{margin-right:1.5rem}.wide-header-logo .custom-logo{display:block;height:var(--header-logo-height);max-height:var(--header-logo-height);width:fit-content;object-fit:contain}.wide-header-identity{flex:0 1 auto;letter-spacing:0;margin-right:1.5rem}.wide-header-identity:not(._no-text-shadow){text-shadow:var(--site-title-text-shadow)}.wide-header-identity__title{color:var(--site-title-heading-color);font:900 var(--site-title-font-size)/1 var(--ff-site-title);letter-spacing:0}.wide-header-identity__tagline{color:var(--site-title-tagline-color);font:500 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0;margin-top:.5em}@media only screen and (min-width: 1024px){.wide-header-identity__tagline{white-space:nowrap}}
.main-navigation{margin:0 auto}.main-navigation__wrapper{--v: var(--header-wide-vertical-padding, 20px);align-items:center;justify-content:space-between;padding:var(--v) 4px var(--v) clamp(10px,18.1818181818vw - 48.1818181818px,20px);width:100%;max-width:max(var(--site-width),1440px)}@media only screen and (min-width: 1024px){.main-navigation__wrapper{padding:var(--v) 40px}}.wide-header-logo{margin-right:1.5rem}.wide-header-logo .custom-logo{display:block;height:var(--header-logo-height);max-height:var(--header-logo-height);width:fit-content;max-width:100%;object-fit:contain}.wide-header-identity{flex:0 1 auto;letter-spacing:0;margin-right:1.5rem}.wide-header-identity:not(._no-text-shadow){text-shadow:var(--site-title-text-shadow)}.wide-header-identity__title{color:var(--site-title-heading-color);font:900 var(--site-title-font-size)/1 var(--ff-site-title);letter-spacing:0}.wide-header-identity__tagline{color:var(--site-title-tagline-color);font:500 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0;margin-top:.5em}@media only screen and (min-width: 1024px){.wide-header-identity__tagline{white-space:nowrap}}

1
src/scss/customize/header-style-top-split.scss
View File

@ -30,6 +30,7 @@
height: var(--header-logo-height);
max-height: calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);
width: auto;
max-width: 100%;
object-fit: contain;
}

1
src/scss/customize/header-style-wide.scss
View File

@ -26,6 +26,7 @@
height: var(--header-logo-height);
max-height: var(--header-logo-height);
width: fit-content;
max-width: 100%;
object-fit: contain;
}
}