Skip to content

Commit 4f698e9

Browse files
fizzyizzy05fizzyizzy05
committed
feat: add background to welcome section
1 parent d2fc7ff commit 4f698e9

4 files changed

Lines changed: 78 additions & 70 deletions

File tree

‎content/_index.md‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,29 @@
22
title: Home
33
---
44

5-
{% index_section(id="welcome") %}
6-
<div id="landing-start">
7-
<picture>
8-
<source srcset="/images/logomark_dark.svg" media="(prefers-color-scheme: light)">
9-
<img id="welcome-logo" src="/images/logomark.svg" alt="Apollo">
10-
</picture>
5+
<div id="welcome-background">
6+
{% index_section(id="welcome") %}
7+
<div id="landing-start">
8+
<picture>
9+
<source srcset="/images/logomark_dark.svg" media="(prefers-color-scheme: light)">
10+
<img id="welcome-logo" src="/images/logomark.svg" alt="Apollo">
11+
</picture>
1112

12-
<p>An up to date, easy to use and privacy respecting operating system for your computer.</p>
13-
</div>
13+
<p>An up to date, easy to use and privacy respecting operating system for your computer.</p>
14+
</div>
1415

15-
<div id="landing-buttons">
16-
{{ button(id="download-button", extra_classes="suggestive", href="/downloads", label="Download Apollo") }}
17-
{{ button(href="#ready-from-day-one", label="Learn more") }}
18-
</div>
16+
<div id="landing-buttons">
17+
{{ button(id="download-button", extra_classes="suggestive", href="/downloads", label="Download Apollo") }}
18+
{{ button(href="#ready-from-day-one", label="Learn more") }}
19+
</div>
1920

2021

21-
<picture>
22-
<source srcset="/images/screenshots/landing-screenshot-dark.png" media="(prefers-color-scheme: dark)">
23-
<img id="landing-screenshot" src="/images/screenshots/landing-screenshot.png" alt="An Apollo desktop with the Calendar, Weather and Music apps open">
24-
</picture>
25-
{% end %}
22+
<picture>
23+
<source srcset="/images/screenshots/landing-screenshot-dark.png" media="(prefers-color-scheme: dark)">
24+
<img id="landing-screenshot" src="/images/screenshots/landing-screenshot.png" alt="An Apollo desktop with the Calendar, Weather and Music apps open">
25+
</picture>
26+
{% end %}
27+
</div>
2628

2729
{% index_section(id="ready-from-day-one") %}
2830
<div id="rfd1-text">

‎sass/_index.scss‎

Lines changed: 59 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,31 @@ $landing-screenshot-shadow: 0px 0px 6px min(0.625vw, 4px);
77

88
@media (prefers-color-scheme: light) {
99
body {
10-
div#welcome {
11-
background: linear-gradient(
12-
180deg,
13-
$light-background-colour,
14-
hsl(270, 39%, 69%) 100%
15-
);
10+
div#welcome-background {
11+
background: url(/images/wallpapers/apollo-light.png);
1612

17-
img#landing-screenshot {
18-
box-shadow: $landing-screenshot-shadow hsla(0, 0, 15, 0.55);
13+
div#welcome {
14+
background: hsla(270, 29%, 79%, 75%);
15+
16+
img#landing-screenshot {
17+
box-shadow: $landing-screenshot-shadow hsla(0, 0, 15, 0.55);
18+
}
1919
}
2020
}
2121
}
2222
}
2323

2424
@media (prefers-color-scheme: dark) {
2525
body {
26-
div#welcome {
27-
background: linear-gradient(
28-
180deg,
29-
$dark-background-colour,
30-
hsl(270, 26%, 18%) 100%
31-
);
26+
div#welcome-background {
27+
background: url(/images/wallpapers/apollo-dark.png);
3228

33-
img#landing-screenshot {
34-
box-shadow: $landing-screenshot-shadow hsla(0, 0, 0, 0.4);
29+
div#welcome {
30+
background: hsla(270, 18%, 12%, 65%);
31+
32+
img#landing-screenshot {
33+
box-shadow: $landing-screenshot-shadow hsla(0, 0, 0, 0.4);
34+
}
3535
}
3636
}
3737
}
@@ -80,52 +80,58 @@ body {
8080
}
8181
}
8282

83-
div#welcome {
84-
min-height: calc(100vh - 80px);
85-
display: flex;
86-
flex-direction: column;
87-
justify-content: center;
88-
text-align: center;
89-
margin-block-end: 1.75em;
90-
91-
p {
92-
margin-block: 0;
93-
}
83+
div#welcome-background {
84+
background-position: 0;
85+
background-size: cover;
9486

95-
div.content {
87+
div#welcome {
88+
min-height: calc(100vh - 80px);
9689
display: flex;
9790
flex-direction: column;
9891
justify-content: center;
9992
text-align: center;
100-
gap: 2em;
101-
}
93+
margin-block-end: 1.75em;
94+
backdrop-filter: blur(3px);
10295

103-
div#landing-start {
104-
display: flex;
105-
flex-direction: column;
106-
justify-content: center;
107-
text-align: center;
108-
gap: 1.5em;
109-
}
96+
p {
97+
margin-block: 0;
98+
}
11099

111-
img#welcome-logo {
112-
max-height: min(max(48px, 12vw), 80px);
113-
}
100+
div.content {
101+
display: flex;
102+
flex-direction: column;
103+
justify-content: center;
104+
text-align: center;
105+
gap: 2em;
106+
}
114107

115-
div#landing-buttons {
116-
display: flex;
117-
flex-wrap: wrap;
118-
justify-content: center;
119-
margin-block: 0;
120-
gap: 16px;
121-
}
108+
div#landing-start {
109+
display: flex;
110+
flex-direction: column;
111+
justify-content: center;
112+
text-align: center;
113+
gap: 1.5em;
114+
}
115+
116+
img#welcome-logo {
117+
max-height: min(max(48px, 12vw), 80px);
118+
}
119+
120+
div#landing-buttons {
121+
display: flex;
122+
flex-wrap: wrap;
123+
justify-content: center;
124+
margin-block: 0;
125+
gap: 16px;
126+
}
122127

123-
img#landing-screenshot {
124-
width: 90%;
125-
max-width: 750px;
126-
border-radius: min(calc(2.5vw), 24px);
127-
border: min(calc(2vw), 18px) solid hsl(280, 0, 8);
128-
margin-inline: auto;
128+
img#landing-screenshot {
129+
width: 90%;
130+
max-width: 750px;
131+
border-radius: min(calc(2.5vw), 24px);
132+
border: min(calc(2vw), 18px) solid hsl(280, 0, 8);
133+
margin-inline: auto;
134+
}
129135
}
130136
}
131137
}

‎static/images/wallpapers/apollo-dark.png‎

15.6 MB
Loading

‎static/images/wallpapers/apollo-light.png‎

14.5 MB
Loading

0 commit comments

Comments
 (0)