xref: /template/ad-hominem/css/layout.less (revision 56919fe9575b8496ca18fe44265b7cf334d262c6) 
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
41#gUserTools {
42	justify-self:		end;
43	padding:			2pt 5pt 2pt 0;
44}
45#gUserTools ul {
46	list-style:			none inside;
47	display:			block;
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#docinfo-layout {
65	width:					100%;
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	align-items:			center;
76}
77#siteLogo {
78	grid-column:		1;
79	grid-row:			1 / span 3;
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
90#siteLogo .title {
91	grid-column:		2;
92	grid-row:			1;
93	font-size:			14pt;
94	line-height:		1em;
95	margin:				0;
96}
97#siteLogo .title * {
98	font-family:		@ini_alt_fonts;
99}
100#siteLogo .claim {
101	grid-column:		2;
102	grid-row:			2;
103	font-size:			10pt;
104}
105
106#globalTools {
107	grid-column:		2 / span 2;
108	grid-row:			1;
109	text-align:			right;
110	font-size:			10pt;
111}
112#phSearch {
113	grid-column:		2;
114	grid-row:			2;
115}
116
117#phSearch form {
118	margin:					15px;
119}
120#phSearch form>div.search-field {
121	width:					100%;
122	display:				grid;
123	grid-template-columns:	auto 20pt 20pt;
124	place-items:			stretch;
125	border:					@ini_border solid 1pt;
126	background:				@ini_background;
127	border-radius:			4pt;
128	-moz-box-shadow:		inset 0 0 3pt @ini_border;
129	-webkit-box-shadow:		inset 0 0 3pt @ini_border;
130	box-shadow:				inset 0 0 3pt @ini_border;
131}
132#phSearch form>div input {
133	grid-column:		1;
134	grid-row:			1;
135	font-family:		__code_fonts__;
136	font-size:			large;
137	padding:			2pt 0 2pt 4pt;
138	border:				transparent none 0;
139	border-radius:		3pt;
140	background-color:	transparent;
141	outline:			transparent solid 2pt;
142}
143#phSearch form>div input:focus {
144	outline-color:		@ini_focus_color;
145}
146#phSearch form>div button {
147	border:				transparent solid 1pt;
148	background:			transparent none no-repeat center;
149	background-size:	13pt;
150	color:				transparent;
151	width:				19pt;
152	border-radius:		3pt;
153	overflow:			hidden;
154	margin:				1pt 1pt 1pt 0;
155	outline:			transparent solid 2pt;
156}
157#phSearch form>div button[type=reset] {
158	background-image:	url('images/delete.svg');
159	border-right:		@ini_border solid 1pt;
160}
161#phSearch form>div button[type=submit] {
162	background-image:	url('images/search.svg');
163}
164#phSearch form>div button:hover {
165	background-color:	@ini_background_alt;
166	border-color:		@ini_border;
167}
168#phSearch form>div button:focus {
169	outline-color:		@ini_focus_color;
170	border-color:		@ini_border;
171}
172
173#phSearch form .search-popup {
174	height:				10px;
175	margin-right:		38pt;
176	overflow:			display;
177}
178
179#qsearch__out {
180	position:			relative;
181	white-space:		nowrap;
182	font-size:			small;
183	background-color:	@ini_background_site;
184}
185#qsearch__out strong {
186	display:			none;
187	padding:			2pt;
188	font-weight:		normal;
189}
190#qsearch__out ul {
191	background-color:	@ini_background_alt;
192	border:				@ini_border solid 1px;
193	max-height:			11em;
194	overflow:			hidden auto;
195}
196#qsearch__out li {
197	border-top:			@ini_border solid 1px;
198}
199#qsearch__out li a {
200	display:			block;
201	padding:			4pt 0 4pt 6pt;
202}
203
204#phTools{
205}
206#phInclude {
207	grid-column:		2 / span 2;
208	grid-row:			3;
209}
210
211#main-layout {
212	width:				100%;
213	max-width:			@ini_site_width;
214	margin:				0 auto;
215	display:			grid;
216	grid-template-columns:	@ini_sidebar_width auto;
217	place-items:		stretch;
218}
219#main-layout>#sidebar {
220	padding:			1em .25em 0 1em;
221}
222#main-layout>#sidebar .content {
223	line-height:		1.7em;
224	font-size:			small;
225}
226
227#sidebar .content p,
228#sidebar .content ul {
229}
230#sidebar .content ul {
231	list-style:			square outside;
232	padding-left:		1.25em;
233}
234#sidebar .content ul li {
235	color:				@ini_text_alt;
236}
237#sidebar .content .curid {
238	font-weight:		bold;
239}
240#sidebar h4 {
241	font-family:		@ini_alt_fonts;
242	font-size:			1rem;
243	margin:				0.5em;
244}
245
246#sidebar hr {
247    border:				0;
248    height:				1pt;
249    background:			@ini_text_alt;
250    background-image:	linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
251	margin:				.5em 1em .5em 0;
252}
253
254#sbNavigation {
255	margin-bottom:		1.5em;
256}
257#navBreadCrumbs ol {
258	list-style:			decimal outside;
259	padding-left:		2em;
260}
261
262main {
263	width:				e("calc(90% - 5px)");
264	background-color:	@ini_background;
265	color:				@ini_text;
266	line-height:		1.5em;
267	padding:			1.5em 5% .75em 5%;
268	border:				@ini_border solid 1px;
269	-moz-box-shadow:	2px 2px 3px 2px #DDD;
270	-webkit-box-shadow:	2px 2px 3px 2px #DDD;
271	box-shadow:			2px 2px 3px 2px #DDD;
272}
273#navYouAreHere {
274	display:			flex;
275	flex-flow:			row nowrap;
276	position:			relative;
277	top:				0;
278	left:				0;
279	height:				16pt;
280	overflow:			hidden;
281	white-space:		nowrap;
282}
283#navYouAreHere h4 {
284	display:		none /*inline-block */;
285	font-family:	@ini_default_fonts;
286	font-weight:	normal;
287	font-size:		small;
288	line-height:	1.5em;
289	margin:			0 .5em 0 0;
290}
291
292#navYouAreHere ol {
293	list-style:			none inside;
294	display:			flex;
295	line-height:		1.5em;
296	height:				100pt;
297	padding-left:		0;
298	margin:				0 2pt 0 0;
299	font-size:			small;
300	overflow:			scroll hidden;
301}
302#navYouAreHere ol li {
303	display:			inline;
304	margin-bottom:		0;
305}
306#navYouAreHere ol li.home {
307	min-width:		14px;
308	overflow:		hidden;
309}
310#navYouAreHere ol li .curid {
311	display:		none;
312}
313
314#navYouAreHere ol li:before {
315	content:		'\25B8';
316	padding:		0 2pt;
317	color:			@ini_text_alt;
318}
319#navYouAreHere ol li.home::before {
320	content:		'';
321	padding:		0;
322}
323#navYouAreHere ol li.home a {
324	display:		inline-block;
325	width:			14px;
326	overflow:		hidden;
327}
328#navYouAreHere ol li.home a::before {
329	content:		' ';
330	display:		inline-block;
331	width:			14px;
332	height:			1em;
333	background:		transparent url('images/home.svg') no-repeat left center;
334}
335
336body.home #navYouAreHere {
337	display:		none;
338}
339
340main>footer {
341	margin-top:			2em;
342	text-align:			right;
343}
344main>footer p.docInfo {
345	display:			inline-block;
346	border-top:			@ini_separator solid 1px;
347	padding-top:		.5em;
348	padding-left:		5%;
349	font-size:			small;
350	color:				@ini_text_alt;
351}
352main>footer p.docInfo .editorname {
353	display:			inline-block;
354	width:				1.2em;
355	height:				1.2em;
356	vertical-align:		text-bottom;
357	overflow:			hidden;
358	border:				@ini_text_alt solid 1px;
359	border-radius:		.6em;
360}
361main>footer p.docInfo .editorname:focus {
362	display:			contents;
363	outline:			@ini_focus_color solid 2px;
364}
365main>footer p.docInfo .editorname::before {
366	display:			inline-block;
367	content:			' ';
368	width:				1.2em;
369	height:				1.4em;
370	background:			transparent url('images/user.svg') no-repeat center;
371	background-size:	1em;
372}
373main>footer p.docInfo .editorname:focus::before {
374	display:			none;
375}
376
377/* Table of Contents */
378#dw__toc {
379	clear:				both;
380	float:				right;
381    width:				auto;
382    max-width:			@ini_sidebar_width;
383	background-color:	transparent;
384	line-height:		1.5em;
385}
386#dw__toc ol {
387	list-style:			none inside;
388	padding-left:		.5em;
389	margin:				0;
390}
391#dw__toc>div {
392	padding:			0 0 .5em .25em;
393	border-left:		@ini_border solid 1pt;
394}
395#dw__toc ol li {
396	font-size:			small;
397	text-indent:		-1em;
398	padding-left:		1em;
399	line-height:		1.25em;
400	margin:				.25em 0;
401}
402#dw__toc h3 {
403	margin:				0;
404    width:				@ini_sidebar_width;
405	font-family:		@ini_default_fonts;
406	font-size:			small;
407	font-weight:		bold;
408	line-height:		1.5em;
409	border-left:		@ini_border solid 1pt;
410}
411#dw__toc h3.closed {
412	font-weight:		normal;
413	width:				auto;
414}
415#dw__toc h3 strong {
416	display:			inline-block;
417	width:				1.5em;
418	line-height:		1em;
419	text-align:			center;
420	color:				@ini_text_alt;
421}
422
423/* edit buttons */
424main .secedit {
425    float:				right;
426    margin-top:			-22pt;
427	line-height:		0;
428}
429main .secedit button {
430	border:				@ini_border solid 1pt;
431	background-color:	transparent;
432	color:				transparent;
433	width:				20pt;
434	height:				20pt;
435	border-radius:		50%;
436	cursor:				pointer;
437}
438main .secedit button::before {
439	content:			' ';
440	display:			inline-block;
441	width:				13pt;
442	height:				13pt;
443	padding:			2pt;
444	background:			transparent url('images/edit.svg') no-repeat center;
445	background-size:	10pt;
446}
447main .secedit button:hover {
448	background-color:	@ini_highlight;
449	border:				@ini_text_alt solid 1pt;
450}
451main .secedit button:focus {
452	background-color:	@ini_highlight;
453	border:				@ini_focus_color solid 2px;
454	outline:			transparent none 0;
455}
456main .secedit button:hover::before {
457}
458
459#footer-layout {
460	padding-top:		1.5em;
461}
462#footer-layout>footer {
463	width:				100%;
464	max-width:			@ini_site_width;
465	margin:				0 auto;
466	display:			grid;
467	grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
468	grid-template-rows:	auto auto;
469	grid-gap:			6pt;
470	align-items:		stretch;
471}
472#footer-layout>footer .ftSection {
473	padding-left:		1em;
474}
475#footer-layout>footer .ftSection ul {
476	list-style:			none inside;
477	padding-left:		.5em;
478}
479#footer-layout>footer .ftSection ul li {
480	margin-bottom:		.5em;
481	font-size:			small;
482}
483#footer-layout>footer h4 {
484	color:				@ini_headlines;
485	margin:				0 0 1em 0;
486	font-family:		@ini_alt_fonts;
487	font-size:			1rem;
488}
489
490#footer-layout>footer #ftMobileTools>* {
491	display:			none;
492}
493
494#ftLicenseButtons {
495	grid-row:			2;
496	grid-column:		2 / span 3;
497	text-align:			center;
498	font-size:			small;
499	padding-top:		1em;
500}
501#ftLicenseButtons hr {
502    border:				0;
503    height:				1pt;
504    background:			#333;
505    background-image:	linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
506}
507#ftLicenseButtons p.license {
508	margin:				.5em 0 1em 0;
509	font-size:			small;
510	color:				@ini_text_alt;
511}
512#ftLicenseButtons p.license bdi {
513	display:			block;
514	width:				100%;
515}
516
517/* narrow tablet sizes */
518@media all and (max-width: @ini_tablet_width) {
519	#header-layout>header {
520		margin:				0;
521		grid-template-columns:	auto;
522		grid-template-rows:		auto auto auto auto;
523	}
524	#header-layout>header #siteLogo {
525		grid-column:		1;
526		grid-row:			1;
527	}
528	#header-layout>header #globalTools {
529		grid-row:			2;
530		grid-column:		1 ;
531	}
532	#header-layout>header #phSearch {
533		grid-row:			3;
534		grid-column:		1;
535	}
536	#main-layout {
537		margin:				0;
538		grid-template-columns:	auto;
539		grid-template-rows:	auto auto;
540	}
541	main {
542		width:			auto;
543		border-width:	1px 0;
544		box-shadow:		0 0 0 0 transparent;
545	}
546
547	#footer-layout>footer {
548		grid-template-columns: 12pt 1fr 1fr 1fr;
549	}
550}