Skip to content

Commit 324901b

Browse files
gregzaalgregzaal
committed
Optimize smaller displays
1 parent 71d6993 commit 324901b

5 files changed

Lines changed: 213 additions & 28 deletions

File tree

‎components/Projects/Lighthouse.module.scss‎

Lines changed: 111 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,22 +76,23 @@ $c-gradient-sides: rgb(206, 255, 239);
7676
.logo {
7777
position: relative;
7878
height: 8rem;
79+
max-width: min(80vw, 20rem);
7980
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
8081
z-index: 4;
8182
}
8283

8384
h1 {
8485
position: relative;
8586
font-size: 3rem;
86-
white-space: nowrap;
87+
white-space: normal;
8788
margin: 2rem 1rem 0.5rem;
8889
z-index: 4;
8990
}
9091

9192
p {
9293
position: relative;
9394
margin: 0;
94-
white-space: nowrap;
95+
white-space: normal;
9596
z-index: 4;
9697
}
9798
}
@@ -115,6 +116,7 @@ $c-gradient-sides: rgb(206, 255, 239);
115116

116117
h2 {
117118
font-size: 2rem;
119+
margin-top: 0;
118120

119121
svg {
120122
vertical-align: middle;
@@ -129,12 +131,31 @@ $c-gradient-sides: rgb(206, 255, 239);
129131
}
130132
}
131133

134+
.sectionFullWidth {
135+
max-width: 100%;
136+
}
137+
138+
.videoEmbed {
139+
position: relative;
140+
width: min(100%, 650px);
141+
margin: 0 auto;
142+
aspect-ratio: 16 / 9;
143+
144+
iframe {
145+
width: 100%;
146+
height: 100%;
147+
border: 0;
148+
}
149+
}
150+
132151
@media screen and (max-width: 1000px) {
133152
.sectionHalfMobile {
134153
flex-direction: column;
154+
align-items: stretch;
135155

136156
.subSection {
137-
width: calc(100% - 2rem);
157+
// width: calc(100% - 2rem);
158+
max-width: 100%;
138159
}
139160
}
140161
}
@@ -186,6 +207,8 @@ $c-gradient-sides: rgb(206, 255, 239);
186207

187208
video {
188209
max-width: 100%;
210+
width: calc(33.33% - 2rem);
211+
min-width: 300px;
189212
}
190213
}
191214

@@ -204,7 +227,11 @@ $c-gradient-sides: rgb(206, 255, 239);
204227
@include flex(row, true, true);
205228
flex-wrap: wrap;
206229
gap: 1rem;
207-
// max-width: 33%;
230+
231+
img {
232+
width: calc(50% - 0.5rem);
233+
height: auto;
234+
}
208235
}
209236

210237
.clickableImage {
@@ -225,10 +252,11 @@ $c-gradient-sides: rgb(206, 255, 239);
225252
}
226253

227254
.assetGallery {
228-
max-height: 30em;
255+
max-height: var(--asset-gallery-max-height, 10em);
229256
margin: -3rem 0;
230257
overflow: hidden;
231258
position: relative;
259+
width: 100%;
232260
}
233261

234262
.assetGalleryInner {
@@ -260,3 +288,81 @@ $c-gradient-sides: rgb(206, 255, 239);
260288
color: $c-yellow;
261289
font-style: italic;
262290
}
291+
292+
@media screen and (max-width: 800px) {
293+
.banner {
294+
min-height: calc(100vh - 53px - 2rem);
295+
296+
h1 {
297+
font-size: clamp(2rem, 8vw, 3rem);
298+
margin-top: 1.5rem;
299+
}
300+
301+
p {
302+
max-width: 22rem;
303+
}
304+
}
305+
306+
.section {
307+
width: calc(100% - 1rem);
308+
padding: 2rem 0.5rem;
309+
}
310+
311+
.text,
312+
.textLeft {
313+
padding: 1rem 0.5rem;
314+
}
315+
316+
.row {
317+
gap: 1rem;
318+
319+
p {
320+
max-width: none;
321+
}
322+
}
323+
324+
.assetGallery {
325+
max-height: 24em;
326+
margin-top: 0;
327+
margin-bottom: -1.5rem;
328+
}
329+
330+
.assetGalleryPage {
331+
gap: 0.75rem;
332+
}
333+
334+
.gameplayVideos {
335+
gap: 0.75rem;
336+
337+
video {
338+
width: 100%;
339+
max-width: 32rem;
340+
height: auto;
341+
}
342+
}
343+
344+
.prizeList {
345+
gap: 0.35rem;
346+
// justify-content: space-evenly;
347+
}
348+
}
349+
350+
@media screen and (max-width: 600px) {
351+
.banner {
352+
height: auto;
353+
}
354+
355+
.imgGrid {
356+
gap: 0.75rem;
357+
}
358+
359+
.clickableImage {
360+
width: 100%;
361+
}
362+
}
363+
364+
@media screen and (max-width: 1300px) {
365+
.gameplayConcepts {
366+
display: none;
367+
}
368+
}

‎components/Projects/Lighthouse.tsx‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ const Lighthouse = () => {
7777
const { data: assets, error: errorAssets } = apiSWR(`/assets?t=all&future=true&c=collection: project_lighthouse`, {
7878
revalidateOnFocus: false,
7979
})
80-
const assetGalleryRef = useRef(null)
80+
const assetGalleryParentRef = useRef<HTMLDivElement>(null)
81+
const assetGalleryRef = useRef<HTMLDivElement>(null)
82+
const { height: assetGalleryParentHeight } = useDivSize(assetGalleryParentRef, [assets])
8183
const { height: assetGalleryHeight } = useDivSize(assetGalleryRef, [assets])
8284

8385
return (
@@ -106,20 +108,20 @@ const Lighthouse = () => {
106108
</div>
107109

108110
<div className={styles.sectionWrapper}>
109-
<div className={styles.section}>
111+
<div className={`${styles.section} ${styles.sectionHalfMobile}`}>
110112
<div className={styles.subSection}>
111-
<iframe
112-
width={650}
113-
height={650 * (9 / 16)}
114-
src="https://www.youtube.com/embed/1sKLwMzcis0"
115-
title="Project Lighthouse Announcement Trailer"
116-
frameBorder="0"
117-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
118-
allowFullScreen
119-
/>
113+
<div className={styles.videoEmbed}>
114+
<iframe
115+
src="https://www.youtube.com/embed/1sKLwMzcis0"
116+
title="Project Lighthouse Announcement Trailer"
117+
frameBorder="0"
118+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
119+
allowFullScreen
120+
/>
121+
</div>
120122
</div>
121123
<div className={styles.subSection}>
122-
<div className={styles.text} style={{ textAlign: 'left' }}>
124+
<div className={styles.textLeft}>
123125
<p>
124126
Poly Haven is developing its first-ever video game, <strong>Project Lighthouse</strong>, designed with
125127
three goals in mind:
@@ -136,9 +138,9 @@ const Lighthouse = () => {
136138
</div>
137139
</div>
138140

139-
<div className={styles.sectionWrapper}>
140-
<div className={styles.section} style={{ maxWidth: '100%' }}>
141-
<div className={styles.subSection}>
141+
<div className={styles.sectionWrapper} ref={assetGalleryParentRef}>
142+
<div className={`${styles.section} ${styles.sectionHalfMobile} ${styles.sectionFullWidth}`}>
143+
<div className={`${styles.subSection} ${styles.gameplayConcepts}`}>
142144
<div className={styles.imgGrid}>
143145
{gameplayConceptImages.map((imageUrl) => (
144146
<img
@@ -172,8 +174,17 @@ const Lighthouse = () => {
172174
</div>
173175
</div>
174176
<div className={styles.subSection}>
175-
{assets && (
176-
<div className={styles.assetGallery}>
177+
{assets && Object.keys(assets).length > 0 && (
178+
<div
179+
className={styles.assetGallery}
180+
style={
181+
(assetGalleryParentHeight
182+
? {
183+
'--asset-gallery-max-height': `${assetGalleryParentHeight}px`,
184+
}
185+
: undefined) as React.CSSProperties | undefined
186+
}
187+
>
177188
<div
178189
className={styles.assetGalleryInner}
179190
style={
@@ -214,7 +225,7 @@ const Lighthouse = () => {
214225

215226
{isBeforeDeadline && (
216227
<div className={styles.sectionWrapper}>
217-
<div className={styles.section} style={{ maxWidth: '100%' }}>
228+
<div className={`${styles.section} ${styles.sectionFullWidth}`}>
218229
<div className={styles.subSection}>
219230
<Countdown targetDate={submissionDeadline} maxInterval="weeks" />
220231
<div className={styles.row}>
@@ -258,7 +269,7 @@ const Lighthouse = () => {
258269
)}
259270

260271
<div className={styles.sectionWrapper}>
261-
<div className={styles.section} style={{ maxWidth: '100%' }}>
272+
<div className={`${styles.section} ${styles.sectionFullWidth}`}>
262273
<div className={styles.subSection}>
263274
<h2>About the Game</h2>
264275
<p>
@@ -303,7 +314,7 @@ const Lighthouse = () => {
303314
</div>
304315

305316
<div className={styles.sectionWrapper}>
306-
<div className={styles.section} style={{ maxWidth: '100%' }}>
317+
<div className={`${styles.section} ${styles.sectionFullWidth}`}>
307318
<div className={styles.subSection}>
308319
<h2>Timeline</h2>
309320
<LighthouseTimeline />

‎components/Projects/LighthouseTimeline.module.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,37 @@
218218
}
219219
}
220220

221+
@media screen and (max-width: 1300px) {
222+
.desktopEvents {
223+
.connector,
224+
.content {
225+
opacity: 0;
226+
visibility: hidden;
227+
pointer-events: none;
228+
@include transition();
229+
}
230+
231+
.event:hover,
232+
.event:focus-within {
233+
.connector,
234+
.content {
235+
opacity: 1;
236+
visibility: visible;
237+
pointer-events: auto;
238+
}
239+
}
240+
241+
.alwaysVisible {
242+
.connector,
243+
.content {
244+
opacity: 1;
245+
visibility: visible;
246+
pointer-events: auto;
247+
}
248+
}
249+
}
250+
}
251+
221252
@media screen and (max-width: 760px) {
222253
.barSection {
223254
padding: 0;

‎components/Projects/LighthouseTimeline.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const LighthouseTimeline = () => {
7777
const lastCompletedIndex = events.reduce((highestIndex, event, index) => (event.completed ? index : highestIndex), -1)
7878
const nextEventIndex = Math.min(lastCompletedIndex + 1, events.length - 1)
7979
const allCompleted = lastCompletedIndex === events.length - 1
80+
const previousEventIndex = allCompleted ? Math.max(lastCompletedIndex - 1, -1) : Math.max(nextEventIndex - 1, -1)
8081

8182
const getPosition = (timestamp: number) => ((timestamp - start) / span) * 100
8283

@@ -111,15 +112,20 @@ const LighthouseTimeline = () => {
111112
{events.map((event, index) => {
112113
const isCompleted = !!event.completed
113114
const isCurrent = !allCompleted && index === nextEventIndex
115+
const isAlwaysVisible =
116+
index === 0 ||
117+
index === events.length - 1 ||
118+
index === nextEventIndex ||
119+
(previousEventIndex >= 0 && index === previousEventIndex)
114120

115121
return (
116122
<div
117123
key={`${event.date}-${event.text}`}
118124
className={`${styles.event} ${index % 2 === 0 ? styles.above : styles.below} ${
119125
isCompleted ? styles.completed : ''
120-
} ${isCurrent ? styles.current : ''} ${index === 0 ? styles.edgeStart : ''} ${
121-
index === events.length - 1 ? styles.edgeEnd : ''
122-
}`}
126+
} ${isCurrent ? styles.current : ''} ${isAlwaysVisible ? styles.alwaysVisible : ''} ${
127+
index === 0 ? styles.edgeStart : ''
128+
} ${index === events.length - 1 ? styles.edgeEnd : ''}`}
123129
style={{
124130
left:
125131
index === 0

‎components/Projects/PrizeCard.module.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,34 @@ $img-height: 64px;
4545
opacity: 0.65;
4646
}
4747
}
48+
49+
@media screen and (max-width: 800px) {
50+
.prize {
51+
flex-direction: column;
52+
flex: 1 1 auto;
53+
max-height: none;
54+
max-width: 120px;
55+
padding: 0.2rem;
56+
57+
img {
58+
max-width: 120px;
59+
height: auto;
60+
}
61+
}
62+
63+
.text {
64+
font-size: 0.8em;
65+
text-align: center;
66+
padding: 0;
67+
padding-top: 0.25rem;
68+
69+
h4 {
70+
font-weight: normal;
71+
color: $c-text-light;
72+
}
73+
74+
p {
75+
display: none;
76+
}
77+
}
78+
}

0 commit comments

Comments
 (0)