mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-15 14:18:04 +08:00
More website loading speed and code improvements
This commit is contained in:
Keavon Chambers
33
website/sass/template/article.scss
Normal file
33
website/sass/template/article.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.reading-material {
|
||||
width: 100%;
|
||||
flex: 0 1 auto;
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.publication {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
margin-top: calc(80 * var(--variable-px));
|
||||
}
|
||||
|
||||
.social {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: calc(var(--font-size-link) * 0.8);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
275
website/sass/template/book.scss
Normal file
275
website/sass/template/book.scss
Normal file
@@ -0,0 +1,275 @@
|
||||
.three-column-layout {
|
||||
--aside-gap: 40px;
|
||||
--aside-width: 300px;
|
||||
--align-with-article-title-letter-cap-heights: 0.4em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
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;
|
||||
box-sizing: content-box;
|
||||
padding: 6px;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.reading-material {
|
||||
flex: 1 2 100%;
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.prev-next {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
aside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Page contents right sidebar is removed on smaller screens
|
||||
@media screen and (max-width: 1200px) {
|
||||
.contents {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlaid fold-out menu for chapter selection
|
||||
@media screen and (max-width: 1000px) {
|
||||
gap: 0;
|
||||
|
||||
.chapters {
|
||||
position: sticky;
|
||||
width: 0;
|
||||
margin-top: calc(-120 * var(--variable-px));
|
||||
overflow: visible;
|
||||
z-index: 10;
|
||||
height: 0;
|
||||
transition: height 0.25s ease-in-out 0.25s;
|
||||
|
||||
&.open {
|
||||
height: 100vh;
|
||||
transition: height 0s;
|
||||
|
||||
.wrapper-outer {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-outer {
|
||||
position: absolute;
|
||||
background: white;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-left: var(--page-edge-padding);
|
||||
margin-left: calc(-1 * var(--page-edge-padding));
|
||||
padding-bottom: calc(120 * var(--variable-px));
|
||||
margin-bottom: calc(-120 * var(--variable-px));
|
||||
padding-top: 16px;
|
||||
margin-top: -16px;
|
||||
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);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -10px;
|
||||
width: 10px;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
|
||||
}
|
||||
|
||||
.wrapper-inner {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-right: var(--page-edge-padding);
|
||||
|
||||
ul:first-of-type {
|
||||
margin-top: calc(120 * var(--variable-px) + var(--align-with-article-title-letter-cap-heights));
|
||||
}
|
||||
|
||||
.close-chapter-selection {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(20px - 6px);
|
||||
right: calc(20px - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reading-material {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
|
||||
.article-title {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
|
||||
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: var(--aside-width);
|
||||
max-height: 100vh;
|
||||
margin-top: -40px;
|
||||
flex: 0 1 auto;
|
||||
|
||||
&.contents > ul,
|
||||
.wrapper-inner > ul {
|
||||
&:first-of-type {
|
||||
margin-top: calc(40px + var(--align-with-article-title-letter-cap-heights));
|
||||
}
|
||||
|
||||
&: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,
|
||||
li.active a {
|
||||
color: var(--color-ale);
|
||||
}
|
||||
|
||||
ul a {
|
||||
display: block;
|
||||
padding-left: 1em;
|
||||
text-indent: -1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.contents {
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
|
||||
&.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
background: var(--color-ale);
|
||||
}
|
||||
|
||||
a:not(:hover) span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user