www/style_mobile_additions.css.php

   1 /*****************/
   2 /* MOBILE LAYOUT */
   3 /*****************/
   4
   5 /* Hide the mobile elements on desktop screens: */
   6
   7 @media only screen and (max-width: 1160px) {
   8         #post-nav-ui-toggle,
   9         #appearance-adjust-ui-toggle {
  10                 display: none;
  11         }
  12 }
  13
  14 @media only screen and (max-width: 1160px) {
  15
  16 /*====================*/
  17 /* MOBILE UI ELEMENTS */
  18 /*====================*/
  19
  20 #ui-elements-container {
  21         height: unset !important;
  22         position: unset;
  23 }
  24 #ui-elements-container > * {
  25         position: fixed;
  26         visibility: hidden;
  27         opacity: 1.0;
  28         z-index: 10000;
  29 }
  30
  31 #ui-elements-container > div[id$='-ui-toggle'] {
  32         visibility: visible;
  33         display: inline-block;
  34         border-radius: 50%;
  35         z-index: 10000;
  36 }
  37 #ui-elements-container > div[id$='-ui-toggle'] button,
  38 #theme-selector .theme-selector-close-button {
  39         font-family: Font Awesome;
  40         font-weight: 900;
  41         font-size: 32px;
  42         padding: 10px;
  43         opacity: 0.8;
  44         -webkit-tap-highlight-color: transparent;
  45         transition: transform 0.2s ease;
  46 }
  47 #ui-elements-container > div[id$='-ui-toggle'] button::selection,
  48 #theme-selector .theme-selector-close-button::selection {
  49         background-color: transparent;
  50 }
  51 #ui-elements-container > div[id$='-ui-toggle'] button::-moz-focus-inner,
  52 #theme-selector .theme-selector-close-button::-moz-focus-inner {
  53         border: none;
  54 }
  55 #ui-elements-container > div[id$='-ui-toggle'] button.engaged {
  56         transform: rotate(-90deg);
  57         opacity: 1.0;
  58 }
  59
  60 #appearance-adjust-ui-toggle {
  61         bottom: 10px;
  62         left: 10px;
  63 }
  64
  65 #post-nav-ui-toggle {
  66         bottom: 10px;
  67         right: 10px;
  68 }
  69
  70 #theme-selector.engaged,
  71 #quick-nav-ui.engaged,
  72 #new-comment-nav-ui.engaged,
  73 #hns-date-picker.engaged {
  74         visibility: visible;
  75 }
  76
  77 #image-focus-overlay.engaged {
  78         visibility: visible;
  79 }
  80 #image-focus-overlay .help-overlay {
  81         display: none;
  82 }
  83
  84 /*=========*/
  85 /* GENERAL */
  86 /*=========*/
  87
  88 @media only screen and (max-width: 900px) {
  89         #content,
  90         #images-overlay,
  91         #ui-elements-container {
  92                 min-width: unset;
  93                 width: unset;
  94         }
  95         #content {
  96                 padding: 0 4px;
  97         }
  98 }
  99
 100 /*================*/
 101 /* THEME SELECTOR */
 102 /*================*/
 103
 104 #theme-selector {
 105         display: flex;
 106         flex-flow: column;
 107         background-color: #fff;
 108         width: calc(100vw - 20px);
 109         max-width: 360px;
 110         padding: 0;
 111         overflow: hidden;
 112         max-height: 0;
 113         transition:
 114                 top 0.2s ease,
 115                 max-height 0.2s ease,
 116                 visibility 0.2s ease;
 117         top: calc(100% + 10px);
 118         left: 0;
 119         right: 0;
 120         margin: auto;
 121 }
 122 #theme-selector.engaged {
 123         max-height: 1000px;
 124         top: 10px;
 125     z-index: 10001;
 126 }
 127 #theme-selector::before {
 128         content: "Select theme";
 129         white-space: nowrap;
 130         display: block;
 131         font-weight: 600;
 132         font-size: 2rem;
 133         margin: 0.375em 1em 0.5em 1em;
 134         text-align: center;
 135 }
 136 #theme-selector button {
 137         width: calc(100% - 0.5em);
 138         background-repeat: no-repeat;
 139         padding: 1em 0.875em;
 140         margin: 1px 4px;
 141         line-height: 1;
 142         height: unset;
 143         position: relative;
 144 }
 145 #theme-selector button::after {
 146         content: attr(data-theme-description);
 147         color: #000;
 148         white-space: nowrap;
 149         position: absolute;
 150         text-align: left;
 151         left: 2.5em;
 152         top: 1em;
 153 }
 154 @media only screen and (max-height: 675px) {
 155         #theme-selector button {
 156                 padding: 0.875em;
 157         }
 158         #theme-selector button::after {
 159                 top: 0.875em;
 160         }
 161 }
 162 #theme-selector .theme-selector-close-button {
 163         position: absolute;
 164         width: unset;
 165         background-color: transparent;
 166         top: 0;
 167         right: 0;
 168         margin: 0;
 169         font-size: 31px;
 170 }
 171 #theme-selector .theme-selector-close-button,
 172 #theme-selector .theme-selector-close-button:focus,
 173 #theme-selector .theme-selector-close-button:active,
 174 #theme-selector .theme-selector-close-button:hover {
 175         box-shadow: none;
 176 }
 177
 178 #theme-selector .interaction-blocker-overlay {
 179         position: fixed;
 180         width: 100%;
 181         height: 100%;
 182         left: 0;
 183         top: 0;
 184         z-index: 1;
 185         pointer-events: auto;
 186         display: none;
 187 }
 188 #theme-selector .interaction-blocker-overlay.enabled {
 189         display: block;
 190 }
 191
 192 /*=============================*/
 193 /* THEME SELECTOR AUX CONTROLS */
 194 /*=============================*/
 195
 196 #theme-selector .auxiliary-controls-container {
 197         display: flex;
 198         justify-content: space-between;
 199         align-items: stretch;
 200         padding: 0.75em 0 0 0;
 201         margin: 8px;
 202         border-top: 1px solid #000;
 203 }
 204
 205 /*===============*/
 206 /* THEME TWEAKER */
 207 /*===============*/
 208
 209 #theme-selector #theme-tweaker-toggle {
 210         position: relative;
 211         top: unset;
 212         left: unset;
 213         padding: 0;
 214 }
 215
 216 #theme-selector #theme-tweaker-toggle button {
 217         display: block;
 218         width: unset;
 219         margin: 0;
 220         transform: none;
 221         position: relative;
 222         background-image: none;
 223         padding: 0.5em 0.625em 0.375em 0.625em;
 224         margin: 0;
 225         opacity: 1.0;
 226 }
 227 #theme-selector #theme-tweaker-toggle button::after {
 228         content: "Theme tweaker";
 229         font-size: 0.625em;
 230         white-space: nowrap;
 231         text-align: center;
 232         display: block;
 233         padding: 0;
 234         margin: 0.5em 0 0 0;
 235         max-width: unset;
 236         position: static;
 237         font-family: <?php echo $UI_font; ?>;
 238         font-weight: normal;
 239 }
 240 #theme-selector #theme-tweaker-toggle button::before {
 241         display: none;
 242 }
 243
 244 #theme-tweaker-ui {
 245         visibility: visible;
 246 }
 247
 248 /*======================*/
 249 /* ANTI-KIBITZER TOGGLE */
 250 /*======================*/
 251
 252 #theme-selector #anti-kibitzer-toggle {
 253         position: relative;
 254         top: unset;
 255         bottom: unset;
 256         left: unset;
 257         right: unset;
 258         margin: unset;
 259         box-shadow: unset;
 260         border-radius: unset;
 261         overflow: visible;
 262 }
 263
 264 #theme-selector #anti-kibitzer-toggle button {
 265         width: 48px;
 266         height: 100%;
 267         padding: 0;
 268         margin: 0;
 269         background-image: unset;
 270         border-radius: 10px;
 271 }
 272 #theme-selector #anti-kibitzer-toggle button::before {
 273         width: 100%;
 274         visibility: unset;
 275         position: static;
 276         padding: 0;
 277         text-align: center;
 278 }
 279 #theme-selector #anti-kibitzer-toggle button::after {
 280         content: "\F007\2004\F164";
 281         position: static;
 282         color: transparent;
 283 }
 284
 285 /*====================*/
 286 /* DARK MODE SELECTOR */
 287 /*====================*/
 288
 289 #theme-selector #dark-mode-selector {
 290         position: static;
 291         opacity: 1.0;
 292         outline: none;
 293         border-radius: 10px;
 294 }
 295
 296 #theme-selector #dark-mode-selector button {
 297         width: 54px;
 298         height: 100%;
 299         margin: 0;
 300         padding: 0 0 0.75em 0;
 301         border-radius: 0;
 302         background-image: none;
 303         box-shadow: none;
 304         border: none;
 305         background-color: transparent;
 306 }
 307 #theme-selector #dark-mode-selector button::before {
 308         display: none;
 309 }
 310 #theme-selector #dark-mode-selector button::after {
 311         content: attr(data-name);
 312         visibility: visible;
 313         max-width: unset;
 314         left: 0;
 315         right: 0;
 316         bottom: 0;
 317         top: unset;
 318         text-shadow: none;
 319         font-size: 0.875rem;
 320         color: inherit;
 321         padding: 0 0.25em 0.5em 0.25em;
 322         text-align: center;
 323 }
 324
 325 /*=================*/
 326 /* QUICKNAV WIDGET */
 327 /*=================*/
 328
 329 #quick-nav-ui {
 330         max-width: 0px;
 331         transition:
 332                 max-width 0.2s ease,
 333                 visibility 0.2s ease;
 334         display: flex;
 335         right: 72px;
 336         bottom: 14px;
 337 }
 338 #quick-nav-ui.engaged {
 339         max-width: 1000px;
 340 }
 341 #quick-nav-ui a {
 342         position: relative;
 343         margin: 2px;
 344 }
 345 #quick-nav-ui a + a {
 346         margin-left: 5px;
 347 }
 348 #quick-nav-ui a::after {
 349         position: absolute;
 350         top: calc(100% + 2px);
 351         font-size: 0.375rem;
 352         left: 0;
 353         right: 0;
 354         margin: auto;
 355         line-height: 1;
 356         padding: 2px;
 357         text-transform: uppercase;
 358         z-index: -1;
 359 }
 360 <?php fit_content("#quick-nav-ui a::after"); ?>
 361 #quick-nav-ui a[href='#top']::after {
 362         content: "Top";
 363         left: -1px;
 364 }
 365 #quick-nav-ui a[href='#comments']::after {
 366         content: "Comments";
 367 }
 368 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
 369         visibility: hidden;
 370         transition: visibility 0.2s ease;
 371 }
 372 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui.engaged a[href='#comments'] {
 373         visibility: visible;
 374 }
 375 #quick-nav-ui a[href='#bottom-bar']::after {
 376         content: "Bottom";
 377 }
 378
 379 /*======================*/
 380 /* NEW COMMENT QUICKNAV */
 381 /*======================*/
 382
 383 #new-comment-nav-ui {
 384         max-width: 0px;
 385         max-height: 0px;
 386         transition:
 387                 max-width 0.2s ease,
 388                 max-height 0.2s ease,
 389                 visibility 0.2s ease;
 390         display: flex;
 391         right: 78px;
 392         bottom: 70px;
 393 }
 394 #new-comment-nav-ui::before {
 395         content: "New Comments";
 396         position: absolute;
 397         bottom: 100%;
 398         font-size: 0.5625rem;
 399         left: 0;
 400         right: 0;
 401         margin: auto;
 402         padding: 2px 3px;
 403         text-transform: uppercase;
 404         z-index: -1;
 405 }
 406 <?php fit_content("#new-comment-nav-ui::before"); ?>
 407 #new-comment-nav-ui.engaged {
 408         max-width: 1000px;
 409         max-height: 1000px;
 410 }
 411 #new-comment-nav-ui .new-comment-sequential-nav-button {
 412         top: unset;
 413         bottom: unset;
 414         padding: 2px 7px;
 415 }
 416 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
 417         padding: 2px 7px 3px 7px;
 418 }
 419 #new-comment-nav-ui .new-comments-count {
 420         padding: 4px 0 5px 0;
 421 }
 422 #new-comment-nav-ui .new-comments-count::before {
 423         display: none;
 424 }
 425 #new-comment-nav-ui button::after {
 426         position: absolute;
 427         font-size: 0.375rem;
 428         left: 0;
 429         right: 0;
 430         margin: auto;
 431         line-height: 1;
 432         text-transform: uppercase;
 433         pointer-events: none;
 434 }
 435 #new-comment-nav-ui button.new-comment-previous::after {
 436         content: "Previous";
 437         bottom: 5px;
 438 }
 439 #new-comment-nav-ui button.new-comment-next::after {
 440         content: "Next";
 441         top: 7px;
 442 }
 443
 444 /*=================*/
 445 /* HNS DATE PICKER */
 446 /*=================*/
 447
 448 #hns-date-picker {
 449         max-height: 0px;
 450         bottom: 132px;
 451         right: 62px;
 452         transition:
 453                 max-height 0.2s ease,
 454                 visibility 0.2s ease;
 455 }
 456 #hns-date-picker.engaged {
 457         max-height: 1000px;
 458 }
 459 #hns-date-picker::before {
 460         width: calc(100% + 2px);
 461         border-width: 1px !important;
 462 }
 463
 464 /*=========*/
 465 /* NAV BAR */
 466 /*=========*/
 467
 468 #bottom-bar {
 469         margin-left: auto;
 470         margin-right: auto;
 471         width: calc(100% - 9rem + 8px);
 472         background: rgba(255,255,255,0.85);
 473         backdrop-filter: blur(1px);
 474 }
 475 #content.index-page #bottom-bar {
 476         z-index: 10001;
 477 }
 478 #bottom-bar .nav-item {
 479         box-shadow: none;
 480         position: relative;
 481 }
 482 #bottom-bar .nav-inner {
 483         font-size: 2rem;
 484         padding: 1rem 0 1.25rem 0;
 485         visibility: hidden;
 486         position: static;
 487         width: 0;
 488 }
 489 #content #bottom-bar .nav-item .nav-inner::before {
 490         margin: 0;
 491         visibility: visible;
 492         position: absolute;
 493         width: 100%;
 494         height: 100%;
 495         left: 0;
 496         top: 0;
 497         padding: 1rem 0;
 498 }
 499 #bottom-bar .nav-inner::after {
 500         display: block;
 501         visibility: visible;
 502         text-transform: uppercase;
 503         color: unset;
 504         font-size: 0.75rem;
 505         top: unset;
 506         left: 0;
 507         bottom: 1rem;
 508         width: 100%;
 509 }
 510 #bottom-bar #nav-item-first .nav-inner::after {
 511         content: "First Page";
 512 }
 513 #bottom-bar #nav-item-prev .nav-inner::after {
 514         content: "Prev. Page";
 515 }
 516 #bottom-bar #nav-item-top .nav-inner::after {
 517         content: "Top";
 518 }
 519 #bottom-bar #nav-item-next .nav-inner::after {
 520         content: "Next Page";
 521 }
 522 #bottom-bar #nav-item-last .nav-inner::after {
 523         content: "Last Page";
 524 }
 525
 526 @media only screen and (max-width: 900px) {
 527         .nav-bar-top {
 528                 font-size: 0.75rem;
 529         }
 530         .nav-bar {
 531                 width: calc(100% + 8px);
 532                 margin: 0 -4px;
 533                 overflow: hidden;
 534         }
 535         .nav-bar .nav-inner::after {
 536                 display: none;
 537         }
 538
 539         #primary-bar .nav-item {
 540                 flex: 1 1 100%;
 541         }
 542         .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) {
 543                 flex: 1 1 60px;
 544         }
 545         .nav-bar-top:not(#anything) .nav-inner {
 546                 text-transform: uppercase;
 547                 padding: 6px;
 548         }
 549         .nav-bar-top .nav-inner::before {
 550                 display: block;
 551                 font-family: "Font Awesome";
 552                 font-size: 2em;
 553                 font-weight: 900;
 554         }
 555
 556         #nav-item-home .nav-inner::before {
 557                 content: "\F015";
 558         }
 559         #nav-item-featured .nav-inner::before {
 560                 content: "\F005";
 561         }
 562         #nav-item-all .nav-inner::before {
 563                 content: "\F069";
 564         }
 565         #nav-item-meta .nav-inner::before {
 566                 content: "\F077";
 567         }
 568         #nav-item-tags .nav-inner::before {
 569                 content: "\F02C";
 570         }
 571         #nav-item-recent-comments > * > span {
 572                 display: none;
 573         }
 574         #nav-item-recent-comments .nav-inner::before,
 575         #nav-item-alignment-forum-comments .nav-inner::before {
 576                 content: "\F036";
 577         }
 578         #nav-item-alignment-forum .nav-inner::before {
 579                 content: "AF";
 580                 font-family: Concourse, 'Changa One';
 581         }
 582         #nav-item-questions .nav-inner::before {
 583                 content: "?";
 584                 font-family: Concourse, 'Changa One';
 585         }
 586         #nav-item-events .nav-inner::before {
 587                 content: "\F5A0";
 588         }
 589         #nav-item-shortform .nav-inner::before {
 590                 content: "\F2F2";
 591         }
 592         #nav-item-archive .nav-inner::before {
 593                 content: "\F187";
 594         }
 595         #nav-item-about .nav-inner::before {
 596                 content: "\F129";
 597         }
 598         #nav-item-search {
 599                 font-size: 2em;
 600                 padding: 10px;
 601         }
 602         #nav-item-search .nav-inner::before {
 603                 content: none;
 604         }
 605         #nav-item-search .nav-inner {
 606                 height: 100%;
 607                 display: flex;
 608         }
 609         #nav-item-search input {
 610                 width: 100%;
 611                 height: 100%;
 612         }
 613         #nav-item-search button {
 614                 height: 100%;
 615                 padding: 5px 5px 5px 10px;
 616                 width: 40px;
 617                 overflow: visible;
 618                 visibility: hidden;
 619         }
 620         #nav-item-search button::before {
 621                 content: "\F002";
 622                 font-family: Font Awesome;
 623                 font-weight: 900;
 624                 visibility: visible;
 625         }
 626         #nav-item-login {
 627                 padding: 0;
 628         }
 629         #nav-item-login .nav-inner::before {
 630                 content: "\F007";
 631         }
 632 }
 633 @media only screen and (max-width: 520px) {
 634         .nav-bar-top {
 635                 font-size: 0.5rem;
 636         }
 637
 638         #nav-item-search,
 639         #nav-item-search .nav-inner {
 640                 padding: 0;
 641         }
 642         #nav-item-search button {
 643                 width: 31px;
 644         }
 645
 646         #bottom-bar #nav-item-first .nav-inner::after {
 647                 content: "First";
 648         }
 649         #bottom-bar #nav-item-prev .nav-inner::after {
 650                 content: "Prev";
 651         }
 652         #bottom-bar #nav-item-next .nav-inner::after {
 653                 content: "Next";
 654         }
 655         #bottom-bar #nav-item-last .nav-inner::after {
 656                 content: "Last";
 657         }
 658 }
 659
 660 /*=================*/
 661 /* INBOX INDICATOR */
 662 /*=================*/
 663
 664 @media only screen and (max-width: 900px) {
 665         #inbox-indicator {
 666                 width: 100%;
 667                 top: 0;
 668                 pointer-events: none;
 669         }
 670         #inbox-indicator::before {
 671                 width: 100%;
 672                 font-size: 1rem;
 673                 text-align: right;
 674                 padding: 1px 6px;
 675         }
 676         #inbox-indicator.new-messages {
 677                 pointer-events: auto;
 678         }
 679         #inbox-indicator.new-messages::before {
 680                 box-shadow: 0 0 8px 1px #f00 inset;
 681         }
 682 }
 683 @media only screen and (max-width: 520px) {
 684         #inbox-indicator::before {
 685                 font-size: 0.75rem;
 686                 padding: 2px 5px;
 687         }
 688 }
 689 @media only screen and (max-width: 374px) {
 690         #inbox-indicator::before {
 691                 font-size: 0.625rem;
 692         }
 693 }
 694
 695 /*===================*/
 696 /* TOP PAGINATION UI */
 697 /*===================*/
 698
 699 #top-nav-bar {
 700         font-size: 1.75rem;
 701 }
 702
 703 /*==============*/
 704 /* PAGE TOOLBAR */
 705 /*==============*/
 706
 707 @media only screen and (max-width: 900px) {
 708         #content > .page-toolbar {
 709                 font-size: 1rem;
 710                 margin-right: 0;
 711         }
 712         #content.user-page > .page-toolbar {
 713                 grid-column: 2 / span 2;
 714                 margin: 0 0 6px 0;
 715         }
 716 }
 717 @media only screen and (max-width: 520px) {
 718         #content:not(.user-page) .page-toolbar {
 719                 display: flex;
 720                 flex-direction: column-reverse;
 721                 text-align: right;
 722                 align-self: start;
 723                 padding: 4px 0 0 0;
 724         }
 725         #content.user-page .page-toolbar {
 726                 display: flex;
 727                 flex-flow: row;
 728                 justify-content: flex-end;
 729                 padding: 2px 0 0 0;
 730         }
 731         #content.user-page .page-toolbar > form,
 732         #content.user-page .page-toolbar > .button {
 733                 text-align: center;
 734                 flex-basis: 25%;
 735                 margin-left: 1.5em;
 736         }
 737         #content.user-page .page-toolbar .button {
 738                 text-transform: uppercase;
 739                 font-size: 0.625rem;
 740         }
 741         #content.user-page .page-toolbar .button::before {
 742                 font-size: 1.375rem;
 743                 display: block;
 744                 padding: 0;
 745         }
 746         #content.user-page .page-toolbar .rss {
 747                 white-space: nowrap;
 748                 margin: 0 0 0 1.5em;
 749         }
 750         .page-toolbar > * {
 751                 line-height: 1.15;
 752                 padding: 6px 0;
 753                 margin: 0;
 754         }
 755 }
 756
 757 /*==============*/
 758 /* SUBLEVEL NAV */
 759 /*==============*/
 760
 761 @media only screen and (max-width: 900px) {
 762         .sublevel-nav:not(.sort) {
 763                 flex-wrap: wrap;
 764                 width: calc(100vw - 200px);
 765         }
 766         .sublevel-nav:not(.sort) .sublevel-item {
 767                 margin: 1px;
 768                 flex-basis: 7em;
 769         }
 770 }
 771 @media only screen and (max-width: 520px) {
 772         .sublevel-nav:not(.sort) .sublevel-item {
 773                 font-size: 1rem;
 774         }
 775 }
 776
 777 /*=====================*/
 778 /* SORT ORDER SELECTOR */
 779 /*=====================*/
 780
 781 @media only screen and (max-width: 720px) {
 782         #content.index-page > .sublevel-nav.sort {
 783                 flex-flow: column;
 784                 margin-left: 4px;
 785         }
 786 }
 787
 788 /*==========*/
 789 /* ARCHIVES */
 790 /*==========*/
 791
 792 @media only screen and (max-width: 900px) {
 793         div[class^='archive-nav-'] {
 794                 flex-wrap: wrap;
 795                 justify-content: flex-start;
 796         }
 797         .archive-nav *[class^='archive-nav-item'],
 798         .archive-nav *[class^='archive-nav-item']:first-child {
 799                 padding: 10px;
 800                 margin: 2px;
 801                 max-width: unset;
 802                 flex: 0 1 calc((100% / 8) - 4px);
 803         }
 804         .archive-nav .archive-nav-item-day,
 805         .archive-nav .archive-nav-item-day:first-child {
 806                 flex-basis: calc((100% / 16) - 4px);
 807         }
 808         .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-'] {
 809                 margin-top: 8px;
 810                 position: relative;
 811         }
 812         .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
 813                 content: "";
 814                 display: block;
 815                 position: absolute;
 816                 height: 1px;
 817                 width: calc(100% + 8px);
 818                 left: -4px;
 819                 top: -4px;
 820         }
 821 }
 822 @media only screen and (max-width: 720px) {
 823         .archive-nav .archive-nav-item-day,
 824         .archive-nav .archive-nav-item-day:first-child {
 825                 flex-basis: calc((100% / 12) - 4px);
 826         }
 827 }
 828 @media only screen and (max-width: 520px) {
 829         .archive-nav *[class^='archive-nav-item'],
 830         .archive-nav *[class^='archive-nav-item']:first-child {
 831                 flex-basis: calc((100% / 5) - 4px);
 832         }
 833         .archive-nav .archive-nav-item-day,
 834         .archive-nav .archive-nav-item-day:first-child {
 835                 flex-basis: calc((100% / 8) - 4px);
 836         }
 837 }
 838
 839 /*==========*/
 840 /* LISTINGS */
 841 /*==========*/
 842
 843 h1.listing {
 844         max-height: unset;
 845 }
 846
 847 /*============*/
 848 /* USER PAGES */
 849 /*============*/
 850
 851 #content.user-page h1.page-main-heading {
 852         align-self: end;
 853 }
 854 @media only screen and (max-width: 520px) {
 855         #content.user-page h1.page-main-heading {
 856                 overflow: hidden;
 857                 text-overflow: ellipsis;
 858         }
 859         #content.user-page .user-stats .karma-type {
 860                 display: block;
 861         }
 862 }
 863
 864 /*============*/
 865 /* LOGIN PAGE */
 866 /*============*/
 867
 868 @media only screen and (max-width: 640px) {
 869         .login-container {
 870                 flex-flow: column;
 871                 margin: 0 auto 3em auto;
 872                 max-width: 400px;
 873         }
 874         .login-container #login-form,
 875         .login-container #signup-form {
 876                 padding: 0 1em 1.25em 1em;
 877                 grid-row-gap: 0;
 878         }
 879         .login-container #signup-form {
 880                 padding-top: 1em;
 881         }
 882         .login-container #login-form > *,
 883         .login-container #signup-form > * {
 884                 grid-column: 1 / span 2;
 885         }
 886         .login-container form label {
 887                 text-align: left;
 888                 padding: 0;
 889                 line-height: 1;
 890         }
 891         .login-container form input {
 892                 margin: 0.25em 0 0.75em 0;
 893                 padding: 0.5em;
 894         }
 895         .login-container form h1 {
 896                 grid-column: 1 / span 2;
 897                 margin: 0 0 0.25em 0;
 898         }
 899         .login-container form a {
 900                 margin: 0.75em 0 0 0;
 901         }
 902         .login-container .login-tip {
 903                 margin: 1.5em 1em 0 1em;
 904         }
 905 }
 906
 907 /*==================*/
 908 /* POSTS & COMMENTS */
 909 /*==================*/
 910
 911 @media only screen and (max-width: 720px) {
 912         .body-text ol > li {
 913                 padding: 0 0 0 2.25em;
 914         }
 915         .body-text ol > li::before {
 916                 width: 1.75em;
 917         }
 918         .body-text ul:not(.contents-list) > li,
 919         .body-text ul:not(.contents-list) > li ul > li {
 920                 padding: 0 0 0 0.75em;
 921         }
 922         .body-text ul:not(.contents-list) > li::before,
 923         .body-text ul:not(.contents-list) > li ul > li::before {
 924                 width: 0.125em;
 925                 margin-left: -0.06em;
 926         }
 927 }
 928
 929 /*===========*/
 930 /* POST-META */
 931 /*===========*/
 932
 933 .post-meta {
 934         line-height: 1.9;
 935 }
 936 @media only screen and (max-width: 720px) {
 937         .post-meta .lw2-link span,
 938         .post-meta .karma-value span,
 939         .post-meta .comment-count span {
 940                 display: none;
 941         }
 942         .post-meta .comment-count::before {
 943                 content: "\F086";
 944                 font-family: Font Awesome;
 945                 font-size: 0.875em;
 946                 margin: 0 0.25em 0 0;
 947                 font-weight: 400;
 948         }
 949 }
 950
 951 /*===================*/
 952 /* POSTS & BODY TEXT */
 953 /*===================*/
 954
 955 @media only screen and (max-width: 900px) {
 956         .post-body,
 957         h1.post-title,
 958         .tag-description,
 959         .sequence-text {
 960                 padding: 0 6px;
 961         }
 962 }
 963 @media only screen and (max-width: 520px) {
 964         .post-body {
 965                 font-size: 1.2rem;
 966                 line-height: 1.45;
 967         }
 968         h1.post-title {
 969                 font-size: 2em;
 970         }
 971 }
 972
 973 /*==============*/
 974 /* COMMENT-META */
 975 /*==============*/
 976
 977 a.comment-parent-link::after {
 978         display: none;
 979 }
 980 @media only screen and (max-width: 900px) {
 981         .comment-meta {
 982                 padding: 2px 40px 2px 10px;
 983         }
 984 }
 985 @media only screen and (max-width: 720px) {
 986         .comment .karma-value span {
 987                 display: none;
 988         }
 989         .comment-meta .comment-parent-link {
 990                 opacity: 1.0;
 991         }
 992 }
 993 @media only screen and (max-width: 520px) {
 994         .comment-meta {
 995                 padding: 2px 24px 2px 10px;
 996                 position: relative;
 997         }
 998         .comment-meta > * {
 999                 order: 3;
1000         }
1001         .comment-meta > :not(.author) {
1002                 line-height: 1.8;
1003         }
1004         .comment-meta .author,
1005         .comment-meta .date {
1006                 order: 1;
1007         }
1008         .comment-meta:before {
1009                 content: "";
1010                 order: 2;
1011                 flex-basis: 100%;
1012         }
1013         .comment-post-title2 {
1014                 display: block;
1015                 text-overflow: ellipsis;
1016                 overflow: hidden;
1017         }
1018         .comment-meta .lw2-link {
1019                 display: none;
1020         }
1021 }
1022
1023 /*=======================*/
1024 /* COMMENTS COMPACT VIEW */
1025 /*=======================*/
1026
1027 /*===========================*/
1028 /* COMMENT THREAD NAVIGATION */
1029 /*===========================*/
1030
1031 @media only screen and (max-width: 900px) {
1032         a.comment-parent-link {
1033                 width: 0;
1034                 visibility: hidden;
1035                 position: relative;
1036         }
1037         a.comment-parent-link::before {
1038                 padding: 0;
1039                 font-size: 1em;
1040                 left: 0;
1041                 top: 0;
1042                 line-height: inherit;
1043                 visibility: visible;
1044                 content: "\F3BF";
1045                 transform: scaleX(-1);
1046                 width: 2em;
1047                 text-align: center;
1048         }
1049 }
1050 @media only screen and (max-width: 520px) {
1051         a.comment-parent-link {
1052                 position: static;
1053         }
1054         a.comment-parent-link::before {
1055                 padding: 6px;
1056                 left: unset;
1057                 right: 0;
1058                 top: unset;
1059                 bottom: 0;
1060                 height: 2em;
1061         }
1062 }
1063
1064 /*=================================*/
1065 /* COMMENT THREAD MINIMIZE BUTTONS */
1066 /*=================================*/
1067
1068 @media only screen and (max-width: 520px) {
1069         .comment-minimize-button{
1070                 right: 2px;
1071         }
1072 }
1073
1074 /*===========================*/
1075 /* COMMENTING AND POSTING UI */
1076 /*===========================*/
1077
1078 @media only screen and (max-width: 900px) {
1079         .comment-controls .delete-button, .comment-controls .retract-button, .comment-controls .unretract-button, .comment-controls .edit-button {
1080                 font-size: 0;
1081         }
1082         .comment-controls .delete-button::before, .comment-controls .retract-button::before, .comment-controls .unretract-button::before, .comment-controls .edit-button::before {
1083                 font-size: 0.9rem;
1084         }
1085         .comment-controls .cancel-comment-button {
1086                 max-width: 1.3em;
1087                 overflow: hidden;
1088                 margin-right: 0.125em;
1089         }
1090         .comment-controls .edit-button::before {
1091                 font-size: 0.9375rem;
1092         }
1093         .comments > .comment-controls .cancel-comment-button {
1094                 right: 8px;
1095         }
1096         .comment-controls .cancel-comment-button::before {
1097                 font-size: 1.25rem;
1098         }
1099 }
1100 @media only screen and (max-width: 520px) {
1101         .comment-controls {
1102                 position: static;
1103         }
1104         .comment-controls:focus-within {
1105                 z-index: 10001;
1106         }
1107         .comment-controls .cancel-comment-button {
1108                 right: 10px;
1109         }
1110         .textarea-container:focus-within textarea {
1111                 position: fixed;
1112                 top: 0;
1113                 left: 2px;
1114                 width: calc(100vw - 4px);
1115                 height: calc(100% - 100px);
1116                 min-height: unset;
1117                 max-height: unset;
1118                 border-width: 1px;
1119                 z-index: 11001;
1120         }
1121         #content.conversation-page .textarea-container:focus-within textarea {
1122                 height: calc(100% - 54px);
1123         }
1124         #content.conversation-page .textarea-container:focus-within::after {
1125                 content: "";
1126                 display: block;
1127                 width: 100%;
1128                 height: 50px;
1129                 position: fixed;
1130                 left: 0;
1131                 bottom: 0;
1132                 z-index: 11000;
1133         }
1134         .textarea-container:focus-within .guiedit-buttons-container {
1135                 position: fixed;
1136                 z-index: 11002;
1137                 left: 0;
1138                 width: 100vw;
1139                 height: auto;
1140                 background-image: none;
1141                 padding: 3px 4px 4px 4px;
1142                 margin: 0;
1143                 text-align: center;
1144                 top: auto;
1145                 bottom: 0;
1146         }
1147         .textarea-container:focus-within button.guiedit {
1148                 font-size: 0.9375rem;
1149                 line-height: 1.5;
1150                 height: auto;
1151                 width: calc((100% / 10) - 2px);
1152                 padding: 10px 1px 8px 0;
1153                 position: relative;
1154                 margin: 1px;
1155         }
1156         .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
1157                 z-index: 11011;
1158                 position: fixed;
1159                 bottom: 7px;
1160                 width: calc(((100% - 16px) / 10) * 2.5 - 7px);
1161                 font-size: 1.25rem;
1162                 padding: 5px 5px 6px 5px;
1163                 display: block;
1164         }
1165         .textarea-container:focus-within button.guiedit sup {
1166                 position: absolute;
1167                 left: calc(50% + 0.65em);
1168                 top: calc(50% - 1.3em);
1169         }
1170         .textarea-container:focus-within .guiedit-mobile-help-button {
1171                 left: 8px;
1172         }
1173         .textarea-container:focus-within .guiedit-mobile-exit-button {
1174                 right: 8px;
1175         }
1176         .guiedit::after {
1177                 display: none;
1178         }
1179
1180         #markdown-hints,
1181         #edit-post-form #markdown-hints {
1182                 z-index: 11111;
1183                 position: fixed;
1184                 top: 40px;
1185                 left: 0;
1186                 right: 0;
1187                 margin: auto;
1188                 padding: 4px 0 4px 8px;
1189                 width: 310px;
1190                 border-width: 3px;
1191                 border-style: double;
1192                 pointer-events: none;
1193         }
1194         #markdown-hints::after {
1195                 content: "(Type to hide this help box.)";
1196                 color: #090;
1197                 display: block;
1198                 margin: 12px 18px 13px 10px;
1199                 padding: 5px;
1200                 font-size: 0.9em;
1201                 text-align: center;
1202         }
1203 }
1204
1205 /*================*/
1206 /* EDIT POST FORM */
1207 /*================*/
1208
1209 @media only screen and (max-width: 520px) {
1210         #edit-post-form {
1211                 padding-bottom: 0;
1212         }
1213         #edit-post-form .post-meta-fields {
1214                 grid-template-columns: 4.5em auto auto auto 1fr auto;
1215         }
1216         #edit-post-form label[for='url'],
1217         #edit-post-form label[for='section'],
1218         #edit-post-form label[for='title'] {
1219                 padding-left: 0;
1220         }
1221         #edit-post-form .post-meta-fields input[type='checkbox'] + label.iconify {
1222                 white-space: normal;
1223                 line-height: 0.9;
1224                 top: -1px;
1225                 font-family: Font Awesome;
1226                 font-weight: 900;
1227                 justify-self: start;
1228         }
1229         #edit-post-form .post-meta-fields .question-checkbox,
1230         #edit-post-form .post-meta-fields .question-checkbox + label {
1231                 grid-column: 6;
1232                 margin-left: unset;
1233         }
1234         #edit-post-form .post-meta-fields input[type='radio'] + label {
1235                 align-self: start;
1236         }
1237         #edit-post-form .textarea-container:focus-within textarea {
1238                 height: calc(100% - 101px);
1239                 min-height: unset;
1240         }
1241
1242         #markdown-hints-checkbox,
1243         #markdown-hints-checkbox + label {
1244                 display: none;
1245         }
1246
1247         #edit-post-form div:last-child {
1248                 clear: both;
1249                 overflow: auto;
1250         }
1251         #edit-post-form input[type='submit'] {
1252                 float: none;
1253                 display: block;
1254                 font-size: 1.5rem;
1255                 margin: 1rem auto 1.5rem auto;
1256                 padding: 6px 12px 8px 12px;
1257         }
1258
1259         #edit-post-form .textarea-container .autocomplete-container,
1260         .comment-controls .textarea-container .autocomplete-container {
1261                 max-height: calc(50vh - 101px);
1262                 position: fixed;
1263                 top: 50vh;
1264                 left: 4px;
1265                 right: 4px;
1266                 width: unset;
1267                 z-index: 11002;
1268         }
1269 }
1270
1271 /*===================*/
1272 /* TABLE OF CONTENTS */
1273 /*===================*/
1274
1275 @media only screen and (max-width: 900px) {
1276         .contents {
1277                 float: none;
1278                 display: table;
1279                 max-width: none;
1280                 margin-left: auto;
1281                 margin-right: auto;
1282         }
1283         .contents.collapsed {
1284                 overflow: hidden;
1285                 display: block;
1286         }
1287 }
1288 @media only screen and (max-width: 520px) {
1289         .contents {
1290                 max-width: 100%;
1291                 margin: 1em auto 0 auto;
1292                 display: table;
1293         }
1294         .contents.collapsed {
1295                 margin-bottom: 0;
1296                 display: block;
1297         }
1298         .contents-head {
1299                 font-size: 1.2em;
1300         }
1301         div.post-body .contents ul {
1302                 font-size: unset;
1303         }
1304 }
1305
1306 /*========================*/
1307 /* QUALIFIED HYPERLINKING */
1308 /*========================*/
1309
1310 @media only screen and (max-width: 520px) {
1311         .qualified-linking-toolbar {
1312                 right: -5em;
1313         }
1314 }
1315
1316 } /* END MOBILE LAYOUT */