diff --git a/sass/main.scss b/sass/main.scss index d22a1e526..2079528c1 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -138,8 +138,8 @@ html { body { display: flex; flex-direction: column; - margin: 0 5vmin; - padding: 0; + margin-inline: 5vmin; + margin-block: 0; min-height: 100vh; } @@ -147,7 +147,7 @@ body { word-wrap: break-word; margin: 0 auto; margin-top: 6vmin; - margin-bottom: 4rem; + margin-block-end: 4rem; width: 100%; max-width: var(--max-layout-width); } @@ -174,18 +174,18 @@ article { } .full-width { - margin-right: -$base-margin; - margin-left: -$base-margin; + margin-inline-start: -$base-margin; + margin-inline-end: -$base-margin; max-width: calc(100% + 2*$base-margin); } li { p:not(:last-child) { - margin-bottom: 0; + margin-block-end: 0; } p + :last-child { - margin-bottom: var(--paragraph-spacing); + margin-block-end: var(--paragraph-spacing); } } } @@ -210,62 +210,44 @@ h3, h4, h5, h6 { + display: block; position: relative; + margin: 0; } h1 { - display: block; margin-top: 0.67em; - margin-right: 0; - margin-bottom: 0em; - margin-left: 0; font-weight: 550; font-size: 1.62rem; } h2 { - display: block; margin-top: 0.5em; - margin-right: 0; - margin-bottom: 0em; - margin-left: 0; font-weight: 550; font-size: 1.4rem; } h3 { - display: block; margin-top: 0.3em; - margin-right: 0; - margin-bottom: 0em; - margin-left: 0; font-weight: 550; font-size: 1.2rem; } h4 { - display: block; margin-top: 0.83em; - margin-right: 0; - margin-bottom: 0em; - margin-left: 0; font-weight: 550; font-size: 1rem; } h5 { - display: block; margin-top: 0.83em; - margin-right: 0; - margin-bottom: 0em; - margin-left: 0; font-weight: normal; font-size: 1rem; } p { margin-top: 0.4rem; - margin-bottom: var(--paragraph-spacing); + margin-block-end: var(--paragraph-spacing); font-size: 1em; line-height: 2rem; } @@ -294,7 +276,7 @@ video { } .subheader { - margin-bottom: 2rem; + margin-block-end: 2rem; } .mobile-only { @@ -312,8 +294,8 @@ video { article .full-width { display: block; - margin-right: 0; - margin-left: 0; + margin-inline-start: 0; + margin-inline-end: 0; max-width: none; overflow-x: auto; } @@ -334,7 +316,8 @@ video { } body { - margin: 0 16px; + margin-inline: 16px; + margin-block: 0; } } diff --git a/sass/parts/_admonitions.scss b/sass/parts/_admonitions.scss index 276c6ff2d..972f5e764 100644 --- a/sass/parts/_admonitions.scss +++ b/sass/parts/_admonitions.scss @@ -88,16 +88,16 @@ .admonition { display: flex; align-items: flex-start; - margin: 1em 0; - border-left: 6px solid; + margin-block: 1em; border-radius: 10px; + border-inline-start: 6px solid; padding: 0.8rem; color: var(--text-color-high-contrast); font-family: var(--sans-serif-font); p { - margin-bottom: 0; - margin-left: -1.75rem; + margin-inline-start: -1.75rem; + margin-block-end: 0; font-family: inherit; } diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index 5f4b80611..6df323b86 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -1,21 +1,22 @@ .archive { - margin-top: 4vmin; + margin-block-start: 4vmin; .listing-title { - margin-bottom: 1rem; + margin-block-end: 1rem; font-size: 1.5rem; } .listing-item { display: flex; gap: 1rem; - margin-bottom: 0.5rem; - padding: 0.2rem 1rem; + margin-block-end: 0.5rem; + padding-inline: 1rem; + padding-block: 0.2rem; .post-time { - padding-left: 1vmin; - min-width: 5rem; - text-align: left; + padding-inline-start: 1vmin; + min-inline-size: 5rem; + text-align: start; .date { color: var(--meta-color); diff --git a/sass/parts/_cards.scss b/sass/parts/_cards.scss index c95688132..9a415beff 100644 --- a/sass/parts/_cards.scss +++ b/sass/parts/_cards.scss @@ -4,7 +4,7 @@ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 4vmin; - padding: 12px 0; + padding-block: 12px; .card { box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; @@ -22,7 +22,9 @@ } .card-info { - padding: 0 24px 24px; + padding-inline: 24px; + padding-block-start: 0; + padding-block-end: 24px; text-align: center; } diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss index 7fdc5664e..3940997da 100644 --- a/sass/parts/_code.scss +++ b/sass/parts/_code.scss @@ -1,7 +1,8 @@ code { border-radius: 5px; background-color: var(--bg-1); - padding: 0.1em 0.2em; + padding-inline: 0.2em; + padding-block: 0.1em; font-size: 0.9rem; font-family: var(--code-font); @@ -17,7 +18,7 @@ code { border-collapse: collapse; border-spacing: 0rem; width: 100%; - text-align: left; + text-align: start; td, th, @@ -29,7 +30,7 @@ code { tbody td:first-child { width: 2rem; user-select: none; - text-align: left; + text-align: start; } tbody tr:nth-child(even) { @@ -46,7 +47,9 @@ pre { display: block; position: relative; border-radius: 5px; - padding: 2.4rem 1rem 1rem; + padding-inline: 1rem; + padding-block-start: 2.4rem; + padding-block-end: 1rem; overflow: hidden; overflow-x: auto; line-height: 1.4; @@ -66,16 +69,16 @@ pre { display: block; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; background-color: var(--primary-color); padding: 0.3rem; - padding-left: 1rem; + padding-inline-start: 1rem; width: calc(100% - 1.3rem); height: 0.9rem; content: attr(data-lang); color: var(--hover-color); font-size: 0.65rem; - text-align: left; + text-align: start; text-transform: uppercase; } @@ -83,15 +86,15 @@ pre { display: block; position: absolute; top: 0; - right: 1.3rem; + inset-inline-end: 1.3rem; padding-top: 0.3rem; - padding-right: 1.3rem; + padding-inline-end: 1.3rem; max-width: calc(100% - 14em); height: 0.9rem; overflow: hidden; color: var(--hover-color); font-size: 0.65rem; - text-align: right; + text-align: end; text-overflow: ellipsis; white-space: nowrap; } @@ -102,10 +105,10 @@ pre { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M217.002-67.694q-37.732 0-64.02-26.288-26.287-26.287-26.287-64.019V-707.69h77.999v549.689q0 4.615 3.846 8.462 3.846 3.846 8.462 3.846h451.689v77.999H217.002Zm175.999-175.999q-37.733 0-64.02-26.287T302.694-334v-463.383q0-37.732 26.287-64.02 26.287-26.287 64.02-26.287h365.383q37.732 0 64.019 26.287 26.288 26.288 26.288 64.02V-334q0 37.733-26.288 64.02-26.287 26.287-64.019 26.287H393.001Zm0-77.998h365.383q4.615 0 8.462-3.847 3.846-3.846 3.846-8.462v-463.383q0-4.616-3.846-8.462-3.847-3.846-8.462-3.846H393.001q-4.616 0-8.462 3.846-3.847 3.846-3.847 8.462V-334q0 4.616 3.847 8.462 3.846 3.847 8.462 3.847Zm-12.309 0v-488V-321.691Z'/%3E%3C/svg%3E"); position: absolute; top: 0.3rem; - right: 0.7rem; align-self: center; z-index: 1; cursor: pointer; + inset-inline-end: 0.7rem; background: var(--hover-color); background-size: contain; width: 0.9rem; diff --git a/sass/parts/_comments.scss b/sass/parts/_comments.scss index 2b3d8d280..aab54d9d0 100644 --- a/sass/parts/_comments.scss +++ b/sass/parts/_comments.scss @@ -23,7 +23,8 @@ margin: 0.5em auto; border: none; background: none; - padding: 0.5em 1em; + padding-block: 0.5em; + padding-inline: 1em; color: inherit; font-size: 0.95rem; font-family: var(--sans-serif-font); diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index 200206ce8..2b49c3df0 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -1,6 +1,6 @@ footer { margin-top: auto; - margin-bottom: 1.4rem; + margin-block-end: 1.4rem; color: var(--meta-color); font-size: 0.88rem; font-family: var(--post-font-family); diff --git a/sass/parts/_header-anchor.scss b/sass/parts/_header-anchor.scss index 9d498331c..8a06200ac 100644 --- a/sass/parts/_header-anchor.scss +++ b/sass/parts/_header-anchor.scss @@ -4,8 +4,8 @@ justify-content: center; align-items: center; opacity: 0; - margin-left: -2rem; - padding-right: 0.3rem; + margin-inline-start: -2rem; + padding-inline-end: 0.3rem; width: 1.9rem; height: 100%; user-select: none; @@ -15,11 +15,6 @@ } } -:dir(rtl) .header-anchor { - margin-right: -2rem; - padding-left: 0.3rem; -} - .link-icon { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.78 3.653a3.936 3.936 0 1 1 5.567 5.567l-3.627 3.627a3.936 3.936 0 0 1-5.88-.353.75.75 0 0 0-1.18.928 5.436 5.436 0 0 0 8.12.486l3.628-3.628a5.436 5.436 0 1 0-7.688-7.688l-3 3a.75.75 0 0 0 1.06 1.061l3-3Z'%3E%3C/path%3E%3Cpath d='M7.28 11.153a3.936 3.936 0 0 1 5.88.353.75.75 0 0 0 1.18-.928 5.436 5.436 0 0 0-8.12-.486L2.592 13.72a5.436 5.436 0 1 0 7.688 7.688l3-3a.75.75 0 1 0-1.06-1.06l-3 3a3.936 3.936 0 0 1-5.567-5.568l3.627-3.627Z'%3E%3C/path%3E%3C/svg%3E"); align-self: center; diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 9282187f2..fbba0bda5 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -4,7 +4,7 @@ header { } .page-header { - margin: 4rem 0px 1rem 0px; + margin-block: 4rem 1rem; font-size: 3em; line-height: 100%; font-family: var(--header-font); @@ -17,7 +17,7 @@ header { justify-content: space-between; align-items: center; margin: 0 auto; - padding: 1em 0; + padding-block: 1em; max-width: var(--max-layout-width); } @@ -48,7 +48,7 @@ header { } .home-title { - margin-left: -0.12rem; + margin-inline-start: -0.12rem; border: none; padding: 0.12rem; color: var(--primary-color); @@ -85,8 +85,8 @@ header { display: flex; justify-content: center; align-items: center; - margin-right: 0.5rem; - margin-left: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; .language-switcher-icon { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' d='M1 12a11 11 90 0 0 22 0 11 11 90 0 0-22 0m1-4h20M2 16h20M11 1a21 21 90 0 0 0 22m2-22a21 21 90 0 1 0 22'/%3E%3C/svg%3E%0A"); @@ -129,8 +129,8 @@ header { transform: translateX(-50%); z-index: 1; background: var(--background-color); - padding-right: 0.5rem; - padding-left: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; text-align: center; white-space: nowrap; diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss index 08ef90b4e..79e17a645 100644 --- a/sass/parts/_home-banner.scss +++ b/sass/parts/_home-banner.scss @@ -7,11 +7,11 @@ @media only screen and (max-width: 600px) { display: block; - margin-bottom: 2rem; + margin-block-end: 2rem; } #home-banner-text { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; color: var(--primary-color); font-size: 1.875rem; line-height: 3rem; @@ -22,12 +22,12 @@ #home-banner-header { margin: 0; - margin-bottom: 1rem; + margin-block-end: 1rem; font-weight: 550; font-size: 2.8rem; @media only screen and (max-width: 600px) { - margin-bottom: 0; + margin-block-end: 0; font-size: 2.2rem; } } @@ -53,7 +53,7 @@ #image-container-home { position: relative; - padding-left: 2rem; + padding-inline-start: 2rem; min-width: 11rem; min-height: 11rem; overflow: hidden; @@ -74,7 +74,7 @@ } @media only screen and (max-width: 600px) { - padding-left: 0; + padding-inline-start: 0; } } } diff --git a/sass/parts/_image.scss b/sass/parts/_image.scss index 6960b898c..e8bae011a 100644 --- a/sass/parts/_image.scss +++ b/sass/parts/_image.scss @@ -27,7 +27,7 @@ img.inline { figure h4 { margin: 0; - margin-bottom: 1em; + margin-block-end: 1em; font-size: 1rem; } diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index ebe1c14aa..e5bd71606 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -1,7 +1,8 @@ .draft-label { - margin-right: 0.3rem; + margin-inline-end: 0.3rem; background-color: var(--primary-color); - padding: 2px 4px; + padding-inline: 4px; + padding-block: 2px; color: var(--hover-color); } @@ -16,9 +17,9 @@ iframe { display: block; - margin-right: 15%; - margin-bottom: 3vmin; - margin-left: 15%; + margin-inline-start: 15%; + margin-inline-end: 15%; + margin-block-end: 3vmin; border: none; aspect-ratio: 16/9; width: 100vmin; @@ -30,7 +31,7 @@ ul { } .toc-container { - margin-bottom: 4vmin; + margin-block-end: 4vmin; } .padding-top { @@ -81,13 +82,13 @@ a:hover { a:not(.no-hover-padding):hover::after { display: inline-block; position: absolute; - top: 0; - right: -0.15em; - bottom: 0; - left: -0.15em; z-index: -1; + inset-block-end: 0; + inset-block-start: 0; + inset-inline-end: -0.15em; + inset-inline-start: -0.15em; background-color: var(--primary-color); - max-width: 105%; // This fixes multi-line links (see #225) + max-inline-size: 105%; // This fixes multi-line links (see #225) content: ""; } @@ -111,10 +112,10 @@ hr { } .footnote-definition { - margin-bottom: 0.6rem; + margin-block-end: 0.6rem; sup { - margin-right: 0.15rem; + margin-inline-end: 0.15rem; font-size: 0.75rem; font-family: var(--serif-font); } @@ -125,7 +126,7 @@ hr { } .footnote-backlink { - margin-left: 0.2rem; + margin-inline-start: 0.2rem; font-size: 0.8rem; } @@ -134,16 +135,16 @@ hr { } .references p { - margin-left: 2.4rem; + margin-inline-start: 2.4rem; text-indent: -2.4rem; } .info-box { margin-top: 1rem; - margin-bottom: 1rem; + margin-block-end: 1rem; border: 1px solid var(--primary-color); - border-left-width: 0.3rem; border-radius: 10px; + border-inline-start-width: 0.3rem; padding: 1rem; text-align: center; } @@ -187,18 +188,18 @@ details summary { .article-navigation { display: flex; - margin-top: 2rem; - border-top: var(--divider-color) solid 0.5px; - padding-top: 2rem; + margin-block-start: 2rem; + border-block-start: var(--divider-color) solid 0.5px; + padding-block-start: 2rem; div:first-child { flex: 1; - text-align: left; + text-align: start; } div:last-child { flex: 1; - text-align: right; + text-align: end; } div p { @@ -218,25 +219,15 @@ details summary { } } -:dir(rtl) .article-navigation { - div:first-child { - text-align: right; - } - - div:last-child { - text-align: left; - } -} - :dir(rtl) .arrow { display: inline-block; - transform: rotate(180deg); + transform: scaleX(-1); } // This for the arrows that point to a corner, (e.g. '↗', '↘', '↙', '↖') :dir(rtl) .arrow-corner { display: inline-block; - transform: rotate(270deg); + transform: rotate(-90deg); } .mermaid p { diff --git a/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss index a4572fd6e..ce38a83fd 100644 --- a/sass/parts/_posts_list.scss +++ b/sass/parts/_posts_list.scss @@ -7,10 +7,10 @@ display: flex; align-items: flex-start; background-color: var(--navbar-color); - padding: 2.5rem 0; + padding-block: 2.5rem; .bloglist-meta { - margin-right: 0.7rem; + margin-inline-end: 0.7rem; padding: 0; width: 13.5rem; color: var(--meta-color); @@ -32,7 +32,7 @@ .tag { display: inline-block; - margin-right: 0.7rem; + margin-inline-end: 0.7rem; font-weight: 400; font-size: 0.75rem; text-transform: uppercase; @@ -89,15 +89,15 @@ .bloglist-row { flex-direction: column; align-items: flex-start; - padding: 2rem 0; + padding-block: 2rem; .bloglist-meta { - margin-bottom: 0; + margin-block-end: 0; width: 100%; li { display: inline; - margin-right: 0.3rem; + margin-inline-end: 0.3rem; } } diff --git a/sass/parts/_quick_navigation_buttons.scss b/sass/parts/_quick_navigation_buttons.scss index 59ef65396..768592fae 100644 --- a/sass/parts/_quick_navigation_buttons.scss +++ b/sass/parts/_quick_navigation_buttons.scss @@ -64,20 +64,20 @@ right: 0; bottom: 100%; z-index: 2; - margin-bottom: $padding-vertical; + margin-block-end: $padding-vertical; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; border: 1px solid var(--divider-color); border-radius: 5px; background-color: var(--background-color); - padding-right: $padding-horizontal; + padding-inline-end: $padding-horizontal; max-height: 70vh; overflow-y: auto; font-size: 0.8rem; - text-align: left; + text-align: start; white-space: nowrap; // Prevents wrapping, allowing content to define width. ul { - padding-left: $padding-horizontal; + padding-inline-start: $padding-horizontal; list-style: none; } } diff --git a/sass/parts/_search.scss b/sass/parts/_search.scss index 05caf75e3..486c3ba6e 100644 --- a/sass/parts/_search.scss +++ b/sass/parts/_search.scss @@ -2,7 +2,7 @@ $icon-size: 1.3rem; #searchModal { background: color-mix(in srgb, var(--primary-color) 5%, transparent); - text-align: left; + text-align: start; #searchContainer { padding: 1rem; @@ -18,7 +18,7 @@ $icon-size: 1.3rem; .search-icon { position: absolute; - left: 1rem; + inset-inline-start: 1rem; width: $icon-size; height: $icon-size; @@ -30,8 +30,8 @@ $icon-size: 1.3rem; .close-icon { position: absolute; right: $icon-size; - margin-right: 0.5rem; - margin-left: 1rem; + margin-inline-start: 1rem; + margin-inline-end: 0.5rem; width: $icon-size; height: $icon-size; } @@ -41,7 +41,8 @@ $icon-size: 1.3rem; border: 1px solid var(--divider-color); border-radius: 20px; background-color: var(--input-background-color); - padding: 0.75rem 1rem 0.75rem 3rem; + padding-inline: 3rem 1rem; + padding-block: 0.75rem; width: calc(100% - 2rem); color: var(--text-color); font-size: 1rem; @@ -82,7 +83,8 @@ $icon-size: 1.3rem; > div { cursor: pointer; - padding: 0.5rem 1rem; + padding-inline: 1rem; + padding-block: 0.5rem; &[aria-selected="true"] { background-color: var(--primary-color); @@ -113,8 +115,8 @@ $icon-size: 1.3rem; display: block; position: relative; align-self: center; - margin-right: 0.5rem; - margin-left: 1rem; + margin-inline-start: 1rem; + margin-inline-end: 0.5rem; width: $icon-size; height: $icon-size; } diff --git a/sass/parts/_table.scss b/sass/parts/_table.scss index 3a35a9c32..d6e53267c 100644 --- a/sass/parts/_table.scss +++ b/sass/parts/_table.scss @@ -11,7 +11,8 @@ table { th, td { border: 1px solid var(--bg-1); - padding: 6px 13px; + padding-inline: 13px; + padding-block: 6px; font-size: large; } diff --git a/sass/parts/_tags.scss b/sass/parts/_tags.scss index 077ac5f33..ae28d0a0b 100644 --- a/sass/parts/_tags.scss +++ b/sass/parts/_tags.scss @@ -8,7 +8,7 @@ } .tags-item { - margin-bottom: 1rem; + margin-block-end: 1rem; } } diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss index 6751a7880..9c5bd4fbd 100644 --- a/sass/parts/_theme-switch.scss +++ b/sass/parts/_theme-switch.scss @@ -3,7 +3,7 @@ position: relative; align-self: center; cursor: pointer; - margin-left: 0.5rem; + margin-inline-start: 0.5rem; background: var(--text-color); width: 1rem; height: 1rem; @@ -19,13 +19,13 @@ .theme-resetter { -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" %3E%3Cpath d="M295.87-193.869v-78.001h291.152q43.63 0 72.369-33.424 28.739-33.423 28.739-79.271t-28.739-79.391Q630.652-497.5 587.022-497.5H343.913l87.478 87.478-55.652 55.153L193.869-536.5l181.87-181.631 55.652 55.653-87.478 86.978h243.109q75.435 0 127.272 56.522 51.837 56.521 51.837 134.174 0 77.652-51.837 134.293-51.837 56.642-127.272 56.642H295.87Z"/%3E%3C/svg%3E'); position: absolute; - top: -0.6rem; - right: -0.6rem; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; transition-delay: 0.5s; cursor: pointer; + inset-block-start: -0.6rem; + inset-inline-end: -0.6rem; background: var(--text-color); width: 0.8rem; height: 0.8rem; diff --git a/sass/parts/_zola-error.scss b/sass/parts/_zola-error.scss index c64cea7b9..3bdbcbc62 100644 --- a/sass/parts/_zola-error.scss +++ b/sass/parts/_zola-error.scss @@ -21,7 +21,7 @@ body > div:last-child > div:last-child[style]:not([class]):not([id]) > p[style]: } body > div:last-child > div:last-child[style]:not([class]):not([id]) > pre[style]:last-child { - margin-bottom: 0; + margin-block-end: 0; background-color: var(--admonition-danger-code); padding: 10px; overflow-x: auto; diff --git a/static/isso.css b/static/isso.css index 26d26c501..c5a732957 100644 --- a/static/isso.css +++ b/static/isso.css @@ -27,8 +27,8 @@ h4.isso-thread-heading { } .isso-feedlink { - float: right; - padding-left: 1em; + float: inline-end; + padding-inline-start: 1em; } .isso-feedlink a { @@ -52,13 +52,13 @@ h4.isso-thread-heading { .isso-comment:not(:first-of-type), .isso-follow-up .isso-comment { - margin-bottom: 0.5em; + margin-block-end: 0.5em; border-top: 1px solid var(--divider-color); } .isso-avatar { display: block; - float: left; + float: inline-start; margin: 0.95em 0.95em 0; } @@ -77,7 +77,7 @@ h4.isso-thread-heading { } .isso-follow-up { - padding-left: calc(7% + 20px); + padding-inline-start: calc(7% + 20px); } .isso-comment-footer { @@ -94,7 +94,7 @@ h4.isso-thread-heading { /* Only for comment header, spacer between up-/downvote should have no padding */ .isso-comment-header .isso-spacer { - padding: 0 6px; + padding-inline: 6px; } .isso-spacer, @@ -113,7 +113,7 @@ h4.isso-thread-heading { } .isso-note { - float: right; + float: inline-end; } .isso-author { @@ -146,7 +146,7 @@ h4.isso-thread-heading { } .isso-text p:last-child { - margin-bottom: 0.2em; + margin-block-end: 0.2em; } .isso-text h1, @@ -228,7 +228,7 @@ h4.isso-thread-heading { position: relative; bottom: 1px; vertical-align: middle; - margin-left: 0; + margin-inline-end: 0; } .isso-notification-section { @@ -257,7 +257,7 @@ h4.isso-thread-heading { } .isso-input-wrapper { - margin-right: 0.5em; + margin-inline-end: 0.5em; } .isso-input-wrapper input, @@ -289,7 +289,8 @@ h4.isso-thread-heading { border: none; border-radius: 5px; background-color: var(--primary-color); - padding: 0.6em 1em; + padding-inline: 1em; + padding-block: 0.6em; color: var(--background-color); font-size: 0.8rem; } diff --git a/static/isso.min.css b/static/isso.min.css index 7d106d1a1..2d7b16c93 100644 --- a/static/isso.min.css +++ b/static/isso.min.css @@ -1 +1 @@ -.isso-avatar svg,.isso-preview,.isso-textarea{border:1px solid var(--divider-color);width:100%}#isso-thread *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#isso-thread{margin:0 auto;padding:0;width:100%;color:var(--text-color);font-size:.9em;font-family:var(--sans-serif-font)}h4.isso-thread-heading{padding-bottom:.2em;color:var(--text-color);font-size:1.2rem}.isso-feedlink,.isso-note{float:right}.isso-feedlink a{vertical-align:bottom;font-size:.8em}.isso-comment{margin:0 auto;max-width:68em}.isso-preview .isso-comment{margin:0;padding-top:0}.isso-comment:not(:first-of-type),.isso-follow-up .isso-comment{margin-bottom:.5em;border-top:1px solid var(--divider-color)}.isso-avatar{display:block;float:left;margin:.95em .95em 0}.isso-avatar svg{border-radius:3px;max-width:48px;height:100%;max-height:48px}.isso-text-wrapper{display:block;padding:.3em}.isso-follow-up{padding-left:calc(7% + 20px)}.isso-comment-header{font-size:.85em}.isso-comment-header a{text-decoration:none}.isso-comment-header .isso-spacer{padding:0 6px}.isso-note,.isso-parent,.isso-permalink,.isso-spacer{color:var(--meta-color);font-weight:400;text-shadow:none}.isso-note:hover,.isso-parent:hover,.isso-permalink:hover{color:var(--hover-color)}.isso-author{color:var(--text-color);font-weight:500}.isso-page-author-suffix{color:var(--text-color-high-contrast);font-weight:700}.isso-input-wrapper input,.isso-preview,.isso-textarea{background-color:var(--bg-2);color:var(--text-color);font-family:var(--sans-serif-font)}.isso-is-page-author>.isso-text-wrapper{background-color:var(--bg-1)}.isso-preview,.isso-textarea{padding:10px;font-size:.8em}.isso-comment-footer,.isso-comment-footer .isso-votes{color:var(--meta-color)}.isso-text p{margin-top:-.4em}.isso-text p:last-child{margin-bottom:.2em}.isso-text h1,.isso-text h2,.isso-text h3,.isso-text h4,.isso-text h5,.isso-text h6{font-weight:700;font-size:130%}.isso-comment-footer{clear:left;font-size:.8em}.isso-comment-footer a,.isso-feedlink{margin:.4em;padding:.1em;font-weight:700;text-decoration:none}.isso-downvote svg,.isso-upvote svg{position:relative;top:.2em}.isso-downvote:hover svg,.isso-upvote:hover svg{fill:var(--hover-color)}.isso-comment .isso-postbox{margin-top:.8em}.isso-comment.isso-no-votes>*>.isso-comment-footer .isso-votes,.isso-post-action input[name=edit],.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-textarea,.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name=preview],.isso-preview{display:none}.isso-postbox{clear:right;margin:0 auto 2em}.isso-form-wrapper{display:flex;flex-direction:column}.isso-preview,.isso-textarea{margin-top:.2em;border-radius:5px}.isso-textarea{outline:0;width:100%;resize:none}.isso-form-wrapper input[type=checkbox]{position:relative;bottom:1px;vertical-align:middle;margin-left:0}.isso-notification-section{display:none;padding-top:.3em;padding-bottom:10px;font-size:.9em}.isso-auth-section{display:flex;flex-direction:row}.isso-input-wrapper,.isso-post-action{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;margin:0 auto;max-width:35%;font-size:.8em;font-family:var(--sans-serif-font);text-align:center}.isso-input-wrapper{margin-right:.5em}.isso-input-wrapper input,.isso-post-action input{margin-top:auto}.isso-input-wrapper label{display:inline-block;margin-top:auto;height:auto;line-height:1.4em}.isso-input-wrapper input{border:1px solid var(--divider-color);border-radius:5px;padding:.3em;width:100%;line-height:1.2em}.isso-post-action input{cursor:pointer;margin:.1em;border:none;border-radius:5px;background-color:var(--primary-color);padding:.6em 1em;color:var(--background-color);font-size:.8rem}.isso-post-action{display:block;align-self:flex-end;margin:0 auto}.isso-post-action>input:hover{opacity:.8}.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-preview{display:block}.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name=edit]{display:inline}.isso-preview{background:repeating-linear-gradient(-45deg,var(--bg-0),var(--bg-0) 10px,var(--bg-2) 10px,var(--bg-2) 20px);background-color:var(--bg-0)}.isso-target{animation:5s ease-out isso-target-fade}@keyframes isso-target-fade{0%{background-color:var(--divider-color)}}@media screen and (max-width:600px){.isso-auth-section{flex-direction:column;text-align:center}.isso-input-wrapper{display:block;margin:0 0 .4em;max-width:100%}.isso-input-wrapper input{width:100%}.isso-post-action{margin:.4em auto;width:60%}} +.isso-avatar svg,.isso-preview,.isso-textarea{border:1px solid var(--divider-color);width:100%}#isso-thread *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#isso-thread{margin:0 auto;padding:0;width:100%;color:var(--text-color);font-size:.9em;font-family:var(--sans-serif-font)}h4.isso-thread-heading{padding-bottom:.2em;color:var(--text-color);font-size:1.2rem}.isso-feedlink,.isso-note{float:right}.isso-feedlink a{vertical-align:bottom;font-size:.8em}.isso-comment{margin:0 auto;max-width:68em}.isso-preview .isso-comment{margin:0;padding-top:0}.isso-comment:not(:first-of-type),.isso-follow-up .isso-comment{margin-bottom:.5em;border-top:1px solid var(--divider-color)}.isso-avatar{display:block;float:left;margin:.95em .95em 0}.isso-avatar svg{border-radius:3px;max-width:48px;height:100%;max-height:48px}.isso-text-wrapper{display:block;padding:.3em}.isso-follow-up{padding-inline-start:calc(7% + 20px)}.isso-comment-header{font-size:.85em}.isso-comment-header a{text-decoration:none}.isso-comment-header .isso-spacer{padding:0 6px}.isso-note,.isso-parent,.isso-permalink,.isso-spacer{color:var(--meta-color);font-weight:400;text-shadow:none}.isso-note:hover,.isso-parent:hover,.isso-permalink:hover{color:var(--hover-color)}.isso-author{color:var(--text-color);font-weight:500}.isso-page-author-suffix{color:var(--text-color-high-contrast);font-weight:700}.isso-input-wrapper input,.isso-preview,.isso-textarea{background-color:var(--bg-2);color:var(--text-color);font-family:var(--sans-serif-font)}.isso-is-page-author>.isso-text-wrapper{background-color:var(--bg-1)}.isso-preview,.isso-textarea{padding:10px;font-size:.8em}.isso-comment-footer,.isso-comment-footer .isso-votes{color:var(--meta-color)}.isso-text p{margin-top:-.4em}.isso-text p:last-child{margin-bottom:.2em}.isso-text h1,.isso-text h2,.isso-text h3,.isso-text h4,.isso-text h5,.isso-text h6{font-weight:700;font-size:130%}.isso-comment-footer{clear:left;font-size:.8em}.isso-comment-footer a,.isso-feedlink{margin:.4em;padding:.1em;font-weight:700;text-decoration:none}.isso-downvote svg,.isso-upvote svg{position:relative;top:.2em}.isso-downvote:hover svg,.isso-upvote:hover svg{fill:var(--hover-color)}.isso-comment .isso-postbox{margin-top:.8em}.isso-comment.isso-no-votes>*>.isso-comment-footer .isso-votes,.isso-post-action input[name=edit],.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-textarea,.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name=preview],.isso-preview{display:none}.isso-postbox{clear:right;margin:0 auto 2em}.isso-form-wrapper{display:flex;flex-direction:column}.isso-preview,.isso-textarea{margin-top:.2em;border-radius:5px}.isso-textarea{outline:0;width:100%;resize:none}.isso-form-wrapper input[type=checkbox]{position:relative;bottom:1px;vertical-align:middle;margin-inline-end:0}.isso-notification-section{display:none;padding-top:.3em;padding-bottom:10px;font-size:.9em}.isso-auth-section{display:flex;flex-direction:row}.isso-input-wrapper,.isso-post-action{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;margin:0 auto;max-width:35%;font-size:.8em;font-family:var(--sans-serif-font);text-align:center}.isso-input-wrapper{margin-inline-end:.5em}.isso-input-wrapper input,.isso-post-action input{margin-top:auto}.isso-input-wrapper label{display:inline-block;margin-top:auto;height:auto;line-height:1.4em}.isso-input-wrapper input{border:1px solid var(--divider-color);border-radius:5px;padding:.3em;width:100%;line-height:1.2em}.isso-post-action input{cursor:pointer;margin:.1em;border:none;border-radius:5px;background-color:var(--primary-color);padding:.6em 1em;color:var(--background-color);font-size:.8rem}.isso-post-action{display:block;align-self:flex-end;margin:0 auto}.isso-post-action>input:hover{opacity:.8}.isso-postbox.isso-preview-mode>.isso-form-wrapper .isso-preview{display:block}.isso-postbox.isso-preview-mode>.isso-form-wrapper input[name=edit]{display:inline}.isso-preview{background:repeating-linear-gradient(-45deg,var(--bg-0),var(--bg-0) 10px,var(--bg-2) 10px,var(--bg-2) 20px);background-color:var(--bg-0)}.isso-target{animation:5s ease-out isso-target-fade}@keyframes isso-target-fade{0%{background-color:var(--divider-color)}}@media screen and (max-width:600px){.isso-auth-section{flex-direction:column;text-align:center}.isso-input-wrapper{display:block;margin:0 0 .4em;max-width:100%}.isso-input-wrapper input{width:100%}.isso-post-action{margin:.4em auto;width:60%}} diff --git a/templates/partials/theme_switcher.html b/templates/partials/theme_switcher.html index cb4c93bf6..2e30f90d9 100644 --- a/templates/partials/theme_switcher.html +++ b/templates/partials/theme_switcher.html @@ -21,7 +21,7 @@