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