1 | body {
|
---|
2 | padding: 1em;
|
---|
3 | }
|
---|
4 |
|
---|
5 | article {
|
---|
6 | max-width: calc(80ch + 4em);
|
---|
7 | border-radius: 0.em;
|
---|
8 | margin: 0 var(--universal-padding);
|
---|
9 | padding: 1em;
|
---|
10 | background: #fefefe;
|
---|
11 | box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
---|
12 | position: relative;
|
---|
13 | }
|
---|
14 |
|
---|
15 | article h1:first-child,
|
---|
16 | article h2:first-child,
|
---|
17 | article h3:first-child,
|
---|
18 | article h4:first-child,
|
---|
19 | article h5:first-child,
|
---|
20 | article h6:first-child {
|
---|
21 | margin-top: 0;
|
---|
22 | padding: 0;
|
---|
23 | }
|
---|
24 |
|
---|
25 | .navbar {
|
---|
26 | background: #fefefe;
|
---|
27 | border: 0;
|
---|
28 | }
|
---|
29 |
|
---|
30 | .navbar .button {
|
---|
31 | background: #fefefe;
|
---|
32 | text-transform: none;
|
---|
33 | }
|
---|
34 |
|
---|
35 | /* 16:9 */
|
---|
36 | .video {
|
---|
37 | padding-top: 56.25%;
|
---|
38 | position: relative;
|
---|
39 | width: calc(100% - 1em);
|
---|
40 | }
|
---|
41 |
|
---|
42 | iframe {
|
---|
43 | width: 100%;
|
---|
44 | min-height: 445px;
|
---|
45 | top: 0;
|
---|
46 | left: 0;
|
---|
47 | bottom: 0;
|
---|
48 | right: 0;
|
---|
49 | }
|
---|
50 |
|
---|
51 | .cover {
|
---|
52 | margin: 0.5em 0;
|
---|
53 | border: 1px solid rgba(0,0,0,.3);
|
---|
54 | border-radius: 0.1em;
|
---|
55 | }
|
---|
56 |
|
---|
57 | #youmu {
|
---|
58 | position: relative;
|
---|
59 | top: 1em;
|
---|
60 | margin-bottom: -0.5em;
|
---|
61 | max-width: 400px;
|
---|
62 | filter: drop-shadow(0 12px 4px rgba(0,0,0,.25));
|
---|
63 | }
|
---|
64 |
|
---|
65 | #preamble {
|
---|
66 | max-width: calc(80ch + 6em);
|
---|
67 | margin: var(--universal-margin);
|
---|
68 | box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
---|
69 | }
|
---|
70 |
|
---|
71 | #postamble {
|
---|
72 | margin: var(--universal-margin);
|
---|
73 | max-width: calc(80ch + 6em);
|
---|
74 | }
|
---|
75 |
|
---|
76 | #meta {
|
---|
77 | text-align: right;
|
---|
78 | }
|
---|
79 |
|
---|
80 | #copyright {
|
---|
81 | text-align: center;
|
---|
82 | }
|
---|
83 |
|
---|
84 | @media screen and (max-width: 800px) {
|
---|
85 | #postamble, #meta {
|
---|
86 | text-align: center;
|
---|
87 | }
|
---|
88 | }
|
---|
89 |
|
---|
90 | hr {
|
---|
91 | background: rgba(0,0,0,.05) !important;
|
---|
92 | height: 0.5rem !important;
|
---|
93 | margin: 1px !important;
|
---|
94 | }
|
---|
95 |
|
---|
96 | #table-of-contents {
|
---|
97 | z-index: 1050;
|
---|
98 | font-size: 10pt;
|
---|
99 | position: fixed;
|
---|
100 | right: calc(var(--universal-margin) + 0.5em);
|
---|
101 | top: calc(var(--universal-margin) + 0.5em);
|
---|
102 | background: #fefefe;
|
---|
103 | line-height: 12pt;
|
---|
104 | box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
---|
105 | border: none;
|
---|
106 | max-height: 80%;
|
---|
107 | overflow: auto;
|
---|
108 | }
|
---|
109 |
|
---|
110 | #table-of-contents * {
|
---|
111 | padding: none;
|
---|
112 | }
|
---|
113 |
|
---|
114 | #table-of-contents h2 {
|
---|
115 | font-size: 13pt;
|
---|
116 | border: 0;
|
---|
117 | font-weight: 400;
|
---|
118 | padding: .05em .5em;
|
---|
119 | }
|
---|
120 |
|
---|
121 | #text-table-of-contents ul {
|
---|
122 | margin: 0 1em;
|
---|
123 | }
|
---|
124 |
|
---|
125 | #text-table-of-contents ul li {
|
---|
126 | font-size: 11pt;
|
---|
127 | width: 100%;
|
---|
128 | }
|
---|
129 |
|
---|
130 | #table-of-contents #text-table-of-contents {
|
---|
131 | display: none;
|
---|
132 | text-align: left;
|
---|
133 | }
|
---|
134 |
|
---|
135 | #table-of-contents:hover #text-table-of-contents {
|
---|
136 | display:block;
|
---|
137 | padding: none;
|
---|
138 | margin: 0;
|
---|
139 | padding: 0;
|
---|
140 | }
|
---|
141 |
|
---|
142 | #table-of-contents li {
|
---|
143 | clear:both
|
---|
144 | }
|
---|
145 |
|
---|
146 | .licenses {
|
---|
147 | margin-top: 0.75em !important;
|
---|
148 | }
|
---|
149 |
|
---|
150 | .licenses a:not(:first-child) {
|
---|
151 | margin-left: 0.5em;
|
---|
152 | }
|
---|
153 |
|
---|
154 | .inline li {
|
---|
155 | display: inline-flex;
|
---|
156 | }
|
---|
157 |
|
---|
158 | table th, table td {
|
---|
159 | padding: var(--universal-padding);
|
---|
160 | }
|
---|
161 |
|
---|
162 | dl {
|
---|
163 | padding: 0 var(--universal-padding);
|
---|
164 | }
|
---|