atproto blogging
nonbinary.computer
1/* Sidebar layouts - 3-column grid with sticky sidebar */
2
3/* Base sidebar layout pattern
4 Uses CSS custom properties for sizing flexibility:
5 --layout-gutter: sidebar/gutter width (default: 240px)
6 --layout-content: main content max-width (default: 95ch)
7 --layout-gap: grid gap (default: 1.5rem)
8 --layout-padding: container padding (default: 2rem 1.25rem 2rem 0)
9*/
10
11.sidebar-layout {
12 display: grid;
13 grid-template-columns:
14 minmax(var(--layout-gutter, 300px), 1fr)
15 minmax(0, var(--layout-content, 95ch))
16 minmax(var(--layout-gutter, 300px), 1fr);
17 gap: var(--layout-gap, 1.5rem);
18 max-width: calc(var(--layout-content, 95ch) + var(--layout-gutter, 300px) * 2 + 4rem);
19 margin: 0 auto;
20 padding: var(--layout-padding, 2rem 1.25rem 2rem 0);
21}
22
23.sidebar-layout-sidebar {
24 grid-column: 1;
25 position: sticky;
26 top: 2rem;
27 align-self: flex-start;
28 max-height: calc(100vh - 4rem);
29 overflow-y: auto;
30}
31
32.sidebar-layout-main {
33 grid-column: 2;
34 padding: 0 1rem;
35}
36
37.sidebar-layout-actions {
38 grid-column: 3;
39 position: sticky;
40 top: 2rem;
41 align-self: flex-start;
42}
43
44/* Mobile: sidebar collapses to header above main content */
45@media (max-width: 1400px) {
46 .sidebar-layout {
47 grid-template-columns: minmax(1rem, 1fr) minmax(0, var(--layout-content, 95ch)) minmax(1rem, 1fr) !important;
48 gap: 0 !important;
49 max-width: 100vw !important;
50 box-sizing: border-box !important;
51 }
52
53 .sidebar-layout-sidebar {
54 grid-column: 2;
55 position: static;
56 max-height: none;
57 min-width: 0;
58 margin-bottom: 2rem;
59 }
60
61 .sidebar-layout-main {
62 grid-column: 2;
63 padding: 0;
64 min-width: 0;
65 }
66
67 .sidebar-layout-actions {
68 display: none;
69 }
70}
71
72/* Variant: notebook layout (wider gutters and content) */
73.sidebar-layout-notebook {
74 --layout-gutter: 320px;
75 --layout-content: 95ch;
76 --layout-gap: 2rem;
77 --layout-padding: 2.5rem 1.25rem 2.5rem 0;
78}
79
80/* Variant: repository/profile layout (standard sizing) */
81.sidebar-layout-repository {
82 --layout-gutter: 240px;
83 --layout-content: 95ch;
84 --layout-gap: 1rem;
85 --layout-padding: 2.25rem 1.25rem 2.25rem 0;
86}
87
88/* ==========================================================================
89 BACKWARD-COMPATIBLE CLASS ALIASES
90 These map existing component class names to the unified layout system.
91 ========================================================================== */
92
93/* Notebook layout (used in notebook.rs) */
94.notebook-layout {
95 display: grid;
96 grid-template-columns:
97 minmax(330px, 1fr)
98 minmax(0, 95ch)
99 minmax(240px, 1fr);
100 gap: 1rem;
101 max-width: calc(95ch + 480px + 4rem);
102 margin: 0 auto;
103 padding: 2.5rem 1.25rem 2.5rem 0;
104}
105
106.notebook-sidebar {
107 grid-column: 1;
108 position: sticky;
109 top: 2rem;
110 align-self: flex-start;
111 max-height: calc(100vh - 4rem);
112 overflow-y: auto;
113}
114
115.notebook-main {
116 grid-column: 2;
117 padding: 0 1rem;
118}
119
120@media (max-width: 1400px) {
121 .notebook-layout {
122 grid-template-columns: minmax(1rem, 1fr) minmax(0, 95ch) minmax(1rem, 1fr) !important;
123 gap: 0 !important;
124 max-width: 100vw !important;
125 box-sizing: border-box !important;
126 }
127
128 .notebook-sidebar {
129 grid-column: 2;
130 position: static;
131 max-height: none;
132 min-width: 0;
133 margin-bottom: 2rem;
134 }
135
136 .notebook-main {
137 grid-column: 2;
138 padding: 0;
139 min-width: 0;
140 }
141}
142
143/* Repository layout (used in identity.rs) */
144.repository-layout {
145 display: grid;
146 grid-template-columns:
147 minmax(240px, 1fr)
148 minmax(0, 95ch)
149 minmax(240px, 1fr);
150 gap: 1rem;
151 max-width: calc(95ch + 480px + 4rem);
152 margin: 0 auto;
153 padding: 2.25rem 1.25rem 2.25rem 0;
154}
155
156.repository-sidebar {
157 grid-column: 1;
158 position: sticky;
159 top: 2rem;
160 align-self: flex-start;
161 overflow-y: auto;
162}
163
164.repository-main {
165 grid-column: 2;
166 padding: 0 1rem;
167}
168
169@media (max-width: 1400px) {
170 .repository-layout {
171 grid-template-columns: minmax(1rem, 1fr) minmax(0, 95ch) minmax(1rem, 1fr) !important;
172 gap: 0 !important;
173 max-width: 100vw !important;
174 box-sizing: border-box !important;
175 }
176
177 .repository-sidebar {
178 grid-column: 2;
179 position: static;
180 max-height: none;
181 min-width: 0;
182 margin-bottom: 2rem;
183 }
184
185 .repository-main {
186 grid-column: 2;
187 padding: 0;
188 min-width: 0;
189 }
190}