mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-15 14:18:04 +08:00
Improve website book sidebar and nav ripple
This commit is contained in:
Keavon Chambers
@@ -148,6 +148,7 @@ h6 {
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
@@ -212,6 +213,7 @@ code {
|
||||
color: var(--color-black);
|
||||
padding: 0 4px;
|
||||
overflow-wrap: anywhere;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
@@ -1006,18 +1008,8 @@ body > .page {
|
||||
header {
|
||||
padding: 0 var(--page-edge-padding);
|
||||
color: var(--color-walnut);
|
||||
|
||||
@media screen and (max-width: 1824px) {
|
||||
.ripple {
|
||||
width: calc(100% + (var(--page-edge-padding) * 2));
|
||||
margin-left: calc(-1 * var(--page-edge-padding));
|
||||
margin-right: calc(-1 * var(--page-edge-padding));
|
||||
}
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
|
||||
nav {
|
||||
margin: auto;
|
||||
@@ -1026,14 +1018,20 @@ header {
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px 0;
|
||||
--nav-padding-above-below: 30px;
|
||||
padding-top: var(--nav-padding-above-below);
|
||||
padding-bottom: calc(var(--nav-padding-above-below) - 16px);
|
||||
margin-bottom: calc(var(--nav-padding-above-below) - 16px);
|
||||
// Covers up content that extends up underneath the header
|
||||
background: white;
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
padding: 20px 0;
|
||||
--nav-padding-above-below: 24px;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
@@ -1156,7 +1154,8 @@ header {
|
||||
.ripple {
|
||||
display: block;
|
||||
background: none;
|
||||
fill: none;
|
||||
// Covers up content that extends up underneath the header
|
||||
fill: white;
|
||||
stroke: currentColor;
|
||||
--ripple-height: 16px;
|
||||
height: var(--ripple-height);
|
||||
@@ -1173,6 +1172,18 @@ header {
|
||||
hr {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1824px) {
|
||||
.ripple {
|
||||
width: calc(100% + (var(--page-edge-padding) * 2));
|
||||
margin-left: calc(-1 * var(--page-edge-padding));
|
||||
margin-right: calc(-1 * var(--page-edge-padding));
|
||||
}
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
@@ -81,6 +81,7 @@
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
text-align: justify;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -2,16 +2,35 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
// Creates a stacking context for the left popout sidebar's sticky positioning
|
||||
transform: translate(0);
|
||||
|
||||
.close-chapter-selection,
|
||||
.open-chapter-selection {
|
||||
display: none;
|
||||
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 {
|
||||
width: 800px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
flex: 1 2 100%;
|
||||
|
||||
.prev-next {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
@@ -25,40 +44,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1320px) {
|
||||
// Page contents right sidebar is removed on smaller screens
|
||||
@media screen and (max-width: 1200px) {
|
||||
.contents {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reading-material.reading-material {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-menu-button {
|
||||
display: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
// Overlaid fold-out menu
|
||||
@media screen and (max-width: 1080px) {
|
||||
// Overlaid fold-out menu for chapter selection
|
||||
@media screen and (max-width: 1000px) {
|
||||
gap: 0;
|
||||
|
||||
.chapters {
|
||||
position: sticky;
|
||||
height: 100vh;
|
||||
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 .wrapper-outer {
|
||||
left: 0;
|
||||
&.open {
|
||||
height: 100vh;
|
||||
transition: height 0s;
|
||||
|
||||
.wrapper-outer {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wrapper-outer {
|
||||
position: absolute;
|
||||
background: white;
|
||||
@@ -66,13 +80,15 @@
|
||||
bottom: 0;
|
||||
padding-left: var(--page-edge-padding);
|
||||
margin-left: calc(-1 * var(--page-edge-padding));
|
||||
padding-bottom: 120px;
|
||||
margin-bottom: -120px;
|
||||
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 * (300px + 10px));
|
||||
width: 300px;
|
||||
transition: left 0.2s ease-in-out;
|
||||
left: -310px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -89,35 +105,17 @@
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-right: var(--page-edge-padding);
|
||||
padding-bottom: 120px;
|
||||
padding-bottom: calc(-120 * var(--variable-px));
|
||||
|
||||
ul:first-of-type {
|
||||
margin-top: calc(120 * var(--variable-px));
|
||||
}
|
||||
|
||||
.hamburger-menu-button.close {
|
||||
display: inline-block;
|
||||
background: none;
|
||||
overflow: hidden;
|
||||
.close-chapter-selection {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--color-walnut);
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-18px, -2px) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate(-18px, -2px) rotate(-45deg);
|
||||
}
|
||||
top: calc(20px - 6px);
|
||||
right: calc(20px - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -131,15 +129,15 @@
|
||||
.article-title {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
gap: 20px;
|
||||
|
||||
.hamburger-menu-button.open {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
.open-chapter-selection {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
top: calc(var(--font-size-heading-h1) * 0.25);
|
||||
background: linear-gradient(to bottom, transparent calc(25% / 3), var(--color-walnut) calc(25% / 3), var(--color-walnut) calc(75% / 3), transparent calc(75% / 3), transparent calc(125% / 3), var(--color-walnut) calc(125% / 3), var(--color-walnut) calc(175% / 3), transparent calc(175% / 3), transparent calc(225% / 3), var(--color-walnut) calc(225% / 3), var(--color-walnut) calc(275% / 3), transparent calc(275% / 3));
|
||||
height: calc(var(--font-size-heading-h1) * 1.25);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-left: -6px;
|
||||
margin-right: calc(20px - 6px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -157,6 +155,7 @@
|
||||
width: 300px;
|
||||
max-height: 100vh;
|
||||
margin-top: -40px;
|
||||
flex: 0 1 auto;
|
||||
|
||||
li {
|
||||
margin-top: 0.5em;
|
||||
|
||||
@@ -142,16 +142,6 @@
|
||||
div {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
flex: 1 1 100%;
|
||||
|
||||
&.name,
|
||||
&.email {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
|
||||
Reference in New Issue
Block a user