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