xref: /template/ad-hominem/css/content.less (revision 2bc6d755e867f7b8378520b4bc35d951242eee58) 
1/**
2 * This contains the content styling
3 * @author Sascha Leib <sascha@leib.be>
4 */
5
6main p,
7main blockquote,
8main div.table {
9	margin-bottom:	1em;
10}
11
12/* headlines: */
13main h1, main h2, main h3, main h4, main h5, main h6 {
14	font-family:	@ini_alt_fonts;
15	color:			@ini_headlines;
16	margin:			1em 0 1em 0;
17	line-height:	1.1em;
18}
19
20main h1 { font-size: 2em; }
21main h2 { font-size: 1.5em; }
22main h3 { font-size: 1.125em; }
23main h4 { font-size: 1em; }
24main h5 { font-size: .875em; }
25main h6 { font-size: .75em; }
26
27main h1 *, main h2 *, main h3 *, main h4 *, main h5 *, main h6 * {
28	font-family:	inherit;
29	font-size:		inherit;
30	color:			inherit;
31	margin:			inherit;
32	line-height:	inherit;
33}
34
35/* on the homepage only, reduce the H1 top margin: */
36body.home h1:first-child { margin-top: .5em; }
37
38/* make strike-through and underline more useful! */
39main u {
40	-webkit-text-decoration-color: #F30;
41	-webkit-text-decoration-line: underline;
42	-webkit-text-decoration-style: wavy;
43	-webkit-text-decoration-thickness: .7pt;
44	text-decoration: underline #F30 wavy .7pt;
45}
46main s {
47	-webkit-text-decoration-color: rgba(255,0,0,.5);
48	-webkit-text-decoration-line: line-through;
49	-webkit-text-decoration-style: solid;
50	-webkit-text-decoration-thickness: 1pt;
51	text-decoration: line-through rgba(255,0,0,.5) solid 1pt;
52}
53
54/* lists: */
55main ul, main ol {
56	margin:			0 2em 1em 1em;
57	padding-left:	1.75em;
58}
59main ul {
60	list-style:		square outside;
61}
62main ol {
63	list-style:		decimal outside;
64}
65main li {
66}
67main li::marker {
68	color:			#666;
69}
70
71main ul ul, main ul ol,
72main ol ul, main ol ol {
73	margin-bottom:		0;
74	padding-left:		.25em;
75}
76
77
78/* horizontal rules */
79main hr {
80	border:				#666 solid 0;
81	border-top-width:	1pt;
82	height:				0;
83	margin:				3pt 0;
84}
85
86main tt, main blockquote tt,
87main pre, main pre *,
88main code, main blockquote code {
89	font-family:	@ini_mono_fonts;
90}
91main code, main blockquote code {
92	border:			@ini_border solid 1px;
93	border-radius:	3pt;
94	padding:		0 2pt;
95}
96
97/* quotes: */
98main blockquote {
99	border-left:	@ini_blockquote solid .4em;
100	border-radius:	.5em;
101	padding:		.25em 0 .25em .75em;
102	margin:			0 2em 1em 1em;
103	font-family:	@ini_alt_fonts;
104	font-size:		1.1rem;
105}
106main blockquote * {
107	font-family:	@ini_alt_fonts;
108	font-size:		1.1rem;
109}
110
111main svg {
112	display:			block;
113	fill-rule:			evenodd;
114	clip-rule:			evenodd;
115	stroke-linejoin:	round;
116	stroke-miterlimit:	1.5;
117}
118main svg.math {
119	margin-left:		15px
120}
121
122/*  tables */
123main div.table {
124    overflow-x:			auto;
125}
126
127main table {
128    border-collapse:	collapse;
129    empty-cells:		show;
130    border-spacing:		0;
131	font-size:			smaller;
132    border:				1px solid @ini_border;
133	margin-bottom:		1em;
134}
135
136main table.inline {
137    min-width:			50%;
138}
139
140main table th,
141main table td {
142	padding:			.5em .3em;
143	vertical-align:		top;
144	border:				1px solid @ini_border;
145	line-height:		1.25em;
146}
147main table th {
148	font-weight:		bold;
149	background-color:	@ini_background_alt;
150	text-align:			left;
151}
152
153main table.inline tr:hover td {
154    background-color:	@ini_background_alt;
155}
156
157main table.inline tr:hover th {
158    background-color:	@ini_border;
159}
160
161/* asides */
162main aside {
163	width:			50%;
164	max-width:		220px;
165	min-width:		150px;
166	float:			right;
167	text-align:		center;
168	font-size:		smaller;
169	margin-left:	.5em;
170}
171main aside footer {
172	line-height:	1.1em;
173}
174
175/* images */
176main img {
177	max-width:		100%;
178	height:			auto;
179}
180
181/* tablet break point: */
182@media (max-width: @ini_tablet_width) {
183
184	/* use hyphenation rules */
185	main p {
186		hyphens: auto;
187		-webkit-hyphens: auto;
188		-moz-hyphens: auto;
189		-ms-hyphens: auto;
190		hyphenate-limit-chars: 6 2 3;
191		-ms-hyphenate-limit-chars: 6 2 3;
192		-webkit-hyphenate-limit-before: 2;
193		-webkit-hyphenate-limit-after: 3;
194		hyphenate-limit-lines: 3;
195		-ms-hyphenate-limit-lines: 3;
196	}
197}
198
199/* phone break point: */
200@media (max-width: @ini_phone_width) {
201
202	.nophone {
203		display: none !important;
204	}
205
206	main aside {
207		width:			100%;
208		max-width:		initial;
209		float:			none;
210		margin-left:	0;
211	}
212}
213
214/* dark mode overrides */
215@media (prefers-color-scheme: dark) {
216	body.darkmode main h1, body.darkmode main h2,
217	body.darkmode main h3, body.darkmode main h4,
218	body.darkmode main h5, body.darkmode main h6 { color: @ini_headlines_dark; }
219	body.darkmode main table { border-color: @ini_border_dark; }
220	body.darkmode main table th { background-color: rgba(255,255,255,0.05); }
221	body.darkmode main table.inline tr:hover td { background-color: rgba(255,255,255,0.1); }
222	body.darkmode main code, main blockquote code { border-color: @ini_border_dark; }
223	body.darkmode main table.inline tr:hover th { background-color: @ini_border_dark; }
224	body.darkmode main blockquote { border-left-color: @ini_blockquote_dark }
225}
226
227