├── README.md
├── TutCSS
├── index.html
├── style.css
└── wp.png
├── images
├── hitesh.png
├── logo-white.png
├── money.png
├── t1.png
└── yt.png
├── index.html
├── meetup
└── index.html
├── short.css
├── tutcss.css
└── tutcss.min.css
/README.md:
--------------------------------------------------------------------------------
1 | # Temp hosting for LCO.dev project
2 |
3 | [LearnCodeonline.in](https://web.learncodeonline.in)
--------------------------------------------------------------------------------
/TutCSS/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | TutCSS for teachers and code related youtubers
11 |
12 |
13 |
14 |
15 |
16 | Create Tutorials
17 |
18 | Home
19 | About Us
20 |
21 | Login with
22 |
23 | Google
24 | Github
25 |
26 |
27 |
28 |
29 |
30 |
31 | TutCSS was created with just 1 goal in mind. It should be easier to teach DOM manipulation and Javascript.
32 | Creators and youtubers should not spend a long time to write css, just create HTML elements and start
33 | teaching. It will look good right out of the box. No need to add any class or id to your html element.
34 |
35 |
36 | Get started with Javascript, it's a nice language
37 | Or you can go with python
38 | Golang seems to be a nice option
39 | Or got with classic php
40 | Download our Android app
41 | Download our iOS app
42 |
43 |
44 | Caption for image
45 |
46 | A simple code snippet to JS map
47 |
48 |
49 | const map1 = new Map();
50 |
51 | map1.set('a', 1);
52 | map1.set('b', 2);
53 | map1.set('c', 3);
54 |
55 | console.log(map1.get('a'));
56 | // expected output: 1
57 |
58 | map1.set('a', 97);
59 |
60 | console.log(map1.get('a'));
61 | // expected output: 97
62 |
63 |
64 |
65 |
66 | Maths can be very interesting
67 | Depends on teacher
68 |
69 |
70 | LearnCodeOnline
71 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis reiciendis debitis atque!
72 | Nesciunt aliquam tempore accusamus enim magni inventore aliquid a commodi laborum debitis ipsam, ipsa
73 | consequatur error harum veniam fugit nam suscipit, repudiandae ipsum distinctio saepe ea voluptatem,
74 | voluptate optio. Eaque ex enim, tempore nemo, amet nesciunt nam dolore iure eveniet delectus est
75 | consequuntur laborum praesentium nobis culpa, et aperiam natus distinctio iste temporibus! Molestiae,
76 | eaque tempore hic nam molestias reiciendis, inventore quasi expedita voluptate, accusantium non
77 | pariatur?
78 |
79 |
80 |
81 | FAQ 1 - Why Tut CSS exists?
82 | Just to make life easier for folks who create amazing tutorials
83 |
84 |
85 | FAQ 2 - When common sense will become common
86 | I don't have answer to everything.
87 |
88 |
89 |
90 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptates consectetur suscipit
91 | molestiae
92 | quod quisquam maxime eveniet fugiat aspernatur iusto incidunt ipsa atque, aut architecto placeat vel
93 | iure
94 | molestias vero reprehenderit quidem tenetur error modi nihil! Dolor voluptate rerum ipsa, odio enim
95 | consequuntur tempora aliquid quod autem earum maiores necessitatibus, accusamus adipisci esse in
96 | veritatis
97 | modi! Beatae corporis temporibus voluptatem officia nulla in quia iste repellendus obcaecati quas
98 | commodi
99 | omnis illo, illum rem fugiat dolorum est nihil tempora magni ipsa adipisci praesentium? Aliquid nobis
100 | ipsum
101 | laboriosam, rerum illo deleniti quod eaque facere veniam temporibus delectus assumenda libero doloremque
102 | perspiciatis beatae impedit minima maxime natus iste quasi itaque quam? Veritatis tenetur corporis,
103 | cumque
104 | autem sint fuga quos illo asperiores quam molestiae? Magni magnam cumque illum iusto numquam, soluta
105 | excepturi deleniti harum obcaecati distinctio, qui fuga dolor sapiente velit iste. Beatae porro atque
106 | consequuntur, officiis voluptas eaque eveniet eos minus consequatur maxime iusto doloremque dolores esse
107 | est
108 | at non modi laboriosam quo nobis quam sit iste. Voluptate aliquam eum incidunt velit ducimus voluptatum
109 | omnis odit nostrum quidem, id temporibus maxime amet consequatur cumque. Cupiditate sapiente quos rerum
110 | porro. Blanditiis eum accusamus tenetur officia ullam delectus doloribus, sed nam eius perspiciatis
111 | explicabo quos!
112 |
113 |
114 |
115 |
131 |
132 |
133 |
134 |
135 | hello_world.c: 12 Errors, 18 Warnings.
136 |
137 |
138 |
139 |
140 | Firstname
141 | Lastname
142 | Email
143 | Account link
144 |
145 |
146 |
147 | Devrim
148 | Demir
149 | devrim1demir@gmail.com
150 |
151 | LCO
152 |
153 |
154 |
155 | Enes
156 | Pehlivan
157 | enesphlvn@gmail.com
158 |
159 | PRO
160 |
161 |
162 |
163 | Osman
164 | Gültekin
165 | osmangul@gmail.com
166 |
167 | Learn
168 |
169 |
170 |
171 | Mansur
172 | Lavaş
173 | mansurlavas@gmail.com
174 |
175 | Tutorial
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | Text in a pre element
184 | is displayed in a fixed-width
185 | font, and it preserves
186 | both spaces and
187 | line breaks
188 |
189 |
190 |
191 |
192 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni odio placeat neque voluptatum harum
193 | reiciendis in fuga voluptate, ut ipsa natus ipsam laborum molestias adipisci hic et repudiandae
194 | dolores.
195 | Nostrum consequatur voluptates ipsam facere repellat pariatur eveniet perferendis, earum dolore!
196 |
197 |
198 |
199 |
200 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore sint saepe iste dignissimos cum
201 | asperiores minus voluptate nobis placeat temporibus.
202 |
203 |
204 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore sint saepe iste dignissimos cum
205 | asperiores minus voluptate nobis placeat temporibus.
206 |
207 |
208 |
213 |
214 |
215 |
--------------------------------------------------------------------------------
/TutCSS/style.css:
--------------------------------------------------------------------------------
1 | /* TutCSS for teachers
2 | - Hitesh
3 | - LearnCodeOnline.in
4 | */
5 |
6 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
7 |
8 | :root {
9 | --border-radius: 3px;
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: #FF6666;
16 | --color-secondary-accent: #920de90b;
17 | --color-shadow: #f4f4f4;
18 | --color-text: #000;
19 | --color-text-secondary: #999;
20 | --hover-brightness: 1.2;
21 | --justify-important: center;
22 | --justify-normal: left;
23 | --line-height: 1.5;
24 | --width-card: 285px;
25 | --width-card-medium: 460px;
26 | --width-card-wide: 800px;
27 | --width-content: 1080px;
28 | }
29 |
30 |
31 | @media (prefers-color-scheme: dark) {
32 | :root {
33 | --color: #1FAA59;
34 | --color-accent: #38CC77;
35 | --color-bg: #333;
36 | --color-bg-secondary: #555;
37 | --color-secondary: #E8BD0D;
38 | --color-secondary-accent: #E07C24;
39 | --color-shadow: #bbbbbb20;
40 | --color-text: #f7f7f7;
41 | --color-text-secondary: #aaa;
42 | --font-family: 'Montserrat', sans-serif;
43 |
44 | }
45 | }
46 |
47 |
48 | /* Layout */
49 | article aside {
50 | background: var(--color-secondary-accent);
51 | border-left: 8px solid var(--color-text);
52 | padding: 0.01rem 0.8rem;
53 | }
54 |
55 | body {
56 | background: var(--color-bg);
57 | color: var(--color-text);
58 | font-family: var(--font-family);
59 | line-height: var(--line-height);
60 | margin: 0;
61 | overflow-x: hidden;
62 | padding:3%;
63 | }
64 |
65 | header{
66 | background-color: var(--color-bg-secondary);
67 | max-width: 100vw;
68 | height: 4rem;
69 | display: flex;
70 | justify-content: center;
71 | align-items: center;
72 | font-size: 1.5rem;
73 | font-weight: bold
74 |
75 | }
76 |
77 |
78 | main {
79 | margin: 0 auto;
80 | max-width: var(--width-content);
81 | padding: 3rem 1rem;
82 |
83 | }
84 |
85 | footer{
86 | margin-top: 2rem;
87 | background-color: var(--color-bg-secondary);
88 | padding: .1rem;
89 | border-top-style: solid;
90 | border-top-color: var(--color-text-secondary);
91 | border-top-width: 2px;
92 | padding: .2rem 1rem;
93 |
94 | }
95 |
96 | hr {
97 | background-color: var(--color-secondary);
98 | border: none;
99 | height: 1px;
100 | margin: 4rem 0;
101 | width: 100%;
102 | }
103 |
104 | section {
105 | display: flex;
106 | flex-wrap: wrap;
107 | justify-content: var(--justify-important);
108 | }
109 |
110 | section img,
111 | article img {
112 | max-width: 100%;
113 | border-radius: .4rem;
114 | margin: .4rem .2rem;
115 | }
116 |
117 | section pre {
118 | overflow: auto;
119 | color: var(--color-accent);
120 | }
121 |
122 | section aside {
123 | border: 1px solid var(--color-bg-secondary);
124 | border-radius: var(--border-radius);
125 | box-shadow: var(--box-shadow) var(--color-shadow);
126 | margin: 1rem;
127 | padding: 1.25rem;
128 | width: var(--width-card);
129 | }
130 |
131 | section aside:hover {
132 | box-shadow: var(--box-shadow) var(--color-bg-secondary);
133 | background-color: var(--color-bg-secondary);
134 | }
135 |
136 | [hidden] {
137 | display: none;
138 | }
139 |
140 | /* Headers */
141 | article header,
142 | div header,
143 | main header {
144 | padding-top: 0;
145 | }
146 |
147 | header {
148 | text-align: var(--justify-important);
149 | }
150 |
151 | header a b,
152 | header a em,
153 | header a i,
154 | header a strong {
155 | margin-left: 0.5rem;
156 | margin-right: 0.5rem;
157 | }
158 |
159 | header nav img {
160 | margin: 1rem 0;
161 | }
162 |
163 | section header {
164 | padding-top: 0;
165 | width: 100%;
166 | }
167 |
168 | /* Nav */
169 | nav {
170 | align-items: center;
171 | display: flex;
172 | font-weight: bold;
173 | justify-content: space-between;
174 | margin-bottom: 3rem;
175 | background-color: var(--color-text-secondary);
176 | padding: 0 0.5rem;
177 | }
178 |
179 | nav ul {
180 | list-style: none;
181 | padding: 0;
182 | }
183 |
184 | nav ul li {
185 | display: inline-block;
186 | margin: 0 0.5rem;
187 | position: relative;
188 | text-align: left;
189 | background-color: var(--color);
190 | padding: .2rem .8rem;
191 | border-radius: 3px;
192 |
193 | }
194 |
195 | /* Nav Dropdown */
196 | nav ul li:hover ul {
197 | display: block;
198 | }
199 |
200 | nav ul li ul {
201 | background: var(--color-bg);
202 | border: 1px solid var(--color-bg-secondary);
203 | border-radius: var(--border-radius);
204 | box-shadow: var(--box-shadow) var(--color-shadow);
205 | display: none;
206 | height: auto;
207 | left: -2px;
208 | padding: .5rem 1rem;
209 | position: absolute;
210 | top: 1.7rem;
211 | white-space: nowrap;
212 | width: auto;
213 | z-index: 1;
214 |
215 | }
216 | nav ul li ul li{
217 | margin-top: .3rem;
218 | }
219 |
220 | nav ul li ul::before {
221 | /* fill gap above to make mousing over them easier */
222 | content: "";
223 | position: absolute;
224 | left: 0;
225 | right: 0;
226 | top: -0.5rem;
227 | height: 0.5rem;
228 | }
229 |
230 | nav ul li ul li,
231 | nav ul li ul li a {
232 | display: block;
233 | }
234 |
235 | /* Typography */
236 | code,
237 | samp {
238 | background-color: var(--color-secondary-accent);
239 | border-radius: var(--border-radius);
240 | color: var(--color-text);
241 | display: inline-block;
242 | margin: 0 0.1rem;
243 | padding: 0 0.5rem;
244 | }
245 |
246 | details {
247 | margin: 1.3rem 0;
248 | }
249 |
250 | details summary {
251 | font-weight: bold;
252 | cursor: pointer;
253 | }
254 |
255 | h1,
256 | h2,
257 | h3,
258 | h4,
259 | h5,
260 | h6 {
261 | line-height: var(--line-height);
262 | }
263 |
264 | mark {
265 | padding: 0.1rem;
266 | }
267 |
268 | ol li,
269 | ul li {
270 | padding: 0.2rem 0;
271 | }
272 |
273 | p {
274 | margin: 0.75rem 0;
275 | padding: 0;
276 | }
277 |
278 | pre {
279 | margin: 1rem 0;
280 | max-width: var(--width-card-wide);
281 | padding: 1rem 0;
282 | }
283 |
284 | pre code,
285 | pre samp {
286 | display: block;
287 | max-width: var(--width-card-wide);
288 | padding: 0.5rem 1rem;
289 | white-space: pre-wrap;
290 | font-size: .9rem;
291 | }
292 |
293 | small {
294 | color: var(--color-text-secondary);
295 | }
296 |
297 | sup {
298 | background-color: var(--color-secondary);
299 | border-radius: var(--border-radius);
300 | color: var(--color-bg);
301 | font-size: xx-small;
302 | font-weight: bold;
303 | margin: 0.2rem;
304 | padding: 0.2rem 0.3rem;
305 | position: relative;
306 | top: -2px;
307 | }
308 |
309 | /* Links */
310 | a {
311 | color: var(--color);
312 | display: inline-block;
313 | font-weight: bold;
314 | text-decoration: none;
315 | }
316 |
317 | a:hover {
318 | filter: brightness(var(--hover-brightness));
319 | text-decoration: underline;
320 | }
321 |
322 | a b,
323 | a em,
324 | a i,
325 | a strong,
326 | button {
327 | border-radius: var(--border-radius);
328 | display: inline-block;
329 | font-size: medium;
330 | font-weight: bold;
331 | line-height: var(--line-height);
332 | margin: 0.5rem 0;
333 | padding: 0.3rem 4rem;
334 | }
335 |
336 | button {
337 | font-family: var(--font-family);
338 | }
339 |
340 | button:hover {
341 | cursor: pointer;
342 | filter: brightness(var(--hover-brightness));
343 | }
344 |
345 | a b,
346 | a strong,
347 | button {
348 | background-color: var(--color);
349 | border: 2px solid var(--color);
350 | color: var(--color-bg);
351 | }
352 |
353 | a em,
354 | a i {
355 | border: 2px solid var(--color);
356 | border-radius: var(--border-radius);
357 | color: var(--color);
358 | display: inline-block;
359 | padding: 1rem 2rem;
360 | }
361 |
362 | article aside a {
363 | color: var(--color-text);
364 | }
365 |
366 | /* Images */
367 | figure {
368 | margin: 0;
369 | padding: 0;
370 | }
371 |
372 | figure img {
373 | max-width: 100%;
374 | border-radius: .5rem;
375 | }
376 |
377 | figure figcaption {
378 | color: var(--color-text-secondary);
379 | }
380 |
381 | /* Forms */
382 |
383 | button:disabled,
384 | input:disabled {
385 | background: var(--color-bg-secondary);
386 | border-color: var(--color-bg-secondary);
387 | color: var(--color-text-secondary);
388 | cursor: not-allowed;
389 | }
390 |
391 | button[disabled]:hover {
392 | filter: none;
393 | }
394 |
395 | form {
396 | border: 1px solid var(--color-bg-secondary);
397 | border-radius: var(--border-radius);
398 | box-shadow: var(--box-shadow) var(--color-shadow);
399 | display: block;
400 | max-width: var(--width-card-wide);
401 | min-width: var(--width-card);
402 | padding: 1.5rem;
403 | text-align: var(--justify-normal);
404 | }
405 | form:hover{
406 | box-shadow: var(--box-shadow) var(--color-bg-secondary);
407 | background-color: var(--color-bg-secondary);
408 | }
409 |
410 | form header {
411 | margin: .3rem 0;
412 | padding: .1rem 0;
413 | border-radius: 2rem;
414 | background-color: var(--color);
415 | }
416 |
417 | input,
418 | label,
419 | select,
420 | textarea {
421 | display: block;
422 | font-size: inherit;
423 | max-width: var(--width-card-wide);
424 | }
425 |
426 | input[type="checkbox"],
427 | input[type="radio"] {
428 | display: inline-block;
429 | }
430 |
431 | input[type="checkbox"]+label,
432 | input[type="radio"]+label {
433 | display: inline-block;
434 | font-weight: normal;
435 | position: relative;
436 | top: 1px;
437 | }
438 |
439 | input,
440 | select,
441 | textarea {
442 | border: 1px solid var(--color-bg-secondary);
443 | border-radius: var(--border-radius);
444 | margin-bottom: 1rem;
445 | padding: 0.4rem 0.8rem;
446 | }
447 |
448 | input[readonly],
449 | textarea[readonly] {
450 | background-color: var(--color-bg-secondary);
451 | }
452 |
453 | label {
454 | font-weight: bold;
455 | margin-bottom: 0.2rem;
456 | }
457 |
458 | /* Tables */
459 | table {
460 | border: 1px solid var(--color-bg-secondary);
461 | border-radius: var(--border-radius);
462 | border-spacing: 0;
463 | display: inline-block;
464 | max-width: 100%;
465 | overflow-x: auto;
466 | padding: 0;
467 | white-space: nowrap;
468 | }
469 |
470 | table{
471 | margin-top: .6rem;
472 | }
473 |
474 | table td,
475 | table th,
476 | table tr {
477 |
478 | padding: 0.4rem 0.8rem;
479 | text-align: var(--justify-important);
480 | }
481 |
482 | table thead {
483 | background-color: var(--color-secondary);
484 | border-collapse: collapse;
485 | border-radius: var(--border-radius);
486 | color: var(--color-bg);
487 | margin: 0;
488 | padding: 0;
489 | }
490 |
491 | table thead th:first-child {
492 | border-top-left-radius: var(--border-radius);
493 | }
494 |
495 | table thead th:last-child {
496 | border-top-right-radius: var(--border-radius);
497 | }
498 |
499 | table thead th:first-child,
500 | table tr td:first-child {
501 | text-align: var(--justify-normal);
502 | }
503 |
504 | table tr:nth-child(even) {
505 | background-color: var(--color-accent);
506 | }
507 |
508 | /* Quotes */
509 | blockquote {
510 | display: block;
511 | font-size: x-large;
512 | line-height: var(--line-height);
513 | margin: 1rem auto;
514 | max-width: var(--width-card-medium);
515 | padding: 1.5rem 1rem;
516 | text-align: var(--justify-important);
517 | color: var(--color-secondary-accent);
518 | }
519 |
520 | blockquote footer {
521 | color: var(--color-text-secondary);
522 | display: block;
523 | font-size: small;
524 | line-height: var(--line-height);
525 | padding: .5rem 1.5rem;
526 | text-align: end;
527 | }
--------------------------------------------------------------------------------
/TutCSS/wp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/lcodev/84d03c09f56f84bf269c2ed0dbef844f42bccb52/TutCSS/wp.png
--------------------------------------------------------------------------------
/images/hitesh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/lcodev/84d03c09f56f84bf269c2ed0dbef844f42bccb52/images/hitesh.png
--------------------------------------------------------------------------------
/images/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/lcodev/84d03c09f56f84bf269c2ed0dbef844f42bccb52/images/logo-white.png
--------------------------------------------------------------------------------
/images/money.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/lcodev/84d03c09f56f84bf269c2ed0dbef844f42bccb52/images/money.png
--------------------------------------------------------------------------------
/images/t1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/lcodev/84d03c09f56f84bf269c2ed0dbef844f42bccb52/images/t1.png
--------------------------------------------------------------------------------
/images/yt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/lcodev/84d03c09f56f84bf269c2ed0dbef844f42bccb52/images/yt.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | LCO Dev
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Hitesh Choudhary
23 |
I write code and make high quality tech videos
24 |
25 |
26 |
27 |
47 |
67 |
87 |
107 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/meetup/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | LCO Dev
16 |
17 |
18 |
19 |
20 |
21 |
Meetup - 27th March 2022
22 |
Fill Form
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/short.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap");
2 | body {
3 | background-color: #0e101a;
4 | color: #fff;
5 | }
6 | html,
7 | body {
8 | max-width: 100%;
9 | overflow-x: hidden;
10 | }
11 |
12 | .heading {
13 | font-family: "JetBrains Mono", monospace;
14 | }
15 |
16 | a {
17 | text-decoration: none;
18 | color: #fff;
19 | }
20 |
21 | a:hover {
22 | text-decoration: dotted;
23 | color: #fff;
24 | }
25 |
26 | .purple {
27 | background-color: #650680;
28 | }
29 |
30 | .yt {
31 | background-color: #b4161b;
32 | }
33 |
--------------------------------------------------------------------------------
/tutcss.css:
--------------------------------------------------------------------------------
1 | /* TutCSS for teachers
2 | - Hitesh
3 | - LearnCodeOnline.in
4 | */
5 |
6 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
7 |
8 | :root {
9 | --border-radius: 3px;
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: #FF6666;
16 | --color-secondary-accent: #920de90b;
17 | --color-shadow: #f4f4f4;
18 | --color-text: #000;
19 | --color-text-secondary: #999;
20 | --hover-brightness: 1.2;
21 | --justify-important: center;
22 | --justify-normal: left;
23 | --line-height: 1.5;
24 | --width-card: 285px;
25 | --width-card-medium: 460px;
26 | --width-card-wide: 800px;
27 | --width-content: 1080px;
28 | }
29 |
30 |
31 | @media (prefers-color-scheme: dark) {
32 | :root {
33 | --color: #1FAA59;
34 | --color-accent: #38CC77;
35 | --color-bg: #333;
36 | --color-bg-secondary: #555;
37 | --color-secondary: #E8BD0D;
38 | --color-secondary-accent: #E07C24;
39 | --color-shadow: #bbbbbb20;
40 | --color-text: #f7f7f7;
41 | --color-text-secondary: #aaa;
42 | --font-family: 'Montserrat', sans-serif;
43 |
44 | }
45 | }
46 |
47 |
48 | /* Layout */
49 | article aside {
50 | background: var(--color-secondary-accent);
51 | border-left: 8px solid var(--color-text);
52 | padding: 0.01rem 0.8rem;
53 | }
54 |
55 | body {
56 | background: var(--color-bg);
57 | color: var(--color-text);
58 | font-family: var(--font-family);
59 | line-height: var(--line-height);
60 | margin: 0;
61 | overflow-x: hidden;
62 | padding:3%;
63 | }
64 |
65 | header{
66 | background-color: var(--color-bg-secondary);
67 | max-width: 100vw;
68 | height: 4rem;
69 | display: flex;
70 | justify-content: center;
71 | align-items: center;
72 | font-size: 1.5rem;
73 | font-weight: bold
74 |
75 | }
76 |
77 |
78 | main {
79 | margin: 0 auto;
80 | max-width: var(--width-content);
81 | padding: 3rem 1rem;
82 |
83 | }
84 |
85 | footer{
86 | margin-top: 2rem;
87 | background-color: var(--color-bg-secondary);
88 | padding: .1rem;
89 | border-top-style: solid;
90 | border-top-color: var(--color-text-secondary);
91 | border-top-width: 2px;
92 | padding: .2rem 1rem;
93 |
94 | }
95 |
96 | hr {
97 | background-color: var(--color-secondary);
98 | border: none;
99 | height: 1px;
100 | margin: 4rem 0;
101 | width: 100%;
102 | }
103 |
104 | section {
105 | display: flex;
106 | flex-wrap: wrap;
107 | justify-content: var(--justify-important);
108 | }
109 |
110 | section img,
111 | article img {
112 | max-width: 100%;
113 | border-radius: .4rem;
114 | margin: .4rem .2rem;
115 | }
116 |
117 | section pre {
118 | overflow: auto;
119 | color: var(--color-accent);
120 | }
121 |
122 | section aside {
123 | border: 1px solid var(--color-bg-secondary);
124 | border-radius: var(--border-radius);
125 | box-shadow: var(--box-shadow) var(--color-shadow);
126 | margin: 1rem;
127 | padding: 1.25rem;
128 | width: var(--width-card);
129 | }
130 |
131 | section aside:hover {
132 | box-shadow: var(--box-shadow) var(--color-bg-secondary);
133 | background-color: var(--color-bg-secondary);
134 | }
135 |
136 | [hidden] {
137 | display: none;
138 | }
139 |
140 | /* Headers */
141 | article header,
142 | div header,
143 | main header {
144 | padding-top: 0;
145 | }
146 |
147 | header {
148 | text-align: var(--justify-important);
149 | }
150 |
151 | header a b,
152 | header a em,
153 | header a i,
154 | header a strong {
155 | margin-left: 0.5rem;
156 | margin-right: 0.5rem;
157 | }
158 |
159 | header nav img {
160 | margin: 1rem 0;
161 | }
162 |
163 | section header {
164 | padding-top: 0;
165 | width: 100%;
166 | }
167 |
168 | /* Nav */
169 | nav {
170 | align-items: center;
171 | display: flex;
172 | font-weight: bold;
173 | justify-content: space-between;
174 | margin-bottom: 3rem;
175 | background-color: var(--color-text-secondary);
176 | padding: 0 0.5rem;
177 | }
178 |
179 | nav ul {
180 | list-style: none;
181 | padding: 0;
182 | }
183 |
184 | nav ul li {
185 | display: inline-block;
186 | margin: 0 0.5rem;
187 | position: relative;
188 | text-align: left;
189 | background-color: var(--color);
190 | padding: .2rem .8rem;
191 | border-radius: 3px;
192 |
193 | }
194 |
195 | /* Nav Dropdown */
196 | nav ul li:hover ul {
197 | display: block;
198 | }
199 |
200 | nav ul li ul {
201 | background: var(--color-bg);
202 | border: 1px solid var(--color-bg-secondary);
203 | border-radius: var(--border-radius);
204 | box-shadow: var(--box-shadow) var(--color-shadow);
205 | display: none;
206 | height: auto;
207 | left: -2px;
208 | padding: .5rem 1rem;
209 | position: absolute;
210 | top: 1.7rem;
211 | white-space: nowrap;
212 | width: auto;
213 | z-index: 1;
214 |
215 | }
216 | nav ul li ul li{
217 | margin-top: .3rem;
218 | }
219 |
220 | nav ul li ul::before {
221 | /* fill gap above to make mousing over them easier */
222 | content: "";
223 | position: absolute;
224 | left: 0;
225 | right: 0;
226 | top: -0.5rem;
227 | height: 0.5rem;
228 | }
229 |
230 | nav ul li ul li,
231 | nav ul li ul li a {
232 | display: block;
233 | }
234 |
235 | /* Typography */
236 | code,
237 | samp {
238 | background-color: var(--color-secondary-accent);
239 | border-radius: var(--border-radius);
240 | color: var(--color-text);
241 | display: inline-block;
242 | margin: 0 0.1rem;
243 | padding: 0 0.5rem;
244 | }
245 |
246 | details {
247 | margin: 1.3rem 0;
248 | }
249 |
250 | details summary {
251 | font-weight: bold;
252 | cursor: pointer;
253 | }
254 |
255 | h1,
256 | h2,
257 | h3,
258 | h4,
259 | h5,
260 | h6 {
261 | line-height: var(--line-height);
262 | }
263 |
264 | mark {
265 | padding: 0.1rem;
266 | }
267 |
268 | ol li,
269 | ul li {
270 | padding: 0.2rem 0;
271 | }
272 |
273 | p {
274 | margin: 0.75rem 0;
275 | padding: 0;
276 | }
277 |
278 | pre {
279 | margin: 1rem 0;
280 | max-width: var(--width-card-wide);
281 | padding: 1rem 0;
282 | }
283 |
284 | pre code,
285 | pre samp {
286 | display: block;
287 | max-width: var(--width-card-wide);
288 | padding: 0.5rem 1rem;
289 | white-space: pre-wrap;
290 | font-size: .9rem;
291 | }
292 |
293 | small {
294 | color: var(--color-text-secondary);
295 | }
296 |
297 | sup {
298 | background-color: var(--color-secondary);
299 | border-radius: var(--border-radius);
300 | color: var(--color-bg);
301 | font-size: xx-small;
302 | font-weight: bold;
303 | margin: 0.2rem;
304 | padding: 0.2rem 0.3rem;
305 | position: relative;
306 | top: -2px;
307 | }
308 |
309 | /* Links */
310 | a {
311 | color: var(--color);
312 | display: inline-block;
313 | font-weight: bold;
314 | text-decoration: none;
315 | }
316 |
317 | a:hover {
318 | filter: brightness(var(--hover-brightness));
319 | text-decoration: underline;
320 | }
321 |
322 | a b,
323 | a em,
324 | a i,
325 | a strong,
326 | button {
327 | border-radius: var(--border-radius);
328 | display: inline-block;
329 | font-size: medium;
330 | font-weight: bold;
331 | line-height: var(--line-height);
332 | margin: 0.5rem 0;
333 | padding: 0.3rem 4rem;
334 | }
335 |
336 | button {
337 | font-family: var(--font-family);
338 | }
339 |
340 | button:hover {
341 | cursor: pointer;
342 | filter: brightness(var(--hover-brightness));
343 | }
344 |
345 | a b,
346 | a strong,
347 | button {
348 | background-color: var(--color);
349 | border: 2px solid var(--color);
350 | color: var(--color-bg);
351 | }
352 |
353 | a em,
354 | a i {
355 | border: 2px solid var(--color);
356 | border-radius: var(--border-radius);
357 | color: var(--color);
358 | display: inline-block;
359 | padding: 1rem 2rem;
360 | }
361 |
362 | article aside a {
363 | color: var(--color-text);
364 | }
365 |
366 | /* Images */
367 | figure {
368 | margin: 0;
369 | padding: 0;
370 | }
371 |
372 | figure img {
373 | max-width: 100%;
374 | border-radius: .5rem;
375 | }
376 |
377 | figure figcaption {
378 | color: var(--color-text-secondary);
379 | }
380 |
381 | /* Forms */
382 |
383 | button:disabled,
384 | input:disabled {
385 | background: var(--color-bg-secondary);
386 | border-color: var(--color-bg-secondary);
387 | color: var(--color-text-secondary);
388 | cursor: not-allowed;
389 | }
390 |
391 | button[disabled]:hover {
392 | filter: none;
393 | }
394 |
395 | form {
396 | border: 1px solid var(--color-bg-secondary);
397 | border-radius: var(--border-radius);
398 | box-shadow: var(--box-shadow) var(--color-shadow);
399 | display: block;
400 | max-width: var(--width-card-wide);
401 | min-width: var(--width-card);
402 | padding: 1.5rem;
403 | text-align: var(--justify-normal);
404 | }
405 | form:hover{
406 | box-shadow: var(--box-shadow) var(--color-bg-secondary);
407 | background-color: var(--color-bg-secondary);
408 | }
409 |
410 | form header {
411 | margin: .3rem 0;
412 | padding: .1rem 0;
413 | border-radius: 2rem;
414 | background-color: var(--color);
415 | }
416 |
417 | input,
418 | label,
419 | select,
420 | textarea {
421 | display: block;
422 | font-size: inherit;
423 | max-width: var(--width-card-wide);
424 | }
425 |
426 | input[type="checkbox"],
427 | input[type="radio"] {
428 | display: inline-block;
429 | }
430 |
431 | input[type="checkbox"]+label,
432 | input[type="radio"]+label {
433 | display: inline-block;
434 | font-weight: normal;
435 | position: relative;
436 | top: 1px;
437 | }
438 |
439 | input,
440 | select,
441 | textarea {
442 | border: 1px solid var(--color-bg-secondary);
443 | border-radius: var(--border-radius);
444 | margin-bottom: 1rem;
445 | padding: 0.4rem 0.8rem;
446 | }
447 |
448 | input[readonly],
449 | textarea[readonly] {
450 | background-color: var(--color-bg-secondary);
451 | }
452 |
453 | label {
454 | font-weight: bold;
455 | margin-bottom: 0.2rem;
456 | }
457 |
458 | /* Tables */
459 | table {
460 | border: 1px solid var(--color-bg-secondary);
461 | border-radius: var(--border-radius);
462 | border-spacing: 0;
463 | display: inline-block;
464 | max-width: 100%;
465 | overflow-x: auto;
466 | padding: 0;
467 | white-space: nowrap;
468 | }
469 |
470 | table{
471 | margin-top: .6rem;
472 | }
473 |
474 | table td,
475 | table th,
476 | table tr {
477 |
478 | padding: 0.4rem 0.8rem;
479 | text-align: var(--justify-important);
480 | }
481 |
482 | table thead {
483 | background-color: var(--color-secondary);
484 | border-collapse: collapse;
485 | border-radius: var(--border-radius);
486 | color: var(--color-bg);
487 | margin: 0;
488 | padding: 0;
489 | }
490 |
491 | table thead th:first-child {
492 | border-top-left-radius: var(--border-radius);
493 | }
494 |
495 | table thead th:last-child {
496 | border-top-right-radius: var(--border-radius);
497 | }
498 |
499 | table thead th:first-child,
500 | table tr td:first-child {
501 | text-align: var(--justify-normal);
502 | }
503 |
504 | table tr:nth-child(even) {
505 | background-color: var(--color-accent);
506 | }
507 |
508 | /* Quotes */
509 | blockquote {
510 | display: block;
511 | font-size: x-large;
512 | line-height: var(--line-height);
513 | margin: 1rem auto;
514 | max-width: var(--width-card-medium);
515 | padding: 1.5rem 1rem;
516 | text-align: var(--justify-important);
517 | color: var(--color-secondary-accent);
518 | }
519 |
520 | blockquote footer {
521 | color: var(--color-text-secondary);
522 | display: block;
523 | font-size: small;
524 | line-height: var(--line-height);
525 | padding: .5rem 1.5rem;
526 | text-align: end;
527 | }
--------------------------------------------------------------------------------
/tutcss.min.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);:root{--border-radius:3px;--box-shadow:2px 2px 10px;--color:#118bee;--color-accent:#118bee15;--color-bg:#fff;--color-bg-secondary:#e9e9e9;--color-secondary:#FF6666;--color-secondary-accent:#920de90b;--color-shadow:#f4f4f4;--color-text:#000;--color-text-secondary:#999;--hover-brightness:1.2;--justify-important:center;--justify-normal:left;--line-height:1.5;--width-card:285px;--width-card-medium:460px;--width-card-wide:800px;--width-content:1080px}@media (prefers-color-scheme:dark){:root{--color:#1FAA59;--color-accent:#38CC77;--color-bg:#333;--color-bg-secondary:#555;--color-secondary:#E8BD0D;--color-secondary-accent:#E07C24;--color-shadow:#bbbbbb20;--color-text:#f7f7f7;--color-text-secondary:#aaa;--font-family:'Montserrat',sans-serif}}article aside{background:var(--color-secondary-accent);border-left:8px solid var(--color-text);padding:.01rem .8rem}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);line-height:var(--line-height);margin:0;overflow-x:hidden;padding:3%}header{background-color:var(--color-bg-secondary);max-width:100vw;height:4rem;display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700}main{margin:0 auto;max-width:var(--width-content);padding:3rem 1rem}footer{margin-top:2rem;background-color:var(--color-bg-secondary);padding:.1rem;border-top-style:solid;border-top-color:var(--color-text-secondary);border-top-width:2px;padding:.2rem 1rem}hr{background-color:var(--color-secondary);border:none;height:1px;margin:4rem 0;width:100%}section{display:flex;flex-wrap:wrap;justify-content:var(--justify-important)}article img,section img{max-width:100%;border-radius:.4rem;margin:.4rem .2rem}section pre{overflow:auto;color:var(--color-accent)}section aside{border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);box-shadow:var(--box-shadow) var(--color-shadow);margin:1rem;padding:1.25rem;width:var(--width-card)}section aside:hover{box-shadow:var(--box-shadow) var(--color-bg-secondary);background-color:var(--color-bg-secondary)}[hidden]{display:none}article header,div header,main header{padding-top:0}header{text-align:var(--justify-important)}header a b,header a em,header a i,header a strong{margin-left:.5rem;margin-right:.5rem}header nav img{margin:1rem 0}section header{padding-top:0;width:100%}nav{align-items:center;display:flex;font-weight:700;justify-content:space-between;margin-bottom:3rem;background-color:var(--color-text-secondary);padding:0 .5rem}nav ul{list-style:none;padding:0}nav ul li{display:inline-block;margin:0 .5rem;position:relative;text-align:left;background-color:var(--color);padding:.2rem .8rem;border-radius:3px}nav ul li:hover ul{display:block}nav ul li ul{background:var(--color-bg);border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);box-shadow:var(--box-shadow) var(--color-shadow);display:none;height:auto;left:-2px;padding:.5rem 1rem;position:absolute;top:1.7rem;white-space:nowrap;width:auto;z-index:1}nav ul li ul li{margin-top:.3rem}nav ul li ul::before{content:"";position:absolute;left:0;right:0;top:-.5rem;height:.5rem}nav ul li ul li,nav ul li ul li a{display:block}code,samp{background-color:var(--color-secondary-accent);border-radius:var(--border-radius);color:var(--color-text);display:inline-block;margin:0 .1rem;padding:0 .5rem}details{margin:1.3rem 0}details summary{font-weight:700;cursor:pointer}h1,h2,h3,h4,h5,h6{line-height:var(--line-height)}mark{padding:.1rem}ol li,ul li{padding:.2rem 0}p{margin:.75rem 0;padding:0}pre{margin:1rem 0;max-width:var(--width-card-wide);padding:1rem 0}pre code,pre samp{display:block;max-width:var(--width-card-wide);padding:.5rem 1rem;white-space:pre-wrap;font-size:.9rem}small{color:var(--color-text-secondary)}sup{background-color:var(--color-secondary);border-radius:var(--border-radius);color:var(--color-bg);font-size:xx-small;font-weight:700;margin:.2rem;padding:.2rem .3rem;position:relative;top:-2px}a{color:var(--color);display:inline-block;font-weight:700;text-decoration:none}a:hover{filter:brightness(var(--hover-brightness));text-decoration:underline}a b,a em,a i,a strong,button{border-radius:var(--border-radius);display:inline-block;font-size:medium;font-weight:700;line-height:var(--line-height);margin:.5rem 0;padding:.3rem 4rem}button{font-family:var(--font-family)}button:hover{cursor:pointer;filter:brightness(var(--hover-brightness))}a b,a strong,button{background-color:var(--color);border:2px solid var(--color);color:var(--color-bg)}a em,a i{border:2px solid var(--color);border-radius:var(--border-radius);color:var(--color);display:inline-block;padding:1rem 2rem}article aside a{color:var(--color-text)}figure{margin:0;padding:0}figure img{max-width:100%;border-radius:.5rem}figure figcaption{color:var(--color-text-secondary)}button:disabled,input:disabled{background:var(--color-bg-secondary);border-color:var(--color-bg-secondary);color:var(--color-text-secondary);cursor:not-allowed}button[disabled]:hover{filter:none}form{border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);box-shadow:var(--box-shadow) var(--color-shadow);display:block;max-width:var(--width-card-wide);min-width:var(--width-card);padding:1.5rem;text-align:var(--justify-normal)}form:hover{box-shadow:var(--box-shadow) var(--color-bg-secondary);background-color:var(--color-bg-secondary)}form header{margin:.3rem 0;padding:.1rem 0;border-radius:2rem;background-color:var(--color)}input,label,select,textarea{display:block;font-size:inherit;max-width:var(--width-card-wide)}input[type=checkbox],input[type=radio]{display:inline-block}input[type=checkbox]+label,input[type=radio]+label{display:inline-block;font-weight:400;position:relative;top:1px}input,select,textarea{border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);margin-bottom:1rem;padding:.4rem .8rem}input[readonly],textarea[readonly]{background-color:var(--color-bg-secondary)}label{font-weight:700;margin-bottom:.2rem}table{border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);border-spacing:0;display:inline-block;max-width:100%;overflow-x:auto;padding:0;white-space:nowrap}table{margin-top:.6rem}table td,table th,table tr{padding:.4rem .8rem;text-align:var(--justify-important)}table thead{background-color:var(--color-secondary);border-collapse:collapse;border-radius:var(--border-radius);color:var(--color-bg);margin:0;padding:0}table thead th:first-child{border-top-left-radius:var(--border-radius)}table thead th:last-child{border-top-right-radius:var(--border-radius)}table thead th:first-child,table tr td:first-child{text-align:var(--justify-normal)}table tr:nth-child(even){background-color:var(--color-accent)}blockquote{display:block;font-size:x-large;line-height:var(--line-height);margin:1rem auto;max-width:var(--width-card-medium);padding:1.5rem 1rem;text-align:var(--justify-important);color:var(--color-secondary-accent)}blockquote footer{color:var(--color-text-secondary);display:block;font-size:small;line-height:var(--line-height);padding:.5rem 1.5rem;text-align:end}
--------------------------------------------------------------------------------