www/style_mobile_additions.css.php

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