trnck.dev
blog.trnck.dev
1---
2---
3
4@import url("https://unpkg.com/primer@11.0.0/build/build.css");
5@import "highlight-syntax";
6@import "article";
7
8:root {
9 --border-radius: 5px;
10 --box-shadow: 2px 2px 10px;
11 --color: #118bee;
12 --color-accent: #118bee15;
13 --color-bg: #fff;
14 --color-bg-secondary: #e9e9e9;
15 --color-secondary: #920de9;
16 --color-secondary-accent: #920de90b;
17 --color-shadow: #f4f4f4;
18 --color-text: #000;
19 --color-text-secondary: #999;
20 --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
21 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
22 --hover-brightness: 1.2;
23 --justify-important: center;
24 --justify-normal: left;
25 --line-height: 1.5;
26 --width-card: 285px;
27 --width-card-medium: 460px;
28 --width-card-wide: 800px;
29 --width-content: 1080px;
30}
31
32// If a user adds a custom font, this component will stop it from bleeding into GitHub components:
33.github-component {
34 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
35 sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
36}
37
38.repo-language-color {
39 filter: brightness(125%) !important;
40 border-radius: 50%;
41 display: inline-block;
42 height: 12px;
43 position: relative;
44 top: 2px;
45 width: 12px;
46}
47
48.emoji {
49 width: 18px;
50 height: auto;
51 vertical-align: middle;
52}
53
54.article {
55
56 h1,
57 h2,
58 h3,
59 h4,
60 .highlight {
61 margin-bottom: 16px;
62 }
63
64 blockquote {
65 color: #6a737d;
66 border-left: 2px solid #959da5;
67 padding-left: 16px;
68 margin-bottom: 16px;
69 }
70
71 ul,
72 ol {
73 padding-left: 32px;
74 margin-bottom: 16px;
75 }
76
77 li ul,
78 li ol {
79 padding-left: 16px;
80 margin-bottom: 0px;
81 }
82
83 img {
84 width: 100%;
85 height: 100%;
86 max-width: 100%;
87 display: block;
88 }
89
90 @media (min-width: 768px) {
91 img {
92 max-width: 80%;
93 }
94 }
95
96 @media (min-width: 1200px) {
97 img {
98 max-width: 60%;
99 }
100 }
101}
102
103.min-height-full {
104 min-height: 100vh;
105}
106
107h1.text-white>a:nth-child(1) {
108 text-decoration: none;
109 color: white !important;
110}
111
112table {
113 width: 100%;
114 border-collapse: collapse;
115 margin-top: 2rem;
116 margin-bottom: 2rem;
117
118 th,
119 td {
120 border: 1px solid #ddd;
121 text-align: left;
122 padding: 8px;
123 }
124
125 img {
126 width: 100%;
127 }
128}
129
130@media screen and (max-width: 600px) {
131
132 table,
133 thead,
134 tbody,
135 th,
136 td,
137 tr {
138 display: block;
139 }
140
141 thead tr {
142 position: absolute;
143 top: -9999px;
144 left: -9999px;
145 }
146
147 tr {
148 margin-bottom: 0.5rem;
149 }
150
151 td {
152 border: none;
153 border-bottom: 1px solid #ddd;
154 position: relative;
155 padding-left: 50%;
156 }
157
158 td:before {
159 position: absolute;
160 top: 6px;
161 left: 6px;
162 width: 45%;
163 padding-right: 10px;
164 white-space: nowrap;
165 content: attr(data-label);
166 }
167}
168
169@media (prefers-color-scheme: dark) {
170 table {
171 border-color: #444;
172 }
173
174 th,
175 td {
176 border-color: #444;
177 }
178
179 th {
180 background-color: #333;
181 }
182
183 tr:nth-child(even) {
184 background-color: #222;
185 }
186
187 tr:hover {
188 background-color: #444;
189 }
190
191 h1,
192 h2,
193 h3,
194 h4 {
195 color: #e4e4e4 !important;
196 }
197
198 body {
199 background-color: #444 !important;
200 color: #e4e4e4 !important;
201 }
202
203 a {
204 color: #e39777 !important;
205 }
206
207 img {
208 filter: grayscale(30%) !important;
209 }
210
211 .bg-gray-light {
212 background-color: rgb(48, 48, 48) !important;
213 }
214
215 .text-gray,
216 .text-gray-dark,
217 .text-gray-light {
218 color: #cac7c7 !important;
219 }
220
221 .border {
222 border: none !important;
223 }
224
225 .bg-white {
226 background: rgb(45, 45, 45) !important;
227 }
228
229 .octicon {
230 filter: invert(1);
231 }
232
233 .link-gray-dark,
234 .contrib-number {
235 color: #e4e4e4 !important;
236 }
237
238 .border-md-right,
239 .border-md-bottom {
240 border: none !important;
241 }
242}
243
244.twitter-timeline {
245 margin-top: 150px;
246}
247
248html {
249 content: "";
250}
251
252@media (prefers-color-scheme: light) {
253 html {
254 content: "light";
255 }
256
257 th {
258 background-color: #f2f2f2;
259 }
260}
261
262@media (prefers-color-scheme: dark) {
263 html {
264 content: "dark";
265 }
266}
267
268.lh-condensed a:hover {
269 text-decoration: none;
270}
271
272.logo:hover {
273 filter: brightness(var(--hover-brightness));
274}