Skip to content

Commit 4ed3a3a

Browse files
committed
Polish main page UI
1 parent 25af150 commit 4ed3a3a

File tree

5 files changed

+60
-15
lines changed

5 files changed

+60
-15
lines changed

blocks/cards/cards.css

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@
2828
object-fit: cover;
2929
}
3030

31+
.cards-container .default-content-wrapper p {
32+
margin: 0;
33+
}
34+
3135
@media (width >= 900px) {
3236
.cards > ul {
3337
grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
@@ -58,7 +62,7 @@
5862
}
5963

6064
.cards.links > ul > li img {
61-
max-height: 375px;
65+
max-height: 325px;
6266
transition: 0.5s ease-in-out;
6367
transform-style: preserve-3d;
6468
}
@@ -87,11 +91,16 @@
8791
}
8892

8993
.cards.links .cards-card-body p {
90-
margin: 0;
94+
margin-top: 10px;
95+
line-height: 1;
9196
}
9297

9398
@media (width <= 900px) {
99+
.cards.links .cards-card-body {
100+
max-width: fit-content;
101+
}
102+
94103
.cards.links .cards-card-body h2 {
95-
font-size: 28px;
104+
font-size: var(--heading-font-size-xl);
96105
}
97106
}

blocks/header/header.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
/* header and nav layout */
2+
header .header {
3+
height: inherit;
4+
}
5+
26
header .nav-wrapper {
37
background-color: var(--light-color);
48
width: 100%;

blocks/hero/hero.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ main .hero-container {
1111
.hero {
1212
position: relative;
1313
padding: 32px;
14-
min-height: 300px;
14+
min-height: 275px;
1515
}
1616

1717
.hero h1,

blocks/video-banner/video-banner.css

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,19 @@
2323

2424
.video-banner .play-pause-button {
2525
position: absolute;
26-
left: 0;
27-
bottom: 0;
28-
margin: 2rem;
26+
left: unset;
27+
bottom: unset;
28+
top: 0;
29+
right: 0;
30+
margin: 1rem;
2931
padding: 4px 8px;
3032
border-radius: 50%;
3133
background-color: transparent;
3234
border: 2px solid #fff;
3335
font-size: 14px;
34-
top: unset;
3536
filter: drop-shadow(-1px 1px 4px rgba(0, 0, 0, 1.0));
3637
z-index: 1;
38+
box-sizing: border-box;
3739
}
3840

3941
.video-banner > div:not(.desktop-video-container) {
@@ -62,4 +64,12 @@
6264
font-size: var(--heading-font-size-xl);
6365
margin: 0;
6466
}
67+
68+
.video-banner .play-pause-button {
69+
margin: 2rem;
70+
left: 0;
71+
bottom: 0;
72+
top: unset;
73+
right: unset;
74+
}
6575
}

styles/styles.css

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,19 +60,25 @@
6060
}
6161
}
6262

63+
html,body {
64+
height: 100%;
65+
margin: 0;
66+
}
67+
6368
body {
6469
font-size: var(--body-font-size-xs);
6570
margin: 0;
6671
font-family: var(--body-font-family);
6772
line-height: 1.6;
6873
color: var(--text-color);
6974
background-color: var(--background-color);
70-
display: none;
75+
display: flex;
76+
flex-direction: column;
7177
}
7278

73-
body.appear {
79+
/* body.appear {
7480
display: block;
75-
}
81+
} */
7682

7783
header {
7884
height: var(--nav-height);
@@ -122,6 +128,10 @@ code, samp {
122128
font-size: 10px;
123129
}
124130

131+
main {
132+
flex: 1;
133+
}
134+
125135
main pre {
126136
background-color: var(--light-color);
127137
padding: 1em;
@@ -197,7 +207,7 @@ main img {
197207

198208
/* sections */
199209
main .section {
200-
padding: 32px 16px;
210+
padding: 16px;
201211
}
202212

203213
main .main-wrapper .section:not(:first-of-type) {
@@ -207,7 +217,7 @@ main .main-wrapper .section:not(:first-of-type) {
207217

208218
@media (width >= 600px) {
209219
main .section {
210-
padding: 32px;
220+
padding: 32px 16px;
211221
}
212222
}
213223

@@ -219,11 +229,23 @@ main .main-wrapper .section:not(:first-of-type) {
219229
}
220230

221231
/* section metadata */
222-
main .section.light,
223-
main .section.highlight {
232+
main .section.light {
224233
background-color: var(--light-color);
225234
}
226235

236+
main .section.highlight {
237+
background: linear-gradient(90deg, rgb(113, 37, 182) 0%, rgb(183, 34, 133) 26%, rgb(235, 16, 0) 63%, rgb(255, 98, 87)) 100% center;
238+
}
239+
240+
main .section.highlight > div {
241+
color: #fff;
242+
}
243+
244+
main .section.highlight > div > h1,
245+
main .section.highlight > div > p {
246+
margin: 0;
247+
}
248+
227249
main .section.full-width {
228250
padding: 0;
229251
}

0 commit comments

Comments
 (0)