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