fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 04:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add the auto-generated node catalog to the website's user manual (#3662)

Browse Source 
* Generate the MVP node catalog in the manual (with some placeholders)

* Implement nearly the rest of everything

* Move to the tools directory and make it generate nicer default values

* Add category descriptions

* Organize file structure and improve type naming

* Improve book table of contents code

* Add collapsing chapter navigation to the book template

* Add to build workflow

* Clean up site structure
This commit is contained in:
Keavon Chambers
2026-01-20 22:52:03 -08:00
committed by GitHub
parent 5543afd44b
commit 7af60e02a3
61 changed files with 1131 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/sass/template/book.scss
+80 -42
View File
@@ -43,12 +43,12 @@
justify-content: space-between;
width: 100%;
gap: 20px;
a {
display: flex;
align-items: center;
gap: 20px;
svg {
fill: var(--color-navy);
flex: 0 0 auto;
@@ -77,7 +77,7 @@
// Overlaid fold-out menu for chapter selection
@media screen and (max-width: 1000px) {
gap: 0;
.chapters {
position: sticky;
width: 0;
@@ -95,7 +95,7 @@
left: 0;
}
}
.wrapper-outer {
position: absolute;
background: white;
@@ -110,8 +110,8 @@
border-right: var(--border-thickness) solid var(--color-walnut);
box-sizing: border-box;
transition: left 0.25s ease-in-out;
left: calc(-1 * (var(--aside-width) + 10px));
width: var(--aside-width);
left: calc(-1 * (Min(var(--aside-width), 100vw) + 10px));
width: Min(var(--aside-width), 100vw);
&::after {
content: "";
@@ -128,8 +128,9 @@
overflow-y: auto;
height: 100%;
padding-right: var(--page-edge-padding);
margin-left: -24px;
ul:first-of-type {
> ul:first-of-type {
margin-top: calc(120 * var(--variable-px) + var(--align-with-article-title-letter-cap-heights));
}
@@ -173,68 +174,107 @@
align-self: flex-start;
overflow-y: auto;
top: 0;
width: var(--aside-width);
width: Min(var(--aside-width), 100vw);
max-height: 100vh;
margin-top: -40px;
margin-top: calc(-40 * var(--variable-px));
flex: 0 1 auto;
--level-indent: 0.75rem;
&.contents > ul,
.wrapper-inner > ul {
&:first-of-type {
margin-top: calc(40px + var(--align-with-article-title-letter-cap-heights));
margin-top: calc(40 * var(--variable-px) + var(--align-with-article-title-letter-cap-heights));
}
&:last-of-type {
margin-bottom: calc(40 * var(--variable-px));
}
> ul {
margin-left: 0;
}
}
&.contents > ul > ul :is(ul, li),
.wrapper-inner > ul > ul > ul,
.wrapper-inner > ul > ul > ul :is(ul, li) {
margin-top: 0.5rem;
}
ul {
list-style: none;
padding: 0;
margin: 0;
margin-top: 40px;
&,
ul,
li {
margin-top: calc(40 * var(--variable-px));
}
ul {
margin-top: 0;
margin-left: 1em;
margin-left: var(--level-indent);
}
ul {
margin-left: 2em;
ul {
margin-left: 3em;
ul {
margin-left: 4em;
ul {
margin-left: 5em;
}
}
}
}
li:has(> label > input:not(:checked)) + ul {
display: none;
}
li {
margin-top: 0.5em;
a {
color: var(--color-walnut);
&:hover {
color: var(--color-crimson);
}
}
font-size: 0;
&:not(.title) a {
text-decoration: none;
}
&.title,
&.chapter {
font-weight: 700;
}
label {
display: inline-block;
position: relative;
user-select: none;
vertical-align: bottom;
margin-right: 4px;
width: 20px;
height: calc(1rem * 1.5);
&:has(input):hover {
background: var(--color-fog);
}
&:has(input)::before {
content: "";
background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon fill="%2316323f" points="4,0 1,0 6,5 1,10 4,10 9,5 4,0" /></svg>\
');
position: absolute;
margin: auto;
inset: 0;
width: 10px;
height: 10px;
}
&:has(input:checked)::before {
transform: rotate(90deg);
}
input {
display: none;
}
}
a {
color: var(--color-walnut);
font-size: 1rem;
&:hover {
color: var(--color-crimson);
text-decoration: underline;
}
}
}
}
@@ -245,9 +285,7 @@
}
ul a {
display: block;
padding-left: 1em;
text-indent: -1em;
display: inline-block;
}
}