xref: /template/ad-hominem/css/layout.less (revision bf8a5b0e6a959d33271bed286d4cad26f2f10f1d) 
1/**
2 * This contains the most basic layouts and styles
3 * @author Sascha Leib <sascha@leib.be>
4 */
5
6 html, body, * {
7	font-family: @ini_default_fonts;
8	margin: 0;
9	padding: 0;
10	scrollbar-gutter: auto;
11	scrollbar-width: thin;
12	scrollbar-color: @ini_blockquote @ini_background_site;
13}
14html {
15	scroll-behavior: smooth;
16}
17body {
18	background-color: @ini_background_site;
19	font-size: @ini_default_font_size;
20}
21
22/* scrollbar styles */
23::-webkit-scrollbar {
24	width: .5rem;
25}
26::-webkit-scrollbar-track {
27	background: @ini_background_site;
28}
29::-webkit-scrollbar-thumb {
30	border-radius: .25rem;
31	background: @ini_blockquote;
32}
33::-webkit-scrollbar-thumb:hover {
34	background: @ini_separator;
35}
36
37#skip-link {
38	& {
39		position: fixed;
40		left: 4pt;
41		top: 4pt;
42		width: auto;
43		z-index: 9999;
44	}
45	a {
46		position: absolute;
47		background-color: @ini_background;
48		font-size: 1.25em;
49		color: @ini_link;
50		height: 1px;
51		overflow: hidden;
52		clip: rect(1px, 1px, 1px, 1px);
53	}
54	a:focus {
55		position: static;
56		display: inline-block;
57		padding: 8px;
58		height: auto;
59		clip: auto;
60		overflow: visible;
61		outline: 2px solid @ini_focus_color;
62	}
63	&:focus {
64		display: block;
65	}
66}
67
68.sronly {
69	position: absolute;
70	width: 0;
71	height: 0;
72	overflow: hidden;
73	display: block;
74}
75.printonly,
76.print-only,
77.wrap_print-only {
78	display: none;
79}
80div.no {
81	display: inline;
82	margin: 0;
83	padding: 0;
84}
85
86#globalTools {
87	& {
88		grid-column: 2 / span 2;
89		grid-row: 1;
90		text-align: right;
91		font-size: 10pt;
92	}
93	a:link {
94		text-decoration: none;
95	}
96}
97#gSiteTools {
98	& {
99		justify-self: start;
100	}
101	& select {
102		display:	none;
103	}
104}
105#gUserTools {
106	& {
107		justify-self: end;
108		padding-right: .5rem;
109	}
110	ul {
111		list-style: none inside;
112		display: block;
113	}
114	ul li {
115		display: inline;
116	}
117	ul li::before {
118		content: '\00B7';
119		display: inline-block;
120		width: .35em;
121		padding-right: .35em;
122	}
123	ul li:first-child::before {
124		content:		'';
125	}
126}
127
128#header-layout,
129#footer-layout {
130	width: 100%;
131}
132
133#header-layout > header {
134	width: 100%;
135	max-width: @ini_site_width;
136	margin: 0 auto;
137	padding-top: .25rem;
138	display: grid;
139	grid-template-columns: @ini_sidebar_width auto @ini_sidebar_width;
140	grid-template-rows: auto auto auto;
141	justify-items: stretch;
142}
143
144#siteLogo {
145	& {
146		grid-column: 1;
147		grid-row: 1 / span 3;
148		column-gap: 8px;
149		padding: 0 .25em 0 .5em;
150		display: grid;
151		grid-template-columns: 64px auto;
152		grid-template-rows: auto auto;
153	}
154	.logo {
155		margin-top: 3pt;
156		grid-column: 1;
157		grid-row: 1 / span 2;
158	}
159	.logo img {
160		width:					64px;
161		height:					auto;
162	}
163	.title,
164	.claim {
165		grid-column:			2;
166		grid-row:				2;
167		align-self:				start;
168		font-size:				10pt;
169		padding-right:			.5em;
170		max-width:				e("calc(") @ini_sidebar_width e(" - 80px)")
171	}
172	.title {
173		grid-row:				1;
174		align-self:				center;
175		font-size:				14pt;
176		line-height:			1em;
177		margin:					0;
178	}
179	.title * {
180	/*	font-family:			@ini_headline_fonts;
181		font-size:				13pt;	*/
182	}
183}
184
185#phSearch {
186	& {
187		grid-column: 2;
188		grid-row: 2;
189		padding: .5em 0;
190	}
191	form {
192
193		& > div.search-field {
194			width: 100%;
195			display: grid;
196			grid-template-columns: auto 20pt 20pt;
197			place-items: stretch;
198			border: @ini_border solid 1pt;
199			background: @ini_background;
200			border-radius: 4pt;
201			/*box-shadow: inset 0 0 3pt @ini_border;*/
202			outline: transparent solid 2pt;
203		}
204
205		& .search-popup {
206			position: absolute;
207			width: 100%;
208			height: 5pt;
209			margin-right: 21pt;
210		}
211
212		> div {
213			&.search-field:focus-within {
214				outline-color: @ini_focus_color;
215				box-shadow: inset .125em .125em .25em fadeout(@ini_border, 40%);
216			}
217			input {
218				grid-column: 1;
219				grid-row: 1;
220				z-index: 23;
221				font-size: large;
222				padding: 2pt 0 2pt 4pt;
223				border: transparent none 0;
224				border-radius: 3pt;
225				background-color: transparent;
226			}
227			input:focus {
228				outline: transparent none 0;
229				box-shadow: none;
230			}
231			button {
232				color: @ini_text;
233				border: transparent solid 1pt;
234				background: transparent none no-repeat center;
235				background-size: 13pt;
236				width: 2em;
237				height: 2em;
238				border-radius: 3pt;
239				overflow: hidden;
240				margin: 1pt 1pt 1pt 0;
241				height: auto;
242				outline: transparent solid 2pt;
243			}
244			button[type=reset] {
245				background-image: url('images/delete.svg');
246				border-right: @ini_border solid 1pt;
247			}
248			button[type=submit] {
249				background-image: url('images/search.svg');
250			}
251			button:hover {
252				background-color: @ini_background_neu;
253				border-color: @ini_border;
254			}
255			button:focus {
256				background-color: @ini_background_neu;
257			}
258		}
259
260	}
261}
262#qsearch__out {
263	& {
264		z-index: 20;
265		position: relative;
266		left: 0;
267		width: auto;
268		padding: 0;
269		white-space: nowrap;
270		font-size: 1rem;
271		background-color: @ini_background_site;
272		box-shadow:			2px 2px 2px 0 rgba(0,0,0,.5);
273	}
274	strong {
275		display: none;
276		padding: 2pt;
277		font-weight: normal;
278	}
279	ul {
280		border: @ini_border solid 1px;
281		border-top-width: 0;
282		max-height: 11em;
283	}
284	li {
285		border-top: @ini_border solid 1px;
286	}
287	a {
288		display: block;
289		padding: 2pt 0 2pt 4pt;
290		border: transparent solid 2px;
291		overflow: hidden;
292		text-overflow: '\2025';
293	}
294	a:focus {
295		border-color: 		@ini_focus_color;
296	}
297}
298
299#phTools{ }
300#phInclude {
301	grid-column: 2 / span 2;
302	grid-row: 3;
303	margin-right: 2pt;
304}
305
306#main-layout {
307	width: 100%;
308	max-width: @ini_site_width;
309	margin: 0 auto;
310	display: flex;
311	flex-direction: row;
312	flex-wrap: nowrap;
313	justify-content: space-between;
314	align-items: stretch;
315	align-content: flex-start;
316}
317
318#navBreadCrumbs {
319	margin: 1em .25em 0 1em;
320}
321#navBreadCrumbs ol {
322	list-style: decimal outside;
323	padding-left: 2em;
324}
325
326
327#navYouAreHere {
328	& {
329		display: flex;
330		flex-flow: row nowrap;
331		position: relative;
332		top: 0;
333		left: 0;
334		height: 16pt;
335		overflow: hidden;
336		white-space: nowrap;
337	}
338	h4 {
339		display: none /*inline-block */;
340		font-family: @ini_default_fonts;
341		font-weight: normal;
342		font-size: small;
343		line-height: 1.5em;
344		margin: 0 .5em 0 0;
345	}
346	ol {
347		& {
348			list-style: none inside;
349			display: flex;
350			line-height: 1.5em;
351			height: 100pt;
352			padding-left: 0;
353			margin: 0 2pt 0 0;
354			font-size: small;
355			overflow: scroll hidden;
356		}
357		li {
358			& {
359				color: @ini_headlines;
360				display: inline;
361				margin-bottom: 0;
362				max-width: 20em;
363				min-width: 2.2em;
364				overflow: hidden;
365				text-overflow: '\202F...';
366			}
367
368
369			&:last-child { flex-shrink: 1; }
370			&:nth-last-child(2) { flex-shrink: 2; }
371			&:nth-last-child(3) { flex-shrink: 3; }
372			&:nth-last-child(4) { flex-shrink: 4; }
373			&:nth-last-child(5) { flex-shrink: 5; }
374			&:nth-last-child(6) { flex-shrink: 6; }
375
376			&.home {
377				min-width: 14px;
378				flex-shrink: 0 !important;
379			}
380
381			&::before {
382				content: '\25B8';
383				padding: 0 2pt;
384				color: @ini_text_alt;
385			}
386			&.home::before {
387				content: '';
388				padding: 0;
389			}
390			a {
391				margin-right: 2px;
392			}
393			&.home a {
394				display: inline-block;
395				width: 14px;
396				overflow: hidden;
397				line-height: 1;
398				margin: 2px;
399			}
400			&.home a::before {
401				content: ' ';
402				display: inline-block;
403				width: 14px;
404				height: 1em;
405				background: transparent url('images/home.svg') no-repeat left bottom;
406				filter: hue-rotate(-80deg);
407			}
408		}
409	}
410}
411
412/* fix for issue with homepage */
413body.home #navYouAreHere ol li:last-child {
414	display:		none;
415}
416
417/* Table of Contents */
418#toc {
419	& {
420		clear: both;
421		float: right;
422		width: auto;
423		min-width: 32px;
424		padding-left: .25em;
425		line-height: 1.5em;
426		text-align: left;
427		max-width: @ini_toc_width;
428		background-color: @ini_background;
429		border: transparent none 0;
430		border-left: @ini_border solid 1pt;
431	}
432	ol {
433		list-style: none inside;
434		padding: 0 0 0 1em;
435		margin: 0;
436	}
437	ol li {
438		font-size: small;
439		line-height: 1.25em;
440		margin: .5em 0;
441	}
442	a[href^='#']:link,
443	a[href^='#']:visited {
444		color: @ini_inpage;
445	}
446}
447
448#toc-menubutton {
449	background: transparent;
450	margin-left: .5em;
451	padding: 0 .25em;
452	width: auto;
453	height: auto;
454	overflow: hidden;
455	border: transparent 0 none;
456	border-radius: 3pt;
457}
458#toc-menubutton > span {
459	font-family: @ini_headline_fonts;
460	line-height: 1.5em;
461	font-weight: bold;
462	color: @ini_headlines;
463}
464#toc-menubutton::after {
465	content: '\203A';
466	display: inline-block;
467	width: 1.5em;
468	text-align: center;
469}
470
471.hide #toc-menubutton::after,
472.alt #toc-menubutton::after {
473	content: '\2630';
474}
475
476.hide #toc-menubutton>span,
477.alt #toc-menubutton>span {
478	display: none;
479}
480
481main {
482	& {
483		width: e("calc(90% - 5px)");
484		flex-grow: 100;
485		background-color: @ini_background;
486		color: @ini_text;
487		line-height: 1.5em;
488		padding: 1.5em 5% .75em 5%;
489		border: @ini_border solid 1px;
490		border-radius: 5px;
491	}
492
493	/* edit buttons */
494	.secedit {
495		float: right;
496		margin-top: -22pt;
497		line-height: 0;
498	}
499	.secedit button {
500		border: @ini_border solid 1pt;
501		background-color: transparent;
502		color: transparent;
503		width: 20pt;
504		height: 20pt;
505		border-radius: 50%;
506		font-size: 0;
507		cursor: pointer;
508	}
509	.secedit button::before {
510		content: ' ';
511		display: inline-block;
512		width: 13pt;
513		height: 13pt;
514		padding: 2pt;
515		background: transparent url('images/edit.svg') no-repeat center;
516		background-size: 10pt;
517	}
518	.secedit button:hover {
519		background-color: @ini_highlight;
520		border: @ini_text_alt solid 1pt;
521	}
522	.secedit button:focus {
523		background-color: @ini_highlight;
524		border: @ini_focus_color solid 2px;
525		outline: transparent none 0;
526	}
527	.secedit button:hover::before {
528	}
529
530	.section_highlight {
531		border-radius: .5em;
532		outline: orange dashed 3px;
533	}
534
535	/* math fonts */
536	math, .math, .math *,
537	.wrap_math, .wrap_math * {
538		font-family: @ini_math_fonts;
539		font-size: 12pt;
540		line-height: 1em;
541	}
542
543/* figure block */
544	figure {
545		& {
546			padding: .5em;
547			overflow: hidden;
548		}
549		figcaption {
550			clear: left;
551			margin-top: .5em;
552			font-size: smaller;
553			line-height: 1.4em;
554		}
555		figcaption p {
556			margin-bottom: 0;
557		}
558		figcaption.centered {
559			text-align: center;
560		}
561		& > *:first-child {
562			margin-top: .25em;
563		}
564		table {
565			background-color: @ini_background;
566			margin: 0;
567		}
568		div.table {
569			margin: 0;
570		}
571		& > p {
572			margin: 0;
573		}
574	}
575
576	& > footer {
577		margin-top: 1em;
578		padding-top: 1em;
579		text-align: right;
580	}
581	& > footer p.docInfo {
582		display: inline-block;
583		border-top: @ini_separator solid 1px;
584		padding-top: .5em;
585		padding-left: 5%;
586		font-size: small;
587		color: @ini_text_alt;
588	}
589}
590
591/* For both the sidebar and the main block */
592#main-layout {
593
594	/* Definition List styles: */
595	dl {
596		dt {
597			color: @ini_headlines;
598			font-weight: 600;
599		}
600		dd {
601			margin: .125em 1.25em;
602		}
603		&.compact {
604			& {
605				display: grid;
606				grid-template-columns: minmax(8em,min-content) auto;
607			}
608			dt {
609				grid-column-start: 1;
610				font-weight: 600;
611				margin: .125em .5em;
612			}
613			dd {
614				grid-column-start: 2;
615				margin-bottom: 0;
616				margin: .125em .5em;
617			}
618		}
619	}
620
621
622	/* details/summary styles */
623	details {
624		summary {
625			& {
626				display: inline-grid;
627				grid-template-columns: 1.25em auto;
628				column-gap: .125em;
629				align-items: start;
630				padding: .125em;
631				border-radius: .125em;
632				color: @ini_headlines;
633				font-weight: bold;
634				cursor: pointer;
635			}
636			&::before {
637				content: '';
638				display: inline-block;
639				background-color: @ini_link;
640				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='100%25' height='100%25'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");
641				width: 1.25em; height: 1.25em;
642				margin: .125em 0;
643				transform-origin: center;
644				transition-duration: .25s;
645				transition-timing-function: ease-in-out;
646				transform: rotate(-90deg);
647			}
648			&:hover {
649				& {
650					color: @ini_text;
651				}
652				&::before {
653					background-color: darken(@ini_link, 20%);
654				}
655			}
656			&::marker, &::-webkit-details-marker {
657				content: none;
658			}
659			&:focus {
660				outline: @ini_focus_color solid 2px;
661			}
662		}
663		&[open] summary::before {
664			transform: rotate(0deg);
665
666		}
667
668	}
669}
670
671body.mediadetail {
672	figure {
673		img {
674			background: transparent url('images/transparency.gif');
675		}
676		table {
677			&.img_detail,
678			&.img_detail th,
679			&.img_detail td {
680				border: none;
681			}
682			&.img_detail th {
683				text-align: right;
684				white-space: nowrap;
685				border: none;
686			}
687		}
688	}
689}
690
691#footer-layout {
692	& {
693		padding-top: 1.5em;
694	}
695	& > footer {
696		& {
697			width: 100%;
698			max-width: @ini_site_width;
699			margin: 0 auto;
700			display: grid;
701			grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
702			grid-template-rows: auto auto;
703			grid-gap: 6pt;
704			align-items: stretch;
705		}
706		.ftSection {
707			padding-left: 1em;
708		}
709		.ftSection ul {
710			list-style: none inside;
711			padding-left: .5em;
712		}
713		.ftSection ul li {
714			margin-bottom: .5em;
715			font-size: small;
716		}
717		.ftSection ul li a {
718			white-space: nowrap;
719		}
720		h4 {
721			color: @ini_headlines;
722			margin: 0 0 1em 0;
723			font-family: @ini_headline_fonts;
724			font-size: 1rem;
725		}
726
727		#ftPlaceholder>* {
728			display: none;
729		}
730	}
731}
732
733#ftLicenseButtons {
734	& {
735		grid-row: 2;
736		grid-column: 2 / span 3;
737		text-align: center;
738		font-size: small;
739		padding-top: 1em;
740	}
741	hr {
742		border: 0;
743		height: 1pt;
744		background: #333;
745		background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
746	}
747	p.license {
748		margin: .5em 0 1em 0;
749		font-size: small;
750		color: @ini_text_alt;
751	}
752	p.license bdi {
753		display: block;
754		width: 100%;
755	}
756}
757
758/* togglers */
759.toggle .tg_button.active {
760	color:			@ini_link;
761	cursor:			pointer;
762}
763.toggle .tg_content,
764.toggle.auto .tg_content,
765.toggle.show .tg_content {
766	display:		initial;
767}
768.toggle.hide .tg_content,
769.toggle.alt .tg_content {
770	display:		none;
771}
772
773/* config overrides */
774#config__manager {
775	#dw__configform {
776
777		.selectiondefault {
778			background-color: @ini_background_alt;
779		}
780		.selection input {
781			margin-left: .5em;
782		}
783
784		& p:last-child {
785			position: -webkit-sticky; /* Safari */
786			position: sticky;
787			bottom: 0;
788			box-sizing: border-box;
789			background-color: rgba(255,255,255,.67);
790			border: @ini_border solid 2pt;
791			padding: .5em 0;
792			z-index: 9;
793			display: grid;
794			grid-template-columns: auto auto;
795			justify-items: center;
796		}
797		 p:last-child button {
798			border: @ini_border solid 2pt;
799			padding: .25em .5em;
800			cursor: pointer;
801		}
802		p:last-child button[type=submit] {
803			background-color: #ccddff;
804		}
805	}
806
807	fieldset {
808		background-color: transparent;
809		color: inherit;
810	}
811
812	table {
813		th, td {
814			border: none;
815		}
816		td.label span.outkey {
817			background-color: inherit;
818		}
819
820		tr.default .input,
821		tr .input {
822			background-color: transparent;
823		}
824	}
825}
826
827/* RTL Overrides */
828[dir=rtl] {
829	#phSearch form .search-popup {
830		margin-right: 0;
831		margin-left: 21pt;
832	}
833	#phSearch form > div input {
834		padding-right: 4pt;
835	}
836
837	#globalTools {
838		text-align: left;
839	}
840	#gUserTools {
841		padding: 0 0 0 .5rem;
842	}
843
844	#toc {
845		float: left;
846		border-left: transparent 0;
847		border-right: #CCC solid 1pt;
848	}
849	#toc ol {
850		padding: 0 1em 0 0;
851	}
852
853	.secedit {
854		float: left;
855	}
856
857	#navYouAreHere ol li::before {
858		content: '\25C2';
859	}
860	#navYouAreHere ol li.home::before {
861		content: '';
862	}
863
864	#sidebar {
865		> button.tg_button {
866			float: left;
867		}
868
869		p, ul, ol {
870			padding-left: 0;
871			padding-right: 1.25em;
872		}
873	}
874	#sbNavigation {
875		margin: 1em 1em 0 .25em;
876	}
877	main {
878		figure figcaption {
879			clear: right;
880		}
881
882		& > footer {
883			text-align: left;
884		}
885		& > footer p.docInfo {
886			padding-left: 0;
887			padding-right: 5%;
888		}
889	}
890}
891
892/* dark mode overrides */
893@media screen and (prefers-color-scheme: dark) {
894
895	body.darkmode {
896
897		#toc {
898			background-color: @ini_background_dark;
899			border-left: @ini_border_dark solid 1pt;
900		}
901
902		& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
903		#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
904		#navYouAreHere ol {
905			li { color: @ini_headlines_dark;}
906			li::before { color: @ini_text_alt_dark;}
907		}
908		#phSearch form > div {
909			&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
910			&.search-field:focus-within {
911				box-shadow: inset .125em .125em .25em fadeout(#000, 50%);
912			}
913			input { color: @ini_text_dark; }
914			button {color: @ini_text_dark; }
915			button[type="reset"] {border-right-color: @ini_border_dark; }
916		}
917		#qsearch__out {
918			& { background-color: @ini_background_site_dark; }
919			ul, li { border-color: @ini_border_dark; }
920		}
921
922		#config__manager {
923			#dw__configform {
924
925				.selectiondefault {
926					background-color: @ini_background_alt_dark;
927				}
928				.selectiondefault label {
929					color: @ini_text_dark;
930				}
931
932				p:last-child {
933					& {
934						background-color: rgba(57,57,61,.67);
935						border-color: @ini_border_dark;
936					}
937					button {
938						background-color: @ini_background_dark;
939						border-color: @ini_border_dark;
940						color: @ini_missing_dark;
941					}
942					button[type=submit] {
943						border-color: @ini_existing_dark;
944						background-color: @ini_background_dark;
945						color: @ini_existing_dark;
946					}
947				}
948			}
949		}
950
951		#toc {
952			& { border-color: @ini_border_dark; }
953			#toc-menubutton,
954			#toc-menubutton span { color: @ini_headlines_dark; }
955			a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; }
956		}
957
958		main {
959			& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
960			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
961			& > footer p.docInfo { color: @ini_text_alt_dark; }
962			figure table { background-color: @ini_background_dark; }
963		}
964
965		#footer-layout > footer h4 { color: @ini_headlines_dark; }
966
967		#ftLicenseButtons {
968			p.license { color: @ini_text_alt_dark; }
969			hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
970		}
971	}
972
973	/* dark scrollbar styles for webkit browsers: */
974	&::-webkit-scrollbar-track {
975		background: @ini_background_site_dark;
976	}
977	&::-webkit-scrollbar-thumb {
978		background: @ini_background_alt_dark;
979	}
980	&::-webkit-scrollbar-thumb:hover {
981		background: @ini_background_dark;
982	}
983	/* dark scrollbars for firefox: */
984	* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
985}
986
987/* tablet break point */
988@media all and (max-width: @ini_tablet_width) {
989	#header-layout > header {
990		margin: 0;
991		grid-template-columns: e("repeat(2, auto)");
992		grid-template-rows: e("repeat(4, auto)");
993	}
994	#header-layout > header #siteLogo {
995		grid-column: 1;
996		grid-row: 1;
997	}
998	#header-layout > header #globalTools {
999		grid-row: 1;
1000		grid-column: 2;
1001	}
1002	#header-layout>header #globalTools ul li {
1003		display: block;
1004		margin-bottom: .5em;
1005	}
1006	#header-layout>header #globalTools ul li:before {
1007		content: '';
1008	}
1009	#header-layout>header #phSearch {
1010		grid-row: 2;
1011		grid-column: 1 / span 2;
1012		padding: .5em 1em 0 68px;
1013	}
1014	[dir=rtl] #header-layout>header #phSearch {
1015		padding: .5em 68px 0 1em;
1016	}
1017	#header-layout>header #phTools {
1018		grid-row: 3;
1019		grid-column: 1 / span 2;
1020	}
1021	#header-layout>header #phInclude {
1022		grid-row: 4;
1023		grid-column: 1 / span 2;
1024		margin: 0 6pt 5pt 64px;
1025	}
1026
1027	#qsearch__out ul {
1028		max-height: 100%;
1029	}
1030
1031	#main-layout {
1032		display: block;
1033	}
1034
1035	#sidebar.toggle {
1036		width: auto;
1037		margin-left: .5em;
1038		padding: 0;
1039		position: relative;
1040		top: -2.25em;
1041		height: .25em;
1042	}
1043	#sidebar > button.tg_button,
1044	[dir=rtl] #sidebar > button.tg_button {
1045		float: none;
1046	}
1047	#sidebar.auto > button.tg_button,
1048	#sidebar.hide > button.tg_button,
1049	#sidebar.alt > button.tg_button,
1050	#sidebar.show > button.tg_button {
1051		width: 1.5em;
1052	}
1053	#sidebar > button.tg_button span {
1054		display: none;
1055	}
1056
1057	#sidebar > button.tg_button::after {
1058		content: '\2630';
1059	}
1060	#sidebar.hide>button.tg_button::after,
1061	#sidebar.alt>button.tg_button::after {
1062		content: '\2715';
1063	}
1064
1065	#sidebar .tg_content {
1066		min-width: @ini_sidebar_width;
1067		padding-right: 0;
1068		margin-top: 10px;
1069		padding-bottom: 1em;
1070		background-color: @ini_background_site;
1071		position: absolute;
1072		z-index: 18;
1073		border: @ini_border solid 1px;
1074		box-shadow: 2px 2px 2px @ini_border;
1075	}
1076
1077	#sidebar .tg_content:before {
1078		content: ' ';
1079		z-index: 19;
1080		width: 0;
1081		height: 0;
1082		position: absolute;
1083		top: -10px;
1084		left: 7px;
1085		border-width: 0 10px 10px;
1086		border-style: solid;
1087		border-color: transparent;
1088		border-bottom-color: @ini_border;
1089	}
1090	#sidebar .tg_content:after {
1091		content: ' ';
1092		z-index: 20;
1093		width: 0;
1094		height: 0;
1095		position: absolute;
1096		top: -8px;
1097		left: 8px;
1098		border-width: 0 9px 8px;
1099		border-style: solid;
1100		border-color: transparent;
1101		border-bottom-color: @ini_background_site;
1102	}
1103
1104	[dir=rtl] {
1105		#sidebar .tg_content {
1106			right: 5px;
1107		}
1108		#sidebar .tg_content:before {
1109			right: 7px;
1110		}
1111		#sidebar .tg_content:after {
1112			right: 8px;
1113		}
1114	}
1115
1116	#sbNavigation {
1117		padding-left: .5em;
1118		margin-left: 0;
1119	}
1120	#sidebar h3,
1121	#sidebar h4	{
1122		font-size: 1rem;
1123		padding: .25em 0 .25em 2pt;
1124	}
1125	#sidebar ul, #sidebar ol {
1126		margin-left: .5em;
1127	}
1128	#sidebar ul ul, #sidebar ol ol,
1129	#sidebar ul ol, #sidebar ol ul {
1130		margin-left: 0;
1131	}
1132	#sidebar p,
1133	#sidebar li	{
1134		font-size: small;
1135		padding: .25em 0 .25em .25em;
1136	}
1137
1138	main {
1139		width: auto;
1140		box-shadow: 0 0 0 0 transparent;
1141	}
1142
1143	.toggle .tg_content,
1144	.toggle.alt .tg_content,
1145	.toggle.show .tg_content {
1146		display: initial;
1147	}
1148	.toggle.auto .tg_content {
1149		display: none;
1150	}
1151
1152	#toc.hide h3::after,
1153	#toc.auto h3::after {
1154		content: '\2630';
1155	}
1156	#toc.alt h3::after {
1157		content: '\203A';
1158	}
1159
1160	#toc.hide h3 > span,
1161	#toc.auto h3 > span {
1162		display: none;
1163	}
1164	#toc.alt h3 > span {
1165		display: inline-block;
1166	}
1167
1168	#footer-layout > footer {
1169		grid-template-columns: 12pt 1fr 1fr 1fr;
1170	}
1171}
1172
1173@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
1174	body.darkmode #sidebar {
1175		.tg_content {
1176			& {
1177				background-color: @ini_background_dark;
1178				border-color: @ini_border_dark;
1179				box-shadow: 3px 3px 3px @ini_background_site_dark;
1180			}
1181			&::before {
1182				border-bottom-color: @ini_border_dark;
1183			}
1184			&::after {
1185				border-bottom-color: @ini_background_dark;
1186			}
1187		}
1188		hr {
1189			background: @ini_link_dark;
1190			background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
1191		}
1192	}
1193}
1194
1195/* medium break point: */
1196@media all and (max-width: @ini_phone_width) {
1197	#footer-layout {
1198		& {
1199			padding-top: .5em;
1200		}
1201		& > footer {
1202			& {
1203				grid-template-columns: 100%;
1204				grid-template-rows: auto auto auto auto auto;
1205			}
1206			.ftSection {
1207				grid-column: 1;
1208				padding: 0 .25em 0 .5em;
1209				white-space: normal;
1210			}
1211			.ftSection ul {
1212				padding-left: 0;
1213			}
1214			.ftSection li {
1215				display: inline-block;
1216			}
1217			.ftSection li::before {
1218				content: '\00B7';
1219				display: inline;
1220				width: .35em;
1221				padding: 0 .35em;
1222			}
1223			.ftSection li:first-child::before {
1224				content: '';
1225				padding-left: 0;
1226			}
1227
1228			#ftPlaceholder {
1229				grid-row: 1;
1230			}
1231			#ftInclude {
1232				grid-row: 2;
1233			}
1234			#ftSiteTools {
1235				grid-row: 3;
1236			}
1237			#ftPageTools {
1238				grid-row: 4;
1239			}
1240			#ftLicenseButtons {
1241				grid-column: 1;
1242				grid-row: 5;
1243			}
1244
1245			h4 {
1246				margin-bottom: .5em;
1247			}
1248		}
1249	}
1250
1251	main blockquote {
1252		margin-left: .15em;
1253		margin-right: 0;
1254	}
1255	main ul, main ol {
1256		margin-left: .5em;
1257		margin-right: 0;
1258		padding-left: .75em;
1259	}
1260
1261	/* compact lists: */
1262	.dokuwiki main dl.compact {
1263		& {
1264			display: block;
1265		}
1266		dd {
1267			margin: .125em 1em;
1268		}
1269	}
1270}