xref: /template/ad-hominem/css/content.less (revision 98fa74e35999cbd96f4678cfe0e188a0128ce464) 
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: underline #F30 wavy .7pt;
41	text-decoration: underline #F30 wavy .7pt;
42}
43main s {
44	-webkit-text-decoration: line-through rgba(255,0,0,.5) solid 1pt;
45	text-decoration: line-through rgba(255,0,0,.5) solid 1pt;
46}
47
48/* lists: */
49main ul, main ol {
50	margin:			0 2em 1em 1em;
51	padding-left:	1.75em;
52}
53main ul {
54	list-style:		square outside;
55}
56main ol {
57	list-style:		decimal outside;
58}
59main li {
60}
61main li::marker {
62	color:			#666;
63}
64
65main ul ul, main ul ol,
66main ol ul, main ol ol {
67	margin-bottom:		0;
68	padding-left:		.25em;
69}
70
71
72/* horizontal rules */
73main hr {
74	border:				#666 solid 0;
75	border-top-width:	1pt;
76	height:				0;
77	margin:				3pt 0;
78}
79
80main tt, main blockquote tt,
81main pre, main pre *,
82main code, main blockquote code {
83	font-family:	@ini_mono_fonts;
84}
85main code, main blockquote code {
86	border:			@ini_border solid 1px;
87	border-radius:	3pt;
88	padding:		0 2pt;
89}
90
91/* quotes: */
92main blockquote {
93	border-left:	@ini_blockquote solid .4em;
94	border-radius:	.5em;
95	padding:		.25em 0 .25em .75em;
96	margin:			0 2em 1em 1em;
97	font-family:	@ini_alt_fonts;
98	font-size:		1.1rem;
99}
100main blockquote * {
101	font-family:	@ini_alt_fonts;
102	font-size:		1.1rem;
103}
104
105main svg {
106	display:			block;
107	fill-rule:			evenodd;
108	clip-rule:			evenodd;
109	stroke-linejoin:	round;
110	stroke-miterlimit:	1.5;
111}
112main svg.math {
113	margin-left:		15px
114}
115
116/*  tables */
117main div.table {
118    overflow-x:			auto;
119}
120
121main table {
122    border-collapse:	collapse;
123    empty-cells:		show;
124    border-spacing:		0;
125	font-size:			smaller;
126    border:				1px solid @ini_border;
127	margin-bottom:		1em;
128}
129
130main table.inline {
131    min-width:			50%;
132}
133
134main table th,
135main table td {
136	padding:			.5em .3em;
137	vertical-align:		top;
138	border:				1px solid @ini_border;
139	line-height:		1.25em;
140}
141main table th {
142	font-weight:		bold;
143	background-color:	@ini_background_alt;
144	text-align:			left;
145}
146
147main table.inline tr:hover td {
148    background-color:	@ini_background_alt;
149}
150
151main table.inline tr:hover th {
152    background-color:	@ini_border;
153}
154
155/* asides */
156main aside {
157	width:			50%;
158	max-width:		220px;
159	min-width:		150px;
160	float:			right;
161	text-align:		center;
162	font-size:		smaller;
163}
164main aside footer {
165	line-height:	1.1em;
166}
167
168/* images */
169main img {
170	max-width:		100%;
171	height:			auto;
172}
173
174/* tablet break point: */
175@media (max-width: @ini_phone_width) {
176
177	main aside {
178		width:			100%;
179		max-width:		initial;
180		float:			none;
181	}
182}
183
184/* dark mode overrides */
185@media (prefers-color-scheme: dark) {
186	body.darkmode main h1, main h2, main h3, main h4, main h5, main h6 { color: @ini_headlines_dark; }
187	body.darkmode main table { border-color: @ini_border_dark; }
188	body.darkmode main table th { background-color: rgba(255,255,255,0.05); }
189	body.darkmode main table.inline tr:hover td { background-color: rgba(255,255,255,0.1); }
190	body.darkmode main code, main blockquote code { border-color: @ini_border_dark; }
191	body.darkmode main table.inline tr:hover th { background-color: @ini_border_dark; }
192	body.darkmode main blockquote { border-left-color: @ini_blockquote_dark }
193	body.darkmode main s { -webkit-text-decoration-thickness: 1.5pt; text-decoration-thickness: 1.5pt; }
194
195}
196
197