]> git.r.bdr.sh - rbdr/r.bdr.sh/blame - css/style.css
Update colors
[rbdr/r.bdr.sh] / css / style.css
CommitLineData
20d294a5
RBR
1* {
2 padding: 0;
3 margin: 0
4}
54345095 5html { scroll-behavior: smooth }
554c7e00 6body {
c21740be 7 font-size: 1em;
cb935595 8 font-family: "Hoefler Text", "Times New Roman", serif;
1203ab0c 9 font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1;
ea3c62fe
RBR
10 line-height: 1.6;
11 letter-spacing: 0.02em;
20d294a5 12 padding: 2em;
554c7e00 13}
a94ee76a
RBR
14@supports (-webkit-touch-callout: none) {
15 body {
16 font-size: 1em;
17 font: -apple-system-body;
18 font-family: "Hoefler Text", "Times New Roman", serif;
19 font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1;
20 line-height: 1.6;
21 letter-spacing: 0.02em;
22 padding: 2em;
23 }
24}
b28d5c2c
RBR
25aside {
26 clear: both;
20d294a5 27 padding: 2em 0;
b28d5c2c 28}
7629ba8e 29::selection {
7629ba8e 30 background-color: #e8e8e8;
69c55f3c 31 color: #00f;
7629ba8e 32}
271fa561 33.h2 { margin-top: 1em }
f752d89a 34@media only screen and (min-width: 500px) {
54345095 35 body { overflow-x: auto }
69c55f3c
RBR
36 .columned {
37 width: max-content;
38
39 .h2:not(:only-child) {
40 float: left;
41 margin: 0 60px 0 0;
42
43 h2 { max-width: 14.6em }
44 .h3,
45 li,
46 p { max-width: 24em }
47 pre { max-width: 25em }
48 }
49
50 .h2:first-of-type {
51 columns: 3;
52 width: 24em;
53
69c55f3c
RBR
54 h2:empty {display: none}
55 h2,
56 pre,
57 ul,
58 p:not(.a) { column-span: all }
59 p { break-after: column }
60 p.a { break-after: avoid }
61 }
62 }
f752d89a
RBR
63}
64
0d649c62 65.a { margin: 0 0.3em }
69c55f3c
RBR
66pre {
67 background-color: #eee;
68 font-family: courier, monospace;
69 font-size: 0.875em;
1949f067 70 max-width: 55em;
69c55f3c
RBR
71 overflow-x: auto;
72 padding: 1em;
73}
20d294a5 74pre[role="img"] { display: none }
c1bc1a5c 75blockquote, p, article > div {
c1bc1a5c
RBR
76 max-width: 45em
77}
f752d89a
RBR
78blockquote {
79 border-left: 4px solid #ccc;
80 padding-left: 10px;
81}
f752d89a 82br { display: none }
20d294a5
RBR
83h1, h2, h3 {
84 font-family: "Avenir Next";
85 font-weight: 900
86}
11f7c101 87h1 { font-size: 2em }
20d294a5
RBR
88h3 {
89 font-weight: 600;
90 margin-top: 1em
91}
92
020036ca
RBR
93h2, h3, a { color: #00f }
94[data-title="/index.html"] {
020036ca 95 .h2:nth-of-type(n+5):nth-of-type(-n+6) {
8f356535 96 h2, h3, a { color: #EE0700 }
020036ca 97 }
20d294a5 98
020036ca
RBR
99 .h2:nth-of-type(n+7):nth-of-type(-n+9) {
100 h2, h3, a { color: #6A5ACD }
101 }
20d294a5 102
020036ca
RBR
103 .h2:nth-of-type(10) {
104 h2, h3, a { color: #A76905 }
105 }
20d294a5 106
020036ca 107 .h2:nth-of-type(11) {
8f356535 108 h2, h3, a { color: #398557 }
020036ca 109 }
20d294a5 110
020036ca
RBR
111 .h2:nth-of-type(n+12):nth-of-type(-n+16) {
112 h2, h3, a { color: #D505C6 }
113 }
20d294a5 114
020036ca
RBR
115 .h2:nth-of-type(17) {
116 h2, h3, a { color: #6A788A }
117 }
20d294a5
RBR
118}
119
120.h2 a {
121 display: inline-block;
122 padding: 0.25em 0;
123 margin: 0.25em 0;
124}
125
bd38d96a
RBR
126header { position: relative }
127main {
128 position: relative;
129 z-index: 1
130}
20d294a5
RBR
131header h1 {
132 font-size: min(7.5rem, 17vw);
133 font-weight: 900;
134 letter-spacing: -0.2em;
135 line-height: 1em;
136}
137header h1 a {
138 background: repeating-linear-gradient(
139 0deg,
140 black,
141 black 1px,
142 white 1px,
143 white 2px
144 );
145 background-clip: text;
146 color: transparent;
147 display: inline-block;
148 padding-right: 0.2em;
149 text-decoration: none;
150 -webkit-text-stroke: 1px #000;
151}
554c7e00 152
3b6787e4 153canvas {
36626ad1 154 background-color: #000;
ad06827e 155 border: 1px solid #000;
20d294a5 156 display: inline-block;
69c55f3c
RBR
157 height: 64px;
158 width: 64px;
967d51a0
BB
159}
160
21b1c71d 161@media (prefers-color-scheme: dark) {
b44cad65 162 body {
554c7e00 163 background: #000;
69c55f3c 164 color: #fff;
b44cad65 165 }
36626ad1
RBR
166 canvas {
167 background-color: #fff;
ad06827e 168 border: 1px solid #fff;
36626ad1 169 }
020036ca
RBR
170 h2, h3, a { color: #5dc1fd }
171 [data-title="/index.html"] .h2:nth-of-type(n+7):nth-of-type(-n+9) {
20d294a5
RBR
172 h2, h3, a { color: #675CFB }
173 }
54345095 174 pre { background-color: #222 }
20d294a5
RBR
175 header h1 a {
176 -webkit-text-stroke: 1px #fff;
177 }
bb31ec9c 178}