Skip to content

Commit cb6695f

Browse files
MaryWyldeMaryWylde
authored
Merge pull request #126 from keepsimpleio/dev
Refinements
2 parents 4cb19d8 + 0675527 commit cb6695f

11 files changed

Lines changed: 222 additions & 63 deletions

File tree

‎.github/workflows/main.yaml‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,19 @@ jobs:
1010

1111
build:
1212
runs-on: ubuntu-latest
13-
13+
1414
steps:
15+
- name: Free disk space on runner
16+
uses: jlumbroso/free-disk-space@v1.3.1
17+
with:
18+
tool-cache: false
19+
android: true
20+
dotnet: true
21+
haskell: true
22+
large-packages: false
23+
docker-images: true
24+
swap-storage: true
25+
1526
- name: Checkout repository
1627
uses: actions/checkout@v2
1728

@@ -40,10 +51,9 @@ jobs:
4051
run: |
4152
docker build -t ${{ secrets.REGISTRY_HOST }}/keepsimple-next:prod .
4253
docker push ${{ secrets.REGISTRY_HOST }}/keepsimple-next:prod
43-
54+
4455
- name: Staging Deploy
4556
if: github.ref == 'refs/heads/dev'
4657
run: |
4758
docker build -t ${{ secrets.REGISTRY_HOST }}/keepsimple-next:staging .
4859
docker push ${{ secrets.REGISTRY_HOST }}/keepsimple-next:staging
49-

‎public/keepsimple_/assets/home-page/desktop-thumbnail-dark.webp‎

20.3 KB
Loading

‎public/keepsimple_/assets/home-page/desktop-thumbnail-light.webp‎

21.4 KB
Loading

‎public/keepsimple_/assets/home-page/mobile-thumbnail-dark.webp‎

24.2 KB
Loading

‎src/components/Headline/Headline.module.scss‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,11 @@
242242
filter: brightness(0) invert(1);
243243
}
244244
}
245+
246+
.videoContainer,
247+
.videoContainerMobile {
248+
background-color: #1d1b1b;
249+
}
245250
}
246251

247252
.contentWrapper {
@@ -276,6 +281,8 @@
276281

277282
@media (min-width: 1921px) {
278283
.headline {
284+
height: 800px;
285+
279286
.contentWrapper {
280287
padding-left: 0;
281288
padding-top: 0;
@@ -284,6 +291,30 @@
284291
.headlineInfo {
285292
justify-content: center;
286293
align-items: center;
294+
295+
.videoContainer {
296+
.poster {
297+
height: 800px;
298+
object-fit: none;
299+
}
300+
301+
.video {
302+
height: 800px;
303+
object-fit: none;
304+
background-color: #e7e7e7;
305+
}
306+
}
307+
}
308+
}
309+
310+
.darkTheme {
311+
.headlineInfo {
312+
.videoContainer {
313+
.poster,
314+
.video {
315+
background-color: #1d1b1b;
316+
}
317+
}
287318
}
288319
}
289320
}
@@ -330,8 +361,7 @@
330361

331362
.videoContainerMobile {
332363
display: block;
333-
width: 786px;
334-
max-width: 100%;
364+
width: 100%;
335365
height: 55vh;
336366
position: relative;
337367
overflow: hidden;

‎src/components/Headline/Headline.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,11 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
234234
</div>
235235
<div className={styles.videoContainer}>
236236
<Image
237-
src="/keepsimple_/assets/home-page/desktop-thumbnail.png"
237+
src={
238+
darkTheme
239+
? '/keepsimple_/assets/home-page/desktop-thumbnail-dark.webp'
240+
: '/keepsimple_/assets/home-page/desktop-thumbnail-light.webp'
241+
}
238242
alt="Hero background"
239243
fill
240244
priority
@@ -359,7 +363,11 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
359363
</div>
360364
<div className={styles.videoContainerMobile}>
361365
<Image
362-
src="/keepsimple_/assets/home-page/mobile-thumbnail.png"
366+
src={
367+
darkTheme
368+
? '/keepsimple_/assets/home-page/mobile-thumbnail-dark.webp'
369+
: '/keepsimple_/assets/home-page/mobile-thumbnail.png'
370+
}
363371
alt="Hero background"
364372
fill
365373
priority

‎src/uxcore/components/BorderedContainer/BorderedContainer.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,13 @@
3333
word-wrap: break-word;
3434
}
3535
}
36+
37+
:global(body.darkTheme) .container {
38+
background: #151a26;
39+
border-color: #303338;
40+
color: #dadada;
41+
42+
.title {
43+
color: #7fb3d5;
44+
}
45+
}

‎src/uxcore/components/LogIn/MagicLinkEmailForm/MagicLinkEmailForm.module.scss‎

Lines changed: 114 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,85 +2,87 @@
22
display: flex;
33
flex-direction: column;
44
width: 100%;
5-
gap: 1rem;
5+
gap: 12px;
66
align-items: stretch;
77
}
88

99
.divider {
1010
display: flex;
1111
align-items: center;
12-
gap: 0.75rem;
13-
font-family: 'Jost', system-ui, sans-serif;
14-
font-size: 0.75rem;
12+
gap: 12px;
13+
font-size: 12px;
1514
font-weight: 500;
16-
letter-spacing: 0.2em;
15+
letter-spacing: 0.08em;
1716
text-transform: uppercase;
18-
color: #8a8480;
19-
margin: 0;
17+
color: #515151;
18+
margin: 4px 0 0 0;
2019

2120
&::before,
2221
&::after {
2322
content: '';
2423
flex: 1;
2524
height: 1px;
26-
background: #c8c0b5;
25+
background: #d9d9d9;
2726
}
2827
}
2928

3029
.form {
3130
display: flex;
3231
flex-direction: column;
33-
gap: 0.6rem;
32+
gap: 10px;
3433
}
3534

3635
.fieldGroup {
3736
display: flex;
3837
flex-direction: column;
39-
gap: 0.4rem;
38+
gap: 6px;
4039
}
4140

4241
.label {
43-
font-family: 'Jost', system-ui, sans-serif;
44-
font-size: 0.75rem;
42+
font-size: 12px;
4543
font-weight: 500;
46-
letter-spacing: 0.2em;
44+
letter-spacing: 0.04em;
4745
text-transform: uppercase;
48-
color: #1c1c1a;
46+
color: #515151;
4947
}
5048

5149
.input {
52-
font-family: 'Source Serif 4', Georgia, serif;
53-
font-size: 1rem;
54-
color: #1c1c1a;
55-
background: #faf6ef;
56-
border: 1px solid #ddd7ce;
57-
padding: 0.75rem 1rem;
50+
font-size: 14px;
51+
color: #000;
52+
background: #fff;
53+
border: 1px solid #d9d9d9;
54+
border-radius: 2px;
55+
padding: 8px 12px;
56+
height: 36px;
5857
outline: none;
5958
transition: border-color 0.15s ease;
6059

60+
&::placeholder {
61+
color: #9e9e9e;
62+
}
63+
6164
&:focus {
62-
border-color: #b83232;
65+
border-color: #28587b;
6366
}
6467
}
6568

6669
.submit {
67-
font-family: 'Jost', system-ui, sans-serif;
68-
font-size: 0.75rem;
69-
font-weight: 500;
70-
letter-spacing: 0.2em;
71-
text-transform: uppercase;
72-
color: #1c1c1a;
73-
background: transparent;
74-
border: 1px solid #c8c0b5;
75-
padding: 0.75rem 1.5rem;
70+
font-size: 14px;
71+
color: #000;
72+
background: #fff;
73+
border: 1px solid #d9d9d9;
74+
border-radius: 2px;
75+
height: 36px;
76+
padding: 0 16px;
7677
cursor: pointer;
7778
transition:
7879
border-color 0.2s ease,
79-
color 0.2s ease;
80+
color 0.2s ease,
81+
background-color 0.2s ease;
8082

8183
&:hover:not(:disabled) {
82-
border-color: #b83232;
83-
color: #b83232;
84+
border-color: #28587b;
85+
color: #28587b;
8486
}
8587

8688
&:disabled {
@@ -90,47 +92,104 @@
9092
}
9193

9294
.error {
93-
font-family: 'Source Serif 4', Georgia, serif;
94-
font-size: 0.875rem;
95+
font-size: 13px;
9596
color: #b83232;
9697
margin: 0;
9798
}
9899

99100
.confirmation {
100101
display: flex;
101102
flex-direction: column;
102-
gap: 0.5rem;
103-
padding: 1rem;
104-
border: 1px solid #ddd7ce;
105-
background: #f5f1ea;
103+
gap: 4px;
104+
padding: 12px 16px;
105+
border: 1px solid #d9d9d9;
106+
border-radius: 2px;
107+
background: #fff;
106108
text-align: center;
107109
}
108110

109111
.confirmationHeading {
110-
font-family: 'Aboreto', Georgia, serif;
111-
font-size: 1.125rem;
112-
font-weight: 400;
113-
letter-spacing: 0.08em;
114-
color: #1c1c1a;
112+
font-size: 16px;
113+
font-weight: 500;
114+
color: #28587b;
115115
margin: 0;
116116
}
117117

118118
.confirmationBody {
119-
font-family: 'Source Serif 4', Georgia, serif;
120-
font-size: 0.875rem;
121-
line-height: 1.6;
122-
color: #5c5650;
119+
font-size: 13px;
120+
line-height: 1.5;
121+
color: #515151;
123122
margin: 0;
124123
}
125124

126125
.banner {
127-
font-family: 'Source Serif 4', Georgia, serif;
128-
font-size: 0.875rem;
129-
line-height: 1.6;
130-
color: #5c5650;
131-
padding: 0.75rem 1rem;
132-
border: 1px solid #ddd7ce;
133-
background: #f5f1ea;
126+
font-size: 13px;
127+
line-height: 1.5;
128+
color: #515151;
129+
padding: 12px 16px;
130+
border: 1px solid #d9d9d9;
131+
border-radius: 2px;
132+
background: #fff;
134133
margin: 0;
135134
text-align: center;
136135
}
136+
137+
:global(body.darkTheme) {
138+
.divider {
139+
color: rgba(218, 218, 218, 0.7);
140+
141+
&::before,
142+
&::after {
143+
background: #303338;
144+
}
145+
}
146+
147+
.label {
148+
color: rgba(218, 218, 218, 0.7);
149+
}
150+
151+
.input {
152+
background: #151a26;
153+
border-color: #303338;
154+
color: #dadada;
155+
156+
&::placeholder {
157+
color: rgba(218, 218, 218, 0.4);
158+
}
159+
160+
&:focus {
161+
border-color: #7fb3d5;
162+
}
163+
}
164+
165+
.submit {
166+
background: #151a26;
167+
border-color: #303338;
168+
color: #dadada;
169+
170+
&:hover:not(:disabled) {
171+
background: #232a3a;
172+
border-color: #7fb3d5;
173+
color: #7fb3d5;
174+
}
175+
}
176+
177+
.error {
178+
color: #ff8a8a;
179+
}
180+
181+
.confirmation,
182+
.banner {
183+
background: #151a26;
184+
border-color: #303338;
185+
color: rgba(218, 218, 218, 0.85);
186+
}
187+
188+
.confirmationHeading {
189+
color: #7fb3d5;
190+
}
191+
192+
.confirmationBody {
193+
color: rgba(218, 218, 218, 0.7);
194+
}
195+
}

0 commit comments

Comments
 (0)