xref: /template/ad-hominem/css/layout.less (revision fdeb3ab57a5c049adca2a955b5a438a99b05dd62) 
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}
280#sidebar ul {
281	list-style:			square outside;
282	padding-left:		1.25em;
283}
284#sidebar ul li {
285	color:				@ini_text_alt;
286	padding:			.1em 0;
287}
288#sidebar dl dt {
289	font-weight:		bold;
290}
291#sidebar a:link,
292#sidebar a:visited {
293	color:		@ini_link;
294}
295
296#sidebar .home a::before {
297	content:	' ';
298	display:			inline-block;
299	width:				10pt;
300	height:				1em;
301	background:			transparent url('images/home.svg') no-repeat no-repeat 0 4px;
302	background-size:	.8em;
303	padding-right:		2pt;
304}
305#sidebar .curid {
306	font-weight:		bold;
307}
308#sidebar h4 {
309	font-size:			1rem;
310	margin:				0.25em 2pt;
311}
312#sidebar>button.tg_button {
313	float:					right;
314	display:				block;
315	background-color:		transparent;
316	border:					transparent none 0;
317	margin-right:			2px;
318	font-size:				1.5rem;
319}
320#sidebar>button:focus {
321	outline:	@ini_focus_color solid 2px;
322}
323#sidebar>button.tg_button span {
324	display:		none;
325}
326#sidebar.hide>button.tg_button,
327#sidebar.alt>button.tg_button {
328	margin-left:			0;
329	width:					11pt;
330}
331#sidebar>button.tg_button span {
332
333}
334#sidebar>button.tg_button::after {
335	content:				'\2039';
336	color:					@ini_link;
337	display:				inline-block;
338	width:					.75em;
339	height:					1.25em;
340	text-align:				center;
341}
342#sidebar.hide>button.tg_button span,
343#sidebar.alt>button.tg_button span {
344	display:				none;
345}
346#sidebar.hide>button.tg_button::after,
347#sidebar.alt>button.tg_button::after {
348	content:				'\203A';
349	width:					auto;
350}
351
352#sidebar .tg_content {
353	line-height:			1.5em;
354	font-size:				11.5pt;
355}
356
357#sidebar hr {
358	border:					0;
359	height:					1pt;
360	background:				@ini_text_alt;
361	background-image:		linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
362	margin:					.5em 1em .5em 0;
363}
364
365#sbNavigation {
366	margin:				1em .25em 0 1em;
367}
368#navBreadCrumbs {
369	margin-left:		.5em;
370}
371#navBreadCrumbs ol {
372	list-style:			decimal outside;
373	padding-left:		2em;
374}
375
376main {
377	width:				e("calc(90% - 5px)");
378	flex-grow:			100;
379	background-color:	@ini_background;
380	color:				@ini_text;
381	line-height:		1.5em;
382	padding:			1.5em 5% .75em 5%;
383	border:				@ini_border solid 1px;
384/*	-moz-box-shadow:	2px 2px 2px 2px rgba(0,0,0,.5);
385	-webkit-box-shadow:	2px 2px 2px 2px rgba(0,0,0,.5);
386	box-shadow:			2px 2px 2px 2px rgba(0,0,0,.5); */
387}
388
389#navYouAreHere {
390	display:			flex;
391	flex-flow:			row nowrap;
392	position:			relative;
393	top:				0;
394	left:				0;
395	height:				16pt;
396	overflow:			hidden;
397	white-space:		nowrap;
398}
399#navYouAreHere h4 {
400	display:		none /*inline-block */;
401	font-family:	@ini_default_fonts;
402	font-weight:	normal;
403	font-size:		small;
404	line-height:	1.5em;
405	margin:			0 .5em 0 0;
406}
407
408#navYouAreHere ol {
409	list-style:			none inside;
410	display:			flex;
411	line-height:		1.5em;
412	height:				100pt;
413	padding-left:		0;
414	margin:				0 2pt 0 0;
415	font-size:			small;
416	overflow:			scroll hidden;
417}
418#navYouAreHere ol li {
419	display:			inline;
420	margin-bottom:		0;
421}
422#navYouAreHere ol li.home {
423	min-width:		14px;
424	overflow:		hidden;
425}
426#navYouAreHere ol li .curid {
427	display:		none;
428}
429
430#navYouAreHere ol li:before {
431	content:		'\25B8';
432	padding:		0 2pt;
433	color:			@ini_text_alt;
434}
435#navYouAreHere ol li.home::before {
436	content:		'';
437	padding:		0;
438}
439#navYouAreHere ol li.home a {
440	display:		inline-block;
441	width:			14px;
442	overflow:		hidden;
443}
444#navYouAreHere ol li.home a::before {
445	content:		' ';
446	display:		inline-block;
447	width:			14px;
448	height:			1em;
449	background:		transparent url('images/home.svg') no-repeat left bottom;
450	filter:			hue-rotate(-80deg);
451}
452
453body.home #navYouAreHere {
454	display:		none;
455}
456
457main>footer {
458	margin-top:			2em;
459	text-align:			right;
460}
461main>footer p.docInfo {
462	display:			inline-block;
463	border-top:			@ini_separator solid 1px;
464	padding-top:		.5em;
465	padding-left:		5%;
466	font-size:			small;
467	color:				@ini_text_alt;
468}
469
470/* Table of Contents */
471#toc {
472	clear:				both;
473	float:				right;
474	width:				auto;
475	line-height:		1.5em;
476	text-align:			left;
477	max-width:			@ini_toc_width;
478	background-color:	transparent;
479	border-left:		@ini_border solid 1pt;
480}
481#toc ol {
482	list-style:			none inside;
483	padding:			0 0 0 1em;
484	margin:				0;
485}
486#toc>div {
487
488}
489#toc ol li {
490	font-size:			small;
491	/* text-indent:		-1em;
492	padding-left:		1em; */
493	line-height:		1.25em;
494	margin:				.5em 0;
495}
496#toc h3 {
497	margin:				0;
498	padding:			0 0 .5em .5em;
499	width:				auto;
500	height:				1.2em;
501	font-family:		@ini_alt_fonts;
502	font-size:			small;
503	overflow:			hidden;
504	font-weight:		bold;
505	line-height:		1.5em;
506	color:				@ini_text_neu;
507}
508#toc h3::after {
509	content:			'\203A';
510	display:			inline-block;
511	width:				1.5em;
512	text-align:			center;
513}
514#toc.hide h3::after,
515#toc.alt h3::after {
516	content:			'\2630';
517}
518
519#toc.hide h3>span,
520#toc.alt h3>span {
521	display:			none;
522}
523
524
525/* edit buttons */
526main .secedit {
527	float:				right;
528	margin-top:			-22pt;
529	line-height:		0;
530}
531main .secedit button {
532	border:				@ini_border solid 1pt;
533	background-color:	transparent;
534	color:				transparent;
535	width:				20pt;
536	height:				20pt;
537	border-radius:		50%;
538	font-size:			0;
539	cursor:				pointer;
540}
541main .secedit button::before {
542	content:			' ';
543	display:			inline-block;
544	width:				13pt;
545	height:				13pt;
546	padding:			2pt;
547	background:			transparent url('images/edit.svg') no-repeat center;
548	background-size:	10pt;
549}
550main .secedit button:hover {
551	background-color:	@ini_highlight;
552	border:				@ini_text_alt solid 1pt;
553}
554main .secedit button:focus {
555	background-color:	@ini_highlight;
556	border:				@ini_focus_color solid 2px;
557	outline:			transparent none 0;
558}
559main .secedit button:hover::before {
560}
561
562main .section_highlight {
563	background-color:	@ini_highlight;
564	border:				solid @ini_highlight;
565	border-width:		0 .5em;
566	border-radius:		.5em;
567	margin:				0 -.5em;
568}
569
570/* math fonts */
571main math,
572main .math,
573main .math * {
574	font-family:		@ini_math_fonts;
575	font-size:			12pt;
576	line-height:		1em;
577}
578
579/* figure block */
580main figure {
581	background-color:	#EEE;
582	border:				#999 solid 1px;
583	padding:			.5em;
584}
585main figure figcaption {
586}
587main figure>*:first-child {
588	margin-top:			.25em;
589}
590
591body.mediadetail figure img {
592	background:			transparent url('images/transparency.gif');
593}
594body.mediadetail figure table.img_detail,
595body.mediadetail figure table.img_detail th,
596body.mediadetail figure table.img_detail td {
597	border:			none;
598}
599body.mediadetail figure table.img_detail th {
600	text-align:		right;
601	white-space:	nowrap;
602	border:			none;
603}
604
605#footer-layout {
606	padding-top:		1.5em;
607}
608#footer-layout>footer {
609	width:				100%;
610	max-width:			@ini_site_width;
611	margin:				0 auto;
612	display:			grid;
613	grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
614	grid-template-rows:	auto auto;
615	grid-gap:			6pt;
616	align-items:		stretch;
617}
618#footer-layout>footer .ftSection {
619	padding-left:		1em;
620}
621#footer-layout>footer .ftSection ul {
622	list-style:			none inside;
623	padding-left:		.5em;
624}
625#footer-layout>footer .ftSection ul li {
626	margin-bottom:		.5em;
627	font-size:			small;
628}
629#footer-layout>footer h4 {
630	color:				@ini_headlines;
631	margin:				0 0 1em 0;
632	font-family:		@ini_alt_fonts;
633	font-size:			1rem;
634}
635
636#footer-layout>footer #ftPlaceholder>* {
637	display:			none;
638}
639
640#ftLicenseButtons {
641	grid-row:			2;
642	grid-column:		2 / span 3;
643	text-align:			center;
644	font-size:			small;
645	padding-top:		1em;
646}
647#ftLicenseButtons hr {
648	border:				0;
649	height:				1pt;
650	background:			#333;
651	background-image:	linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
652}
653#ftLicenseButtons p.license {
654	margin:				.5em 0 1em 0;
655	font-size:			small;
656	color:				@ini_text_alt;
657}
658#ftLicenseButtons p.license bdi {
659	display:			block;
660	width:				100%;
661}
662
663/* togglers */
664.toggle .tg_button.active {
665	color:			@ini_link;
666	cursor:			pointer;
667}
668.toggle .tg_content,
669.toggle.auto .tg_content,
670.toggle.show .tg_content {
671	display:		initial;
672}
673.toggle.hide .tg_content,
674.toggle.alt .tg_content {
675	display:		none;
676}
677
678/* config overrides */
679#config__manager #dw__configform p:last-child {
680	position:			-webkit-sticky; /* Safari */
681	position:			sticky;
682	bottom:				0;
683	box-sizing:			border-box;
684	background:			rgba(255,255,255,.67);
685	border:				@ini_border solid 2pt;
686	padding:			.5em 0;
687	z-index:			9;
688	display:			grid;
689	grid-template-columns: auto auto;
690	justify-items:		center;
691}
692#config__manager #dw__configform p:last-child button {
693	border:				@ini_border solid 2pt;
694	padding:			.25em .5em;
695}
696#config__manager #dw__configform p:last-child button[type=submit] {
697	background-color:	#ccddff;
698}
699
700/* tablet break point */
701@media all and (max-width: @ini_tablet_width) {
702	#header-layout>header {
703		margin:				0;
704		grid-template-columns:	e("repeat(2, auto)");
705		grid-template-rows:		e("repeat(4, auto)");
706	}
707	#header-layout>header #siteLogo {
708		grid-column:		1;
709		grid-row:			1;
710	}
711	#header-layout>header #globalTools {
712		grid-row:			1;
713		grid-column:		2;
714	}
715	#header-layout>header #globalTools ul li {
716		display:			block;
717		margin-bottom:		.5em;
718	}
719	#header-layout>header #globalTools ul li:before {
720		content:			'';
721	}
722	#header-layout>header #phSearch {
723		grid-row:			2;
724		grid-column:		1 / span 2;
725		padding:			.5em 1em 0 68px;
726	}
727	#header-layout>header #phTools {
728		grid-row:			3;
729		grid-column:		1 / span 2;
730	}
731	#header-layout>header #phInclude {
732		grid-row:			4;
733		grid-column:		1 / span 2;
734	}
735
736	#qsearch__out ul {
737		max-height:		100%;
738	}
739
740	#main-layout {
741		display:			block;
742	}
743
744	#sidebar.toggle {
745		width:					auto;
746		margin-left:			.5em;
747		padding:				0;
748		position:				relative;
749		top:					-2.25em;
750		height:					.25em;
751	}
752	#sidebar>button.tg_button {
753		float:					none;
754	}
755	#sidebar.auto>button.tg_button,
756	#sidebar.hide>button.tg_button,
757	#sidebar.alt>button.tg_button,
758	#sidebar.show>button.tg_button {
759		width:					1.5em;
760	}
761	#sidebar>button.tg_button span {
762		display:				none;
763	}
764
765	#sidebar>button.tg_button::after {
766		content:				'\2630';
767	}
768	#sidebar.hide>button.tg_button::after,
769	#sidebar.alt>button.tg_button::after {
770		content:				'\2715';
771	}
772
773	#sidebar .tg_content {
774		min-width:				@ini_sidebar_width;
775		padding-right:			1em;
776		margin-top:				10px;
777		background-color:		@ini_background_site;
778		position:				absolute;
779		z-index:				18;
780		border:					@ini_border solid 1px;
781		-moz-box-shadow:		2px 2px 2px @ini_border;
782		-webkit-box-shadow:		2px 2px 2px @ini_border;
783		box-shadow:				2px 2px 2px @ini_border;
784	}
785
786	#sidebar .tg_content:before {
787		content:				' ';
788		z-index:				19;
789		width:					0;
790		height:					0;
791		position:				absolute;
792		top:					-10px;
793		left:					7px;
794		border-width:			0 10px 10px;
795		border-style:			solid;
796		border-color:			transparent;
797		border-bottom-color:	@ini_border;
798	}
799	#sidebar .tg_content:after {
800		content:				' ';
801		z-index:				20;
802		width:					0;
803		height:					0;
804		position:				absolute;
805		top:					-8px;
806		left:					8px;
807		border-width:			0 9px 8px;
808		border-style:			solid;
809		border-color:			transparent;
810		border-bottom-color:	@ini_background_site;
811	}
812
813	#sbNavigation {
814		padding-left:		.5em
815	}
816	#sidebar h3,
817	#sidebar h4	{
818		font-size:			1rem;
819		padding:			.25em 0 .25em 2pt;
820	}
821	#sidebar ul,
822	#sidebar ol	{
823		margin-left:		1em;
824	}
825	#sidebar p,
826	#sidebar li	{
827		font-size:			small;
828		padding:			.25em 0 .25em .25em;
829	}
830
831	main {
832		width:				auto;
833		box-shadow:			0 0 0 0 transparent;
834	}
835
836	.toggle .tg_content,
837	.toggle.alt .tg_content,
838	.toggle.show .tg_content {
839		display:		initial;
840	}
841	.toggle.auto .tg_content {
842		display:		none;
843	}
844
845	#toc.hide h3::after,
846	#toc.auto h3::after {
847		content:			'\2630';
848	}
849	#toc.alt h3::after {
850		content:			'\203A';
851	}
852
853	#toc.hide h3>span,
854	#toc.auto h3>span {
855		display:			none;
856	}
857	#toc.alt h3>span {
858		display:			inline-block;
859	}
860
861
862	#footer-layout>footer {
863		grid-template-columns: 12pt 1fr 1fr 1fr;
864	}
865}
866
867/* medium break point: */
868@media all and (max-width: @ini_phone_width) {
869	#footer-layout {
870		padding-top:			.5em;
871	}
872	#footer-layout>footer {
873		grid-template-columns: 100%;
874		grid-template-rows: auto auto auto auto auto;
875	}
876	#footer-layout>footer .ftSection {
877		grid-column:	1;
878		padding: 		0 .25em 0 .5em;
879		white-space:	normal;
880	}
881	#footer-layout>footer .ftSection ul {
882		padding-left:	0;
883	}
884	#footer-layout>footer .ftSection li {
885		display:		inline;
886	}
887	#footer-layout>footer .ftSection li::before {
888		content:		'\00B7';
889		display:		inline;
890		width:			.35em;
891		padding:		0 .35em;
892	}
893	#footer-layout>footer .ftSection li:first-child::before {
894		content:		'';
895		padding-left:	0;
896	}
897
898	#footer-layout>footer #ftPlaceholder {
899		grid-row:		1;
900	}
901	#footer-layout>footer #ftInclude {
902		grid-row:		2;
903	}
904	#footer-layout>footer #ftSiteTools {
905		grid-row:		3;
906	}
907	#footer-layout>footer #ftPageTools {
908		grid-row:		4;
909	}
910	#footer-layout>footer #ftLicenseButtons {
911		grid-column:	1;
912		grid-row:		5;
913	}
914
915	#footer-layout>footer h4 {
916		margin-bottom:		.5em;
917	}
918
919	main blockquote {
920		margin-left:	.15em;
921		margin-right:	0;
922	}
923	main ul, main ol {
924		margin-left:	.5em;
925		margin-right:	0;
926		padding-left:	.75em;
927	}
928}