/ style.css
style.css
1 :root{ 2 --code-bg: #fafafa; 3 --quote-bg: #fafafa; 4 --quote-border: #eaeaea; 5 } 6 @media print { 7 *, 8 *:before, 9 *:after { 10 background: transparent !important; 11 color: #000 !important; 12 box-shadow: none !important; 13 text-shadow: none !important; 14 } 15 16 a, 17 a:visited { 18 text-decoration: underline; 19 } 20 21 a[href]:after { 22 content: " (" attr(href) ")"; 23 } 24 25 abbr[title]:after { 26 content: " (" attr(title) ")"; 27 } 28 29 a[href^="#"]:after, 30 a[href^="javascript:"]:after { 31 content: ""; 32 } 33 34 pre, 35 blockquote { 36 border: 1px solid #999; 37 page-break-inside: avoid; 38 } 39 40 thead { 41 display: table-header-group; 42 } 43 44 tr, 45 img { 46 page-break-inside: avoid; 47 } 48 49 img { 50 max-width: 100% !important; 51 } 52 53 p, 54 h2, 55 h3 { 56 orphans: 3; 57 widows: 3; 58 } 59 60 h2, 61 h3 { 62 page-break-after: avoid; 63 } 64 } 65 66 pre, 67 code { 68 font-family: Menlo, Monaco, "Courier New", monospace; 69 } 70 71 pre { 72 padding: .5rem; 73 line-height: 1.25; 74 overflow-x: scroll; 75 } 76 77 a, 78 a:visited { 79 color: #3498db; 80 } 81 82 a:hover, 83 a:focus, 84 a:active { 85 color: #2980b9; 86 } 87 88 .modest-no-decoration { 89 text-decoration: none; 90 } 91 92 html { 93 font-size: 12px; 94 } 95 96 @media screen and (min-width: 32rem) and (max-width: 48rem) { 97 html { 98 font-size: 15px; 99 } 100 } 101 102 @media screen and (min-width: 48rem) { 103 html { 104 font-size: 16px; 105 } 106 } 107 108 body { 109 line-height: 1.85; 110 } 111 112 p{ 113 font-size: 1rem; 114 margin-bottom: 1.3rem; 115 } 116 117 h1, 118 h2, 119 h3, 120 h4 { 121 margin: 1.414rem 0 .5rem; 122 font-weight: inherit; 123 line-height: 1.42; 124 } 125 126 h1 { 127 margin-top: 0; 128 font-size: 3rem; 129 } 130 131 h2 { 132 font-size: 2rem; 133 } 134 135 h3 { 136 font-size: 1.5rem; 137 } 138 139 h4 { 140 font-size: 1.4rem; 141 } 142 143 h5 { 144 font-size: 1.3rem; 145 } 146 147 h6 { 148 font-size: 1rem; 149 } 150 151 small, 152 .modest-small { 153 font-size: .7em; 154 } 155 156 img, 157 canvas, 158 iframe, 159 video, 160 svg, 161 select, 162 textarea { 163 max-width: 100%; 164 } 165 166 167 html { 168 font-size: 18px; 169 max-width: 100%; 170 } 171 172 body { 173 color: #000; 174 font-family: arial; 175 font-weight: 300; 176 margin: 0 auto; 177 max-width: 48rem; 178 line-height: 1.45; 179 padding: .25rem; 180 } 181 182 h1, 183 h2, 184 h3, 185 h4, 186 h5, 187 h6 { 188 font-family: Arimo, Helvetica, sans-serif; 189 } 190 191 h1, 192 h2, 193 h3 { 194 border-bottom: 2px solid #fafafa; 195 margin-bottom: 1.15rem; 196 padding-bottom: .5rem; 197 text-align: center; 198 } 199 200 blockquote { 201 border-left: 8px solid var(--quote-border); 202 background-color: var(--quote-bg); 203 padding: 1rem; 204 } 205 206 pre, 207 code { 208 background-color: var(--code-bg); 209 } 210 211 table { 212 margin-top: 0; 213 margin-bottom: 16px; 214 display: block; 215 width: 100%; 216 overflow: auto; 217 border-spacing: 0; 218 border-collapse: collapse; 219 } 220 table th { 221 font-weight: 600; 222 } 223 224 table th, 225 table td { 226 padding: 6px 13px; 227 border: 1px solid #dfe2e5; 228 } 229 230 table tr { 231 background-color: #fff; 232 border-top: 1px solid #c6cbd1; 233 } 234 235 table tr:nth-child(2n) { 236 background-color: #f6f8fa; 237 } 238 239 ul, 240 ol { 241 padding-left: 2em; 242 } 243 244 ul ul, 245 ul ol, 246 ol ol, 247 ol ul { 248 margin-top: 0; 249 margin-bottom: 0; 250 } 251 252 li { 253 word-wrap: break-all; 254 } 255 256 li>p { 257 margin-top: 16px; 258 } 259 260 li+li { 261 margin-top: 0.25em; 262 } 263 264 /** 265 * Site specific styles here 266 * ======================================== 267 */ 268 269 body { 270 background-color: #fefefe; 271 } 272 273 .main-layout header { 274 display: flex; 275 flex-direction: row; 276 background-color: #FB641E 277 } 278 279 .main-layout header .yc-logo { 280 padding: 5px 9px; 281 color: white; 282 border: 2px solid white; 283 margin: 10px 10px; 284 width: 15px; 285 height: 30px; 286 } 287 288 .main-layout header h1 { 289 font-size: 26px; 290 font-weight: bold; 291 white-space: nowrap; 292 margin: 10px 10px; 293 border: 0; 294 } 295 296 .main-layout header a { 297 text-decoration: none; 298 color: #000000; 299 } 300 301 #loader{ 302 position:relative; 303 width:100%; 304 height:19px; 305 margin:auto; 306 } 307 308 #loader .line{ 309 position:absolute; 310 left:0px; 311 top:8px; 312 height:4px; 313 width:100%; 314 background-color:#FFFFFF; 315 border-radius:2px; 316 margin: 0 auto; 317 } 318 319 #loader .moving-ball{ 320 background-color:#FB641E; 321 position:absolute; 322 top:0; 323 left:0; 324 width:20px; 325 height:20px; 326 border-radius:10px; 327 animation-name:bounce-moving-ball; 328 animation-duration:1.5s; 329 animation-iteration-count:infinite; 330 animation-direction:normal; 331 } 332 333 @keyframes bounce-moving-ball{ 334 0%{ 335 left:0; 336 } 337 338 50%{ 339 left: calc(100% - 20px); 340 } 341 100%{ 342 left: 0; 343 } 344 } 345 346 347 .main-layout ol, .main-layout ul{ 348 margin: 0; 349 padding: 0; 350 } 351 352 .all-navs { 353 display: flex; 354 flex-direction: row; 355 } 356 357 nav.story-sort{ 358 display: flex; 359 flex-direction: row; 360 align-items: center; 361 } 362 363 nav.story-sort a{ 364 margin: 0 10px; 365 } 366 367 nav.story-sort a{ 368 text-decoration: none; 369 color: #000000; 370 } 371 372 .right-nav{ 373 display: flex; 374 flex-direction: row-reverse; 375 align-items: center; 376 margin-left: auto; 377 } 378 379 .right-nav a{ 380 display: block; 381 } 382 383 .right-nav svg{ 384 width: 30px; 385 height: 30px; 386 } 387 388 389 .index-page, .story-page { 390 font-size: 20px; 391 } 392 393 main.content, footer, #loader{ 394 background-color: #F6F5EF; 395 } 396 397 .content a{ 398 text-decoration: underline; 399 color: #000000; 400 } 401 402 .content p{ 403 font-size: 14px; 404 } 405 406 .content ol, .content ul{ 407 list-style: none; 408 padding: 10px 20px; 409 } 410 411 .content ol li { 412 display: flex; 413 flex-direction: row; 414 } 415 416 .content code, .content pre { 417 font-size: 12px; 418 } 419 420 .content .item-number{ 421 margin-top: 10px; 422 width: 30px; 423 text-align: right; 424 } 425 426 .story-preview { 427 display: flex; 428 flex-direction: row; 429 } 430 431 .story-preview h2, .story-preview a { 432 font-size: 20px; 433 text-decoration: none; 434 text-align: left; 435 } 436 437 .story-preview h2 { 438 margin: 5px 10px; 439 padding: 0; 440 border: 0; 441 } 442 443 .story-preview .buttons { 444 display: flex; 445 flex-direction: column; 446 margin: 0 5px; 447 } 448 449 .story-preview .buttons a { 450 height: 20px; 451 color: #828282; 452 } 453 454 .story-details, .story-details a { 455 font-size: 14px; 456 color: #828282; 457 } 458 459 .story-detals a{ 460 text-decoration: none; 461 } 462 .story-details a:hover{ 463 text-decoration: underline; 464 } 465 466 .user-details{ 467 padding: 0 10px; 468 color: #000000; 469 } 470 471 .user-details h4{ 472 padding: 0; 473 margin: 0; 474 } 475 476 .comment-item{ 477 font-size: 14px; 478 } 479 480 .comment-item{ 481 border-left: 1px dotted #CCCCCC; 482 padding-left: 10px; 483 margin: 5px 5px; 484 } 485 486 li.comment-item{ 487 list-style: none; 488 } 489 490 .comment-item .comment-details, .comment-details a { 491 color: #828282; 492 } 493 494 .comment-item .comment-details a{ 495 margin-right: 5px; 496 } 497 498 .comment-details a{ 499 text-decoration: none; 500 } 501 502 .comment-details a:hover{ 503 text-decoration: underline; 504 } 505 506 .sub-comments li{ 507 list-style: none; 508 } 509 510 hr{ 511 border: 0; 512 height: 1px; 513 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 514 } 515 516 footer{ 517 padding: 20px 20px; 518 font-size: 18px; 519 } 520 521 .repo-link a, .repo-link a:visited { 522 color: #000000; 523 text-decoration: none; 524 } 525 526 .repo-link a:hover { 527 text-decoration: underline; 528 } 529