Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: Add stray design tweaks (#14205)

Browse source 
- 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 2024-07-11 11:57:22 -03:00 • committed by GitHub
parent 37fc4ce09d
commit c071e19899
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 526 additions and 540 deletions
Download patch file Download diff file Expand all files Collapse all files

60
docs/theme/css/chrome.css vendored
View file

@ -34,6 +34,7 @@ a > .hljs {
margin: auto calc(0px - var(--page-padding)); margin: auto calc(0px - var(--page-padding));
} }
#menu-bar { #menu-bar {
padding: 16px;
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -62,12 +63,19 @@ a > .hljs {
#menu-bar i, #menu-bar i,
#menu-bar .icon-button { #menu-bar .icon-button {
position: relative; position: relative;
padding: 0 8px; height: 3rem;
width: 3rem;
z-index: 10; z-index: 10;
line-height: var(--menu-bar-height); display: flex;
align-items: center;
justify-content: center;
cursor: pointer; cursor: pointer;
transition: color 0.5s; transition: color 0.5s;
} }
#menu-bar .icon-button:hover {
background-color: hsl(219, 93%, 42%, 0.15);
}
@media only screen and (max-width: 420px) { @media only screen and (max-width: 420px) {
#menu-bar i, #menu-bar i,
#menu-bar .icon-button { #menu-bar .icon-button {
@ -86,8 +94,8 @@ a > .hljs {
} }
.right-buttons { .right-buttons {
margin: 0 15px; display: flex;
margin-top: 24px; align-items: center;
} }
.right-buttons a { .right-buttons a {
text-decoration: none; text-decoration: none;
@ -95,23 +103,19 @@ a > .hljs {
.left-buttons { .left-buttons {
display: flex; display: flex;
margin: 0 5px; align-items: center;
gap: 0.5rem;
} }
.no-js .left-buttons button { .no-js .left-buttons button {
display: none; display: none;
} }
.menu-title { .menu-title {
display: inline-block; display: inline-flex;
font-weight: 200; justify-content: center;
font-size: 2.4rem; align-items: center;
line-height: var(--menu-bar-height);
text-align: center;
margin: 0;
flex: 1; flex: 1;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.js .menu-title { .js .menu-title {
cursor: pointer; cursor: pointer;
@ -432,7 +436,7 @@ ul#searchresults span.teaser em {
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
color: var(--sidebar-fg); 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 { [dir="rtl"] .sidebar {
left: unset; left: unset;
@ -458,8 +462,7 @@ ul#searchresults span.teaser em {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 10px 10px; padding: 12px 12px 12px 24px;
margin-left: 40px;
} }
.sidebar .sidebar-resize-handle { .sidebar .sidebar-resize-handle {
position: absolute; position: absolute;
@ -485,22 +488,15 @@ ul#searchresults span.teaser em {
} }
.js .sidebar .sidebar-resize-handle { .js .sidebar .sidebar-resize-handle {
cursor: col-resize; cursor: col-resize;
width: calc( width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
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( transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
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( transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
);
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
background: var(--sidebar-bg); background: var(--sidebar-bg);
@ -511,21 +507,15 @@ ul#searchresults span.teaser em {
/* sidebar-visible */ /* sidebar-visible */
#sidebar-toggle-anchor:checked ~ .page-wrapper { #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: translateX( transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
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( transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
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 {
transform: none; transform: none;
margin-inline-start: calc( margin-inline-start: var(--sidebar-width);
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: none; transform: none;

24
docs/theme/css/general.css vendored
View file

@ -81,7 +81,8 @@ h6 code {
h2, h2,
h3 { h3 {
margin-block-start: 2.5em; margin-block-start: 2em;
margin-block-end: 0;
} }
h4, h4,
h5 { h5 {
@ -118,9 +119,7 @@ h6:target::before {
.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)); /* Compensate for the #menu-bar-hover-placeholder */
0px - var(--menu-bar-height)
); /* Compensate for the #menu-bar-hover-placeholder */
} }
.page-wrapper { .page-wrapper {
box-sizing: border-box; box-sizing: border-box;
@ -140,7 +139,7 @@ h6:target::before {
.content { .content {
overflow-y: auto; overflow-y: auto;
padding: 0 5px 50px 5px; padding: 24px 4px 48px 4px;
} }
.content main { .content main {
margin-inline-start: auto; margin-inline-start: auto;
@ -157,10 +156,11 @@ h6:target::before {
line-height: 1.625em; line-height: 1.625em;
} }
.content a { .content a {
text-decoration: none; text-decoration: underline;
text-decoration-color: hsl(219, 93%, 42%, 0.2);
} }
.content a:hover { .content a:hover {
text-decoration: underline; text-decoration-color: hsl(219, 93%, 42%, 0.5);
} }
.content img, .content img,
.content video { .content video {
@ -263,9 +263,7 @@ kbd {
visibility: hidden; visibility: hidden;
color: #fff; color: #fff;
background-color: #333; background-color: #333;
transform: translateX( transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
-50%
); /* 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;
@ -280,11 +278,11 @@ kbd {
} }
.chapter li.part-title { .chapter li.part-title {
font-size: 20px; font-size: 18px;
font-family: var(--title-font); font-family: var(--title-font);
color: var(--title-color); color: var(--title-color);
margin: 5px 0px; margin: 5px 0;
margin-top: 3rem; margin-top: 2rem;
} }
.result-no-output { .result-no-output {

10
docs/theme/css/variables.css vendored
View file

@ -2,17 +2,15 @@
:root { :root {
--sidebar-width: 300px; --sidebar-width: 300px;
--sidebar-resize-indicator-width: 8px; --sidebar-resize-indicator-width: 0px;
--sidebar-resize-indicator-space: 2px; --sidebar-resize-indicator-space: 2px;
--page-padding: 15px; --page-padding: 15px;
--content-max-width: 750px; --content-max-width: 750px;
--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, --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
Liberation Mono, Courier New, monospace; --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */;
--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);
@ -41,7 +39,7 @@
--warning-border: #ff8e00; --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-header-bg: hsl(0, 0%, 80%);
--table-alternate-bg: hsl(0, 0%, 97%); --table-alternate-bg: hsl(0, 0%, 97%);

8
docs/theme/index.hbs vendored
View file

@ -124,7 +124,7 @@
{{> header}} {{> header}}
<div id="menu-bar-hover-placeholder"></div> <div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky"> <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"> <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> <i class="fa fa-bars"></i>
</label> </label>
@ -145,11 +145,11 @@
{{/if}} {{/if}}
</div> </div>
<h1 class="menu-title"> <header class="menu-title">
<a href="/"> <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> </a>
</h1> </header>
<div class="right-buttons"> <div class="right-buttons">
<a class="download-button" href="https://zed.dev/download" title="Download Zed" aria-label="Download Zed"> <a class="download-button" href="https://zed.dev/download" title="Download Zed" aria-label="Download Zed">