@stackoverflow/stacks 0.75.0 → 0.76.0

package/lib/css/components/_stacks-prose.less

@@ -1,503 +1,503 @@
-//
-//  STACK OVERFLOW
-//  PROSE
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $  BASE
-//  ----------------------------------------------------------------------------
-
-.s-prose {
-    --s-prose-line-height: 1.5;
-    --s-prose-spacing: 1.1em;
-    --s-prose-spacing-condensed: calc(var(--s-prose-spacing) / 2); // Reduce the base spacing by half in the context of lists, etc.
-
-    // Base styling
-    font-size: 15px; // Force a font size that doesn’t change at the smallest breakpoint
-    line-height: var(--s-prose-line-height);
-    word-wrap: break-word;
-
-    p {
-        margin-bottom: var(--s-prose-spacing);
-    }
-
-    pre {
-        word-wrap: normal;
-    }
-
-    code {
-        font-size: @fs-body1;
-        font-family: var(--ff-mono);
-    }
-
-    sub,
-    sup {
-        code {
-            font-size: 90%;
-        }
-    }
-
-    hr {
-        border: 0;
-        color: var(--black-100);
-        background-color: var(--black-100);
-        height: 1px;
-        margin-bottom: var(--s-prose-spacing);
-
-        .highcontrast-mode({
-            color: var(--black-500);
-            background-color: var(--black-500);
-        });
-    }
-
-    li {
-        word-wrap: break-word;
-
-        pre {
-            word-wrap: normal;
-        }
-    }
-
-    p,
-    dl,
-    blockquote,
-    table,
-    .s-table-container,
-    .s-link-preview,
-    hr,
-    ol,
-    ul,
-    img,
-    pre,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        &:last-child,
-        &:only-child {
-            margin-bottom: 0;
-        }
-    }
-
-    // ============================================================================
-    //  $ HEADERS
-    // ----------------------------------------------------------------------------
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        font-weight: bold !important;
-        margin-bottom: 0.5em;
-
-        code {
-            font-size: 0.9em;
-        }
-    }
-
-    h1 {
-        font-size: @fs-headline1;
-        margin-bottom: 0.6em;
-    }
-
-    h2 {
-        font-size: @fs-title;
-        margin-bottom: 0.7em;
-    }
-
-    h3 {
-        font-size: @fs-subheading;
-        margin-bottom: 0.74em;
-    }
-
-    h4 {
-        font-size: @fs-body3;
-        margin-bottom: 1em;
-    }
-
-    h5 {
-        font-size: @fs-body2;
-    }
-
-    h6 {
-        font-size: @fs-body1;
-    }
-
-    img,
-    dl,
-    p,
-    pre,
-    blockquote,
-    table,
-    .s-table-container,
-    .s-link-preview,
-    dd,
-    ul,
-    ol {
-        & + h1 {
-            margin-top: 1.5667em;
-        }
-
-        & + h2 {
-            margin-top: 1.667em;
-        }
-
-        & + h3 {
-            margin-top: 1.4667em;
-        }
-
-        & + h4,
-        & + h5,
-        & + h6 {
-            margin-top: 1.6667em;
-        }
-    }
-
-    // ============================================================================
-    //  $ IMAGES
-    // ----------------------------------------------------------------------------
-    img {
-        max-width: 100%;
-        margin-bottom: var(--s-prose-spacing);
-        vertical-align: bottom;
-    }
-
-    blockquote,
-    li,
-    p {
-        img {
-            margin-bottom: 0;
-        }
-    }
-
-    // ============================================================================
-    //  $ LISTS
-    // ----------------------------------------------------------------------------
-    ol,
-    ul {
-        margin-top: 0;
-        margin-bottom: var(--s-prose-spacing);
-
-        p,
-        dl,
-        blockquote,
-        table,
-        hr,
-        ol,
-        ul {
-            &:last-child,
-            &:only-child {
-                margin-bottom: 0;
-            }
-        }
-
-        // Within lists, we shouldn't have so much spacing
-        // in between block-level elements.
-        dl,
-        p,
-        blockquote,
-        table,
-        hr,
-        dd,
-        ul,
-        ol {
-            margin-bottom: var(--s-prose-spacing-condensed);
-        }
-
-        pre {
-            // Add some more spacing on the bottom
-            // For a little extra optical alignment
-            margin-bottom: calc(var(--s-prose-spacing-condensed) + 0.1em);
-        }
-    }
-
-    ol li,
-    ul li {
-        margin-bottom: var(--s-prose-spacing-condensed);
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    li {
-        > ul,
-        > ol {
-            margin-top: var(--s-prose-spacing-condensed);
-        }
-    }
-
-    // ============================================================================
-    //  $ TABLES
-    // ----------------------------------------------------------------------------
-    .s-table-container {
-        margin-bottom: var(--s-prose-spacing);
-    }
-
-    // ============================================================================
-    //  $ LINK PREVIEWS
-    // ----------------------------------------------------------------------------
-    .s-link-preview {
-        margin-bottom: var(--s-prose-spacing);
-    }
-
-    // ============================================================================
-    //  $ DEFINITION LISTS
-    // ----------------------------------------------------------------------------
-    dl {
-        margin-top: 0;
-        margin-bottom: var(--s-prose-spacing);
-    }
-
-    dt {
-        font-weight: bold;
-    }
-
-    dd {
-        margin: 0;
-        margin-bottom: var(--s-prose-spacing);
-        padding: 0;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    // The outer div enforces a max-width of 640px. The inner div has a height of 35 pixels, and a
-    // padding-bottom of 56.25%. Padding percentages, even for top/bottom, are always relative
-    // to the *width*, so the padding always has an aspect ratio of 1/0.5625, or 16/9. Thus in total,
-    // the iframe has a height of 35 + width * 9/16. 35 pixels is the height of youtube's player controls,
-    // so we have exactly the space we need for video + controls. The iframe is positioned absolutely
-    // because only in that case does the containing block include the padding. The inner div exists
-    // because without it you couldn't correctly handle max-width (as there obviously isn't a max-padding-bottom).
-    .youtube-embed {
-        width: 100%;
-        max-width: 640px;
-        position: relative;
-
-        > div {
-            width: 100%;
-            height: 35px;
-            padding-bottom: 56.25%;
-            position: relative;
-
-            iframe {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-
-    .soundcloud-embed iframe {
-        width: 100%;
-        max-width: 640px;
-        height: 116px;
-    }
-
-    // ============================================================================
-    //  $ BLOCKQUOTES
-    // ----------------------------------------------------------------------------
-    blockquote,
-    q {
-        quotes: none;
-    }
-
-    blockquote {
-        position: relative;
-        margin: 0 1em var(--s-prose-spacing) 1em;
-        padding: 0.8em 0.8em 0.8em 1em;
-        color: var(--black-600);
-
-        &:before {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            width: @su4;
-            border-radius: @su8;
-            background: var(--black-150);
-
-            .highcontrast-mode({
-                background: var(--black-600);
-            });
-        }
-
-        blockquote {
-            margin-left: 0; // We don't need the intial indentation on nested blockquotes
-        }
-
-        * {
-            &:last-child { margin-bottom: 0; }
-        }
-    }
-
-    // Blockquotes inside list
-    li {
-        blockquote {
-            margin-top: var(--s-prose-spacing-condensed);
-        }
-    }
-
-    // ============================================================================
-    //  $ SPOILERS
-    // ----------------------------------------------------------------------------
-    .spoiler {
-        background: var(--black-050);
-        border-radius: @br-md;
-        color: var(--black-800);
-        cursor: pointer;
-        min-height: @su48; // TODO: Let's find a solution that doesn't have a magic number
-
-        > * {
-            visibility: hidden; // hidden elements don't respond to mouse events, but still retain their space
-            opacity: 0;
-            transition: opacity 0.1s ease-in-out;
-        }
-
-        &.is-visible {
-            cursor: auto;
-
-            > * {
-                visibility: visible;
-                opacity: 1;
-            }
-
-            &:after {
-                opacity: 0;
-            }
-        }
-
-        &:after {
-            content: attr(data-spoiler) " ";
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: center right;
-            font-size: @fs-body1;
-            color: var(--black-500);
-            padding-right: 22px;
-            position: absolute;
-            top: 1em;
-            right: 1em;
-            transition: opacity 0.1s ease-in-out;
-            pointer-events: none;
-
-            #stacks-internals #screen-sm({
-                top: 9px; // Adjust the position in the smallest breakpoint
-            });
-        }
-    }
-
-    // ============================================================================
-    //  $ KEYBOARD
-    // ----------------------------------------------------------------------------
-    kbd {
-        display: inline-block;
-        margin: 0 0.1em;
-        padding: 0.1em 0.6em;
-        font-family: var(--ff-sans);
-        font-size: @fs-fine;
-        line-height: var(--s-prose-line-height);
-        color: var(--black-800);
-        text-shadow: 0 1px 0 var(--white);
-        background-color: var(--black-075);
-        border: 1px solid var(--black-300);
-        border-radius: @br-sm;
-        box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
-        overflow-wrap: break-word;
-
-        .dark-mode({
-            box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.8);
-            border-color: transparent;
-            border-top-color: @black-500;
-        });
-    }
-
-    // ============================================================================
-    //  $ CODE STYLES
-    // ----------------------------------------------------------------------------
-    *:not(.s-code-block) > code {
-        padding: @su2 @su4;
-        color: var(--black-800);
-        background-color: var(--black-075);
-        border-radius: @br-sm;
-    }
-
-    // When contained within a link, we want the code to be link-colored
-    *:not(.s-code-block) > a code {
-        color: var(--theme-link-color);
-    }
-
-    pre {
-        margin-top: 0;
-        margin-bottom: calc(var(--s-prose-spacing) + 0.4em); // Increase this spacing for better optical alignment
-    }
-
-    pre:not(.s-code-block) {
-        padding: @su12;
-        color: var(--highlight-color);
-        width: auto;
-        max-height: 600px;
-        overflow: auto;
-        font-size: @fs-body1;
-        line-height: @lh-md;
-        background-color: var(--highlight-bg);
-        border-radius: @br-md;
-
-        // Reset the code element when contained within a <pre>
-        code {
-            background-color: transparent;
-            padding: 0;
-            border-radius: 0;
-        }
-
-        @scrollbar-styles();
-    }
-
-    &.s-prose__xs {
-        font-size: @fs-caption;
-        line-height: @lh-sm;
-    }
-
-    &.s-prose__sm {
-        font-size: @fs-body1;
-        line-height: @lh-md;
-    }
-
-    &.s-prose__md {
-        font-size: @fs-body3;
-        line-height: @lh-xl;
-    }
-
-    &.s-prose__xs,
-    &.s-prose__sm,
-    &.s-prose__md {
-        h1 {
-            font-size: @fs-headline1-relative;
-        }
-
-        h2 {
-            font-size: @fs-title-relative;
-        }
-
-        h3 {
-            font-size: @fs-subheading-relative;
-        }
-
-        h4 {
-            font-size: @fs-body3-relative;
-        }
-
-        h5 {
-            font-size: @fs-body2-relative;
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  PROSE
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  ============================================================================
+//  $  BASE
+//  ----------------------------------------------------------------------------
+
+.s-prose {
+    --s-prose-line-height: 1.5;
+    --s-prose-spacing: 1.1em;
+    --s-prose-spacing-condensed: calc(var(--s-prose-spacing) / 2); // Reduce the base spacing by half in the context of lists, etc.
+
+    // Base styling
+    font-size: 15px; // Force a font size that doesn’t change at the smallest breakpoint
+    line-height: var(--s-prose-line-height);
+    word-wrap: break-word;
+
+    p {
+        margin-bottom: var(--s-prose-spacing);
+    }
+
+    pre {
+        word-wrap: normal;
+    }
+
+    code {
+        font-size: @fs-body1;
+        font-family: var(--ff-mono);
+    }
+
+    sub,
+    sup {
+        code {
+            font-size: 90%;
+        }
+    }
+
+    hr {
+        border: 0;
+        color: var(--black-100);
+        background-color: var(--black-100);
+        height: 1px;
+        margin-bottom: var(--s-prose-spacing);
+
+        .highcontrast-mode({
+            color: var(--black-500);
+            background-color: var(--black-500);
+        });
+    }
+
+    li {
+        word-wrap: break-word;
+
+        pre {
+            word-wrap: normal;
+        }
+    }
+
+    p,
+    dl,
+    blockquote,
+    table,
+    .s-table-container,
+    .s-link-preview,
+    hr,
+    ol,
+    ul,
+    img,
+    pre,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        &:last-child,
+        &:only-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // ============================================================================
+    //  $ HEADERS
+    // ----------------------------------------------------------------------------
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-weight: bold !important;
+        margin-bottom: 0.5em;
+
+        code {
+            font-size: 0.9em;
+        }
+    }
+
+    h1 {
+        font-size: @fs-headline1;
+        margin-bottom: 0.6em;
+    }
+
+    h2 {
+        font-size: @fs-title;
+        margin-bottom: 0.7em;
+    }
+
+    h3 {
+        font-size: @fs-subheading;
+        margin-bottom: 0.74em;
+    }
+
+    h4 {
+        font-size: @fs-body3;
+        margin-bottom: 1em;
+    }
+
+    h5 {
+        font-size: @fs-body2;
+    }
+
+    h6 {
+        font-size: @fs-body1;
+    }
+
+    img,
+    dl,
+    p,
+    pre,
+    blockquote,
+    table,
+    .s-table-container,
+    .s-link-preview,
+    dd,
+    ul,
+    ol {
+        & + h1 {
+            margin-top: 1.5667em;
+        }
+
+        & + h2 {
+            margin-top: 1.667em;
+        }
+
+        & + h3 {
+            margin-top: 1.4667em;
+        }
+
+        & + h4,
+        & + h5,
+        & + h6 {
+            margin-top: 1.6667em;
+        }
+    }
+
+    // ============================================================================
+    //  $ IMAGES
+    // ----------------------------------------------------------------------------
+    img {
+        max-width: 100%;
+        margin-bottom: var(--s-prose-spacing);
+        vertical-align: bottom;
+    }
+
+    blockquote,
+    li,
+    p {
+        img {
+            margin-bottom: 0;
+        }
+    }
+
+    // ============================================================================
+    //  $ LISTS
+    // ----------------------------------------------------------------------------
+    ol,
+    ul {
+        margin-top: 0;
+        margin-bottom: var(--s-prose-spacing);
+
+        p,
+        dl,
+        blockquote,
+        table,
+        hr,
+        ol,
+        ul {
+            &:last-child,
+            &:only-child {
+                margin-bottom: 0;
+            }
+        }
+
+        // Within lists, we shouldn't have so much spacing
+        // in between block-level elements.
+        dl,
+        p,
+        blockquote,
+        table,
+        hr,
+        dd,
+        ul,
+        ol {
+            margin-bottom: var(--s-prose-spacing-condensed);
+        }
+
+        pre {
+            // Add some more spacing on the bottom
+            // For a little extra optical alignment
+            margin-bottom: calc(var(--s-prose-spacing-condensed) + 0.1em);
+        }
+    }
+
+    ol li,
+    ul li {
+        margin-bottom: var(--s-prose-spacing-condensed);
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    li {
+        > ul,
+        > ol {
+            margin-top: var(--s-prose-spacing-condensed);
+        }
+    }
+
+    // ============================================================================
+    //  $ TABLES
+    // ----------------------------------------------------------------------------
+    .s-table-container {
+        margin-bottom: var(--s-prose-spacing);
+    }
+
+    // ============================================================================
+    //  $ LINK PREVIEWS
+    // ----------------------------------------------------------------------------
+    .s-link-preview {
+        margin-bottom: var(--s-prose-spacing);
+    }
+
+    // ============================================================================
+    //  $ DEFINITION LISTS
+    // ----------------------------------------------------------------------------
+    dl {
+        margin-top: 0;
+        margin-bottom: var(--s-prose-spacing);
+    }
+
+    dt {
+        font-weight: bold;
+    }
+
+    dd {
+        margin: 0;
+        margin-bottom: var(--s-prose-spacing);
+        padding: 0;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // The outer div enforces a max-width of 640px. The inner div has a height of 35 pixels, and a
+    // padding-bottom of 56.25%. Padding percentages, even for top/bottom, are always relative
+    // to the *width*, so the padding always has an aspect ratio of 1/0.5625, or 16/9. Thus in total,
+    // the iframe has a height of 35 + width * 9/16. 35 pixels is the height of youtube's player controls,
+    // so we have exactly the space we need for video + controls. The iframe is positioned absolutely
+    // because only in that case does the containing block include the padding. The inner div exists
+    // because without it you couldn't correctly handle max-width (as there obviously isn't a max-padding-bottom).
+    .youtube-embed {
+        width: 100%;
+        max-width: 640px;
+        position: relative;
+
+        > div {
+            width: 100%;
+            height: 35px;
+            padding-bottom: 56.25%;
+            position: relative;
+
+            iframe {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .soundcloud-embed iframe {
+        width: 100%;
+        max-width: 640px;
+        height: 116px;
+    }
+
+    // ============================================================================
+    //  $ BLOCKQUOTES
+    // ----------------------------------------------------------------------------
+    blockquote,
+    q {
+        quotes: none;
+    }
+
+    blockquote {
+        position: relative;
+        margin: 0 1em var(--s-prose-spacing) 1em;
+        padding: 0.8em 0.8em 0.8em 1em;
+        color: var(--black-600);
+
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: @su4;
+            border-radius: @su8;
+            background: var(--black-150);
+
+            .highcontrast-mode({
+                background: var(--black-600);
+            });
+        }
+
+        blockquote {
+            margin-left: 0; // We don't need the intial indentation on nested blockquotes
+        }
+
+        * {
+            &:last-child { margin-bottom: 0; }
+        }
+    }
+
+    // Blockquotes inside list
+    li {
+        blockquote {
+            margin-top: var(--s-prose-spacing-condensed);
+        }
+    }
+
+    // ============================================================================
+    //  $ SPOILERS
+    // ----------------------------------------------------------------------------
+    .spoiler {
+        background: var(--black-050);
+        border-radius: @br-md;
+        color: var(--black-800);
+        cursor: pointer;
+        min-height: @su48; // TODO: Let's find a solution that doesn't have a magic number
+
+        > * {
+            visibility: hidden; // hidden elements don't respond to mouse events, but still retain their space
+            opacity: 0;
+            transition: opacity 0.1s ease-in-out;
+        }
+
+        &.is-visible {
+            cursor: auto;
+
+            > * {
+                visibility: visible;
+                opacity: 1;
+            }
+
+            &:after {
+                opacity: 0;
+            }
+        }
+
+        &:after {
+            content: attr(data-spoiler) " ";
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center right;
+            font-size: @fs-body1;
+            color: var(--black-500);
+            padding-right: 22px;
+            position: absolute;
+            top: 1em;
+            right: 1em;
+            transition: opacity 0.1s ease-in-out;
+            pointer-events: none;
+
+            #stacks-internals #screen-sm({
+                top: 9px; // Adjust the position in the smallest breakpoint
+            });
+        }
+    }
+
+    // ============================================================================
+    //  $ KEYBOARD
+    // ----------------------------------------------------------------------------
+    kbd {
+        display: inline-block;
+        margin: 0 0.1em;
+        padding: 0.1em 0.6em;
+        font-family: var(--ff-sans);
+        font-size: @fs-fine;
+        line-height: var(--s-prose-line-height);
+        color: var(--black-800);
+        text-shadow: 0 1px 0 var(--white);
+        background-color: var(--black-075);
+        border: 1px solid var(--black-300);
+        border-radius: @br-sm;
+        box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
+        overflow-wrap: break-word;
+
+        .dark-mode({
+            box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.8);
+            border-color: transparent;
+            border-top-color: @black-500;
+        });
+    }
+
+    // ============================================================================
+    //  $ CODE STYLES
+    // ----------------------------------------------------------------------------
+    *:not(.s-code-block) > code {
+        padding: @su2 @su4;
+        color: var(--black-800);
+        background-color: var(--black-075);
+        border-radius: @br-sm;
+    }
+
+    // When contained within a link, we want the code to be link-colored
+    *:not(.s-code-block) > a code {
+        color: var(--theme-link-color);
+    }
+
+    pre {
+        margin-top: 0;
+        margin-bottom: calc(var(--s-prose-spacing) + 0.4em); // Increase this spacing for better optical alignment
+    }
+
+    pre:not(.s-code-block) {
+        padding: @su12;
+        color: var(--highlight-color);
+        width: auto;
+        max-height: 600px;
+        overflow: auto;
+        font-size: @fs-body1;
+        line-height: @lh-md;
+        background-color: var(--highlight-bg);
+        border-radius: @br-md;
+
+        // Reset the code element when contained within a <pre>
+        code {
+            background-color: transparent;
+            padding: 0;
+            border-radius: 0;
+        }
+
+        @scrollbar-styles();
+    }
+
+    &.s-prose__xs {
+        font-size: @fs-caption;
+        line-height: @lh-sm;
+    }
+
+    &.s-prose__sm {
+        font-size: @fs-body1;
+        line-height: @lh-md;
+    }
+
+    &.s-prose__md {
+        font-size: @fs-body3;
+        line-height: @lh-xl;
+    }
+
+    &.s-prose__xs,
+    &.s-prose__sm,
+    &.s-prose__md {
+        h1 {
+            font-size: @fs-headline1-relative;
+        }
+
+        h2 {
+            font-size: @fs-title-relative;
+        }
+
+        h3 {
+            font-size: @fs-subheading-relative;
+        }
+
+        h4 {
+            font-size: @fs-body3-relative;
+        }
+
+        h5 {
+            font-size: @fs-body2-relative;
+        }
+    }
+}