Skip to content

Commit a59393d

Browse files
zutrinkenzutrinken
authored
Merge pull request #28 from criticalmaps/fix/chromeRendering
Fix/chrome rendering
2 parents a21016b + 0c24157 commit a59393d

6 files changed

Lines changed: 60 additions & 68 deletions

‎_sass/_layout.scss‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -422,18 +422,20 @@ body {
422422
}
423423

424424
//============================================================
425-
// Sponsor Section
425+
// support Section
426426
//============================================================
427427

428-
.sponsor {
428+
.support {
429429
padding: 8rem 0;
430430

431431
@media only screen and (max-width: $screen-small) {
432432
padding-bottom: 2.4rem;
433433
}
434434

435-
.sponsor-wrapper {
436-
display: flex;
435+
.support-wrapper {
436+
display: grid;
437+
grid-template-columns: repeat(12, minmax(0, 1fr));
438+
grid-auto-rows: max-content;
437439
gap: 2rem;
438440
box-sizing: border-box;
439441

@@ -442,20 +444,10 @@ body {
442444
margin-left: -2.4rem;
443445
margin-right: -2.4rem;
444446
}
445-
446-
@media only screen and (max-width: $screen-small) {
447-
flex-direction: column;
448-
}
449-
}
450-
451-
.sponsor-wrapper-col {
452-
display: flex;
453-
flex-direction: column;
454-
gap: 2rem;
455-
flex: 50%;
456447
}
457448

458-
.sponsor-box {
449+
.support-box {
450+
grid-column: span 6;
459451
position: relative;
460452
display: block;
461453
padding: 3rem;
@@ -464,10 +456,11 @@ body {
464456
overflow: hidden;
465457

466458
@media only screen and (max-width: $screen-small) {
459+
grid-column: span 12;
467460
padding: 2rem;
468461
}
469462

470-
.sponsor-box--label {
463+
.support-box--label {
471464
display: inline-block;
472465
position: relative;
473466
z-index: 20;
@@ -493,7 +486,7 @@ body {
493486
}
494487
}
495488

496-
.sponsor-box--value {
489+
.support-box--value {
497490
margin: 0;
498491

499492
* {
@@ -510,9 +503,9 @@ body {
510503
}
511504
}
512505

513-
.sponsor-box--decoration {
514-
flex-grow: 1;
515-
background-image: url('../images/sponsor-decoration-background-light.webp');
506+
.support-box--decoration {
507+
grid-row: span 9;
508+
background-image: url('../images/support-decoration-background-light.webp');
516509
background-position: top center;
517510
background-size: cover;
518511
background-repeat: no-repeat;
@@ -523,11 +516,12 @@ body {
523516
}
524517

525518
@media (prefers-color-scheme: dark) {
526-
background-image: url('../images/sponsor-decoration-background-dark.webp');
519+
background-image: url('../images/support-decoration-background-dark.webp');
527520
}
528521
}
529522

530-
.sponsor-box--statistics {
523+
.support-box--statistics {
524+
grid-row: span 3;
531525
background: $color-action-light;
532526
color: white;
533527

@@ -536,7 +530,7 @@ body {
536530
color: black;
537531
}
538532

539-
.sponsor-box--background {
533+
.support-box--background {
540534
position: absolute;
541535
z-index: 10;
542536
left: 0;
@@ -554,7 +548,7 @@ body {
554548
}
555549
}
556550

557-
.sponsor-box--label {
551+
.support-box--label {
558552
background: rgba(0,0,0,.2);
559553
backdrop-filter: blur(5px);
560554

@@ -563,7 +557,7 @@ body {
563557
}
564558
}
565559

566-
.sponsor-box--value {
560+
.support-box--value {
567561
position: relative;
568562
z-index: 20;
569563
margin-top: auto;
@@ -582,19 +576,20 @@ body {
582576
}
583577
}
584578

585-
.sponsor-box--introduction {
579+
.support-box--introduction {
580+
grid-row: span 8;
586581
background: $color-gray200;
587582
color: $color-gray600;
588583

589-
.sponsor-box--label {
584+
.support-box--label {
590585
background: $color-gray100;
591586

592587
svg {
593588
color: hotpink;
594589
}
595590
}
596591

597-
.sponsor-box--value {
592+
.support-box--value {
598593
font-size: 1.6em;
599594
line-height: 1.5em;
600595

@@ -604,7 +599,8 @@ body {
604599
}
605600
}
606601

607-
.sponsor-box--collective {
602+
.support-box--collective {
603+
grid-row: span 4;
608604
background: rgb(229, 243, 255);
609605
color: rgb(52, 73, 116);
610606

@@ -613,7 +609,7 @@ body {
613609
color: rgb(130, 158, 212);
614610
}
615611

616-
.sponsor-box--label {
612+
.support-box--label {
617613
color: rgb(16, 65, 163);
618614
background: white;
619615
font-weight: 700;
@@ -624,7 +620,7 @@ body {
624620
}
625621
}
626622

627-
.sponsor-box--value {
623+
.support-box--value {
628624
font-size: 1.1em;
629625
line-height: 1.5em;
630626

assets/images/sponsor-decoration-background-dark.webp renamed to assets/images/support-decoration-background-dark.webp

File renamed without changes.

assets/images/sponsor-decoration-background-light.webp renamed to assets/images/support-decoration-background-light.webp

File renamed without changes.

assets/images/sponsor-statistics-background.mp4 renamed to assets/images/support-statistics-background.mp4

File renamed without changes.

assets/images/sponsor-statistics-background.webm renamed to assets/images/support-statistics-background.webm

File renamed without changes.

‎index.md‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -74,46 +74,42 @@ pathName: rootPath
7474
</div>
7575
</div>
7676

77-
<div class="wrapper sponsor">
77+
<div class="wrapper support">
7878
<div class="inner">
79-
<div class="sponsor-wrapper">
80-
<div class="sponsor-wrapper-col">
81-
<div class="sponsor-box sponsor-box--introduction">
82-
<div class="sponsor-box--label">
83-
<span aria-hidden="true">{% include icon-heart.svg %}</span>
84-
<span>Thank you</span>
85-
</div>
86-
<div class="sponsor-box--value">
87-
<p>Critical Maps exists because <strong>people like you</strong> support it.</p>
88-
<p>If you find the app useful and want it to remain available, you can help cover costs for infrastructure.</p>
89-
</div>
79+
<div class="support-wrapper">
80+
<div class="support-box support-box--introduction">
81+
<div class="support-box--label">
82+
<span aria-hidden="true">{% include icon-heart.svg %}</span>
83+
<span>Thank you</span>
84+
</div>
85+
<div class="support-box--value">
86+
<p>Critical Maps exists because <strong>people like you</strong> support it.</p>
87+
<p>If you find the app useful and want it to remain available, you can help cover costs for infrastructure.</p>
9088
</div>
91-
<div class="sponsor-box sponsor-box--statistics">
92-
<div class="sponsor-box--label">
93-
<span aria-hidden="true">{% include icon-infrastructure.svg %}</span>
94-
<span>Infrastructure</span>
95-
</div>
96-
<div class="sponsor-box--value">
97-
<p>Our monthly server costs range from <strong>20</strong> to <strong>60 Euro</strong>, depending on traffic.</p>
98-
</div>
99-
<video class="sponsor-box--background" preload="true" autoplay loop muted aria-hidden="true">
100-
<source src="assets/images/sponsor-statistics-background.mp4" type="video/mp4" />
101-
<source src="assets/images/sponsor-statistics-background.webm" type="video/webm" />
102-
</video>
103-
</div>
10489
</div>
105-
<div class="sponsor-wrapper-col">
106-
<div class="sponsor-box sponsor-box--collective">
107-
<div class="sponsor-box--label">
108-
<span aria-hidden="true">{% include icon-opencollective.svg %}</span>
109-
<span>Open Collective</span>
110-
</div>
111-
<div class="sponsor-box--value">
112-
<p>Contributions of any size make a difference, whether one-time or ongoing. All donations and expenses are published transparently on Open Collective.</p>
113-
<p><a class="button" href="https://opencollective.com/criticalmaps" target="_blank"><span class="button-title">Support now</span></a></p>
114-
</div>
90+
<div class="support-box support-box--statistics">
91+
<div class="support-box--label">
92+
<span aria-hidden="true">{% include icon-infrastructure.svg %}</span>
93+
<span>Infrastructure</span>
94+
</div>
95+
<div class="support-box--value">
96+
<p>Our monthly server costs range from <strong>20</strong> to <strong>60 Euro</strong>, depending on traffic.</p>
97+
</div>
98+
<video class="support-box--background" preload="true" autoplay loop muted aria-hidden="true">
99+
<source src="assets/images/support-statistics-background.mp4" type="video/mp4" />
100+
<source src="assets/images/support-statistics-background.webm" type="video/webm" />
101+
</video>
102+
</div>
103+
<div class="support-box support-box--decoration"></div>
104+
<div class="support-box support-box--collective">
105+
<div class="support-box--label">
106+
<span aria-hidden="true">{% include icon-opencollective.svg %}</span>
107+
<span>Open Collective</span>
108+
</div>
109+
<div class="support-box--value">
110+
<p>Contributions of any size make a difference, whether one-time or ongoing. All donations and expenses are published transparently on Open Collective.</p>
111+
<p><a class="button" href="https://opencollective.com/criticalmaps" target="_blank"><span class="button-title">Support now</span></a></p>
115112
</div>
116-
<div class="sponsor-box sponsor-box--decoration"></div>
117113
</div>
118114
</div>
119115
</div>

0 commit comments

Comments
 (0)