diff options
Diffstat (limited to 'templates/55/ad-hominem/css/layout.less')
| -rw-r--r-- | templates/55/ad-hominem/css/layout.less | 1308 |
1 files changed, 1308 insertions, 0 deletions
diff --git a/templates/55/ad-hominem/css/layout.less b/templates/55/ad-hominem/css/layout.less new file mode 100644 index 0000000..f034095 --- /dev/null +++ b/templates/55/ad-hominem/css/layout.less @@ -0,0 +1,1308 @@ +/** + * This contains the most basic layouts and styles + * @author Sascha Leib <sascha@leib.be> + */ + +html, body, * { + font-family: @ini_default_fonts; + margin: 0; + padding: 0; + scrollbar-gutter: auto; + scrollbar-width: thin; + scrollbar-color: @ini_blockquote @ini_background_site; +} +html { + scroll-behavior: smooth; +} +body { + background-color: @ini_background_site; + font-size: @ini_default_font_size; +} + +/* scrollbar styles */ +::-webkit-scrollbar { + width: .5rem; +} +::-webkit-scrollbar-track { + background: @ini_background_site; +} +::-webkit-scrollbar-thumb { + border-radius: .25rem; + background: @ini_blockquote; +} +::-webkit-scrollbar-thumb:hover { + background: @ini_separator; +} + +#skip-link { + & { + position: fixed; + left: 4pt; + top: 4pt; + width: auto; + z-index: 9999; + } + a { + position: absolute; + background-color: @ini_background; + font-size: 1.25em; + color: @ini_link; + height: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + } + a:focus { + position: static; + display: inline-block; + padding: 8px; + height: auto; + clip: auto; + overflow: visible; + outline: 2px solid @ini_focus_color; + } + &:focus { + display: block; + } +} + +.sronly { + position: absolute; + width: 0; + height: 0; + overflow: hidden; + display: block; +} +.printonly, +.print-only, +.wrap_print-only { + display: none; +} +div.no { + display: inline; + margin: 0; + padding: 0; +} + +#globalTools { + & { + grid-column: 2 / span 2; + grid-row: 1; + text-align: right; + font-size: 10pt; + } + a:link { + text-decoration: none; + } +} +#gSiteTools { + & { + justify-self: start; + } + & select { + display: none; + } +} +#gUserTools { + & { + justify-self: end; + padding-right: .5rem; + } + ul { + list-style: none inside; + display: block; + } + ul li { + display: inline; + } + ul li::before { + content: '\00B7'; + display: inline-block; + width: .35em; + padding-right: .35em; + } + ul li:first-child::before { + content: ''; + } +} + +#header-layout, +#footer-layout { + width: 100%; +} + +#header-layout > header { + width: 100%; + max-width: @ini_site_width; + margin: 0 auto; + padding-top: .25rem; + display: grid; + grid-template-columns: @ini_sidebar_width auto @ini_sidebar_width; + grid-template-rows: auto auto auto; + justify-items: stretch; +} + +#siteLogo { + & { + grid-column: 1; + grid-row: 1 / span 3; + column-gap: 8px; + padding: 0 .25em 0 .5em; + display: grid; + grid-template-columns: 64px auto; + grid-template-rows: auto auto; + } + .logo { + margin-top: 3pt; + grid-column: 1; + grid-row: 1 / span 2; + } + .logo img { + width: 64px; + height: auto; + } + .title, + .claim { + grid-column: 2; + grid-row: 2; + align-self: start; + font-size: 10pt; + padding-right: .5em; + max-width: e("calc(") @ini_sidebar_width e(" - 80px)") + } + .title { + grid-row: 1; + align-self: center; + font-size: 14pt; + line-height: 1em; + margin: 0; + } + .title * { + /* font-family: @ini_headline_fonts; + font-size: 13pt; */ + } +} + +#phSearch { + & { + grid-column: 2; + grid-row: 2; + padding: .5em 0; + } + form { + + & > div.search-field { + width: 100%; + display: grid; + grid-template-columns: auto 20pt 20pt; + place-items: stretch; + border: @ini_border solid 1pt; + background: @ini_background; + border-radius: 4pt; + -moz-box-shadow: inset 0 0 3pt @ini_border; + -webkit-box-shadow: inset 0 0 3pt @ini_border; + box-shadow: inset 0 0 3pt @ini_border; + outline: transparent solid 2pt; + } + + & .search-popup { + position: absolute; + width: 100%; + height: 5pt; + margin-right: 21pt; + } + + > div { + &.search-field.focus { + outline-color: @ini_focus_color; + } + input { + grid-column: 1; + grid-row: 1; + z-index: 23; + font-size: large; + padding: 2pt 0 2pt 4pt; + border: transparent none 0; + border-radius: 3pt; + background-color: transparent; + } + input:focus { + outline: transparent none 0; + } + button { + color: @ini_text; + border: transparent solid 1pt; + background: transparent none no-repeat center; + background-size: 13pt; + width: 2em; + height: 2em; + border-radius: 3pt; + overflow: hidden; + margin: 1pt 1pt 1pt 0; + height: auto; + outline: transparent solid 2pt; + } + button[type=reset] { + background-image: url('images/delete.svg'); + border-right: @ini_border solid 1pt; + } + button[type=submit] { + background-image: url('images/search.svg'); + } + button:hover { + background-color: @ini_background_neu; + border-color: @ini_border; + } + button:focus { + background-color: @ini_background_neu; + } + } + + } +} +#qsearch__out { + & { + z-index: 20; + position: relative; + left: 0; + width: auto; + padding: 0; + white-space: nowrap; + font-size: 1rem; + background-color: @ini_background_site; + -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5); + -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5); + box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5); + } + strong { + display: none; + padding: 2pt; + font-weight: normal; + } + ul { + border: @ini_border solid 1px; + border-top-width: 0; + max-height: 11em; + } + li { + border-top: @ini_border solid 1px; + } + a { + display: block; + padding: 2pt 0 2pt 4pt; + border: transparent solid 2px; + overflow: hidden; + text-overflow: '\2025'; + } + a:focus { + border-color: @ini_focus_color; + } +} + +#phTools{ } +#phInclude { + grid-column: 2 / span 2; + grid-row: 3; + margin-right: 2pt; +} + +#main-layout { + width: 100%; + max-width: @ini_site_width; + margin: 0 auto; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: stretch; + align-content: flex-start; +} + +#sidebar { + & { + width: @ini_sidebar_width; + max-width: @ini_sidebar_width; + flex-grow: 0; + } + &.toggle.hide, + &.toggle.alt { + max-width: 1em; + } + p, ul, ol { + padding-left: 1.25em; + } + ul { + list-style: square outside; + } + ul ~ ul, ul ~ ol, + ol ~ ul, ol ~ ol { + margin-top: .5em; + } + ul li, ol li { + color: @ini_text_alt; + padding: .1em 0; + } + dl dt { + font-weight: bold; + } + a:link, a:visited { + color: @ini_link; + } + .home a::before { + content: ' '; + display: inline-block; + width: 10pt; + height: 1em; + background: transparent url('images/home.svg') no-repeat no-repeat 0 4px; + background-size: .8em; + padding-right: 3pt; + } + .curid { + font-weight: bold; + } + h3, h4 { + font-size: 1.1rem; + margin: 0.25em 2pt; + } + & > button.tg_button { + float: right; + display: block; + background-color: transparent; + border: transparent none 0; + margin-right: 2px; + font-size: 1.5rem; + } + & > button:focus { + outline: @ini_focus_color solid 2px; + } + & > button.tg_button span { + display: none; + } + &.hide > button.tg_button, + &.alt > button.tg_button { + margin-left: 0; + width: 11pt; + } + & > button.tg_button::after { + content: '\2039'; + color: @ini_link; + display: inline-block; + width: .75em; + height: 1.25em; + text-align: center; + } + &.hide>button.tg_button span, + &.alt>button.tg_button span { + display: none; + } + &.hide>button.tg_button::after, + &.alt>button.tg_button::after { + content: '\203A'; + width: auto; + } + + .tg_content { + line-height: 1.5em; + font-size: 11.5pt; + } + + hr { + border: 0; + height: 1pt; + background: @ini_text_alt; + background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt); + margin: .5em 1em .5em 0; + } +} + +#sbNavigation { + margin: 1em .25em 0 1em; +} +#navBreadCrumbs { + margin-left: .5em; +} +#navBreadCrumbs ol { + list-style: decimal outside; + padding-left: 2em; +} + + +#navYouAreHere { + & { + display: flex; + flex-flow: row nowrap; + position: relative; + top: 0; + left: 0; + height: 16pt; + overflow: hidden; + white-space: nowrap; + } + h4 { + display: none /*inline-block */; + font-family: @ini_default_fonts; + font-weight: normal; + font-size: small; + line-height: 1.5em; + margin: 0 .5em 0 0; + } + ol { + & { + list-style: none inside; + display: flex; + line-height: 1.5em; + height: 100pt; + padding-left: 0; + margin: 0 2pt 0 0; + font-size: small; + overflow: scroll hidden; + } + li { + & { + color: @ini_headlines; + display: inline; + margin-bottom: 0; + max-width: 20em; + min-width: 2.2em; + overflow: hidden; + text-overflow: '\202F...'; + } + + &:last-child { flex-shrink: 1; } + &:nth-last-child(2) { flex-shrink: 2; } + &:nth-last-child(3) { flex-shrink: 3; } + &:nth-last-child(4) { flex-shrink: 4; } + &:nth-last-child(5) { flex-shrink: 5; } + &:nth-last-child(6) { flex-shrink: 6; } + + &.home { + min-width: 14px; + flex-shrink: 0 !important; + } + + &::before { + content: '\25B8'; + padding: 0 2pt; + color: @ini_text_alt; + } + &.home::before { + content: ''; + padding: 0; + } + &.home a { + display: inline-block; + width: 14px; + overflow: hidden; + } + &.home a::before { + content: ' '; + display: inline-block; + width: 14px; + height: 1em; + background: transparent url('images/home.svg') no-repeat left bottom; + filter: hue-rotate(-80deg); + } + } + } +} + +/* fix for issue with homepage */ +body.home #navYouAreHere ol li:last-child { + display: none; +} + +/* Table of Contents */ +#toc { + & { + clear: both; + float: right; + width: auto; + min-width: 32px; + padding-left: .25em; + line-height: 1.5em; + text-align: left; + max-width: @ini_toc_width; + background-color: transparent; + border: transparent none 0; + border-left: @ini_border solid 1pt; + } + ol { + list-style: none inside; + padding: 0 0 0 1em; + margin: 0; + } + ol li { + font-size: small; + line-height: 1.25em; + margin: .5em 0; + } + a[href^='#']:link, + a[href^='#']:visited { + color: @ini_inpage; + } +} + +#toc-menubutton { + background: transparent; + margin-left: .5em; + padding: 0 .25em; + width: auto; + height: auto; + overflow: hidden; + border: transparent 0 none; + border-radius: 3pt; +} +#toc-menubutton > span { + font-family: @ini_headline_fonts; + line-height: 1.5em; + font-weight: bold; + color: @ini_headlines; +} +#toc-menubutton::after { + content: '\203A'; + display: inline-block; + width: 1.5em; + text-align: center; +} + +.hide #toc-menubutton::after, +.alt #toc-menubutton::after { + content: '\2630'; +} + +.hide #toc-menubutton>span, +.alt #toc-menubutton>span { + display: none; +} + +main { + & { + width: e("calc(90% - 5px)"); + flex-grow: 100; + background-color: @ini_background; + color: @ini_text; + line-height: 1.5em; + padding: 1.5em 5% .75em 5%; + border: @ini_border solid 1px; + border-radius: 5px; + } + + /* edit buttons */ + .secedit { + float: right; + margin-top: -22pt; + line-height: 0; + } + .secedit button { + border: @ini_border solid 1pt; + background-color: transparent; + color: transparent; + width: 20pt; + height: 20pt; + border-radius: 50%; + font-size: 0; + cursor: pointer; + } + .secedit button::before { + content: ' '; + display: inline-block; + width: 13pt; + height: 13pt; + padding: 2pt; + background: transparent url('images/edit.svg') no-repeat center; + background-size: 10pt; + } + .secedit button:hover { + background-color: @ini_highlight; + border: @ini_text_alt solid 1pt; + } + .secedit button:focus { + background-color: @ini_highlight; + border: @ini_focus_color solid 2px; + outline: transparent none 0; + } + .secedit button:hover::before { + } + + .section_highlight { + border-radius: .5em; + outline: orange dashed 3px; + } + + /* Definition List styles: */ + dt { font-weight: 600; } + dd { margin-left: 1.25em; margin-bottom: .5em; } + dl.compact { + display: grid; + grid-template-columns: minmax(8em,min-content) auto; + } + dl.compact dt { grid-column-start: 1; } + dl.compact dd { grid-column-start: 2; margin-bottom: 0; } + + /* math fonts */ + math, .math, .math *, + .wrap_math, .wrap_math * { + font-family: @ini_math_fonts; + font-size: 12pt; + line-height: 1em; + } + +/* figure block */ + figure { + & { + padding: .5em; + overflow: hidden; + } + figcaption { + clear: left; + margin-top: .5em; + font-size: smaller; + line-height: 1.4em; + } + figcaption p { + margin-bottom: 0; + } + figcaption.centered { + text-align: center; + } + & > *:first-child { + margin-top: .25em; + } + table { + background-color: @ini_background; + margin: 0; + } + div.table { + margin: 0; + } + & > p { + margin: 0; + } + } + + & > footer { + margin-top: 1em; + padding-top: 1em; + text-align: right; + } + & > footer p.docInfo { + display: inline-block; + border-top: @ini_separator solid 1px; + padding-top: .5em; + padding-left: 5%; + font-size: small; + color: @ini_text_alt; + } +} + +body.mediadetail { + figure { + img { + background: transparent url('images/transparency.gif'); + } + table { + &.img_detail, + &.img_detail th, + &.img_detail td { + border: none; + } + &.img_detail th { + text-align: right; + white-space: nowrap; + border: none; + } + } + } +} + +#footer-layout { + & { + padding-top: 1.5em; + } + & > footer { + & { + width: 100%; + max-width: @ini_site_width; + margin: 0 auto; + display: grid; + grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr; + grid-template-rows: auto auto; + grid-gap: 6pt; + align-items: stretch; + } + .ftSection { + padding-left: 1em; + } + .ftSection ul { + list-style: none inside; + padding-left: .5em; + } + .ftSection ul li { + margin-bottom: .5em; + font-size: small; + } + .ftSection ul li a { + white-space: nowrap; + } + h4 { + color: @ini_headlines; + margin: 0 0 1em 0; + font-family: @ini_headline_fonts; + font-size: 1rem; + } + + #ftPlaceholder>* { + display: none; + } + } +} + +#ftLicenseButtons { + & { + grid-row: 2; + grid-column: 2 / span 3; + text-align: center; + font-size: small; + padding-top: 1em; + } + hr { + border: 0; + height: 1pt; + background: #333; + background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt); + } + p.license { + margin: .5em 0 1em 0; + font-size: small; + color: @ini_text_alt; + } + p.license bdi { + display: block; + width: 100%; + } +} + +/* togglers */ +.toggle .tg_button.active { + color: @ini_link; + cursor: pointer; +} +.toggle .tg_content, +.toggle.auto .tg_content, +.toggle.show .tg_content { + display: initial; +} +.toggle.hide .tg_content, +.toggle.alt .tg_content { + display: none; +} + +/* config overrides */ +#config__manager { + #dw__configform { + + .selectiondefault { + background-color: @ini_background_alt; + } + .selection input { + margin-left: .5em; + } + + & p:last-child { + position: -webkit-sticky; /* Safari */ + position: sticky; + bottom: 0; + box-sizing: border-box; + background-color: rgba(255,255,255,.67); + border: @ini_border solid 2pt; + padding: .5em 0; + z-index: 9; + display: grid; + grid-template-columns: auto auto; + justify-items: center; + } + p:last-child button { + border: @ini_border solid 2pt; + padding: .25em .5em; + } + p:last-child button[type=submit] { + background-color: #ccddff; + } + } + + fieldset { + background-color: transparent; + color: inherit; + } + + table { + th, td { + border: none; + } + td.label span.outkey { + background-color: inherit; + } + + tr.default .input, + tr .input { + background-color: transparent; + } + } +} +#extension__list { + .legend a.info, .legend a.info.close { + width: 22px; + height: 22px; + background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M11 17H13V11H11V17Z' style='fill:%23ADADB3'/%3E%3C/svg%3E") center no-repeat; + background-size: 24px; + border-radius: 50%; + margin-bottom: .5em; + } +} + +/* RTL Overrides */ +[dir=rtl] { + #phSearch form .search-popup { + margin-right: 0; + margin-left: 21pt; + } + #phSearch form > div input { + padding-right: 4pt; + } + + #globalTools { + text-align: left; + } + #gUserTools { + padding: 0 0 0 .5rem; + } + + #toc { + float: left; + border-left: transparent 0; + border-right: #CCC solid 1pt; + } + #toc ol { + padding: 0 1em 0 0; + } + + .secedit { + float: left; + } + + #navYouAreHere ol li::before { + content: '\25C2'; + } + #navYouAreHere ol li.home::before { + content: ''; + } + + #sidebar { + > button.tg_button { + float: left; + } + + p, ul, ol { + padding-left: 0; + padding-right: 1.25em; + } + } + #sbNavigation { + margin: 1em 1em 0 .25em; + } + main { + figure figcaption { + clear: right; + } + + & > footer { + text-align: left; + } + & > footer p.docInfo { + padding-left: 0; + padding-right: 5%; + } + } +} + +/* dark mode overrides */ +@media screen and (prefers-color-scheme: dark) { + + body.darkmode { + + & { background-color: @ini_background_site_dark; color: @ini_text_dark; } + #skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;} + #navYouAreHere ol { + li { color: @ini_headlines_dark;} + li::before { color: @ini_text_alt_dark;} + } + #phSearch form > div { + &.search-field { border-color: @ini_border_dark; background: @ini_background_dark; } + input { color: @ini_text_dark; } + button {color: @ini_text_dark; } + button[type="reset"] {border-right-color: @ini_border_dark; } + } + #qsearch__out { + & { background-color: @ini_background_site_dark; } + ul, li { border-color: @ini_border_dark; } + } + + #config__manager { + #dw__configform { + + .selectiondefault { + background-color: @ini_background_alt_dark; + } + .selectiondefault label { + color: @ini_text_dark; + } + + p:last-child { + & { + background-color: rgba(57,57,61,.67); + border-color: @ini_border_dark; + } + button { + background-color: @ini_background_dark; + border-color: @ini_border_dark; + color: @ini_missing_dark; + } + button[type=submit] { + border-color: @ini_existing_dark; + background-color: @ini_background_dark; + color: @ini_existing_dark; + } + } + } + } + #sbNavigation { + h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; } + } + #sidebar { + hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); } + a:link, a:visited { color: @ini_link_dark; } + li::marker { color: @ini_text_dark; } + } + + #toc { + & { border-color: @ini_border_dark; } + #toc-menubutton, + #toc-menubutton span { color: @ini_headlines_dark; } + a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; } + } + + main { + & { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; } + h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; } + & > footer p.docInfo { color: @ini_text_alt_dark; } + figure table { background-color: @ini_background_dark; } + } + + #footer-layout > footer h4 { color: @ini_headlines_dark; } + + #ftLicenseButtons { + p.license { color: @ini_text_alt_dark; } + hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); } + } + + /* Extension Manager: */ + #extension__manager{ + .panelHeader { background-color: @ini_background_alt_dark; } + ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark } + ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; } + tr .input, tr.default .input { color: @ini_text_dark; } + } + #extension__list ul.extensionList li { color: @ini_text_dark; } + } + + /* dark scrollbar styles for webkit browsers: */ + &::-webkit-scrollbar-track { + background: @ini_background_site_dark; + } + &::-webkit-scrollbar-thumb { + background: @ini_background_alt_dark; + } + &::-webkit-scrollbar-thumb:hover { + background: @ini_background_dark; + } + /* dark scrollbars for firefox: */ + * { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; } +} + +/* tablet break point */ +@media all and (max-width: @ini_tablet_width) { + #header-layout > header { + margin: 0; + grid-template-columns: e("repeat(2, auto)"); + grid-template-rows: e("repeat(4, auto)"); + } + #header-layout > header #siteLogo { + grid-column: 1; + grid-row: 1; + } + #header-layout > header #globalTools { + grid-row: 1; + grid-column: 2; + } + #header-layout>header #globalTools ul li { + display: block; + margin-bottom: .5em; + } + #header-layout>header #globalTools ul li:before { + content: ''; + } + #header-layout>header #phSearch { + grid-row: 2; + grid-column: 1 / span 2; + padding: .5em 1em 0 68px; + } + [dir=rtl] #header-layout>header #phSearch { + padding: .5em 68px 0 1em; + } + #header-layout>header #phTools { + grid-row: 3; + grid-column: 1 / span 2; + } + #header-layout>header #phInclude { + grid-row: 4; + grid-column: 1 / span 2; + margin: 0 6pt 5pt 64px; + } + + #qsearch__out ul { + max-height: 100%; + } + + #main-layout { + display: block; + } + + #sidebar.toggle { + width: auto; + margin-left: .5em; + padding: 0; + position: relative; + top: -2.25em; + height: .25em; + } + #sidebar > button.tg_button, + [dir=rtl] #sidebar > button.tg_button { + float: none; + } + #sidebar.auto > button.tg_button, + #sidebar.hide > button.tg_button, + #sidebar.alt > button.tg_button, + #sidebar.show > button.tg_button { + width: 1.5em; + } + #sidebar > button.tg_button span { + display: none; + } + + #sidebar > button.tg_button::after { + content: '\2630'; + } + #sidebar.hide>button.tg_button::after, + #sidebar.alt>button.tg_button::after { + content: '\2715'; + } + + #sidebar .tg_content { + min-width: @ini_sidebar_width; + padding-right: 0; + margin-top: 10px; + padding-bottom: 1em; + background-color: @ini_background_site; + position: absolute; + z-index: 18; + border: @ini_border solid 1px; + -moz-box-shadow: 2px 2px 2px @ini_border; + -webkit-box-shadow: 2px 2px 2px @ini_border; + box-shadow: 2px 2px 2px @ini_border; + } + + #sidebar .tg_content:before { + content: ' '; + z-index: 19; + width: 0; + height: 0; + position: absolute; + top: -10px; + left: 7px; + border-width: 0 10px 10px; + border-style: solid; + border-color: transparent; + border-bottom-color: @ini_border; + } + #sidebar .tg_content:after { + content: ' '; + z-index: 20; + width: 0; + height: 0; + position: absolute; + top: -8px; + left: 8px; + border-width: 0 9px 8px; + border-style: solid; + border-color: transparent; + border-bottom-color: @ini_background_site; + } + + [dir=rtl] { + #sidebar .tg_content { + right: 5px; + } + #sidebar .tg_content:before { + right: 7px; + } + #sidebar .tg_content:after { + right: 8px; + } + } + + #sbNavigation { + padding-left: .5em; + margin-left: 0; + } + #sidebar h3, + #sidebar h4 { + font-size: 1rem; + padding: .25em 0 .25em 2pt; + } + #sidebar ul, #sidebar ol { + margin-left: .5em; + } + #sidebar ul ul, #sidebar ol ol, + #sidebar ul ol, #sidebar ol ul { + margin-left: 0; + } + #sidebar p, + #sidebar li { + font-size: small; + padding: .25em 0 .25em .25em; + } + + main { + width: auto; + box-shadow: 0 0 0 0 transparent; + } + + .toggle .tg_content, + .toggle.alt .tg_content, + .toggle.show .tg_content { + display: initial; + } + .toggle.auto .tg_content { + display: none; + } + + #toc.hide h3::after, + #toc.auto h3::after { + content: '\2630'; + } + #toc.alt h3::after { + content: '\203A'; + } + + #toc.hide h3 > span, + #toc.auto h3 > span { + display: none; + } + #toc.alt h3 > span { + display: inline-block; + } + + #footer-layout > footer { + grid-template-columns: 12pt 1fr 1fr 1fr; + } +} + +@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) { + body.darkmode #sidebar { + .tg_content { + & { + background-color: @ini_background_dark; + border-color: @ini_border_dark; + -moz-box-shadow: 3px 3px 3px @ini_background_site_dark; + -webkit-box-shadow: 3px 3px 3px @ini_background_site_dark; + box-shadow: 3px 3px 3px @ini_background_site_dark; + } + &::before { + border-bottom-color: @ini_border_dark; + } + &::after { + border-bottom-color: @ini_background_dark; + } + } + hr { + background: @ini_link_dark; + background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark); + } + } +} + +/* medium break point: */ +@media all and (max-width: @ini_phone_width) { + #footer-layout { + & { + padding-top: .5em; + } + & > footer { + & { + grid-template-columns: 100%; + grid-template-rows: auto auto auto auto auto; + } + .ftSection { + grid-column: 1; + padding: 0 .25em 0 .5em; + white-space: normal; + } + .ftSection ul { + padding-left: 0; + } + .ftSection li { + display: inline-block; + } + .ftSection li::before { + content: '\00B7'; + display: inline; + width: .35em; + padding: 0 .35em; + } + .ftSection li:first-child::before { + content: ''; + padding-left: 0; + } + + #ftPlaceholder { + grid-row: 1; + } + #ftInclude { + grid-row: 2; + } + #ftSiteTools { + grid-row: 3; + } + #ftPageTools { + grid-row: 4; + } + #ftLicenseButtons { + grid-column: 1; + grid-row: 5; + } + + h4 { + margin-bottom: .5em; + } + } + } + + main blockquote { + margin-left: .15em; + margin-right: 0; + } + main ul, main ol { + margin-left: .5em; + margin-right: 0; + padding-left: .75em; + } +}
\ No newline at end of file |