├── 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 | 29 |
Welcome to a HTML page
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 | 41 | 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 | 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 |
This is main section
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 |
Contact us
115 |
116 |
login form
117 | 118 | 119 | 120 | 121 | 122 |

Choose your favorite Programming language:

123 | 124 |
125 | 126 |
127 | 128 | 129 | 130 |
131 |
132 | 133 | 134 |
135 | hello_world.c: 12 Errors, 18 Warnings. 136 | 137 |
138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 153 | 154 | 155 | 156 | 157 | 158 | 161 | 162 | 163 | 164 | 165 | 166 | 169 | 170 | 171 | 172 | 173 | 174 | 177 | 178 |
FirstnameLastnameEmailAccount link
DevrimDemirdevrim1demir@gmail.com 151 | 152 |
EnesPehlivanenesphlvn@gmail.com 159 | 160 |
OsmanGültekinosmangul@gmail.com 167 | 168 |
MansurLavaşmansurlavas@gmail.com 175 | 176 |
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 | 197 |
198 |
199 | 203 | 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 | Hitesh 22 |

Hitesh Choudhary

23 |

I write code and make high quality tech videos

24 |
25 | 26 |
27 |
28 |
29 | 30 |
31 |
32 |
33 | ... 34 |
35 |
36 |
37 |
LearnCodeOnline
38 |

All of my courses that I teach.

39 |
40 |
41 |

https://courses.learncodeonline.in

42 |
43 |
44 | 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 | ... 54 |
55 |
56 |
57 |
LCO PRO
58 |

Access all courses at just 10 Rs/day

59 |
60 |
61 |

https://pro.learncodeonline.in

62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 | 70 |
71 |
72 |
73 | ... 74 |
75 |
76 |
77 |
Youtube Channel
78 |

500K and growing.

79 |
80 |
81 |

https://youtube.com/hiteshitube

82 |
83 |
84 | 85 |
86 |
87 |
88 |
89 | 90 |
91 |
92 |
93 | ... 94 |
95 |
96 |
97 |
Paymentr App
98 |

Keep track of payment with privacy.

99 |
100 |
101 |

https://paymentr.io

102 |
103 |
104 | 105 |
106 |
107 |
108 |
109 | 110 |
111 |
112 |
113 | ... 114 |
115 |
116 |
117 |
Sponsors/Brands
118 |

Brand Sponsors and integrations

119 |
120 |
121 |

https://web.HiteshChoudhary.com/sponsor

122 |
123 |
124 | 125 |
126 |
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} --------------------------------------------------------------------------------