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