Skip to content

Commit f6a70a3

Browse files
sid-devspotsid-devspot
committed
Changed space and changed the idea secition
1 parent dd666fe commit f6a70a3

6 files changed

Lines changed: 164 additions & 39 deletions

File tree

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎docs/main.129fe68782aa8511.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/main.39225163eff11a66.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/styles.6e3441ac17296b57.css renamed to docs/styles.2f933130283bbbc1.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app.component.html‎

Lines changed: 118 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -125,17 +125,47 @@ <h2>The Idea</h2>
125125
real financial scenarios.
126126
</p>
127127
</header>
128-
<div class="idea-set reveal-group">
129-
<div class="idea-item">
130-
<img src="./assets/walrec-assets/img02-1.svg" alt="" />
131-
</div>
132-
<div class="idea-item" style="align-items: flex-start">
133-
<img src="./assets/walrec-assets/img02-2.svg" alt="" />
128+
@if (screenWidth > 600) {
129+
<div class="idea-set reveal-group">
130+
<div class="idea-item">
131+
<img src="./assets/walrec-assets/img02-1.svg" alt="" />
132+
</div>
133+
<div class="idea-item" style="align-items: flex-start">
134+
<img src="./assets/walrec-assets/img02-2.svg" alt="" />
135+
</div>
136+
<div class="idea-item">
137+
<img src="./assets/walrec-assets/img02-3.svg" alt="" />
138+
</div>
134139
</div>
135-
<div class="idea-item">
136-
<img src="./assets/walrec-assets/img02-3.svg" alt="" />
140+
}
141+
142+
@if (screenWidth < 600) {
143+
<div class="idea-set marquee">
144+
<div class="marquee-track">
145+
<!-- ORIGINAL -->
146+
<div class="idea-item">
147+
<img src="./assets/walrec-assets/img02-1.svg" />
148+
</div>
149+
<div class="idea-item" style="align-items: flex-start">
150+
<img src="./assets/walrec-assets/img02-2.svg" />
151+
</div>
152+
<div class="idea-item">
153+
<img src="./assets/walrec-assets/img02-3.svg" />
154+
</div>
155+
156+
<!-- DUPLICATE (for seamless loop) -->
157+
<div class="idea-item">
158+
<img src="./assets/walrec-assets/img02-1.svg" />
159+
</div>
160+
<div class="idea-item" style="align-items: flex-start">
161+
<img src="./assets/walrec-assets/img02-2.svg" />
162+
</div>
163+
<div class="idea-item">
164+
<img src="./assets/walrec-assets/img02-3.svg" />
165+
</div>
166+
</div>
137167
</div>
138-
</div>
168+
}
139169
</div>
140170

141171
<div class="project-set project-set-03">
@@ -227,17 +257,47 @@ <h2>The Goal</h2>
227257
</p>
228258
</header>
229259

230-
<div class="idea-set">
231-
<div class="idea-item">
232-
<img src="./assets/Travellerspond/img02-1.png" alt="" />
233-
</div>
234-
<div class="idea-item" style="align-items: flex-start">
235-
<img src="./assets/Travellerspond/img02-2.png" alt="" />
260+
@if (screenWidth > 600) {
261+
<div class="idea-set">
262+
<div class="idea-item">
263+
<img src="./assets/Travellerspond/img02-1.png" alt="" />
264+
</div>
265+
<div class="idea-item" style="align-items: flex-start">
266+
<img src="./assets/Travellerspond/img02-2.png" alt="" />
267+
</div>
268+
<div class="idea-item">
269+
<img src="./assets/Travellerspond/img02-3.png" alt="" />
270+
</div>
236271
</div>
237-
<div class="idea-item">
238-
<img src="./assets/Travellerspond/img02-1.png" alt="" />
272+
}
273+
274+
@if (screenWidth < 600) {
275+
<div class="idea-set marquee">
276+
<div class="marquee-track">
277+
<!-- ORIGINAL -->
278+
<div class="idea-item">
279+
<img src="./assets/Travellerspond/img02-1.png" />
280+
</div>
281+
<div class="idea-item" style="align-items: flex-start">
282+
<img src="./assets/Travellerspond/img02-2.png" />
283+
</div>
284+
<div class="idea-item">
285+
<img src="./assets/Travellerspond/img02-3.png" />
286+
</div>
287+
288+
<!-- DUPLICATE (for seamless loop) -->
289+
<div class="idea-item">
290+
<img src="./assets/Travellerspond/img02-1.png" />
291+
</div>
292+
<div class="idea-item" style="align-items: flex-start">
293+
<img src="./assets/Travellerspond/img02-2.png" />
294+
</div>
295+
<div class="idea-item">
296+
<img src="./assets/Travellerspond/img02-3.png" />
297+
</div>
298+
</div>
239299
</div>
240-
</div>
300+
}
241301
</div>
242302

243303
<div class="project-set project-set-03">
@@ -348,17 +408,48 @@ <h2>The Idea</h2>
348408
without writing styles from scratch for every component.
349409
</p>
350410
</header>
351-
<div class="idea-set">
352-
<div class="idea-item">
353-
<img src="./assets/cssfussion/img02-1.svg" alt="" />
354-
</div>
355-
<div class="idea-item" style="align-items: flex-start">
356-
<img src="./assets/cssfussion/img02-2.svg" alt="" />
411+
412+
@if (screenWidth > 600) {
413+
<div class="idea-set">
414+
<div class="idea-item">
415+
<img src="./assets/cssfussion/img02-1.svg" alt="" />
416+
</div>
417+
<div class="idea-item" style="align-items: flex-start">
418+
<img src="./assets/cssfussion/img02-2.svg" alt="" />
419+
</div>
420+
<div class="idea-item">
421+
<img src="./assets/cssfussion/img02-3.svg" alt="" />
422+
</div>
357423
</div>
358-
<div class="idea-item">
359-
<img src="./assets/cssfussion/img02-3.svg" alt="" />
424+
}
425+
426+
@if (screenWidth < 600) {
427+
<div class="idea-set marquee">
428+
<div class="marquee-track">
429+
<!-- ORIGINAL -->
430+
<div class="idea-item">
431+
<img src="./assets/cssfussion/img02-1.svg" />
432+
</div>
433+
<div class="idea-item" style="align-items: flex-start">
434+
<img src="./assets/cssfussion/img02-2.svg" />
435+
</div>
436+
<div class="idea-item">
437+
<img src="./assets/cssfussion/img02-3.svg" />
438+
</div>
439+
440+
<!-- DUPLICATE (for seamless loop) -->
441+
<div class="idea-item">
442+
<img src="./assets/cssfussion/img02-1.svg" />
443+
</div>
444+
<div class="idea-item" style="align-items: flex-start">
445+
<img src="./assets/cssfussion/img02-2.svg" />
446+
</div>
447+
<div class="idea-item">
448+
<img src="./assets/cssfussion/img02-3.svg" />
449+
</div>
450+
</div>
360451
</div>
361-
</div>
452+
}
362453
</div>
363454

364455
<div class="project-set project-set-03">

‎src/styles.scss‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
--app-font-heads: "Cubano", serif !important;
1515
--app-font-content: "Outfit", sans-serif;
1616
--app-space: 4rem;
17+
--app-project-gap: 12rem;
1718
}
1819

1920
* {
@@ -156,12 +157,20 @@ app-root,
156157
}
157158

158159
.app-main {
159-
padding: var(--app-space);
160-
padding-bottom: 30vh;
160+
padding: var(--app-space) var(--app-space) 30vh var(--app-space);
161+
162+
@media only screen and (max-width: 600px) {
163+
--app-space: 2rem !important;
164+
padding: var(--app-space) var(--app-space) 20vh var(--app-space) !important;
165+
}
161166
}
162167

163168
.app-top-space {
164169
margin-top: 10rem;
170+
171+
@media only screen and (max-width: 600px) {
172+
margin-top: 6rem !important;
173+
}
165174
}
166175

167176
.app-home {
@@ -277,7 +286,7 @@ app-root,
277286

278287
.about-container {
279288
display: grid;
280-
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
289+
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
281290
gap: 2.6rem;
282291

283292
.about-content {
@@ -335,7 +344,7 @@ app-root,
335344
.app-project {
336345
display: flex;
337346
flex-direction: column;
338-
gap: 12rem;
347+
gap: var(--app-project-gap);
339348

340349
.project-set {
341350
display: flex;
@@ -450,13 +459,36 @@ app-root,
450459
}
451460
}
452461

453-
@media only screen and (max-width: 580px) {
462+
@media only screen and (max-width: 600px) {
463+
.idea-set.marquee {
464+
overflow: hidden;
465+
width: 100%;
466+
}
467+
468+
.marquee-track {
469+
display: flex;
470+
width: fit-content;
471+
animation: marqueeScroll 18s linear infinite;
472+
}
473+
454474
.idea-item {
455-
width: 18rem !important;
456-
height: 17rem !important;
475+
flex-shrink: 0;
476+
margin-right: 2rem;
477+
width: 28rem;
478+
height: 24rem;
457479

458480
img {
459-
max-width: 18rem !important;
481+
width: 100%;
482+
max-width: 24rem;
483+
}
484+
}
485+
486+
@keyframes marqueeScroll {
487+
0% {
488+
transform: translateX(0);
489+
}
490+
100% {
491+
transform: translateX(-50%);
460492
}
461493
}
462494
}
@@ -602,6 +634,8 @@ app-root,
602634
}
603635

604636
@media only screen and (max-width: 600px) {
637+
--app-project-gap: 8rem !important;
638+
605639
.project-set {
606640
header {
607641
h2 {

0 commit comments

Comments
 (0)