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