xref: /template/ad-hominem/css/layout.less (revision 3cbd3ce8d818d4668529886c407617e93323e43a) 
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	display:		none;
48}
49div.no {
50	display: inline;
51	margin: 0;
52	padding: 0;
53}
54
55#globalTools a:link {
56	text-decoration:	none;
57}
58
59#gSiteTools {
60	justify-self: start;
61}
62#gSiteTools select {
63	display:	none;
64}
65#gUserTools {
66	justify-self:		end;
67	padding:			2pt 5pt 2pt 0;
68}
69#gUserTools ul {
70	list-style:			none inside;
71	display:			block;
72	padding:			.5em;
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	display:				grid;
97	grid-template-columns:	@ini_sidebar_width auto @ini_sidebar_width;
98	grid-template-rows:		auto auto auto;
99	justify-items:			stretch;
100}
101
102#siteLogo {
103	grid-column:		1;
104	grid-row:			1 / span 3;
105	column-gap:			10px;
106	padding:			.25em 0 0 .5em;
107	display:			grid;
108	grid-template-columns:	70px auto;
109	grid-template-rows:	auto auto;
110}
111#siteLogo .logo {
112	grid-column:			1;
113	grid-row:				1 / span 2;
114}
115#siteLogo .logo img {
116	width:					64px;
117	height:					auto;
118}
119#siteLogo .title {
120	grid-column:			2;
121	grid-row:				1;
122	align-self:				center;
123	font-size:				14pt;
124	line-height:			1em;
125	margin:					0;
126}
127#siteLogo .title * {
128	font-family:			@ini_alt_fonts;
129}
130#siteLogo .claim {
131	grid-column:			2;
132	grid-row:				2;
133	align-self:				start;
134	font-size:				10pt;
135}
136
137#globalTools {
138	grid-column:			2 / span 2;
139	grid-row:				1;
140	text-align:				right;
141	font-size:				10pt;
142}
143#phSearch {
144	grid-column:			2;
145	grid-row:				2;
146	padding:				.5em 0;
147}
148#phSearch form {
149}
150#phSearch form>div.search-field {
151	width:					100%;
152	display:				grid;
153	grid-template-columns:	auto 20pt 20pt;
154	place-items:			stretch;
155	border:					@ini_border solid 1pt;
156	background:				@ini_background;
157	border-radius:			4pt;
158	-moz-box-shadow:		inset 0 0 3pt @ini_border;
159	-webkit-box-shadow:		inset 0 0 3pt @ini_border;
160	box-shadow:				inset 0 0 3pt @ini_border;
161	outline:				transparent solid 2pt;
162}
163#phSearch form>div.search-field.focus {
164	outline-color:		@ini_focus_color;
165}
166#phSearch form>div input {
167	grid-column:		1;
168	grid-row:			1;
169	z-index:			23;
170	font-size:			large;
171	padding:			2pt 0 2pt 4pt;
172	border:				transparent none 0;
173	border-radius:		3pt;
174	background-color:	transparent;
175}
176#phSearch form>div input:focus {
177	outline:		transparent none 0;
178}
179#phSearch form>div button {
180	border:				transparent solid 1pt;
181	background:			transparent none no-repeat center;
182	background-size:	13pt;
183	color:				transparent;
184	width:				19pt;
185	border-radius:		3pt;
186	overflow:			hidden;
187	margin:				1pt 1pt 1pt 0;
188	outline:			transparent solid 2pt;
189}
190#phSearch form>div button[type=reset] {
191	background-image:	url('images/delete.svg');
192	border-right:		@ini_border solid 1pt;
193}
194#phSearch form>div button[type=submit] {
195	background-image:	url('images/search.svg');
196}
197#phSearch form>div button:hover {
198	background-color:	@ini_background_neu;
199	border-color:		@ini_border;
200}
201#phSearch form>div button:focus {
202	background-color:	@ini_background_neu;
203}
204
205#phSearch form .search-popup {
206	height:				5pt;
207	margin-right:		38pt;
208}
209#phSearch form #qsearch__out {
210	left:				0;
211	width:				auto;
212	padding:			0;
213	-moz-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
214	-webkit-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
215	box-shadow:			2px 2px 2px 0 rgba(0,0,0,.5);
216}
217
218#qsearch__out {
219	position:			relative;
220	white-space:		nowrap;
221	font-size:			small;
222	background-color:	@ini_background_site;
223}
224#qsearch__out strong {
225	display:			none;
226	padding:			2pt;
227	font-weight:		normal;
228}
229#qsearch__out ul {
230	background-color:	@ini_background_neu;
231	border:				@ini_border solid 1px;
232	border-top-width:	0;
233	max-height:			11em;
234	overflow:			hidden auto;
235}
236#qsearch__out li {
237	border-top:			@ini_border solid 1px;
238}
239#qsearch__out li a {
240	display:			block;
241	padding:			4pt 0 4pt 6pt;
242}
243
244#phTools{
245}
246#phInclude {
247	grid-column:		2 / span 2;
248	grid-row:			3;
249}
250
251#main-layout {
252	width:				100%;
253	max-width:			@ini_site_width;
254	margin:				0 auto;
255	display:			grid;
256	grid-template-columns:	auto auto;
257	place-items:		stretch;
258}
259
260#sidebar {
261	width:				@ini_sidebar_width;
262}
263#sidebar.toggle.hide,
264#sidebar.toggle.alt {
265	width:				1em;
266}
267#sidebar p,
268#sidebar ul {
269}
270#sidebar ul {
271	list-style:			square outside;
272	padding-left:		1.25em;
273}
274#sidebar ul li {
275	color:				@ini_text_alt;
276	padding:			.1em 0;
277}
278#sidebar dl dt {
279	font-weight:		bold;
280}
281#sidebar a:link,
282#sidebar a:visited {
283	color:		@ini_link;
284}
285
286#sidebar .home a::before {
287	content:	' ';
288	display:			inline-block;
289	width:				10pt;
290	height:				1em;
291	background:			transparent url('images/home.svg') no-repeat left bottom;
292	background-size:	.8em;
293	padding-right:		2pt;
294}
295#sidebar .curid {
296	font-weight:		bold;
297}
298#sidebar h4 {
299	font-size:			1rem;
300	margin:				0.25em 2pt;
301}
302#sidebar>button.tg_button {
303	display:				grid;
304	grid-template-columns:	auto 17pt;
305	width:					e("calc(100% - 4px)");
306	height:					1.75em;
307	margin:					0 2px;
308	padding:				.25em;
309	text-align:				left;
310	font-size:				1.25rem;
311	font-weight:			bold;
312	color:					@ini_text_neu;
313	background-color:		transparent;
314	border:					transparent none 0;
315}
316#sidebar>button:focus {
317	outline:	@ini_focus_color solid 2px;
318}
319#sidebar>button.tg_button span {
320	font-family:			@ini_alt_fonts;
321}
322#sidebar.hide>button.tg_button,
323#sidebar.alt>button.tg_button {
324	margin-left:			0;
325}
326#sidebar>button.tg_button span {
327
328}
329#sidebar>button.tg_button::after {
330	content:				'\2039';
331	color:					@ini_link;
332	display:				block;
333	width:					1.25em;
334	height:					1.25em;
335	text-align:				center;
336}
337#sidebar.hide>button.tg_button span,
338#sidebar.alt>button.tg_button span {
339	display:				none;
340}
341#sidebar.hide>button.tg_button::after,
342#sidebar.alt>button.tg_button::after {
343	content:				'\203A';
344	width:					auto;
345}
346
347#sidebar .tg_content {
348	line-height:			1.5em;
349	font-size:				11.5pt;
350}
351
352#sidebar hr {
353	border:					0;
354	height:					1pt;
355	background:				@ini_text_alt;
356	background-image:		linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
357	margin:					.5em 1em .5em 0;
358}
359
360#sbNavigation {
361	margin:				.25em .25em 0 1em;
362}
363#navBreadCrumbs {
364	margin-left:		.5em;
365}
366#navBreadCrumbs ol {
367	list-style:			decimal outside;
368	padding-left:		2em;
369}
370
371main {
372	width:				e("calc(90% - 5px)");
373	background-color:	@ini_background;
374	color:				@ini_text;
375	line-height:		1.5em;
376	padding:			1.5em 5% .75em 5%;
377	border:				@ini_border solid 1px;
378	-moz-box-shadow:	2px 2px 2px 2px rgba(0,0,0,.5);
379	-webkit-box-shadow:	2px 2px 2px 2px rgba(0,0,0,.5);
380	box-shadow:			2px 2px 2px 2px rgba(0,0,0,.5);
381}
382#navYouAreHere {
383	display:			flex;
384	flex-flow:			row nowrap;
385	position:			relative;
386	top:				0;
387	left:				0;
388	height:				16pt;
389	overflow:			hidden;
390	white-space:		nowrap;
391}
392#navYouAreHere h4 {
393	display:		none /*inline-block */;
394	font-family:	@ini_default_fonts;
395	font-weight:	normal;
396	font-size:		small;
397	line-height:	1.5em;
398	margin:			0 .5em 0 0;
399}
400
401#navYouAreHere ol {
402	list-style:			none inside;
403	display:			flex;
404	line-height:		1.5em;
405	height:				100pt;
406	padding-left:		0;
407	margin:				0 2pt 0 0;
408	font-size:			small;
409	overflow:			scroll hidden;
410}
411#navYouAreHere ol li {
412	display:			inline;
413	margin-bottom:		0;
414}
415#navYouAreHere ol li.home {
416	min-width:		14px;
417	overflow:		hidden;
418}
419#navYouAreHere ol li .curid {
420	display:		none;
421}
422
423#navYouAreHere ol li:before {
424	content:		'\25B8';
425	padding:		0 2pt;
426	color:			@ini_text_alt;
427}
428#navYouAreHere ol li.home::before {
429	content:		'';
430	padding:		0;
431}
432#navYouAreHere ol li.home a {
433	display:		inline-block;
434	width:			14px;
435	overflow:		hidden;
436}
437#navYouAreHere ol li.home a::before {
438	content:		' ';
439	display:		inline-block;
440	width:			14px;
441	height:			1em;
442	background:		transparent url('images/home.svg') no-repeat left bottom;
443	filter:			hue-rotate(-80deg);
444}
445
446body.home #navYouAreHere {
447	display:		none;
448}
449
450main>footer {
451	margin-top:			2em;
452	text-align:			right;
453}
454main>footer p.docInfo {
455	display:			inline-block;
456	border-top:			@ini_separator solid 1px;
457	padding-top:		.5em;
458	padding-left:		5%;
459	font-size:			small;
460	color:				@ini_text_alt;
461}
462
463/* Table of Contents */
464#toc {
465	clear:				both;
466	float:				right;
467	width:				auto;
468	line-height:		1.5em;
469	max-width:			@ini_sidebar_width;
470	background-color:	transparent;
471	border-left:		@ini_border solid 1pt;
472}
473#toc ol {
474	list-style:			none inside;
475	padding:			0 .75em;
476	margin:				0;
477}
478#toc>div {
479
480}
481#toc ol li {
482	font-size:			small;
483	text-indent:		-1em;
484	padding-left:		1em;
485	line-height:		1.25em;
486	margin:				.5em 0;
487}
488#toc h3 {
489	margin:				0;
490	padding:			.25em 0 .5em .5em;
491	width:				auto;
492	height:				1.2em;
493	font-family:		@ini_alt_fonts;
494	font-size:			small;
495	overflow:			hidden;
496	font-weight:		bold;
497	line-height:		1.5em;
498	color:				@ini_text_neu;
499}
500#toc h3::after {
501	content:			'\203A';
502	display:			inline-block;
503	width:				1.5em;
504	text-align:			center;
505}
506#toc.hide h3::after,
507#toc.alt h3::after {
508	content:			'\2630';
509}
510
511#toc.hide h3>span,
512#toc.alt h3>span {
513	display:			none;
514}
515
516
517/* edit buttons */
518main .secedit {
519	float:				right;
520	margin-top:			-22pt;
521	line-height:		0;
522}
523main .secedit button {
524	border:				@ini_border solid 1pt;
525	background-color:	transparent;
526	color:				transparent;
527	width:				20pt;
528	height:				20pt;
529	border-radius:		50%;
530	font-size:			0;
531	cursor:				pointer;
532}
533main .secedit button::before {
534	content:			' ';
535	display:			inline-block;
536	width:				13pt;
537	height:				13pt;
538	padding:			2pt;
539	background:			transparent url('images/edit.svg') no-repeat center;
540	background-size:	10pt;
541}
542main .secedit button:hover {
543	background-color:	@ini_highlight;
544	border:				@ini_text_alt solid 1pt;
545}
546main .secedit button:focus {
547	background-color:	@ini_highlight;
548	border:				@ini_focus_color solid 2px;
549	outline:			transparent none 0;
550}
551main .secedit button:hover::before {
552}
553
554main .section_highlight {
555	background-color:	@ini_highlight;
556	border:				solid @ini_highlight;
557	border-width:		0 .5em;
558	border-radius:		.5em;
559	margin:				0 -.5em;
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#footer-layout {
572	padding-top:		1.5em;
573}
574#footer-layout>footer {
575	width:				100%;
576	max-width:			@ini_site_width;
577	margin:				0 auto;
578	display:			grid;
579	grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
580	grid-template-rows:	auto auto;
581	grid-gap:			6pt;
582	align-items:		stretch;
583}
584#footer-layout>footer .ftSection {
585	padding-left:		1em;
586}
587#footer-layout>footer .ftSection ul {
588	list-style:			none inside;
589	padding-left:		.5em;
590}
591#footer-layout>footer .ftSection ul li {
592	margin-bottom:		.5em;
593	font-size:			small;
594}
595#footer-layout>footer h4 {
596	color:				@ini_headlines;
597	margin:				0 0 1em 0;
598	font-family:		@ini_alt_fonts;
599	font-size:			1rem;
600}
601
602#footer-layout>footer #ftPlaceholder>* {
603	display:			none;
604}
605
606#ftLicenseButtons {
607	grid-row:			2;
608	grid-column:		2 / span 3;
609	text-align:			center;
610	font-size:			small;
611	padding-top:		1em;
612}
613#ftLicenseButtons hr {
614	border:				0;
615	height:				1pt;
616	background:			#333;
617	background-image:	linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
618}
619#ftLicenseButtons p.license {
620	margin:				.5em 0 1em 0;
621	font-size:			small;
622	color:				@ini_text_alt;
623}
624#ftLicenseButtons p.license bdi {
625	display:			block;
626	width:				100%;
627}
628
629/* togglers */
630.toggle .tg_button.active {
631	color:			@ini_link;
632	cursor:			pointer;
633}
634.toggle .tg_content,
635.toggle.auto .tg_content,
636.toggle.show .tg_content {
637	display:		initial;
638}
639.toggle.hide .tg_content,
640.toggle.alt .tg_content {
641	display:		none;
642}
643
644/* tablet break point */
645@media all and (max-width: @ini_tablet_width) {
646	#header-layout>header {
647		margin:				0;
648		grid-template-columns:	e("repeat(2, auto)");
649		grid-template-rows:		e("repeat(4, auto)");
650	}
651	#header-layout>header #siteLogo {
652		grid-column:		1;
653		grid-row:			1;
654	}
655	#header-layout>header #globalTools {
656		grid-row:			1;
657		grid-column:		2;
658	}
659	#header-layout>header #globalTools ul li {
660		display:			block;
661		margin-bottom:		.5em;
662	}
663	#header-layout>header #globalTools ul li:before {
664		content:			'';
665	}
666	#header-layout>header #phSearch {
667		grid-row:			2;
668		grid-column:		1 / span 2;
669		padding:			.5em 1em 0 68px;
670	}
671	#header-layout>header #phTools {
672		grid-row:			3;
673		grid-column:		1 / span 2;
674	}
675	#header-layout>header #phInclude {
676		grid-row:			4;
677		grid-column:		1 / span 2;
678	}
679
680	#qsearch__out ul {
681		max-height:		100%;
682	}
683
684	#main-layout {
685		display:			block;
686	}
687
688	#sidebar.toggle {
689		width:					100%;
690		margin-left:			.5em;
691		padding:				0;
692		position:				relative;
693		top:					-2.25em;
694		height:					.25em;
695	}
696	#sidebar>button.tg_button {
697		width:					1.5em;
698	}
699	#sidebar>button.tg_button span {
700		display:				none;
701	}
702
703	#sidebar>button.tg_button::after {
704		content:				'\2630';
705	}
706	#sidebar.hide>button.tg_button::after,
707	#sidebar.alt>button.tg_button::after {
708		content:				'\2335';
709	}
710
711	#sidebar .tg_content {
712		min-width:				@ini_sidebar_width;
713		padding-right:			1em;
714		background-color:		@ini_background_site;
715		position:				absolute;
716		z-index:				18;
717		border:					@ini_border solid 1px;
718		-moz-box-shadow:		2px 2px 2px @ini_border;
719		-webkit-box-shadow:		2px 2px 2px @ini_border;
720		box-shadow:				2px 2px 2px @ini_border;
721	}
722
723	#sbNavigation {
724		padding-left:		.5em
725	}
726	#sidebar h3,
727	#sidebar h4	{
728		font-size:			1rem;
729		padding:			.25em 0 .25em 2pt;
730	}
731	#sidebar ul,
732	#sidebar ol	{
733		margin-left:		1em;
734	}
735	#sidebar p,
736	#sidebar li	{
737		font-size:			small;
738		padding:			.25em 0 .25em .25em;
739	}
740
741	main {
742		width:				auto;
743		box-shadow:			0 0 0 0 transparent;
744	}
745
746	.toggle .tg_content,
747	.toggle.alt .tg_content,
748	.toggle.show .tg_content {
749		display:		initial;
750	}
751	.toggle.auto .tg_content {
752		display:		none;
753	}
754
755	#toc.hide h3::after,
756	#toc.auto h3::after {
757		content:			'\2630';
758	}
759	#toc.alt h3::after {
760		content:			'\203A';
761	}
762
763	#toc.hide h3>span,
764	#toc.auto h3>span {
765		display:			none;
766	}
767	#toc.alt h3>span {
768		display:			inline-block;
769	}
770
771
772	#footer-layout>footer {
773		grid-template-columns: 12pt 1fr 1fr 1fr;
774	}
775}
776
777/* medium break point: */
778@media all and (max-width: @ini_phone_width) {
779	#footer-layout {
780		padding-top:			.5em;
781	}
782	#footer-layout>footer {
783		grid-template-columns: 100%;
784		grid-template-rows: auto auto auto auto auto;
785	}
786	#footer-layout>footer .ftSection {
787		grid-column:	1;
788		padding: 		0 .25em 0 .5em;
789		white-space:	normal;
790	}
791	#footer-layout>footer .ftSection ul {
792		padding-left:	0;
793	}
794	#footer-layout>footer .ftSection li {
795		display:		inline;
796	}
797	#footer-layout>footer .ftSection li::before {
798		content:		'\00B7';
799		display:		inline;
800		width:			.35em;
801		padding:		0 .35em;
802	}
803	#footer-layout>footer .ftSection li:first-child::before {
804		content:		'';
805		padding-left:	0;
806	}
807
808	#footer-layout>footer #ftPlaceholder {
809		grid-row:		1;
810	}
811	#footer-layout>footer #ftInclude {
812		grid-row:		2;
813	}
814	#footer-layout>footer #ftSiteTools {
815		grid-row:		3;
816	}
817	#footer-layout>footer #ftPageTools {
818		grid-row:		4;
819	}
820	#footer-layout>footer #ftLicenseButtons {
821		grid-column:	1;
822		grid-row:		5;
823	}
824
825	#footer-layout>footer h4 {
826		margin-bottom:		.5em;
827	}
828
829}