CSS: Page Content and Text Elements

page-content-text-elements.css

/* Page Content and Text Elements */
/* Lists */
.page-content {
      ul {
        margin: 0 0 1em 0;
        padding-left: 3em;
      }
      ol {
        margin: 0 0 1em 0;
        padding-left: 3em;
      }
/* Superscript */
      sup { /* Removes extra row height when using superscript */
        line-height: 0;
      }
/* Links */
      a {
        text-decoration: none !important; /* Don't underline links normally */
      }
      a:hover {
        text-decoration: underline !important; /* Underline links when hovered over */
      }
      a:focus { /* Styling for when links are clicked */
        outline: none;
        box-shadow: 0 0 0 2px #902424;
        border-radius: 2px;
      }
/* Clear and Pillars */
      .clear { /* Clears text (used to place headers below the infobox) */
        clear: both;
      }
      .pillars2 { /* 2-columned list */
        column-count: 2;
      }
      .pillars3 { /* 3-columned list */
        column-count: 3;
      }
      .pillars4 { /* 4-columned list */
        column-count: 4;
      }
      .pillars2 li { /* Don't wrap individual li */
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
      }
      .pillars3 li { /* Don't wrap individual li */
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
      }
      .pillars4 li { /* Don't wrap individual li */
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
      }
/* Hatnote and Indent */
      .hatnote { /* Hatnote (the "for more information, see x" text below headers) */
        padding-left: 3em;
        padding-bottom: 1.5em;
        font-style: italic;
      }
      .indent { /* Indentation of text on pages */
        padding-left: 3em;
        padding-right: 3em;
      }
/* Figures */
      figure {
        display: inline-block;
        float: right;
        text-align: center;
        border-radius: 6px;
        padding: 6px 6px 0px 6px;
        margin: 0em 1em 1em 1em;
        background-color: #343434;
      }
      figure img {
        display: block;
        max-width: 100%;
        border-radius: 4px;
      }
      figcaption {
        font-size: 0.8rem;
        color: #a6a6a6;
        margin: 4px 4px 4px 4px;
        font-style: italic;
      }
      html.dark-mode figure { background-color: #343434 }
/* Spoiler Warning Box */
      .warning { /* Spoiler warning styling */
        box-sizing: border-box;
        max-width: 600px;
        margin: 0 auto 20px;
        padding: 12px 16px;
        background-color: #ffdddd;
        border-left: 6px solid #902424;
        border-radius: 6px;
        color: #222;
        text-align: center;
        font: bold 0.95rem Arial, sans-serif;
        box-shadow: 0 2px 6px rgba(0,0,0,.1);
      }
      .warning p {
        margin: 0;
      }
      .warning strong { /* Red-highlighted emphasized words */
        color: #902424;
      }
/* Spoiler Tagging */
      .spoiler { /* Conceal spoiler text */
        background-color: gray;
        color: transparent;
        user-select: none;
      }
      .spoiler a {
        color: transparent;
        text-decoration: underline;
        pointer-events: none;
      }
      .spoiler:hover { /* Show when hovered over */
        background-color: inherit;
        color: currentColor;
      }
      .spoiler:hover a {
        color: #c83232;
        pointer-events: auto;
      }
/* Header Formatting */
      h2 { /* h2 styling */
        margin-bottom: -0.4em;
        font-size: 2.2rem;
      }
      h3 { /* h3 styling */
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 1.2em;
        margin-bottom: 0.5em;
      }
      h4 { /* h4 styling */
        font-size: 1.1rem;
        font-weight: bold;
        margin-top: 1.0em;
        margin-bottom: 0.2em;
      }
      h-custom { /* Header that doesn't show up in the table-of-contents */
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 1.2em;
        margin-bottom: 0.5em;
      }
      .subheader1 { /* Header that doesn't show up in the table-of-contents */
        font-size: 1.6em;
        font-weight: bold;
        margin-top: 1em;
      }
/* Dropdowns (Details/Summary) */
      details { /* Dropdown styling */
        width: 100%;
        margin-bottom: 1em;
        border: none !important;
        outline: none !important;
      }
      summary { /* Dropdown header styling */
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        background-color: transparent !important;
        padding: 0;
        border-bottom: 1px solid #5a5a5a;
      }
      summary h2 { /* Dropdown header styling (h2) */
        margin: 0;
        font-size: 1.8rem;
        font-weight: bold;
        white-space: nowrap;
        display: inline;
      }
      summary h3 { /* Dropdown header styling (h3) */
        margin: 0;
        font-size: 1.4rem;
        font-weight: bold;
        white-space: nowrap;
        display: inline;
      }
      summary subheader1 { /* Dropdown header styling (hide in table-of-contents) */
        margin: 0;
        font-size: 1.4rem;
        font-weight: bold;
        white-space: nowrap;
        display: inline;
      }
      summary:focus { /* Keyboard navigation styling of dropdowns */
        outline: none;
        box-shadow: none;
      }
      summary:focus-visible {
        outline: 2px solid #902424;
        box-shadow: none;
      }
    }
/* Mobile Optimizations for Page Content */
    @media screen and (max-width: 600px) {
      .page-content {
        ul {
          padding-left: 2em;
        }
        ol {
          padding-left: 2em;
        }
        .pillars2 { /* Only 1 column on mobile */
          column-count: 1;
        }
        .pillars3 {
          column-count: 1;
        }
        .pillars4 {
          column-count: 1;
        }
        .hatnote { /* Less indent on mobile */
          padding-left: 1.5em;
        }
        .indent { /* No indent on mobile */
          padding-left: 0em;
          padding-right: 0em;
        }
        figure {
          float: none !important;
          display: table;
          text-align: center;
          margin: auto;
          margin-bottom: 1em;
        }
        figure img {
          display: block;
          margin: auto;
        }
        .warning {
          max-width: 100%;
          padding: 4px;
        }
        .page-content h2 {
          font-size: 1.6rem;
        }
        .page-content h3 {
          font-size: 1.2rem;
          text-align: left;
        }
        .page-content h4 {
          font-size: 1rem;
          text-align: left;
        }
        summary h2 {
          font-size: 1.4rem;
          white-space: normal;
        }
        summary h3 {
          font-size: 1.0rem;
          white-space: normal;
        }
        summary subheader {
          font-size: 1.0rem;
          white-space: normal;
        }
      }
    }