mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-01 14:38:13 +08:00
Update the website layout with narrower default width and better typography (#1753)
- Reduces the default width from 1600px to 1200px of the web page and reduce the size of various elements and text. This fixes the problem that I designed the website assuming everyone is viewing from the same 2560px wide screen as I used to design it, which is a bad assumption. Most websites are around the 1200px mark. - Removes the use of the EB Garamond font, replacing more headers with a bold Inter instead, leaving only Bona Nova for h1 headers at the tops of pages (except the home page, which might have further revamp soon). - Adds nice flavor graphics to a redesigned volunteer page. - Cleans up and organizes the Zola templating code and CSS style sheets. - Improves image carousel to fade out images when dragged past the start or end.
This commit is contained in:
Keavon Chambers
+78
-62
@@ -1,13 +1,22 @@
|
||||
.three-column-layout {
|
||||
--aside-gap: 40px;
|
||||
--aside-width: 300px;
|
||||
--align-with-article-title-letter-cap-heights: 0.4em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
justify-content: space-between;
|
||||
gap: var(--aside-gap);
|
||||
// Creates a stacking context for the left popout sidebar's sticky positioning
|
||||
transform: translate(0);
|
||||
|
||||
&.three-column-layout {
|
||||
max-width: var(--max-extended-width);
|
||||
}
|
||||
|
||||
.close-chapter-selection,
|
||||
.open-chapter-selection {
|
||||
display: none;
|
||||
flex: 0 0 auto;
|
||||
fill: var(--color-navy);
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -23,7 +32,6 @@
|
||||
}
|
||||
|
||||
.reading-material {
|
||||
width: 800px;
|
||||
flex: 1 2 100%;
|
||||
|
||||
article {
|
||||
@@ -102,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 * (300px + 10px));
|
||||
width: 300px;
|
||||
left: calc(-1 * (var(--aside-width) + 10px));
|
||||
width: var(--aside-width);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -120,10 +128,9 @@
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-right: var(--page-edge-padding);
|
||||
padding-bottom: calc(-120 * var(--variable-px));
|
||||
|
||||
ul:first-of-type {
|
||||
margin-top: calc(120 * var(--variable-px));
|
||||
margin-top: calc(120 * var(--variable-px) + var(--align-with-article-title-letter-cap-heights));
|
||||
}
|
||||
|
||||
.close-chapter-selection {
|
||||
@@ -145,54 +152,91 @@
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
|
||||
.open-chapter-selection {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: calc(var(--font-size-heading-h1) * 1.25);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-left: -6px;
|
||||
margin-right: calc(20px - 6px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
|
||||
.open-chapter-selection {
|
||||
display: inline-block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-left: -6px;
|
||||
margin-right: calc(20px - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
position: sticky;
|
||||
align-self: flex-start;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
width: var(--aside-width);
|
||||
max-height: 100vh;
|
||||
margin-top: -40px;
|
||||
flex: 0 1 auto;
|
||||
|
||||
li {
|
||||
margin-top: 0.5em;
|
||||
|
||||
a {
|
||||
color: var(--color-walnut);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-crimson);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.title) a {
|
||||
text-decoration: none;
|
||||
&.contents > ul,
|
||||
.wrapper-inner > ul {
|
||||
&:first-of-type {
|
||||
margin-top: calc(40px + var(--align-with-article-title-letter-cap-heights));
|
||||
}
|
||||
|
||||
&.title,
|
||||
&.chapter {
|
||||
font-weight: bold;
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(40 * var(--variable-px));
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-left: 1em;
|
||||
|
||||
ul {
|
||||
margin-left: 2em;
|
||||
|
||||
ul {
|
||||
margin-left: 3em;
|
||||
|
||||
ul {
|
||||
margin-left: 4em;
|
||||
|
||||
ul {
|
||||
margin-left: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 0.5em;
|
||||
|
||||
a {
|
||||
color: var(--color-walnut);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-crimson);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.title) a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.title,
|
||||
&.chapter {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.chapters {
|
||||
li.active,
|
||||
@@ -227,33 +271,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-left: 1em;
|
||||
|
||||
ul {
|
||||
margin-left: 2em;
|
||||
|
||||
ul {
|
||||
margin-left: 3em;
|
||||
|
||||
ul {
|
||||
margin-left: 4em;
|
||||
|
||||
ul {
|
||||
margin-left: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user