The Trans Directory
feat: responsive design grid (#1354)
* Responsive design grid
* Addressed PR feedback
* Bump Quartz version 4.3.1 => 4.4.0
* Moved page-header into center
* Updated docs with new layouts
* Sync updated version number with package-lock
* Table of Content scrollbar auto
* Reset node_modules
* Updated layout images
* Fixed tablet layout
* Finilazed layout images
authored by
Emile Bangma
and committed by
GitHub
7d7e3349
9cefcd0d
+245
-90
docs/images/quartz layout.png
docs/images/quartz layout.png
This is a binary file and will not be displayed.
docs/images/quartz-layout-desktop.png
docs/images/quartz-layout-desktop.png
This is a binary file and will not be displayed.
docs/images/quartz-layout-mobile.png
docs/images/quartz-layout-mobile.png
This is a binary file and will not be displayed.
docs/images/quartz-layout-tablet.png
docs/images/quartz-layout-tablet.png
This is a binary file and will not be displayed.
+24
-3
docs/layout.md
+24
-3
docs/layout.md
···
13
13
beforeBody: QuartzComponent[] // laid out vertically
14
14
pageBody: QuartzComponent // single component
15
15
afterBody: QuartzComponent[] // laid out vertically
16
-
left: QuartzComponent[] // vertical on desktop, horizontal on mobile
17
-
right: QuartzComponent[] // vertical on desktop, horizontal on mobile
16
+
left: QuartzComponent[] // vertical on desktop and tablet, horizontal on mobile
17
+
right: QuartzComponent[] // vertical on desktop, horizontal on tablet and mobile
18
18
footer: QuartzComponent // single component
19
19
}
20
20
```
21
21
22
22
These correspond to following parts of the page:
23
23
24
-
![[quartz layout.png|800]]
24
+
| Layout | Preview |
25
+
| ------------------------------- | ----------------------------------- |
26
+
| Desktop (width > 1200px) | ![[quartz-layout-desktop.png\|800]] |
27
+
| Tablet (800px < width < 1200px) | ![[quartz-layout-tablet.png\|800]] |
28
+
| Mobile (width < 800px) | ![[quartz-layout-mobile.png\|800]] |
25
29
26
30
> [!note]
27
31
> There are two additional layout fields that are _not_ shown in the above diagram.
···
32
36
Quartz **components**, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components.
33
37
34
38
See [a list of all the components](component.md) for all available components along with their configuration options. You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz.
39
+
40
+
### Layout breakpoints
41
+
42
+
Quartz has different layouts depending on the width the screen viewing the website.
43
+
44
+
The breakpoints for layouts can be configured in `variables.scss`.
45
+
46
+
- `mobile`: screen width below this size will use mobile layout.
47
+
- `desktop`: screen width above this size will use desktop layout.
48
+
- Screen width between `mobile` and `desktop` width will use the tablet layout.
49
+
50
+
```scss
51
+
$breakpoints: (
52
+
mobile: 800px,
53
+
desktop: 1200px,
54
+
);
55
+
```
35
56
36
57
### Style
37
58
+2
-2
package-lock.json
+2
-2
package-lock.json
···
1
1
{
2
2
"name": "@jackyzha0/quartz",
3
-
"version": "4.3.1",
3
+
"version": "4.4.0",
4
4
"lockfileVersion": 3,
5
5
"requires": true,
6
6
"packages": {
7
7
"": {
8
8
"name": "@jackyzha0/quartz",
9
-
"version": "4.3.1",
9
+
"version": "4.4.0",
10
10
"license": "MIT",
11
11
"dependencies": {
12
12
"@clack/prompts": "^0.7.0",
+1
-1
package.json
+1
-1
package.json
+1
-1
quartz/components/renderPage.tsx
+1
-1
quartz/components/renderPage.tsx
+43
-12
quartz/components/styles/backlinks.scss
+43
-12
quartz/components/styles/backlinks.scss
···
1
+
@use "../../styles/variables.scss" as *;
2
+
1
3
.backlinks {
2
-
position: relative;
4
+
@media all and not ($desktop) {
5
+
overflow-y: auto;
6
+
display: initial;
7
+
&:after {
8
+
pointer-events: none;
9
+
content: "";
10
+
width: 100%;
11
+
height: 50px;
12
+
position: absolute;
13
+
left: 0;
14
+
bottom: 0;
15
+
opacity: 1;
16
+
transition: opacity 0.3s ease;
17
+
background: linear-gradient(transparent 0px, var(--light));
18
+
}
3
19
4
-
& > h3 {
5
-
font-size: 1rem;
6
-
margin: 0;
7
-
}
20
+
&:has(> .overflow) {
21
+
position: unset;
22
+
}
23
+
24
+
& > h3 {
25
+
font-size: 1rem;
26
+
margin: 0;
27
+
}
28
+
29
+
& > ul {
30
+
list-style: none;
31
+
padding: 0;
32
+
margin: 0.5rem 0;
8
33
9
-
& > ul {
10
-
list-style: none;
11
-
padding: 0;
12
-
margin: 0.5rem 0;
34
+
& > li {
35
+
& > a {
36
+
background-color: transparent;
37
+
}
38
+
}
39
+
}
13
40
14
-
& > li {
15
-
& > a {
16
-
background-color: transparent;
41
+
& > .overflow {
42
+
max-height: unset;
43
+
& > li:last-of-type {
44
+
margin-bottom: 0;
45
+
}
46
+
&:after {
47
+
display: none;
17
48
}
18
49
}
19
50
}
+21
-4
quartz/components/styles/explorer.scss
+21
-4
quartz/components/styles/explorer.scss
···
1
1
@use "../../styles/variables.scss" as *;
2
2
3
+
.explorer {
4
+
&.desktop-only {
5
+
overflow-y: auto;
6
+
}
7
+
&:after {
8
+
pointer-events: none;
9
+
content: "";
10
+
width: 100%;
11
+
height: 50px;
12
+
position: absolute;
13
+
left: 0;
14
+
bottom: 0;
15
+
opacity: 1;
16
+
transition: opacity 0.3s ease;
17
+
background: linear-gradient(transparent 0px, var(--light));
18
+
}
19
+
}
20
+
3
21
button#explorer {
4
22
background-color: transparent;
5
23
border: none;
···
58
76
visibility: hidden;
59
77
}
60
78
61
-
&.collapsed > .overflow::after {
62
-
opacity: 0;
63
-
}
64
-
65
79
& ul {
66
80
list-style: none;
67
81
margin: 0.08rem 0;
···
75
89
opacity: 0.75;
76
90
pointer-events: all;
77
91
}
92
+
}
93
+
> #explorer-ul {
94
+
max-height: none;
78
95
}
79
96
}
80
97
+1
-1
quartz/components/styles/graph.scss
+1
-1
quartz/components/styles/graph.scss
+1
-1
quartz/components/styles/listPage.scss
+1
-1
quartz/components/styles/listPage.scss
+1
-1
quartz/components/styles/popover.scss
+1
-1
quartz/components/styles/popover.scss
+6
-4
quartz/components/styles/search.scss
+6
-4
quartz/components/styles/search.scss
···
3
3
.search {
4
4
min-width: fit-content;
5
5
max-width: 14rem;
6
-
flex-grow: 0.3;
6
+
@media all and ($mobile) {
7
+
flex-grow: 0.3;
8
+
}
7
9
8
10
& > .search-button {
9
11
background-color: var(--lightgray);
···
62
64
margin-left: auto;
63
65
margin-right: auto;
64
66
65
-
@media all and (max-width: $fullPageWidth) {
67
+
@media all and ($desktop) {
66
68
width: 90%;
67
69
}
68
70
···
104
106
flex: 0 0 min(30%, 450px);
105
107
}
106
108
107
-
@media all and (min-width: $tabletBreakpoint) {
109
+
@media all and not ($tablet) {
108
110
&[data-preview] {
109
111
& .result-card > p.preview {
110
112
display: none;
···
130
132
border-radius: 5px;
131
133
}
132
134
133
-
@media all and (max-width: $tabletBreakpoint) {
135
+
@media all and ($tablet) {
134
136
& > #preview-container {
135
137
display: none !important;
136
138
}
+4
quartz/components/styles/toc.scss
+4
quartz/components/styles/toc.scss
+88
-55
quartz/styles/base.scss
+88
-55
quartz/styles/base.scss
···
12
12
body,
13
13
section {
14
14
margin: 0;
15
-
max-width: 100%;
16
15
box-sizing: border-box;
17
16
background-color: var(--light);
18
17
font-family: var(--bodyFont);
···
109
108
110
109
.desktop-only {
111
110
display: initial;
112
-
@media all and (max-width: $fullPageWidth) {
111
+
@media all and ($mobile) {
113
112
display: none;
114
113
}
115
114
}
116
115
117
116
.mobile-only {
118
117
display: none;
119
-
@media all and (max-width: $fullPageWidth) {
118
+
@media all and ($mobile) {
120
119
display: initial;
121
120
}
122
121
}
123
122
124
123
.page {
125
-
@media all and (max-width: $fullPageWidth) {
126
-
margin: 0 auto;
127
-
padding: 0 1rem;
128
-
max-width: $pageWidth;
129
-
}
130
-
124
+
max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
125
+
margin: 0 auto;
131
126
& article {
132
127
& > h1 {
133
128
font-size: 2rem;
···
155
150
}
156
151
157
152
& > #quartz-body {
158
-
width: 100%;
159
-
display: flex;
160
-
@media all and (max-width: $fullPageWidth) {
161
-
flex-direction: column;
153
+
display: grid;
154
+
grid-template-columns: #{map-get($desktopGrid, templateColumns)};
155
+
grid-template-rows: #{map-get($desktopGrid, templateRows)};
156
+
column-gap: #{map-get($desktopGrid, columnGap)};
157
+
row-gap: #{map-get($desktopGrid, rowGap)};
158
+
grid-template-areas: #{map-get($desktopGrid, templateAreas)};
159
+
@media all and ($desktop) {
160
+
grid-template-columns: #{map-get($tabletGrid, templateColumns)};
161
+
grid-template-rows: #{map-get($tabletGrid, templateRows)};
162
+
column-gap: #{map-get($tabletGrid, columnGap)};
163
+
row-gap: #{map-get($tabletGrid, rowGap)};
164
+
grid-template-areas: #{map-get($tabletGrid, templateAreas)};
165
+
}
166
+
@media all and ($mobile) {
167
+
grid-template-columns: #{map-get($mobileGrid, templateColumns)};
168
+
grid-template-rows: #{map-get($mobileGrid, templateRows)};
169
+
column-gap: #{map-get($mobileGrid, columnGap)};
170
+
row-gap: #{map-get($mobileGrid, rowGap)};
171
+
grid-template-areas: #{map-get($mobileGrid, templateAreas)};
172
+
}
173
+
174
+
@media all and ($desktop) {
175
+
padding: 0 1rem;
176
+
}
177
+
@media all and ($mobile) {
178
+
margin: 0 auto;
162
179
}
163
180
164
181
& .sidebar {
165
-
flex: 1;
166
-
display: flex;
167
-
flex-direction: column;
168
182
gap: 2rem;
169
183
top: 0;
170
-
width: $sidePanelWidth;
171
-
margin-top: $topSpacing;
172
184
box-sizing: border-box;
173
-
padding: 0 4rem;
174
-
position: fixed;
175
-
@media all and (max-width: $fullPageWidth) {
176
-
position: initial;
177
-
flex-direction: row;
178
-
padding: 0;
179
-
width: initial;
180
-
margin-top: 2rem;
181
-
}
185
+
padding: $topSpacing 2rem 2rem 2rem;
186
+
display: flex;
187
+
height: 100vh;
188
+
position: sticky;
182
189
}
183
190
184
191
& .sidebar.left {
185
192
z-index: 1;
186
-
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
187
-
@media all and (max-width: $fullPageWidth) {
193
+
grid-area: sidebar-left;
194
+
flex-direction: column;
195
+
@media all and ($mobile) {
188
196
gap: 0;
189
197
align-items: center;
198
+
position: initial;
199
+
display: flex;
200
+
height: unset;
201
+
flex-direction: row;
202
+
padding: 0;
203
+
padding-top: 2rem;
190
204
}
191
205
}
192
206
193
207
& .sidebar.right {
194
-
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
195
-
flex-wrap: wrap;
196
-
& > * {
197
-
@media all and (max-width: $fullPageWidth) {
208
+
grid-area: sidebar-right;
209
+
margin-right: 0;
210
+
flex-direction: column;
211
+
@media all and ($mobile) {
212
+
margin-left: inherit;
213
+
margin-right: inherit;
214
+
}
215
+
@media all and ($desktop) {
216
+
position: initial;
217
+
height: unset;
218
+
width: 100%;
219
+
flex-direction: row;
220
+
padding: 0;
221
+
& > * {
198
222
flex: 1;
199
-
min-width: 140px;
223
+
}
224
+
& > .toc {
225
+
display: none;
200
226
}
201
227
}
202
228
}
203
-
}
229
+
& .page-header,
230
+
& .page-footer {
231
+
margin-top: 1rem;
232
+
}
204
233
205
-
& .page-header,
206
-
& .page-footer {
207
-
width: $pageWidth;
208
-
margin-top: 1rem;
234
+
& .page-header {
235
+
grid-area: page-header;
236
+
margin: $topSpacing 0 0 0;
237
+
@media all and ($mobile) {
238
+
margin-top: 0;
239
+
padding: 0;
240
+
}
241
+
}
209
242
210
-
@media all and (max-width: $fullPageWidth) {
211
-
width: initial;
243
+
& .center > article {
244
+
grid-area: page-center;
212
245
}
213
-
}
214
246
215
-
& .page-header {
216
-
margin: $topSpacing auto 0 auto;
217
-
@media all and (max-width: $fullPageWidth) {
218
-
margin-top: 2rem;
247
+
& .page-footer {
248
+
grid-area: page-footer;
219
249
}
220
-
}
221
250
222
-
& .center,
223
-
& footer {
224
-
margin-left: auto;
225
-
margin-right: auto;
226
-
width: $pageWidth;
227
-
@media all and (max-width: $fullPageWidth) {
228
-
width: initial;
251
+
& .center,
252
+
& footer {
253
+
margin-left: auto;
254
+
margin-right: auto;
255
+
@media all and ($desktop) {
256
+
margin-right: 0;
257
+
}
258
+
@media all and ($mobile) {
259
+
margin-left: 0;
260
+
}
261
+
}
262
+
& footer {
229
263
margin-left: 0;
230
-
margin-right: 0;
231
264
}
232
265
}
233
266
}
+52
-5
quartz/styles/variables.scss
+52
-5
quartz/styles/variables.scss
···
1
-
$pageWidth: 750px;
2
-
$mobileBreakpoint: 600px;
3
-
$tabletBreakpoint: 1000px;
4
-
$sidePanelWidth: 380px;
1
+
/**
2
+
* Layout breakpoints
3
+
* $mobile: screen width below this value will use mobile styles
4
+
* $desktop: screen width above this value will use desktop styles
5
+
* Screen width between $mobile and $desktop width will use the tablet layout.
6
+
* assuming mobile < desktop
7
+
*/
8
+
$breakpoints: (
9
+
mobile: 800px,
10
+
desktop: 1200px,
11
+
);
12
+
13
+
$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
14
+
$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
15
+
$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
16
+
17
+
$pageWidth: #{map-get($breakpoints, mobile)};
18
+
$sidePanelWidth: 320px; //380px;
5
19
$topSpacing: 6rem;
6
-
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
7
20
$boldWeight: 700;
8
21
$semiBoldWeight: 600;
9
22
$normalWeight: 400;
23
+
24
+
$mobileGrid: (
25
+
templateRows: "auto auto auto auto auto",
26
+
templateColumns: "auto",
27
+
rowGap: "5px",
28
+
columnGap: "5px",
29
+
templateAreas:
30
+
'"sidebar-left"\
31
+
"page-header"\
32
+
"page-center"\
33
+
"sidebar-right"\
34
+
"page-footer"',
35
+
);
36
+
$tabletGrid: (
37
+
templateRows: "auto auto auto auto",
38
+
templateColumns: "#{$sidePanelWidth} auto",
39
+
rowGap: "5px",
40
+
columnGap: "5px",
41
+
templateAreas:
42
+
'"sidebar-left page-header"\
43
+
"sidebar-left page-center"\
44
+
"sidebar-left sidebar-right"\
45
+
"sidebar-left page-footer"',
46
+
);
47
+
$desktopGrid: (
48
+
templateRows: "auto auto auto",
49
+
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
50
+
rowGap: "5px",
51
+
columnGap: "5px",
52
+
templateAreas:
53
+
'"sidebar-left page-header sidebar-right"\
54
+
"sidebar-left page-center sidebar-right"\
55
+
"sidebar-left page-footer sidebar-right"',
56
+
);