xref: /template/ad-hominem/css/layout.less (revision 98fa74e35999cbd96f4678cfe0e188a0128ce464) 
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:			2em;
453	text-align:			right;
454}
455main>footer p.docInfo {
456	display:			inline-block;
457	border-top:			@ini_separator solid 1px;
458	padding-top:		.5em;
459	padding-left:		5%;
460	font-size:			small;
461	color:				@ini_text_alt;
462}
463
464/* Table of Contents */
465#toc {
466	clear:				both;
467	float:				right;
468	width:				auto;
469	min-width:			32px;
470	line-height:		1.5em;
471	text-align:			left;
472	max-width:			@ini_toc_width;
473	background-color:	transparent;
474	border-left:		@ini_border solid 1pt;
475}
476#toc ol {
477	list-style:			none inside;
478	padding:			0 0 0 1em;
479	margin:				0;
480}
481#toc>div {
482
483}
484#toc ol li {
485	font-size:			small;
486	/* text-indent:		-1em;
487	padding-left:		1em; */
488	line-height:		1.25em;
489	margin:				.5em 0;
490}
491#toc h3 {
492	margin:				0;
493	padding:			0 0 .5em .5em;
494	width:				auto;
495	height:				1.2em;
496	font-family:		@ini_alt_fonts;
497	font-size:			small;
498	overflow:			hidden;
499	font-weight:		bold;
500	line-height:		1.5em;
501	color:				@ini_text_neu;
502}
503#toc h3::after {
504	content:			'\203A';
505	display:			inline-block;
506	width:				1.5em;
507	text-align:			center;
508}
509#toc.hide h3::after,
510#toc.alt h3::after {
511	content:			'\2630';
512}
513
514#toc.hide h3>span,
515#toc.alt h3>span {
516	display:			none;
517}
518
519
520/* edit buttons */
521main .secedit {
522	float:				right;
523	margin-top:			-22pt;
524	line-height:		0;
525}
526main .secedit button {
527	border:				@ini_border solid 1pt;
528	background-color:	transparent;
529	color:				transparent;
530	width:				20pt;
531	height:				20pt;
532	border-radius:		50%;
533	font-size:			0;
534	cursor:				pointer;
535}
536main .secedit button::before {
537	content:			' ';
538	display:			inline-block;
539	width:				13pt;
540	height:				13pt;
541	padding:			2pt;
542	background:			transparent url('images/edit.svg') no-repeat center;
543	background-size:	10pt;
544}
545main .secedit button:hover {
546	background-color:	@ini_highlight;
547	border:				@ini_text_alt solid 1pt;
548}
549main .secedit button:focus {
550	background-color:	@ini_highlight;
551	border:				@ini_focus_color solid 2px;
552	outline:			transparent none 0;
553}
554main .secedit button:hover::before {
555}
556
557main .section_highlight {
558	border-radius:		.5em;
559	outline: 			orange dashed 3px;
560}
561
562/* math fonts */
563main math,
564main .math,
565main .math * {
566	font-family:		@ini_math_fonts;
567	font-size:			12pt;
568	line-height:		1em;
569}
570
571/* figure block */
572main figure {
573	background-color:	@ini_background_alt;
574	border:				@ini_border solid 1px;
575	padding:			.5em;
576}
577main figure figcaption {
578}
579main figure>*:first-child {
580	margin-top:			.25em;
581}
582
583body.mediadetail figure img {
584	background:			transparent url('images/transparency.gif');
585}
586body.mediadetail figure table.img_detail,
587body.mediadetail figure table.img_detail th,
588body.mediadetail figure table.img_detail td {
589	border:			none;
590}
591body.mediadetail figure table.img_detail th {
592	text-align:		right;
593	white-space:	nowrap;
594	border:			none;
595}
596
597#footer-layout {
598	padding-top:		1.5em;
599}
600#footer-layout > footer {
601	width:				100%;
602	max-width:			@ini_site_width;
603	margin:				0 auto;
604	display:			grid;
605	grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
606	grid-template-rows:	auto auto;
607	grid-gap:			6pt;
608	align-items:		stretch;
609}
610#footer-layout > footer .ftSection {
611	padding-left:		1em;
612}
613#footer-layout > footer .ftSection ul {
614	list-style:			none inside;
615	padding-left:		.5em;
616}
617#footer-layout > footer .ftSection ul li {
618	margin-bottom:		.5em;
619	font-size:			small;
620}
621#footer-layout > footer .ftSection ul li a {
622	white-space: nowrap;
623}
624#footer-layout > footer h4 {
625	color:				@ini_headlines;
626	margin:				0 0 1em 0;
627	font-family:		@ini_alt_fonts;
628	font-size:			1rem;
629}
630
631#footer-layout > footer #ftPlaceholder>* {
632	display:			none;
633}
634
635#ftLicenseButtons {
636	grid-row:			2;
637	grid-column:		2 / span 3;
638	text-align:			center;
639	font-size:			small;
640	padding-top:		1em;
641}
642#ftLicenseButtons hr {
643	border:				0;
644	height:				1pt;
645	background:			#333;
646	background-image:	linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
647}
648#ftLicenseButtons p.license {
649	margin:				.5em 0 1em 0;
650	font-size:			small;
651	color:				@ini_text_alt;
652}
653#ftLicenseButtons p.license bdi {
654	display:			block;
655	width:				100%;
656}
657
658/* togglers */
659.toggle .tg_button.active {
660	color:			@ini_link;
661	cursor:			pointer;
662}
663.toggle .tg_content,
664.toggle.auto .tg_content,
665.toggle.show .tg_content {
666	display:		initial;
667}
668.toggle.hide .tg_content,
669.toggle.alt .tg_content {
670	display:		none;
671}
672
673/* config overrides */
674#config__manager #dw__configform p:last-child {
675	position:			-webkit-sticky; /* Safari */
676	position:			sticky;
677	bottom:				0;
678	box-sizing:			border-box;
679	background-color:	rgba(255,255,255,.67);
680	border:				@ini_border solid 2pt;
681	padding:			.5em 0;
682	z-index:			9;
683	display:			grid;
684	grid-template-columns: auto auto;
685	justify-items:		center;
686}
687#config__manager #dw__configform p:last-child button {
688	border:				@ini_border solid 2pt;
689	padding:			.25em .5em;
690}
691#config__manager #dw__configform p:last-child button[type=submit] {
692	background-color:	#ccddff;
693}
694
695#config__manager fieldset {
696	background-color:	transparent;
697	color:				inherit;
698}
699
700#config__manager table, #config__manager table th, #config__manager table td {
701	border: none;
702}
703#config__manager td.label span.outkey {
704	background-color:		inherit;
705}
706
707/* dark mode overrides */
708@media screen and (prefers-color-scheme: dark) {
709
710	body.darkmode { background-color: @ini_background_site_dark; color: @ini_text_dark; }
711	body.darkmode main { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
712	body.darkmode #navYouAreHere ol li { color: @ini_headlines_dark; }
713	body.darkmode main h1,
714	body.darkmode main h2,
715	body.darkmode main h3,
716	body.darkmode main h4,
717	body.darkmode main h5,
718	body.darkmode main h6 { color: @ini_headlines_dark; }
719	body.darkmode #sbNavigation h1,
720	body.darkmode #sbNavigation h2,
721	body.darkmode #sbNavigation h3,
722	body.darkmode #sbNavigation h4,
723	body.darkmode #sbNavigation h5,
724	body.darkmode #sbNavigation h6 { color: @ini_headlines_dark; }
725	body.darkmode #sidebar hr { background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
726	body.darkmode #ftLicenseButtons hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
727	body.darkmode #sidebar a:link,
728	body.darkmode #sidebar a:visited { color: @ini_link_dark; }
729	body.darkmode #footer-layout>footer h4 { color: @ini_headlines_dark; }
730
731	body.darkmode #phSearch form>div.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
732	body.darkmode #phSearch form>div input { color: @ini_text_dark; }
733	body.darkmode #phSearch form > div button[type="reset"] {border-right-color: @ini_border_dark; }
734
735	body.darkmode #config__manager #dw__configform p:last-child {
736		background-color: rgba(57,57,61,.67);
737		border-color:	@ini_border_dark;
738	}
739	body.darkmode #config__manager #dw__configform p:last-child button {
740		background-color:	@ini_background_dark;
741		border-color:		@ini_border_dark;
742		color:				@ini_missing_dark;
743	}
744	body.darkmode #config__manager #dw__configform p:last-child button[type=submit] {
745		border-color:		@ini_existing_dark;
746		background-color:	@ini_background_dark;
747		color:				@ini_existing_dark;
748	}
749
750	body.darkmode #toc { border-left-color: @ini_border_dark; }
751	body.darkmode #toc h3 { color: @ini_headlines_dark; }
752
753	body.darkmode #qsearch__out {
754		background-color:	@ini_background_site_dark;
755	}
756	body.darkmode #qsearch__out ul,
757	body.darkmode #qsearch__out li {
758		border-color:	@ini_border_dark;
759	}
760
761	/* Extension Manager: */
762	body.darkmode #extension__manager .panelHeader {
763		background-color: @ini_background_alt_dark;
764	}
765	body.darkmode #extension__manager ul.tabs li a {
766		background-color: @ini_background_dark;
767		border-color: @ini_border_dark;
768		color: @ini_text_dark
769	}
770	body.darkmode #extension__manager ul.tabs li.active a {
771		background-color: @ini_background_alt_dark;
772		border-color: @ini_text_dark;
773	}
774	body.darkmode #extension__list ul.extensionList li {
775		color: @ini_text_dark
776	}
777	body.darkmode main figure {
778		background-color: rgba(0,0,0,.2);
779		border-color: @ini_border_dark;
780	}
781}
782
783/* tablet break point */
784@media all and (max-width: @ini_tablet_width) {
785	#header-layout>header {
786		margin:				0;
787		grid-template-columns:	e("repeat(2, auto)");
788		grid-template-rows:		e("repeat(4, auto)");
789	}
790	#header-layout>header #siteLogo {
791		grid-column:		1;
792		grid-row:			1;
793	}
794	#header-layout>header #globalTools {
795		grid-row:			1;
796		grid-column:		2;
797	}
798	#header-layout>header #globalTools ul li {
799		display:			block;
800		margin-bottom:		.5em;
801	}
802	#header-layout>header #globalTools ul li:before {
803		content:			'';
804	}
805	#header-layout>header #phSearch {
806		grid-row:			2;
807		grid-column:		1 / span 2;
808		padding:			.5em 1em 0 68px;
809	}
810	#header-layout>header #phTools {
811		grid-row:			3;
812		grid-column:		1 / span 2;
813	}
814	#header-layout>header #phInclude {
815		grid-row:			4;
816		grid-column:		1 / span 2;
817	}
818
819	#qsearch__out ul {
820		max-height:		100%;
821	}
822
823	#main-layout {
824		display:			block;
825	}
826
827	#sidebar.toggle {
828		width:					auto;
829		margin-left:			.5em;
830		padding:				0;
831		position:				relative;
832		top:					-2.25em;
833		height:					.25em;
834	}
835	#sidebar>button.tg_button {
836		float:					none;
837	}
838	#sidebar.auto>button.tg_button,
839	#sidebar.hide>button.tg_button,
840	#sidebar.alt>button.tg_button,
841	#sidebar.show>button.tg_button {
842		width:					1.5em;
843	}
844	#sidebar>button.tg_button span {
845		display:				none;
846	}
847
848	#sidebar>button.tg_button::after {
849		content:				'\2630';
850	}
851	#sidebar.hide>button.tg_button::after,
852	#sidebar.alt>button.tg_button::after {
853		content:				'\2715';
854	}
855
856	#sidebar .tg_content {
857		min-width:				@ini_sidebar_width;
858		padding-right:			0;
859		margin-top:				10px;
860		padding-bottom:			1em;
861		background-color:		@ini_background_site;
862		position:				absolute;
863		z-index:				18;
864		border:					@ini_border solid 1px;
865		-moz-box-shadow:		2px 2px 2px @ini_border;
866		-webkit-box-shadow:		2px 2px 2px @ini_border;
867		box-shadow:				2px 2px 2px @ini_border;
868	}
869
870	#sidebar .tg_content:before {
871		content:				' ';
872		z-index:				19;
873		width:					0;
874		height:					0;
875		position:				absolute;
876		top:					-10px;
877		left:					7px;
878		border-width:			0 10px 10px;
879		border-style:			solid;
880		border-color:			transparent;
881		border-bottom-color:	@ini_border;
882	}
883	#sidebar .tg_content:after {
884		content:				' ';
885		z-index:				20;
886		width:					0;
887		height:					0;
888		position:				absolute;
889		top:					-8px;
890		left:					8px;
891		border-width:			0 9px 8px;
892		border-style:			solid;
893		border-color:			transparent;
894		border-bottom-color:	@ini_background_site;
895	}
896
897	#sbNavigation {
898		padding-left:		.5em;
899		margin-left:		0;
900	}
901	#sidebar h3,
902	#sidebar h4	{
903		font-size:			1rem;
904		padding:			.25em 0 .25em 2pt;
905	}
906	#sidebar ul, #sidebar ol	{
907		margin-left:		.5em;
908	}
909	#sidebar ul ul, #sidebar ol ol, #sidebar ul ol, #sidebar ol ul {
910		margin-left:		0;
911	}
912	#sidebar p,
913	#sidebar li	{
914		font-size:			small;
915		padding:			.25em 0 .25em .25em;
916	}
917
918	main {
919		width:				auto;
920		box-shadow:			0 0 0 0 transparent;
921	}
922
923	.toggle .tg_content,
924	.toggle.alt .tg_content,
925	.toggle.show .tg_content {
926		display:		initial;
927	}
928	.toggle.auto .tg_content {
929		display:		none;
930	}
931
932	#toc.hide h3::after,
933	#toc.auto h3::after {
934		content:			'\2630';
935	}
936	#toc.alt h3::after {
937		content:			'\203A';
938	}
939
940	#toc.hide h3>span,
941	#toc.auto h3>span {
942		display:			none;
943	}
944	#toc.alt h3>span {
945		display:			inline-block;
946	}
947
948	#footer-layout>footer {
949		grid-template-columns: 12pt 1fr 1fr 1fr;
950	}
951
952	/* admin interface */
953	.dokuwiki div.ui-admin ul.admin_tasks {
954		float: none;
955		width: auto;
956	}
957	.dokuwiki div.ui-admin #admin__version {
958		display: none;
959	}
960}
961
962@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
963	body.darkmode #sidebar .tg_content {
964		background-color:	@ini_background_dark;
965		border-color:		@ini_border_dark;
966		-moz-box-shadow:		3px 3px 3px @ini_background_site_dark;
967		-webkit-box-shadow:		3px 3px 3px @ini_background_site_dark;
968		box-shadow:				3px 3px 3px @ini_background_site_dark;
969	}
970	body.darkmode #sidebar .tg_content:before {
971		border-bottom-color:	@ini_border_dark;
972	}
973	body.darkmode #sidebar .tg_content:after {
974		border-bottom-color:	@ini_background_dark;
975	}
976	body.darkmode #sidebar hr {
977		background:				@ini_link_dark;
978		background-image:		linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
979	}
980}
981
982/* medium break point: */
983@media all and (max-width: @ini_phone_width) {
984	#footer-layout {
985		padding-top:			.5em;
986	}
987	#footer-layout>footer {
988		grid-template-columns: 100%;
989		grid-template-rows: auto auto auto auto auto;
990	}
991	#footer-layout>footer .ftSection {
992		grid-column:	1;
993		padding: 		0 .25em 0 .5em;
994		white-space:	normal;
995	}
996	#footer-layout>footer .ftSection ul {
997		padding-left:	0;
998	}
999	#footer-layout>footer .ftSection li {
1000		display:		inline-block;
1001	}
1002	#footer-layout>footer .ftSection li::before {
1003		content:		'\00B7';
1004		display:		inline;
1005		width:			.35em;
1006		padding:		0 .35em;
1007	}
1008	#footer-layout>footer .ftSection li:first-child::before {
1009		content:		'';
1010		padding-left:	0;
1011	}
1012
1013	#footer-layout>footer #ftPlaceholder {
1014		grid-row:		1;
1015	}
1016	#footer-layout>footer #ftInclude {
1017		grid-row:		2;
1018	}
1019	#footer-layout>footer #ftSiteTools {
1020		grid-row:		3;
1021	}
1022	#footer-layout>footer #ftPageTools {
1023		grid-row:		4;
1024	}
1025	#footer-layout>footer #ftLicenseButtons {
1026		grid-column:	1;
1027		grid-row:		5;
1028	}
1029
1030	#footer-layout>footer h4 {
1031		margin-bottom:		.5em;
1032	}
1033
1034	main blockquote {
1035		margin-left:	.15em;
1036		margin-right:	0;
1037	}
1038	main ul, main ol {
1039		margin-left:	.5em;
1040		margin-right:	0;
1041		padding-left:	.75em;
1042	}
1043}