mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-04 07:29:32 +00:00
docs: Add stray design tweaks (#14205)
- Mostly just tweaking some design (colors & spacing) stuff - Some small accessibility things—e.g., underline decoration for links and one h1 only per page - Most of the other captured changes are really just Prettier indenting stuff Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
37fc4ce09d
commit
c071e19899
4 changed files with 526 additions and 540 deletions
60
docs/theme/css/chrome.css
vendored
60
docs/theme/css/chrome.css
vendored
|
|
@ -34,6 +34,7 @@ a > .hljs {
|
|||
margin: auto calc(0px - var(--page-padding));
|
||||
}
|
||||
#menu-bar {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -62,12 +63,19 @@ a > .hljs {
|
|||
#menu-bar i,
|
||||
#menu-bar .icon-button {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
z-index: 10;
|
||||
line-height: var(--menu-bar-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
#menu-bar .icon-button:hover {
|
||||
background-color: hsl(219, 93%, 42%, 0.15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
#menu-bar i,
|
||||
#menu-bar .icon-button {
|
||||
|
|
@ -86,8 +94,8 @@ a > .hljs {
|
|||
}
|
||||
|
||||
.right-buttons {
|
||||
margin: 0 15px;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.right-buttons a {
|
||||
text-decoration: none;
|
||||
|
|
@ -95,23 +103,19 @@ a > .hljs {
|
|||
|
||||
.left-buttons {
|
||||
display: flex;
|
||||
margin: 0 5px;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.no-js .left-buttons button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: inline-block;
|
||||
font-weight: 200;
|
||||
font-size: 2.4rem;
|
||||
line-height: var(--menu-bar-height);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.js .menu-title {
|
||||
cursor: pointer;
|
||||
|
|
@ -432,7 +436,7 @@ ul#searchresults span.teaser em {
|
|||
overscroll-behavior-y: contain;
|
||||
background-color: var(--sidebar-bg);
|
||||
color: var(--sidebar-fg);
|
||||
border-right: 1px solid rgba(8, 76, 207, 0.2);
|
||||
border-right: 1px solid hsl(219, 93%, 42%, 0.15);
|
||||
}
|
||||
[dir="rtl"] .sidebar {
|
||||
left: unset;
|
||||
|
|
@ -458,8 +462,7 @@ ul#searchresults span.teaser em {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 10px;
|
||||
margin-left: 40px;
|
||||
padding: 12px 12px 12px 24px;
|
||||
}
|
||||
.sidebar .sidebar-resize-handle {
|
||||
position: absolute;
|
||||
|
|
@ -485,22 +488,15 @@ ul#searchresults span.teaser em {
|
|||
}
|
||||
.js .sidebar .sidebar-resize-handle {
|
||||
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-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;
|
||||
}
|
||||
[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 {
|
||||
background: var(--sidebar-bg);
|
||||
|
|
@ -511,21 +507,15 @@ ul#searchresults span.teaser em {
|
|||
|
||||
/* sidebar-visible */
|
||||
#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 {
|
||||
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) {
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: none;
|
||||
margin-inline-start: calc(
|
||||
var(--sidebar-width) + var(--sidebar-resize-indicator-width)
|
||||
);
|
||||
margin-inline-start: var(--sidebar-width);
|
||||
}
|
||||
[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: none;
|
||||
|
|
|
|||
24
docs/theme/css/general.css
vendored
24
docs/theme/css/general.css
vendored
|
|
@ -81,7 +81,8 @@ h6 code {
|
|||
|
||||
h2,
|
||||
h3 {
|
||||
margin-block-start: 2.5em;
|
||||
margin-block-start: 2em;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
h4,
|
||||
h5 {
|
||||
|
|
@ -118,9 +119,7 @@ h6:target::before {
|
|||
.page {
|
||||
outline: 0;
|
||||
padding: 0 var(--page-padding);
|
||||
margin-block-start: calc(
|
||||
0px - var(--menu-bar-height)
|
||||
); /* Compensate for the #menu-bar-hover-placeholder */
|
||||
margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
|
||||
}
|
||||
.page-wrapper {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -140,7 +139,7 @@ h6:target::before {
|
|||
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
padding: 0 5px 50px 5px;
|
||||
padding: 24px 4px 48px 4px;
|
||||
}
|
||||
.content main {
|
||||
margin-inline-start: auto;
|
||||
|
|
@ -157,10 +156,11 @@ h6:target::before {
|
|||
line-height: 1.625em;
|
||||
}
|
||||
.content a {
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: hsl(219, 93%, 42%, 0.2);
|
||||
}
|
||||
.content a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: hsl(219, 93%, 42%, 0.5);
|
||||
}
|
||||
.content img,
|
||||
.content video {
|
||||
|
|
@ -263,9 +263,7 @@ kbd {
|
|||
visibility: hidden;
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
transform: translateX(
|
||||
-50%
|
||||
); /* Center by moving tooltip 50% of its width left */
|
||||
transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
|
||||
left: -8px; /* Half of the width of the icon */
|
||||
top: -35px;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -280,11 +278,11 @@ kbd {
|
|||
}
|
||||
|
||||
.chapter li.part-title {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-family: var(--title-font);
|
||||
color: var(--title-color);
|
||||
margin: 5px 0px;
|
||||
margin-top: 3rem;
|
||||
margin: 5px 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.result-no-output {
|
||||
|
|
|
|||
10
docs/theme/css/variables.css
vendored
10
docs/theme/css/variables.css
vendored
|
|
@ -2,17 +2,15 @@
|
|||
|
||||
:root {
|
||||
--sidebar-width: 300px;
|
||||
--sidebar-resize-indicator-width: 8px;
|
||||
--sidebar-resize-indicator-width: 0px;
|
||||
--sidebar-resize-indicator-space: 2px;
|
||||
--page-padding: 15px;
|
||||
--content-max-width: 750px;
|
||||
--menu-bar-height: 50px;
|
||||
--font: "IA Writer Quattro S", 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;
|
||||
--code-font-size: 0.875em
|
||||
/* please adjust the ace font size accordingly in editor.js */;
|
||||
--mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 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);
|
||||
--fg: rgb(75, 83, 97);
|
||||
|
|
@ -41,7 +39,7 @@
|
|||
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(0, 0%, 95%);
|
||||
--table-border-color: hsl(219, 93%, 42%, 0.15);
|
||||
--table-header-bg: hsl(0, 0%, 80%);
|
||||
--table-alternate-bg: hsl(0, 0%, 97%);
|
||||
|
||||
|
|
|
|||
8
docs/theme/index.hbs
vendored
8
docs/theme/index.hbs
vendored
|
|
@ -124,7 +124,7 @@
|
|||
{{> header}}
|
||||
<div id="menu-bar-hover-placeholder"></div>
|
||||
<div id="menu-bar" class="menu-bar sticky">
|
||||
<div class="left-buttons" style="height: 36px; margin-top: 16px">
|
||||
<div class="left-buttons">
|
||||
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||||
<i class="fa fa-bars"></i>
|
||||
</label>
|
||||
|
|
@ -145,11 +145,11 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
|
||||
<h1 class="menu-title">
|
||||
<header class="menu-title">
|
||||
<a href="/">
|
||||
<img src="https://zed.dev/logo_wordmark_36.webp" alt="Zed Industries" style="margin-top: 24px; height: 36px;">
|
||||
<img src="https://zed.dev/logo_wordmark_36.webp" alt="Zed Industries" style="height: 28px;">
|
||||
</a>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div class="right-buttons">
|
||||
<a class="download-button" href="https://zed.dev/download" title="Download Zed" aria-label="Download Zed">
|
||||
|
|
|
|||
Loading…
Reference in a new issue