Skip to content

Commit b8a3891

Browse files
plexusplexus
committed
Rework session cards
1 parent eb94ac1 commit b8a3891

File tree

11 files changed

+364
-123
lines changed

11 files changed

+364
-123
lines changed

‎resources/public/css/buttons.css

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
:where(html) {
2+
--gray-0-hsl: 210 17% 98%;
3+
--gray-1-hsl: 210 17% 95%;
4+
--gray-2-hsl: 210 16% 93%;
5+
--gray-3-hsl: 210 14% 89%;
6+
--gray-4-hsl: 210 14% 83%;
7+
--gray-5-hsl: 210 11% 71%;
8+
--gray-6-hsl: 210 7% 56%;
9+
--gray-7-hsl: 210 9% 31%;
10+
--gray-8-hsl: 210 10% 23%;
11+
--gray-9-hsl: 210 11% 15%;
12+
--gray-10-hsl: 214 14% 10%;
13+
--gray-11-hsl: 216 16% 6%;
14+
--gray-12-hsl: 210 40% 2%
15+
}
16+
17+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset])),
18+
:where(input[type=file])::-webkit-file-upload-button,
19+
:where(input[type=file])::file-selector-button {
20+
--_accent: initial;
21+
--_text: initial;
22+
--_size: initial;
23+
--_bg-light: #fff;
24+
--_bg-dark: var(--surface-3);
25+
--_bg: var(--_bg-light);
26+
--_border: var(--surface-3);
27+
--_highlight-size: 0;
28+
--_highlight-light: hsl(var(--gray-5-hsl)/25%);
29+
--_highlight-dark: hsl(var(--gray-12-hsl)/25%);
30+
--_highlight: var(--_highlight-light);
31+
--_ink-shadow-light: 0 1px 0 var(--gray-3);
32+
--_ink-shadow-dark: 0 1px 0 var(--surface-1);
33+
--_ink-shadow: var(--_ink-shadow-light);
34+
--_icon-size: var(--size-relative-7);
35+
--_icon-color: var(--_accent, var(--link));
36+
-webkit-tap-highlight-color: transparent;
37+
-webkit-touch-callout: none;
38+
align-items: center;
39+
background: var(--_bg);
40+
border: var(--border-size-1) solid var(--_border);
41+
border-radius: 0;
42+
box-shadow: var(--shadow-1), 0 1px var(--surface-3), 0 0 0 var(--_highlight-size) var(--_highlight);
43+
color: var(--_text);
44+
display: inline-flex;
45+
font-size: var(--_size);
46+
font-weight: var(--font-weight-7);
47+
gap: var(--size-2);
48+
justify-content: center;
49+
padding-block: .75ch;
50+
padding-inline: var(--size-relative-6);
51+
text-align: center;
52+
text-shadow: var(--_ink-shadow);
53+
transition: border-color .5s var(--ease-3);
54+
user-select: none
55+
}
56+
57+
@media (prefers-color-scheme:dark) {
58+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset])),
59+
:where(input[type=file])::-webkit-file-upload-button,
60+
:where(input[type=file])::file-selector-button {
61+
--_highlight: var(--_highlight-dark);
62+
--_bg: var(--_bg-dark);
63+
--_ink-shadow: var(--_ink-shadow-dark)
64+
}
65+
}
66+
67+
@media (prefers-reduced-motion:no-preference) {
68+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset])),
69+
:where(input[type=file])::-webkit-file-upload-button,
70+
:where(input[type=file])::file-selector-button {
71+
transition: border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4)
72+
}
73+
}
74+
75+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))[disabled] {
76+
--_bg: none;
77+
--_text: var(--gray-6);
78+
box-shadow: var(--shadow-1);
79+
cursor: not-allowed
80+
}
81+
82+
@media (prefers-color-scheme:dark) {
83+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))[disabled] {
84+
--_text: var(--gray-5)
85+
}
86+
}
87+
88+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset])):where(:not(:active):hover) {
89+
--_highlight-size: var(--size-2);
90+
transition-duration: .25s
91+
}
92+
93+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))>:where(svg) {
94+
block-size: var(--_icon-size);
95+
filter: drop-shadow(var(--_ink-shadow));
96+
flex-shrink: 0;
97+
inline-size: var(--_icon-size)
98+
}
99+
100+
:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))>:where(svg>*) {
101+
stroke: var(--_icon-color);
102+
stroke-width: var(--border-size-2)
103+
}
104+
105+
:where([type=submit], form button:not([type], [disabled])) {
106+
--_text: var(--_accent, var(--link))
107+
}
108+
109+
:where([type=reset]) {
110+
--_text: var(--red-6);
111+
--_border: var(--red-3)
112+
}
113+
114+
:where([type=reset]):focus-visible {
115+
outline-color: var(--red-6)
116+
}
117+
118+
@media (prefers-color-scheme:dark) {
119+
:where([type=reset]) {
120+
--_text: var(--red-2);
121+
--_border: var(--surface-3)
122+
}
123+
}
124+
125+
:where([type=submit], [type=reset], form button:not([type])):is(:hover, :focus-visible):not([disabled]) {
126+
--_border: currentColor
127+
}
128+
129+
:where(input[type=file]) {
130+
align-self: flex-start;
131+
border: var(--border-size-1) solid var(--surface-2);
132+
border-radius: var(--radius-2);
133+
box-shadow: var(--inner-shadow-4);
134+
color: var(--text-2);
135+
cursor: auto;
136+
max-inline-size: 100%;
137+
padding: 0
138+
}
139+
140+
:where(input[type=file])::-webkit-file-upload-button,
141+
:where(input[type=file])::file-selector-button {
142+
cursor: pointer;
143+
margin-inline-end: var(--size-relative-6)
144+
}
145+
146+
@media (prefers-color-scheme:dark) {
147+
:where([disabled]),
148+
:where([type=reset]),
149+
:where([type=submit]),
150+
:where(form button:not([type=button])) {
151+
--_bg: var(--surface-1)
152+
}
153+
}

‎resources/public/css/styles.css

+91-26
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:where(html) {
22
--hoc-pink: #e25f7d;
3-
--sessions-arc-thickness: 40px;
3+
--size-0: 0;
4+
--sessions-arc-thickness: 30px;
45
--sessions-arc-color: var(--lime-5);
56
--sessions-arc-degrees: 240deg;
67
}
@@ -28,14 +29,10 @@ body.menu-open .co_gaiwan_compass_html_navigation__menu_panel {
2829
}
2930

3031
body {
31-
margin: var(--size-2);
32+
padding: var(--size-2);
3233
max-width: 100vw;
3334
}
3435

35-
body >main {
36-
padding: var(--size-3);
37-
}
38-
3936
ul, ol {
4037
list-style-type: none;
4138
margin: var(--size-0);
@@ -54,19 +51,18 @@ body {
5451
.graphics-hamburger {
5552
stroke-width: 13%;
5653
stroke-linecap: round;
57-
stroke: var(--gray-9);
54+
stroke: var(--text-1);
5855
}
5956

6057
.graphics-cross {
6158
stroke-width: 13%;
6259
stroke-linecap: round;
63-
stroke: var(--gray-9);
60+
stroke: var(--text-1);
6461
}
6562

6663
.co_gaiwan_compass_html_navigation__nav_bar {
6764
display: flex;
6865
align-items: center;
69-
padding: var(--size-3);
7066
background-color: var(--surface-1);
7167
}
7268

@@ -127,7 +123,7 @@ body {
127123
.sessions-capacity_gauge {
128124
aspect-ratio: 1 / 1;
129125
position: relative;
130-
--sessions-arc-thickness: 10%;
126+
--sessions-arc-thickness: 7%;
131127
}
132128

133129
.sessions-capacity_gauge >* {
@@ -149,33 +145,52 @@ body {
149145
width: 100%;
150146
aspect-ratio: 1 / 1;
151147
border-radius: 9999px;
152-
background-size: contain;
148+
background-size: cover;
149+
background-position: 50% 50%;
153150
}
154151

155152
.sessions-session_card {
156153
display: flex;
157-
gap: var(--size-3);
158-
box-shadow: var(--shadow-4);
154+
gap: var(--size-1);
155+
background-color: var(--surface-2);
156+
box-shadow: var(--shadow-2);
159157
border-style: solid;
160158
border-color: var(--surface-3);
159+
text-align: center;
161160
}
162161

163162
.sessions-session_card .title {
164-
font-size: var(--size-3);
163+
font-size: var(--size-4);
164+
font-weight: 600;
165+
margin-bottom: var(--size-2);
165166
}
166167

167-
.sessions-session_card .datetime {
168-
display: flex;
169-
flex-direction: column;
170-
align-items: center;
171-
justify-content: center;
168+
.sessions-session_card .subtitle {
172169
font-size: var(--size-3);
173-
font-weight: 700;
170+
font-weight: 500;
174171
}
175172

176173
.sessions-session_card .guage {
177174
padding: var(--size-2);
178-
align-self: center;
175+
}
176+
177+
.sessions-session_card .datetime {
178+
font-weight: 600;
179+
position: absolute;
180+
top: var(--size-0);
181+
right: var(--size-0);
182+
text-align: right;
183+
margin: var(--size-2);
184+
}
185+
186+
.sessions-session_card .details {
187+
display: flex;
188+
flex-direction: column;
189+
width: 100%;
190+
align-items: center;
191+
padding-top: var(--size-3);
192+
padding-bottom: var(--size-3);
193+
position: relative;
179194
}
180195

181196
.sessions-session_card .type {
@@ -192,13 +207,63 @@ body {
192207
width: 100px;
193208
}
194209

195-
.sessions-session_card .details {
210+
.sessions-session_card .sessions-session_actions {
211+
text-align: right;
212+
}
213+
214+
.sessions-session_card .expansion {
215+
display: none;
216+
}
217+
218+
.sessions-session_card.expanded .expansion {
219+
display: block;
220+
}
221+
222+
.sessions-session_actions {
196223
display: flex;
197-
flex-direction: column;
198-
padding-top: var(--size-2);
199-
padding-bottom: var(--size-2);
224+
justify-content: flex-end;
225+
width: 100%;
226+
margin-top: var(--size-2);
200227
}
201228

202-
.home-home .sessions-session_card {
229+
.home-filters {
230+
display: flex;
231+
flex-wrap: wrap;
232+
margin-top: var(--size-3);
203233
margin-bottom: var(--size-3);
234+
}
235+
236+
.home-filters button {
237+
font-weight: 400;
238+
flex-grow: 1;
239+
}
240+
241+
.sessions-session_list {
242+
display: grid;
243+
gap: var(--size-3);
244+
grid-template-columns: repeat(1, 1fr);
245+
}
246+
247+
@media (min-width: 40rem) {
248+
249+
.sessions-session_list {
250+
grid-template-columns: repeat(2, 1fr);
251+
}
252+
253+
}
254+
255+
@media (min-width: 60rem) {
256+
257+
.sessions-session_list {
258+
grid-template-columns: repeat(3, 1fr);
259+
}
260+
261+
}
262+
263+
@media (min-width: 80rem) {
264+
265+
.sessions-session_list {
266+
grid-template-columns: repeat(4, 1fr);
267+
}
268+
204269
}

‎resources/public/js/cx.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ addEventListener("DOMContentLoaded", (_) => {
55
[...(document.querySelectorAll('[cx-toggle]'))].forEach((el) => {
66
let klass = el.getAttribute('cx-toggle')
77
let selector = el.getAttribute('cx-target')
8-
let target = selector ? document.querySelector(selector) : el;
8+
let target = selector ? el.closest(selector) : el;
99
el.addEventListener("click", (_) => target.classList.toggle(klass))
1010
})
1111
});

‎src/co/gaiwan/compass/css/buttons.clj

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
(ns co.gaiwan.compass.css.buttons)

‎src/co/gaiwan/compass/css/tokens.clj

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88

99
(o/import-tokens! (charred/read-json (io/resource "open-props.tokens.json")) {:include-values? false})
1010

11+
(o/defprop --size-0 0)
12+
(o/defprop --text-1)
13+
1114
(o/defprop --hoc-pink "#e25f7d")
1215
(o/defprop --surface-1)
1316
(o/defprop --surface-2)

‎src/co/gaiwan/compass/html/graphics.clj

+3-2
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@
1414
[:path.triangle {:d "m 27.014067,26.404815 14.950042,-8.631421 -0.0025,-0.0028 -11.790743,-3.159345 -3.159301,11.790767 z"}]
1515
[:path.leg {:d "M 39.334691,86.310778 C 37.137742,85.592591 35.93936,83.229026 36.658422,81.032361 l 9.585531,-31.540687 5.276789,-2.675454 2.675453,5.276791 -9.584714,31.542313 c -1.000278,2.14767 -3.166747,3.329559 -5.27679,2.675454 z"}]]))
1616

17+
1718
(o/defstyled hamburger :svg
1819
{:stroke-width "13%"
1920
:stroke-linecap "round"
20-
:stroke t/--gray-9}
21+
:stroke t/--text-1}
2122
([& _]
2223
[:<> {:viewBox "0 0 20 15"}
2324
(for [x [1 7.5 14]]
@@ -26,7 +27,7 @@
2627
(o/defstyled cross :svg
2728
{:stroke-width "13%"
2829
:stroke-linecap "round"
29-
:stroke t/--gray-9}
30+
:stroke t/--text-1}
3031
([]
3132
[:<> {:viewBox "0 0 20 15"}
3233
[:path {:d "M 4.0348568,1.5348556 15.965143,13.465142"}]

0 commit comments

Comments
 (0)