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

responsive: switch to rem units for scalable sizing #466

Browse source
This commit is contained in:
Sören Weber 2023-02-07 00:32:28 +01:00
parent 86bc997085
commit fbdb71e6fa
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 92 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
static/css/format-print.css
View file

@ -12,16 +12,12 @@
#body #navigation { #body #navigation {
display: none; display: none;
} }
html, html{
body #body{ font-size: 8.763pt;
font-size: 8.9pt;
} }
body { body {
background-color: white; background-color: white;
} }
pre code {
font-size: 8.3pt;
}
code.copy-to-clipboard-code { code.copy-to-clipboard-code {
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
@ -101,7 +97,12 @@ body,
#body-inner .chapter h3:first-of-type { #body-inner .chapter h3:first-of-type {
margin-top: 2rem; margin-top: 2rem;
} }
#body-inner .chapter p {
/* Children shortcode */
.children p,
.children-li p,
.children-h2 p,
.children-h3 p {
font-size: 1rem; font-size: 1rem;
} }
@ -190,7 +191,6 @@ rapi-doc::part(section-tag) {
rapi-doc::part(section-main-content) { rapi-doc::part(section-main-content) {
/* override variables for adapting rapidoc design to print theme */ /* override variables for adapting rapidoc design to print theme */
--font-size-regular: 8.9pt;
--fg: black; --fg: black;
--fg2: black; --fg2: black;
--fg3: black; --fg3: black;

31
static/css/nucleus.css
View file

@ -14,9 +14,10 @@
@viewport { @viewport {
width: device-width; } width: device-width; }
html { html {
font-size: 100%; font-size: 16px;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; } -webkit-text-size-adjust: 100%;
text-size-adjust: 100%; }
body { body {
margin: 0; } margin: 0; }
@ -172,32 +173,6 @@ th, td {
th { th {
text-align: start; } text-align: start; }
body {
font-size: 1rem;
line-height: 1.5; }
h1, h2, h3, .article-subheading, h4, h5, h6 {
margin: 0.85rem 0 1rem 0;
text-rendering: optimizeLegibility; }
h1 {
font-size: 3.25rem; }
h2 {
font-size: 2.55rem; }
h3, .article-subheading {
font-size: 2.15rem; }
h4 {
font-size: 1.8rem; }
h5 {
font-size: 1.4rem; }
h6 {
font-size: 0.9rem; }
p { p {
margin: 1rem 0; } margin: 1rem 0; }

170
static/css/theme.css
View file

@ -4,14 +4,14 @@
@import "tabs.css"; @import "tabs.css";
html { html {
width: 100%;
height: 100%; height: 100%;
width: 100%;
} }
body { body {
display: flex; display: flex;
flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS and better SEO and a11y */ flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS and better SEO and a11y */
font-size: 16.25px; font-size: 1.015625rem;
font-weight: 300; font-weight: 300;
height: 100%; height: 100%;
justify-content: flex-end; justify-content: flex-end;
@ -20,24 +20,6 @@ body {
width: 100%; width: 100%;
} }
body:not(.print) #body-inner.narrow h1 {
font-size: 3.5rem;
}
@media only screen and (min-width: 48em) and (max-width: 59.938em) {
body:not(.print) #body-inner.narrow h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 47.938em) {
body:not(.print) #body-inner.narrow h1 {
font-size: 2.5rem;
}
}
pre {
position: relative;
}
b, b,
strong, strong,
label, label,
@ -68,7 +50,7 @@ dd {
flex-direction: column; flex-direction: column;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
font-size: 15.25px; font-size: .953125rem;
height: 100%; height: 100%;
left: 0; left: 0;
line-height: 1.574; line-height: 1.574;
@ -100,7 +82,7 @@ dd {
.searchbox > :first-child { .searchbox > :first-child {
position: absolute; position: absolute;
left: 10px; left: .5rem;
} }
.searchbox > button { .searchbox > button {
@ -110,18 +92,18 @@ dd {
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
top: 4px; top: .25rem;
} }
.searchbox > i { .searchbox > i {
top: 7px; top: .5rem;
} }
.searchbox span { .searchbox span {
position: absolute;
right: 10px;
top: 4px;
cursor: pointer; cursor: pointer;
position: absolute;
right: .5rem;
top: .25rem;
} }
#sidebar .searchbox > :first-child, #sidebar .searchbox > :first-child,
@ -138,10 +120,10 @@ dd {
.searchbox input { .searchbox input {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 30px; height: 1.875rem;
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0 25px 0 30px; padding: 0 1.6rem 0 1.8rem;
margin: 0; margin: 0;
font-weight: 300; font-weight: 300;
} }
@ -411,10 +393,6 @@ body:not(.print) #body-inner.narrow {
text-align: center; text-align: center;
} }
body:not(.print) #body-inner.narrow h1 {
border-bottom: 4px solid rgba( 134, 134, 134, .125 );
}
body:not(.print) #body-inner.narrow p { body:not(.print) #body-inner.narrow p {
font-size: 1.2rem; font-size: 1.2rem;
text-align: justify; text-align: justify;
@ -425,13 +403,63 @@ mark {
} }
h1 { h1 {
font-size: 3.25rem;
font-weight: 200; font-weight: 200;
margin: 0.85rem 0 1rem 0;
/* big titles cause a horizontal scrollbar - fixing this by wrapping text */
overflow-wrap: break-word;
overflow-x: hidden;
text-align: center; text-align: center;
text-rendering: optimizeLegibility;
text-transform: uppercase; text-transform: uppercase;
} }
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) {
body:not(.print) #body-inner.narrow h1 {
font-size: 2.8rem;
}
}
@media only screen and (max-width: 47.938em) {
body:not(.print) #body-inner.narrow h1 {
font-size: 2.5rem;
}
}
h2 {
font-size: 2.2rem;
font-weight: 500;
}
h3, .article-subheading {
font-size: 1.8rem;
font-weight: 500;
}
h4 {
font-size: 1.85rem;
font-weight: 300;
}
h5 {
font-size: 1.6rem;
font-weight: 300;
}
h6 {
font-size: 1.3rem;
font-weight: 300;
}
h2, h3, .article-subheading, h4, h5, h6 { h2, h3, .article-subheading, h4, h5, h6 {
letter-spacing: -1px; letter-spacing: -1px;
margin: 2rem 0 1rem 0;
/* big titles cause a horizontal scrollbar - fixing this by wrapping text */
overflow-wrap: break-word;
overflow-x: hidden;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
@ -445,7 +473,7 @@ blockquote {
} }
blockquote p { blockquote p {
font-size: 105%; font-size: 1.06640625rem;
font-style: italic; font-style: italic;
opacity: .75; opacity: .75;
text-align: justify; text-align: justify;
@ -515,7 +543,7 @@ div.attachments .box-content {
/* Children shortcode */ /* Children shortcode */
.children p { .children p {
font-size: small; font-size: .8125rem;
margin-bottom: 0px; margin-bottom: 0px;
margin-top: 0px; margin-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
@ -523,13 +551,13 @@ div.attachments .box-content {
} }
.children-li p { .children-li p {
font-size: small; font-size: .8125rem;
font-style: italic; font-style: italic;
} }
.children-h2 p, .children-h2 p,
.children-h3 p { .children-h3 p {
font-size: small; font-size: .8125rem;
margin-bottom: 0px; margin-bottom: 0px;
margin-top: 0px; margin-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
@ -559,7 +587,7 @@ code,
kbd, kbd,
pre, pre,
samp { samp {
font-size: 92%; font-size: .934375rem;
vertical-align: baseline; vertical-align: baseline;
} }
@ -601,6 +629,7 @@ pre {
color-adjust: economy; color-adjust: economy;
line-height: 1.15; line-height: 1.15;
padding: 1rem; padding: 1rem;
position: relative;
} }
pre.pre-code, pre.pre-code,
@ -615,7 +644,7 @@ pre code {
color: inherit; color: inherit;
-webkit-print-color-adjust: economy; -webkit-print-color-adjust: economy;
color-adjust: economy; color-adjust: economy;
font-size: 15px; font-size: .9375rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
white-space: inherit; white-space: inherit;
@ -629,18 +658,6 @@ hr {
white-space: pre-wrap; white-space: pre-wrap;
} }
#body-inner h1,
#body-inner h2,
#body-inner h3,
#body-inner h4,
#body-inner h5,
#body-inner h6,
#body-inner .article-subheading {
/* big titles cause a horizontal scrollbar - fixing this by wrapping text */
overflow-wrap: break-word;
overflow-x: hidden;
}
table { table {
border: 1px solid rgba( 134, 134, 134, .333 ); border: 1px solid rgba( 134, 134, 134, .333 );
margin-bottom: 1rem; margin-bottom: 1rem;
@ -673,9 +690,12 @@ td {
color: #fff; color: #fff;
content: attr(aria-label); content: attr(aria-label);
display: none; display: none;
font: normal normal 11px/1.5 "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-size: .6875rem;
font-weight: normal;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
letter-spacing: normal; letter-spacing: normal;
line-height: 1.5;
padding: 5px 8px; padding: 5px 8px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
@ -975,7 +995,7 @@ span.nav i{
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
cursor: pointer; cursor: pointer;
font-size: 92%; font-size: .859625rem;
padding-left: 22px; padding-left: 22px;
} }
@ -987,7 +1007,7 @@ span > .copy-to-clipboard-button {
} }
.copy-to-clipboard-button > i { .copy-to-clipboard-button > i {
font-size: 92%; font-size: .790855rem;
font-weight: 500; font-weight: 500;
margin-left: -22px; margin-left: -22px;
} }
@ -1237,7 +1257,7 @@ option {
} }
#TableOfContents { #TableOfContents {
font-size: 13px !important; font-size: .8125rem !important;
max-height: 90vh; max-height: 90vh;
overflow: hidden; overflow: hidden;
padding: 15px 5px !important; padding: 15px 5px !important;
@ -1326,36 +1346,6 @@ h6 a {
font-weight: inherit; font-weight: inherit;
} }
#body h2 {
font-size: 2.2rem;
font-weight: 500;
margin-top: 2rem;
}
#body h3, #body .article-subheading {
font-size: 1.8rem;
font-weight: 500;
margin-top: 2rem;
}
#body h4 {
font-size: 1.85rem;
font-weight: 300;
margin-top: 2rem;
}
#body h5 {
font-size: 1.6rem;
font-weight: 300;
margin-top: 2rem;
}
#body h6 {
font-size: 1.3rem;
font-weight: 300;
margin-top: 2rem;
}
#body h1 + h2, #body h1 + h2,
#body h1 + h3, #body h1 + h3,
#body h1 + h4, #body h1 + h4,
@ -1389,9 +1379,10 @@ rapi-doc {
rapi-doc::part(section-main-content) { rapi-doc::part(section-main-content) {
/* override variables for adapting rapidoc design to theme */ /* override variables for adapting rapidoc design to theme */
--font-mono: var(--INTERNAL-CODE-font); --font-mono: var(--INTERNAL-CODE-font);
--font-size-mono: 15px; --font-size-mono: .9375rem;
--font-regular: var(--INTERNAL-MAIN-font); --font-regular: var(--INTERNAL-MAIN-font);
--font-size-regular: 16.25px; --font-size-regular: 1.015625rem;
--font-size-small: .875rem;
font-weight: 300 !important; font-weight: 300 !important;
} }
@ -1408,7 +1399,8 @@ rapi-doc::part(btn) {
rapi-doc::part(section-endpoint-head-method) { rapi-doc::part(section-endpoint-head-method) {
/* makes method marker large enough to not overflow on text DELETE */ /* makes method marker large enough to not overflow on text DELETE */
font-size: 11px; font-size: .6875rem;
width: 5.5em;
} }
.select-container i { .select-container i {
@ -1659,7 +1651,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
.badge { .badge {
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
font-size: 80%; font-size: .8rem;
font-weight: 500; font-weight: 500;
vertical-align: middle; vertical-align: middle;
} }