xref: /template/ad-hominem/css/layout.less (revision 47c2444da2b4844a31f547760ea8e1d38be85b75) 
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	display:			inline;
416	margin-bottom:		0;
417}
418#navYouAreHere ol li.home {
419	min-width:		14px;
420	overflow:		hidden;
421}
422#navYouAreHere ol li .curid {
423	display:		none;
424}
425
426#navYouAreHere ol li:before {
427	content:		'\25B8';
428	padding:		0 2pt;
429	color:			@ini_text_alt;
430}
431#navYouAreHere ol li.home::before {
432	content:		'';
433	padding:		0;
434}
435#navYouAreHere ol li.home a {
436	display:		inline-block;
437	width:			14px;
438	overflow:		hidden;
439}
440#navYouAreHere ol li.home a::before {
441	content:		' ';
442	display:		inline-block;
443	width:			14px;
444	height:			1em;
445	background:		transparent url('images/home.svg') no-repeat left bottom;
446	filter:			hue-rotate(-80deg);
447}
448
449body.home #navYouAreHere {
450	display:		none;
451}
452
453main>footer {
454	margin-top:			2em;
455	text-align:			right;
456}
457main>footer p.docInfo {
458	display:			inline-block;
459	border-top:			@ini_separator solid 1px;
460	padding-top:		.5em;
461	padding-left:		5%;
462	font-size:			small;
463	color:				@ini_text_alt;
464}
465
466/* Table of Contents */
467#toc {
468	clear:				both;
469	float:				right;
470	width:				auto;
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 all 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;
713		   color:				@ini_text_dark;
714		   border-color:		@ini_background_dark}
715	body.darkmode main h1, body.darkmode main h2, body.darkmode main h3, body.darkmode main h4, body.darkmode main h5, body.darkmode main h6
716		 { color: @ini_headlines_dark; }
717	body.darkmode #sbNavigation h1, body.darkmode #sbNavigation h2, body.darkmode #sbNavigation h3, body.darkmode #sbNavigation h4, body.darkmode #sbNavigation h5, body.darkmode #sbNavigation h6 {	color: @ini_headlines_dark; }
718	body.darkmode #sidebar hr { background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
719	body.darkmode #ftLicenseButtons hr {		background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
720	body.darkmode #sidebar a:link, #sidebar a:visited { color: @ini_link_dark; }
721	body.darkmode #footer-layout>footer h4 { color: @ini_headlines_dark; }
722
723	body.darkmode #phSearch form>div.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
724	body.darkmode #phSearch form>div input { color: @ini_text_dark; }
725	body.darkmode #phSearch form > div button[type="reset"] {border-right-color: @ini_border_dark; }
726
727	body.darkmode #config__manager #dw__configform p:last-child {
728		background-color: rgba(57,57,61,.67);
729		border-color:	@ini_border_dark;
730	}
731	body.darkmode #config__manager #dw__configform p:last-child button {
732		background-color:	@ini_background_dark;
733		border-color:		@ini_border_dark;
734		color:				@ini_missing_dark;
735	}
736	body.darkmode #config__manager #dw__configform p:last-child button[type=submit] {
737		border-color:		@ini_existing_dark;
738		background-color:	@ini_background_dark;
739		color:				@ini_existing_dark;
740	}
741
742	body.darkmode #toc { border-left-color: @ini_border_dark; }
743	body.darkmode #toc h3 { color: @ini_headlines_dark; }
744
745	body.darkmode #qsearch__out {
746		background-color:	@ini_background_site_dark;
747	}
748	body.darkmode #qsearch__out ul,
749	body.darkmode #qsearch__out li {
750		border-color:	@ini_border_dark;
751	}
752
753	/* Extension Manager: */
754	body.darkmode #extension__manager .panelHeader {
755		background-color: @ini_background_alt_dark;
756	}
757	body.darkmode #extension__manager ul.tabs li a {
758		background-color: @ini_background_dark;
759		border-color: @ini_border_dark;
760		color: @ini_text_dark
761	}
762	body.darkmode #extension__manager ul.tabs li.active a {
763		background-color: @ini_background_alt_dark;
764		border-color: @ini_text_dark;
765	}
766	body.darkmode #extension__list ul.extensionList li {
767		color: @ini_text_dark
768	}
769	body.darkmode main figure {
770		background-color: rgba(0,0,0,.2);
771		border-color: @ini_border_dark;
772	}
773
774}
775
776/* tablet break point */
777@media all and (max-width: @ini_tablet_width) {
778	#header-layout>header {
779		margin:				0;
780		grid-template-columns:	e("repeat(2, auto)");
781		grid-template-rows:		e("repeat(4, auto)");
782	}
783	#header-layout>header #siteLogo {
784		grid-column:		1;
785		grid-row:			1;
786	}
787	#header-layout>header #globalTools {
788		grid-row:			1;
789		grid-column:		2;
790	}
791	#header-layout>header #globalTools ul li {
792		display:			block;
793		margin-bottom:		.5em;
794	}
795	#header-layout>header #globalTools ul li:before {
796		content:			'';
797	}
798	#header-layout>header #phSearch {
799		grid-row:			2;
800		grid-column:		1 / span 2;
801		padding:			.5em 1em 0 68px;
802	}
803	#header-layout>header #phTools {
804		grid-row:			3;
805		grid-column:		1 / span 2;
806	}
807	#header-layout>header #phInclude {
808		grid-row:			4;
809		grid-column:		1 / span 2;
810	}
811
812	#qsearch__out ul {
813		max-height:		100%;
814	}
815
816	#main-layout {
817		display:			block;
818	}
819
820	#sidebar.toggle {
821		width:					auto;
822		margin-left:			.5em;
823		padding:				0;
824		position:				relative;
825		top:					-2.25em;
826		height:					.25em;
827	}
828	#sidebar>button.tg_button {
829		float:					none;
830	}
831	#sidebar.auto>button.tg_button,
832	#sidebar.hide>button.tg_button,
833	#sidebar.alt>button.tg_button,
834	#sidebar.show>button.tg_button {
835		width:					1.5em;
836	}
837	#sidebar>button.tg_button span {
838		display:				none;
839	}
840
841	#sidebar>button.tg_button::after {
842		content:				'\2630';
843	}
844	#sidebar.hide>button.tg_button::after,
845	#sidebar.alt>button.tg_button::after {
846		content:				'\2715';
847	}
848
849	#sidebar .tg_content {
850		min-width:				@ini_sidebar_width;
851		padding-right:			0;
852		margin-top:				10px;
853		padding-bottom:			1em;
854		background-color:		@ini_background_site;
855		position:				absolute;
856		z-index:				18;
857		border:					@ini_border solid 1px;
858		-moz-box-shadow:		2px 2px 2px @ini_border;
859		-webkit-box-shadow:		2px 2px 2px @ini_border;
860		box-shadow:				2px 2px 2px @ini_border;
861	}
862
863	#sidebar .tg_content:before {
864		content:				' ';
865		z-index:				19;
866		width:					0;
867		height:					0;
868		position:				absolute;
869		top:					-10px;
870		left:					7px;
871		border-width:			0 10px 10px;
872		border-style:			solid;
873		border-color:			transparent;
874		border-bottom-color:	@ini_border;
875	}
876	#sidebar .tg_content:after {
877		content:				' ';
878		z-index:				20;
879		width:					0;
880		height:					0;
881		position:				absolute;
882		top:					-8px;
883		left:					8px;
884		border-width:			0 9px 8px;
885		border-style:			solid;
886		border-color:			transparent;
887		border-bottom-color:	@ini_background_site;
888	}
889
890	#sbNavigation {
891		padding-left:		.5em;
892		margin-left:		0;
893	}
894	#sidebar h3,
895	#sidebar h4	{
896		font-size:			1rem;
897		padding:			.25em 0 .25em 2pt;
898	}
899	#sidebar ul, #sidebar ol	{
900		margin-left:		.5em;
901	}
902	#sidebar ul ul, #sidebar ol ol, #sidebar ul ol, #sidebar ol ul {
903		margin-left:		0;
904	}
905	#sidebar p,
906	#sidebar li	{
907		font-size:			small;
908		padding:			.25em 0 .25em .25em;
909	}
910
911	main {
912		width:				auto;
913		box-shadow:			0 0 0 0 transparent;
914	}
915
916	.toggle .tg_content,
917	.toggle.alt .tg_content,
918	.toggle.show .tg_content {
919		display:		initial;
920	}
921	.toggle.auto .tg_content {
922		display:		none;
923	}
924
925	#toc.hide h3::after,
926	#toc.auto h3::after {
927		content:			'\2630';
928	}
929	#toc.alt h3::after {
930		content:			'\203A';
931	}
932
933	#toc.hide h3>span,
934	#toc.auto h3>span {
935		display:			none;
936	}
937	#toc.alt h3>span {
938		display:			inline-block;
939	}
940
941	#footer-layout>footer {
942		grid-template-columns: 12pt 1fr 1fr 1fr;
943	}
944
945	/* admin interface */
946	.dokuwiki div.ui-admin ul.admin_tasks {
947		float: none;
948		width: auto;
949	}
950	.dokuwiki div.ui-admin #admin__version {
951		display: none;
952	}
953}
954
955@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
956	body.darkmode #sidebar .tg_content {
957		background-color:	@ini_background_dark;
958		border-color:		@ini_border_dark;
959		-moz-box-shadow:		3px 3px 3px @ini_background_site_dark;
960		-webkit-box-shadow:		3px 3px 3px @ini_background_site_dark;
961		box-shadow:				3px 3px 3px @ini_background_site_dark;
962	}
963	body.darkmode #sidebar .tg_content:before {
964		border-bottom-color:	@ini_border_dark;
965	}
966	body.darkmode #sidebar .tg_content:after {
967		border-bottom-color:	@ini_background_dark;
968	}
969	body.darkmode #sidebar hr {
970		background:				@ini_link_dark;
971		background-image:		linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
972	}
973}
974
975/* medium break point: */
976@media all and (max-width: @ini_phone_width) {
977	#footer-layout {
978		padding-top:			.5em;
979	}
980	#footer-layout>footer {
981		grid-template-columns: 100%;
982		grid-template-rows: auto auto auto auto auto;
983	}
984	#footer-layout>footer .ftSection {
985		grid-column:	1;
986		padding: 		0 .25em 0 .5em;
987		white-space:	normal;
988	}
989	#footer-layout>footer .ftSection ul {
990		padding-left:	0;
991	}
992	#footer-layout>footer .ftSection li {
993		display:		inline-block;
994	}
995	#footer-layout>footer .ftSection li::before {
996		content:		'\00B7';
997		display:		inline;
998		width:			.35em;
999		padding:		0 .35em;
1000	}
1001	#footer-layout>footer .ftSection li:first-child::before {
1002		content:		'';
1003		padding-left:	0;
1004	}
1005
1006	#footer-layout>footer #ftPlaceholder {
1007		grid-row:		1;
1008	}
1009	#footer-layout>footer #ftInclude {
1010		grid-row:		2;
1011	}
1012	#footer-layout>footer #ftSiteTools {
1013		grid-row:		3;
1014	}
1015	#footer-layout>footer #ftPageTools {
1016		grid-row:		4;
1017	}
1018	#footer-layout>footer #ftLicenseButtons {
1019		grid-column:	1;
1020		grid-row:		5;
1021	}
1022
1023	#footer-layout>footer h4 {
1024		margin-bottom:		.5em;
1025	}
1026
1027	main blockquote {
1028		margin-left:	.15em;
1029		margin-right:	0;
1030	}
1031	main ul, main ol {
1032		margin-left:	.5em;
1033		margin-right:	0;
1034		padding-left:	.75em;
1035	}
1036}