source: at-w96k/public/css/custom.css@ 7e72119

Last change on this file since 7e72119 was 7e72119, checked in by Mikhail Kirillov <w96k@…>, on Jul 17, 2022 at 11:43:37 AM

Add border to toc

  • Property mode set to 100644
File size: 6.5 KB
Line 
1body {
2 padding: 0 1em 1em 1em;
3 background: #f0f0f0;
4}
5
6article,
7#footnotes {
8 max-width: calc(60ch + 4em);
9 margin: var(--universal-padding);
10 padding: 1em;
11 background: #fefefe;
12 box-shadow: 0 2px 2px rgba(0,0,0,.35);
13 position: relative;
14 border-radius: var(--universal-border-radius);
15 border: 1px solid #cfcfcf;
16}
17
18article p {
19 word-break: break-word;
20 hyphens: auto;
21 /* text-align: justify; */
22}
23
24.footdef {
25 margin-bottom: 0;
26}
27
28article h2 {
29 margin-top: 0;
30 padding: 0;
31}
32
33.navbar {
34 border: 0;
35 padding: 0 calc(var(--universal-padding) * 2.5);
36 position: relative;
37 top: 1em;
38 z-index: 999;
39}
40
41.navbar .button {
42 text-transform: none;
43 background: #fefefe;
44 box-shadow: 0 -3px 0 rgba(0,0,0,.15), 1px -1px 0px rgba(0,0,0,.15), -1px -1px 0px rgba(0,0,0,.15);
45 border-radius: 0.15em 0.15em 0 0;
46 text-decoration: underline;
47 color: var(--a-link-color);
48 padding: 4px 12px;
49 margin: 6px;
50}
51
52/* 16:9 */
53.video {
54 padding-top: 56.25%;
55 position: relative;
56 width: calc(100% - 1em);
57}
58
59iframe {
60 width: 100%;
61 min-height: 445px;
62 top: 0;
63 left: 0;
64 bottom: 0;
65 right: 0;
66}
67
68.cover {
69 margin: 0.5em 0;
70 border: 1px solid rgba(0,0,0,.3);
71 border-radius: 0.1em;
72}
73
74#youmu {
75 position: relative;
76 top: 1em;
77 margin-bottom: -0.5em;
78 max-width: 400px;
79 filter: drop-shadow(0 12px 4px rgba(0,0,0,.25));
80}
81
82#preamble {
83 max-width: calc(60ch + 6em);
84 margin: var(--universal-margin);
85}
86
87#postamble {
88 margin: var(--universal-margin);
89 max-width: calc(60ch + 7.75em);
90}
91
92#meta p {
93 text-align: right;
94}
95
96#copyright p {
97
98}
99
100@media screen and (max-width: 768px) {
101 #postamble, #meta {
102 text-align: center;
103 }
104}
105
106hr {
107 background: rgba(0,0,0,.05) !important;
108 height: 0.5rem !important;
109 margin: 1px !important;
110}
111
112@media screen and (max-width: 120ch) {
113 #table-of-contents {
114 display: none !important;
115 }
116}
117
118#table-of-contents {
119 display: block;
120 z-index: 1050;
121 font-size: 12pt;
122 position: fixed;
123 left: 75ch;
124 top: calc(var(--universal-margin) + 3.9rem);
125 background: #fefefe;
126 line-height: 12pt;
127 box-shadow: 0 2px 2px rgba(0,0,0,.35);
128 max-height: calc(100% - 2 * (var(--universal-margin) + 0.5em) - 9em);
129 overflow: auto;
130 max-width: 30ch;
131 border-radius: var(--universal-border-radius);
132 border: 1px solid #cfcfcf;
133}
134
135#table-of-contents * {
136 padding: none;
137}
138
139#table-of-contents h2 {
140 font-size: 13pt;
141 margin: var(--universal-margin);
142 margin-top: calc(2 * var(--universal-margin));
143 border: 0;
144 font-weight: 400;
145 padding: .05em .5em;
146}
147
148#text-table-of-contents ul {
149 margin: 0 0 0 1em;
150}
151
152#text-table-of-contents > ul {
153 margin: 0 1em 0 2em;
154}
155
156#text-table-of-contents ul li {
157 font-size: 11pt;
158 width: 100%;
159}
160
161#table-of-contents #text-table-of-contents {
162 display: block;
163 text-align: left;
164 max-width: 35ch;
165}
166
167#table-of-contents li {
168 clear:both
169}
170
171.licenses {
172 text-align: center;
173 margin-top: 0.3em !important;
174}
175
176.licenses a:not(:first-child) {
177 margin-left: 0.5em;
178}
179
180.inline li {
181 display: inline-flex;
182}
183
184table {
185 overflow-x: hidden !important;
186}
187
188table th, table td {
189 padding: var(--universal-padding);
190}
191
192.org-left {
193 text-align: left !important;
194}
195
196dl {
197 padding: 0 calc(var(--universal-padding) + 1em);
198}
199
200nav * {
201 padding: 0.1em 0;
202}
203
204.abstract {
205 background: var(--nav-hover-back-color);
206 border-radius: 0.05em;
207 margin: 0 -1em;
208 padding: 0.25em 1em;
209}
210
211pre {
212 border: 1px solid #ccc;
213 box-shadow: none;
214 padding: 8pt;
215 overflow: auto;
216 margin: var(--universal-margin);
217 border-radius: var(--universal-border-radius);
218}
219
220figure {
221 text-align: center;
222}
223
224.org-svg {
225 width: auto;
226 max-width: 100%;
227}
228
229.asciicast {
230 text-align: center;
231}
232
233.iuse {
234
235}
236
237.iuse img {
238 height: 3em;
239}
240
241/* Style for WEBRING */
242.org-webring .org-webring-articles {
243 display: flex;
244 flex-flow: row wrap;
245}
246.org-webring .org-webring-article-title {
247 font-size: 0.1em !important;
248 padding: 0;
249 margin: 0 5em 0 9em;
250 border-radius: 0.25em;
251 max-height: 40ch;
252}
253.org-webring .org-webring-article {
254 flex: 1 1 auto;
255 flex-basis: 40%;
256 display: flex;
257 flex-direction: column;
258 margin: 0.5em;
259 transition: 0.3s;
260 opacity: 1;
261 overflow: hidden;
262 border-left: 3px solid rgba(0,0,0,.35);
263}
264.org-webring .org-webring-article:hover {
265 opacity: 1;
266}
267
268.org-webring .org-webring-article-pinned {
269 position: relative;
270 flex: 1 1 auto;
271 flex-basis: 100%;
272 display: flex;
273 flex-direction: column;
274 margin: 0 0.5rem;
275 padding: 0.5rem;
276 border: 0.15rem black solid;
277 border-color: black;
278 transition: 0.3s;
279 opacity: 1;
280}
281.org-webring .org-webring-article-pinned:hover {
282 opacity: 1;
283 background-color: #fefefe;
284}
285.org-webring .org-webring-article-pinned-symbol{
286 position: absolute;
287 top: 0.2rem;
288 right: 0.5rem;
289}
290.org-webring .org-webring-article-summary {
291 font-size: 0.8rem;
292 flex: 1 1 0;
293 display: none;
294}
295.org-webring .org-webring-attribution {
296 text-align: right;
297 font-size: 0.8rem;
298 padding-right: 0.5em;
299 color: #666;
300 display: none;
301}
302.org-webring .org-webring-article-date {
303 text-align: center;
304 display: none;
305}
306.org-webring .org-webring-article-source {
307 text-align: center;
308 display: none;
309}
310.org-webring .org-webring-timestamp {
311 color: #666;
312 display: none;
313}
314@media screen and (max-width: 600px) {
315 .org-webring .org-webring-articles {
316 display: flex;
317 flex-direction: column;
318 }
319}
320@media screen and (max-width: 600px) {
321 .org-webring .org-webring-article {
322 flex: 1 1 auto;
323 flex-basis: 100%;
324 display: flex;
325 flex-direction: column;
326 margin: 0 0.5rem;
327 margin-bottom: 0.5rem;
328 }
329 .org-webring .org-webring-article-pinned {
330 position: relative;
331 flex: 1 1 auto;
332 flex-basis: 100%;
333 display: flex;
334 flex-direction: column;
335 margin: 0 0.5rem;
336 margin-bottom: 0.5rem;
337 border: 0.15rem black solid;
338 border-color: black;
339 transition: 0.3s;
340 opacity: 1;
341 }
342}
343
344.org-webring > h4 {
345 display: none;
346}
347
348video {
349 max-width: 100%;
350 max-height: 40em;
351 display: block;
352 margin: 0 auto;
353}
354
355#content {
356 margin: 0 !important;
357}
358
359audio {
360 display: block;
361 width: calc(100% - var(--universal-padding) * 2);
362 margin: 0 var(--universal-padding);
363}
364
365ul ul {
366 margin: 0;
367}
368
369table tr td:nth-child(1) {
370 width: 20%;
371}
Note: See TracBrowser for help on using the repository browser.