docs: Format CSS with Prettier (#15333)

This PR formats the CSS in the docs with Prettier.

The indentation of these CSS files kept changing based on who last
touched them, so I added settings to the Zed repo to try and keep the
formatting intact until we can enforce it in CI.

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2024-07-27 10:25:51 -04:00 committed by GitHub
parent 4976a9e9d8
commit acea6f9c0f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 188 additions and 171 deletions

View file

@ -26,6 +26,10 @@
"tab_size": 2, "tab_size": 2,
"formatter": "prettier" "formatter": "prettier"
}, },
"CSS": {
"tab_size": 2,
"formatter": "prettier"
},
"Rust": { "Rust": {
"tasks": { "tasks": {
"variables": { "variables": {

View file

@ -14,15 +14,15 @@ a > .hljs {
} }
/* /*
body-container is necessary because mobile browsers don't seem to like body-container is necessary because mobile browsers don't seem to like
overflow-x on the body tag when there is a <meta name="viewport"> tag. overflow-x on the body tag when there is a <meta name="viewport"> tag.
*/ */
#body-container { #body-container {
/* /*
This is used when the sidebar pushes the body content off the side of This is used when the sidebar pushes the body content off the side of
the screen on small screens. Without it, dragging on mobile Safari the screen on small screens. Without it, dragging on mobile Safari
will want to reposition the viewport in a weird way. will want to reposition the viewport in a weird way.
*/ */
overflow-x: clip; overflow-x: clip;
} }
@ -488,15 +488,22 @@ ul#searchresults span.teaser em {
} }
.js .sidebar .sidebar-resize-handle { .js .sidebar .sidebar-resize-handle {
cursor: col-resize; cursor: col-resize;
width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space)); width: calc(
var(--sidebar-resize-indicator-width) -
var(--sidebar-resize-indicator-space)
);
} }
/* sidebar-hidden */ /* sidebar-hidden */
#sidebar-toggle-anchor:not(:checked) ~ .sidebar { #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); transform: translateX(
calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
);
z-index: -1; z-index: -1;
} }
[dir="rtl"] #sidebar-toggle-anchor:not(:checked) ~ .sidebar { [dir="rtl"] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); transform: translateX(
calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
);
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
background: var(--sidebar-bg); background: var(--sidebar-bg);
@ -507,10 +514,14 @@ ul#searchresults span.teaser em {
/* sidebar-visible */ /* sidebar-visible */
#sidebar-toggle-anchor:checked ~ .page-wrapper { #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); transform: translateX(
calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
);
} }
[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper { [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); transform: translateX(
calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
);
} }
@media only screen and (min-width: 620px) { @media only screen and (min-width: 620px) {
#sidebar-toggle-anchor:checked ~ .page-wrapper { #sidebar-toggle-anchor:checked ~ .page-wrapper {

View file

@ -3,43 +3,43 @@
@import "variables.css"; @import "variables.css";
:root { :root {
/* Browser default font-size is 16px, this way 1 rem = 10px */ /* Browser default font-size is 16px, this way 1 rem = 10px */
font-size: 62.5%; font-size: 62.5%;
color-scheme: var(--color-scheme); color-scheme: var(--color-scheme);
} }
html { html {
font-family: var(--font); font-family: var(--font);
color: var(--fg); color: var(--fg);
background-color: var(--bg); background-color: var(--bg);
text-size-adjust: none; text-size-adjust: none;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
text-rendering: geometricPrecision !important; text-rendering: geometricPrecision !important;
-webkit-font-smoothing: antialiased !important; -webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005);
} }
body { body {
margin: 0; margin: 0;
font-size: 1.6rem; font-size: 1.6rem;
overflow-x: hidden; overflow-x: hidden;
} }
code { code {
font-family: var(--mono-font) !important; font-family: var(--mono-font) !important;
font-size: var(--code-font-size); font-size: var(--code-font-size);
direction: ltr !important; direction: ltr !important;
} }
/* make long words/inline code not x overflow */ /* make long words/inline code not x overflow */
main { main {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* make wide tables scroll if they overflow */ /* make wide tables scroll if they overflow */
.table-wrapper { .table-wrapper {
overflow-x: auto; overflow-x: auto;
} }
h1, h1,
@ -48,9 +48,9 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--title-font); font-family: var(--title-font);
font-weight: normal; font-weight: normal;
color: var(--title-color); color: var(--title-color);
} }
/* Don't change font size in headers. */ /* Don't change font size in headers. */
@ -60,39 +60,39 @@ h3 code,
h4 code, h4 code,
h5 code, h5 code,
h6 code { h6 code {
font-size: unset; font-size: unset;
} }
.left { .left {
float: left; float: left;
} }
.right { .right {
float: right; float: right;
} }
.boring { .boring {
opacity: 0.6; opacity: 0.6;
} }
.hide-boring .boring { .hide-boring .boring {
display: none; display: none;
} }
.hidden { .hidden {
display: none !important; display: none !important;
} }
h2, h2,
h3 { h3 {
margin-block-start: 2em; margin-block-start: 2em;
margin-block-end: 0; margin-block-end: 0;
} }
h4, h4,
h5 { h5 {
margin-block-start: 2em; margin-block-start: 2em;
} }
.header + .header h3, .header + .header h3,
.header + .header h4, .header + .header h4,
.header + .header h5 { .header + .header h5 {
margin-block-start: 1em; margin-block-start: 1em;
} }
h1:target::before, h1:target::before,
@ -101,10 +101,10 @@ h3:target::before,
h4:target::before, h4:target::before,
h5:target::before, h5:target::before,
h6:target::before { h6:target::before {
display: inline-block; display: inline-block;
content: "»"; content: "»";
margin-inline-start: -30px; margin-inline-start: -30px;
width: 30px; width: 30px;
} }
/* This is broken on Safari as of version 14, but is fixed /* This is broken on Safari as of version 14, but is fixed
@ -112,227 +112,227 @@ h6:target::before {
https://bugs.webkit.org/show_bug.cgi?id=218076 https://bugs.webkit.org/show_bug.cgi?id=218076
*/ */
:target { :target {
/* Safari does not support logical properties */ /* Safari does not support logical properties */
scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
} }
.page { .page {
outline: 0; outline: 0;
padding: 0 var(--page-padding); padding: 0 var(--page-padding);
margin-block-start: calc( margin-block-start: calc(
0px - var(--menu-bar-height) 0px - var(--menu-bar-height)
); /* Compensate for the #menu-bar-hover-placeholder */ ); /* Compensate for the #menu-bar-hover-placeholder */
} }
.page-wrapper { .page-wrapper {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--bg); background-color: var(--bg);
} }
.no-js .page-wrapper, .no-js .page-wrapper,
.js:not(.sidebar-resizing) .page-wrapper { .js:not(.sidebar-resizing) .page-wrapper {
transition: transition:
margin-left 0.3s ease, margin-left 0.3s ease,
transform 0.3s ease; /* Animation: slide away */ transform 0.3s ease; /* Animation: slide away */
} }
[dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper { [dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper {
transition: transition:
margin-right 0.3s ease, margin-right 0.3s ease,
transform 0.3s ease; /* Animation: slide away */ transform 0.3s ease; /* Animation: slide away */
} }
.content { .content {
overflow-y: auto; overflow-y: auto;
padding: 24px 4px 48px 4px; padding: 24px 4px 48px 4px;
} }
.content main { .content main {
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
max-width: var(--content-max-width); max-width: var(--content-max-width);
} }
.content p { .content p {
line-height: 1.625em; line-height: 1.625em;
} }
.content div.video { .content div.video {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.content ol { .content ol {
line-height: 1.625em; line-height: 1.625em;
} }
.content ul { .content ul {
line-height: 1.625em; line-height: 1.625em;
} }
.content a { .content a {
text-decoration: underline; text-decoration: underline;
text-decoration-color: hsl(219, 93%, 42%, 0.2); text-decoration-color: hsl(219, 93%, 42%, 0.2);
} }
.content a:hover { .content a:hover {
text-decoration-color: hsl(219, 93%, 42%, 0.5); text-decoration-color: hsl(219, 93%, 42%, 0.5);
} }
.content img, .content img,
.content video { .content video {
max-width: 100%; max-width: 100%;
} }
.content .header:link, .content .header:link,
.content .header:visited { .content .header:visited {
color: var(--title-color); color: var(--title-color);
} }
.content .header:link, .content .header:link,
.content .header:visited:hover { .content .header:visited:hover {
text-decoration: none; text-decoration: none;
} }
iframe { iframe {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 10rem; margin-bottom: 10rem;
} }
table { table {
margin: 0 auto; margin: 0 auto;
border-collapse: collapse; border-collapse: collapse;
} }
table td { table td {
padding: 3px 20px; padding: 3px 20px;
border: 1px var(--table-border-color) solid; border: 1px var(--table-border-color) solid;
} }
table thead { table thead {
background: var(--table-header-bg); background: var(--table-header-bg);
} }
table thead td { table thead td {
font-weight: 700; font-weight: 700;
border: none; border: none;
} }
table thead th { table thead th {
padding: 3px 20px; padding: 3px 20px;
} }
table thead tr { table thead tr {
border: 1px var(--table-header-bg) solid; border: 1px var(--table-header-bg) solid;
} }
/* Alternate background colors for rows */ /* Alternate background colors for rows */
table tbody tr:nth-child(2n) { table tbody tr:nth-child(2n) {
background: var(--table-alternate-bg); background: var(--table-alternate-bg);
} }
blockquote { blockquote {
margin: auto; margin: auto;
margin-top: 1rem; margin-top: 1rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
color: var(--fg); color: var(--fg);
background-color: var(--quote-bg); background-color: var(--quote-bg);
border: 1px solid var(--quote-border); border: 1px solid var(--quote-border);
} }
blockquote > p { blockquote > p {
margin: 0; margin: 0;
padding-left: 2.6rem; padding-left: 2.6rem;
font-size: 1.4rem; font-size: 1.4rem;
} }
blockquote:before { blockquote:before {
position: absolute; position: absolute;
content: "ⓘ"; content: "ⓘ";
margin: 0.3rem 0; margin: 0.3rem 0;
width: 1.6rem; width: 1.6rem;
height: 1.6rem; height: 1.6rem;
font-size: 1.6rem; font-size: 1.6rem;
font-weight: bold; font-weight: bold;
color: var(--icons); color: var(--icons);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 1.625em; line-height: 1.625em;
} }
blockquote .warning:before { blockquote .warning:before {
background-color: var(--quote-bg); background-color: var(--quote-bg);
} }
.warning { .warning {
margin: auto; margin: auto;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
background-color: var(--warning-bg); background-color: var(--warning-bg);
border: 1px solid var(--warning-border); border: 1px solid var(--warning-border);
} }
.warning > p { .warning > p {
margin: 0; margin: 0;
padding-left: 2.6rem; padding-left: 2.6rem;
font-size: 1.4rem; font-size: 1.4rem;
} }
.warning:before { .warning:before {
position: absolute; position: absolute;
content: "ⓘ"; content: "ⓘ";
margin: 0.3rem 0; margin: 0.3rem 0;
width: 1.6rem; width: 1.6rem;
height: 1.6rem; height: 1.6rem;
font-size: 1.6rem; font-size: 1.6rem;
font-weight: bold; font-weight: bold;
color: var(--warning-icon); color: var(--warning-icon);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 1.625em; line-height: 1.625em;
} }
kbd { kbd {
background-color: rgba(8, 76, 207, 0.1); background-color: rgba(8, 76, 207, 0.1);
border-radius: 4px; border-radius: 4px;
border: solid 1px var(--theme-popup-border); border: solid 1px var(--theme-popup-border);
box-shadow: inset 0 -1px 0 var(--theme-hover); box-shadow: inset 0 -1px 0 var(--theme-hover);
display: inline-block; display: inline-block;
font-size: var(--code-font-size); font-size: var(--code-font-size);
font-family: var(--mono-font); font-family: var(--mono-font);
line-height: 10px; line-height: 10px;
padding: 4px 5px; padding: 4px 5px;
vertical-align: middle; vertical-align: middle;
} }
:not(.footnote-definition) + .footnote-definition, :not(.footnote-definition) + .footnote-definition,
.footnote-definition + :not(.footnote-definition) { .footnote-definition + :not(.footnote-definition) {
margin-block-start: 2em; margin-block-start: 2em;
} }
.footnote-definition { .footnote-definition {
font-size: 0.9em; font-size: 0.9em;
margin: 0.5em 0; margin: 0.5em 0;
} }
.footnote-definition p { .footnote-definition p {
display: inline; display: inline;
} }
.tooltiptext { .tooltiptext {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
color: #fff; color: #fff;
background-color: #333; background-color: #333;
transform: translateX( transform: translateX(
-50% -50%
); /* Center by moving tooltip 50% of its width left */ ); /* Center by moving tooltip 50% of its width left */
left: -8px; /* Half of the width of the icon */ left: -8px; /* Half of the width of the icon */
top: -35px; top: -35px;
font-size: 0.8em; font-size: 0.8em;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
padding: 5px 8px; padding: 5px 8px;
margin: 5px; margin: 5px;
z-index: 1000; z-index: 1000;
} }
.tooltipped .tooltiptext { .tooltipped .tooltiptext {
visibility: visible; visibility: visible;
} }
.chapter li.part-title { .chapter li.part-title {
font-size: 18px; font-size: 18px;
font-family: var(--title-font); font-family: var(--title-font);
color: var(--title-color); color: var(--title-color);
margin: 5px 0; margin: 5px 0;
margin-top: 2rem; margin-top: 2rem;
} }
.result-no-output { .result-no-output {
font-style: italic; font-style: italic;
} }
code.hljs { code.hljs {
color: rgb(75, 83, 97) !important; color: rgb(75, 83, 97) !important;
background-color: rgba(8, 76, 207, 0.1); background-color: rgba(8, 76, 207, 0.1);
} }

View file

@ -9,8 +9,10 @@
--menu-bar-height: 50px; --menu-bar-height: 50px;
--font: "IA Writer Quattro S", sans-serif; --font: "IA Writer Quattro S", sans-serif;
--title-font: "Agrandir", "Helvetica Neue", Helvetica, Arial, sans-serif; --title-font: "Agrandir", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
--code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */; Liberation Mono, Courier New, monospace;
--code-font-size: 0.875em
/* please adjust the ace font size accordingly in editor.js */;
--bg: rgb(246, 245, 240); --bg: rgb(246, 245, 240);
--fg: rgb(75, 83, 97); --fg: rgb(75, 83, 97);