Skip to content

Commit a367a02

Browse files
Erik2609Erik2609
committed
add blocks for mobile
1 parent 8ea0f22 commit a367a02

File tree

6 files changed

+199
-18
lines changed

6 files changed

+199
-18
lines changed

‎assets/scss/_landingpage.scss‎

Lines changed: 75 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
max-width: 100vw;
44

55
@media (max-width: 1200px) {
6-
min-height: 77vh;
6+
min-height: 90vh;
77
}
88

99
@media (min-width: 1200px) {
@@ -14,7 +14,7 @@
1414

1515
.landing-page-top-row {
1616
@media (max-width: 1200px) {
17-
min-height: 20vh;
17+
min-height: 23vh;
1818
}
1919

2020
@media (min-width: 1200px) {
@@ -23,7 +23,13 @@
2323
}
2424

2525
.landing-page-middle-row {
26-
min-height: 42vh;
26+
@media (max-width: 1200px) {
27+
min-height: 52vh;
28+
}
29+
30+
@media (min-width: 1200px) {
31+
min-height: 42vh;
32+
}
2733
}
2834

2935
.landing-page-bottom-row {
@@ -122,7 +128,9 @@
122128

123129
.shape-xl-circle-middle-left,
124130
.shape-xl-circle-top-middle__right,
125-
.shape-xl-circle-top-right {
131+
.shape-xl-circle-top-right,
132+
.shape-sm-circle-top-right,
133+
.shape-sm-circle-bottom-left {
126134
-webkit-animation: pulsate 3s infinite;
127135
-moz-animation: pulsate 3s infinite;
128136
animation: pulsate 3s infinite;
@@ -281,6 +289,69 @@
281289
transform: rotate(-16deg);
282290
padding: 9%;
283291
}
292+
293+
.shape-sm-square-top-left {
294+
top: 30%;
295+
left: 0%;
296+
transform: rotate(-28deg);
297+
-webkit-animation: spin 90s linear infinite;
298+
-moz-animation: spin 90s linear infinite;
299+
animation: spin 90s linear infinite;
300+
-webkit-transform-origin: center;
301+
-moz-transform-origin: center;
302+
transform-origin: center;
303+
padding: 12%;
304+
}
305+
.shape-sm-circle-top-left {
306+
border-radius: 50%;
307+
top: -7%;
308+
left: 22%;
309+
padding: 12%;
310+
background-color: #D5EBDB;
311+
}
312+
.shape-sm-triangle-top-right {
313+
top: 8%;
314+
right: 10%;
315+
padding: 15%;
316+
transform-origin: top;
317+
transform: rotate(50deg);
318+
clip-path: polygon(50% 13%, 0% 100%, 100% 100%);
319+
}
320+
.shape-sm-circle-top-right {
321+
border-radius: 50%;
322+
top: 33%;
323+
right: 5%;
324+
padding: 12%;
325+
}
326+
.shape-sm-square-bottom-left {
327+
top: 15%;
328+
left: 0%;
329+
transform-origin: top left;
330+
transform: rotate(8deg);
331+
padding: 14%;
332+
background-color: #ffcbbd;
333+
}
334+
.shape-sm-circle-bottom-left {
335+
border-radius: 50%;
336+
top: -35%;
337+
left: 24%;
338+
padding: 12%;
339+
}
340+
.shape-sm-square-bottom-middle_right {
341+
top: 45%;
342+
right: 10%;
343+
transform: rotate(10deg);
344+
transform-origin: top right;
345+
padding: 12%;
346+
}
347+
.shape-sm-square-bottom-most-right {
348+
top: -60%;
349+
right: 6%;
350+
transform: rotate(-47deg);
351+
transform-origin: top right;
352+
padding: 12%;
353+
background-color: #064e72;
354+
}
284355

285356
.landing-page-scroll-container {
286357
z-index: 20;

‎content/english/_index.md‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ Banner:
66
title_line2_before: for
77
title_line2_underline: responsible
88
title_line2_after: algorithms
9+
title_mobile_line1: Building public
10+
title_mobile_line2: knowledge for
11+
title_mobile_line3_underline: responsible
12+
title_mobile_line3_after: algorithms
913
phonetica: /æl.ɡə-ˈpruː.dəns/
1014
type: noun
1115
description1: Case-based normative advice for ethical algorithms
@@ -54,32 +58,32 @@ Supported_by:
5458
title: Collaborating with
5559
funders:
5660
- image: /images/supported_by/sidn.png
57-
link: 'https://www.sidnfonds.nl/projecten/open-source-ai-auditing'
61+
link: "https://www.sidnfonds.nl/projecten/open-source-ai-auditing"
5862
alt_text: Foundation for Internet and Democracy Netherlands
5963
- image: /images/supported_by/EUAISFund.png
60-
link: 'https://europeanaifund.org/announcing-our-2022-open-call-grantees/'
64+
link: "https://europeanaifund.org/announcing-our-2022-open-call-grantees/"
6165
alt_text: European AI & Society Fund
6266
- image: /images/supported_by/BZK.jpg
6367
link: >-
6468
https://www.rijksoverheid.nl/ministeries/ministerie-van-binnenlandse-zaken-en-koninkrijksrelaties
6569
alt_text: Dutch Ministry of the Interior
6670
- image: /images/supported_by/HAI.png
67-
link: 'https://hai.stanford.edu/ai-audit-challenge-2023-finalists'
71+
link: "https://hai.stanford.edu/ai-audit-challenge-2023-finalists"
6872
alt_text: Stanford University Human-Centered Artificial Intelligence Lab
6973
- image: /images/partners/DUO.png
70-
link: 'https://duo.nl'
74+
link: "https://duo.nl"
7175
alt_text: Dutch Executive Agency for Education
7276
- image: /images/partners/NEN.svg
73-
link: 'https://www.nen.nl'
77+
link: "https://www.nen.nl"
7478
alt_text: Dutch standardisation institute
7579
- image: /images/partners/CEN.jpg
76-
link: 'https://www.cencenelec.eu'
77-
alt_text: 'Europees standardisation committee '
80+
link: "https://www.cencenelec.eu"
81+
alt_text: "Europees standardisation committee "
7882
- image: /images/events/Amsterdam.png
79-
link: 'https://www.amsterdam.nl'
83+
link: "https://www.amsterdam.nl"
8084
alt_text: Municipality of Amsterdam
8185
- image: /images/supported_by/CoE.png
82-
link: 'https://www.coe.int/en/web/portal/home'
86+
link: "https://www.coe.int/en/web/portal/home"
8387
alt_text: Council of Europe
8488
Building_ai_audit_capacity:
8589
lines:
@@ -162,7 +166,7 @@ Areas_of_AI_expertise:
162166
Recent_audits:
163167
title: Recent audits
164168
feature_item:
165-
- name: 'Risk Profiling Social Welfare Re-examination '
169+
- name: "Risk Profiling Social Welfare Re-examination "
166170
image: /images/reports/front_AA202302A.png
167171
link: >-
168172
/algoprudence/cases/aa202302_risk-profiling-for-social-welfare-reexamination/
@@ -240,4 +244,3 @@ Title_video:
240244
title: The Movie
241245
video_mp4: /videos/AA_video_(1080p).mp4
242246
---
243-

‎content/nederlands/_index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ Banner:
66
title_line2_before: voor
77
title_line2_underline: verantwoorde
88
title_line2_after: algoritmes
9+
title_mobile_line1: Publieke kennisopbouw voor
10+
title_mobile_line2:
11+
title_mobile_line3_underline: verantwoorde
12+
title_mobile_line3_after: algoritmes
913
phonetica: /al.ɡo-ˈpru.dεn(t)si/
1014
type: zelfstandig naamwoord
1115
description1: >-

‎layouts/index.html‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
<!-- Banner -->
66
{{ with .Params.Banner }}
7-
<section class="container landing-page-container content mx-0 mt-5 d-xl-block desktop d-none">
7+
<!-- Desktop -->
8+
<section class="container landing-page-container content mx-0 mt-5 d-xl-block d-none">
89
<div class="row landing-page-top-row">
910
<div class="landing-page-col col-2 d-block">
1011
<div class="shape shape-xl-square-top-left"></div>
@@ -90,7 +91,86 @@ <h2 class="landing-page-slide-title" style="color:#005aa7; font-weight:100;"><i
9091
</div>
9192
</div>
9293
</section>
93-
<section class="landing-page-clear-bottom"></section>
94+
<section class="landing-page-clear-bottom d-xl-block d-none"></section>
95+
<!-- /Desktop -->
96+
<!-- Mobile -->
97+
<section class="container landing-page-container content mx-0 mt-5 d-block d-xl-none">
98+
<div class="row landing-page-top-row">
99+
<div class="landing-page-col col-12">
100+
<div class="shape shape-sm-square-top-left"></div>
101+
<div class="shape shape-sm-circle-top-left"></div>
102+
<div class="shape shape-sm-triangle-top-right"></div>
103+
<div class="shape shape-sm-circle-top-right"></div>
104+
</div>
105+
</div>
106+
<div class="row landing-page-middle-row">
107+
<div class="landing-page-col landing-page-col-content col-12">
108+
<h1 class="landing-page-title mt-5 mb-0" style="color:#005aa7;">
109+
{{.title_mobile_line1}}
110+
</h1>
111+
<h1 class="landing-page-title mt-0" style="color:#005aa7;">
112+
{{.title_mobile_line2}}
113+
</h1>
114+
<h1 class="landing-page-title mt-0" style="color:#005aa7;">
115+
<u>
116+
{{.title_mobile_line3_underline}}
117+
</u>
118+
{{.title_mobile_line3_after}}
119+
</h1>
120+
{{ with .slogan }}
121+
<!-- Slogan -->
122+
<div class="slider-wrapper">
123+
124+
<!-- main -->
125+
<h2 class="landing-page-slogan-title mt-5 mb-3 d-inline-block" style="color:#005aa7; font-weight:100;">{{.title}}</h2>
126+
<!-- /main -->
127+
128+
<!-- slider -->
129+
<div class="ms-slider d-inline-block landing-page-slogan-slider">
130+
<ul class="ms-slider__words">
131+
{{ range .labels }}
132+
<li class="ms-slider__word pl-0 landing-page-slogan-slider-li">
133+
<div class="slider-wrapper mb-1 py-1">
134+
<h2 class="landing-page-slide-title" style="color:#005aa7; font-weight:100;"><i
135+
class="highlight-red">{{.text}}</i></h2>
136+
</div>
137+
</li>
138+
{{ end }}
139+
<!-- repeat the last item for the slider logic -->
140+
{{ with index .labels 0 }}
141+
<li class="ms-slider__word pl-0 landing-page-slogan-slider-li">
142+
<div class="slider-wrapper mb-1 py-1">
143+
<h2 class="landing-page-slide-title" style="color:#005aa7; font-weight:100;"><i
144+
class="highlight-red">{{.text}}</i></h2>
145+
</div>
146+
</li>
147+
{{ end }}
148+
</ul>
149+
</div>
150+
<!-- /slider -->
151+
152+
</div>
153+
154+
{{ end }}
155+
</div>
156+
</div>
157+
<!-- /al-go-pru-dence -->
158+
</div>
159+
<div class="row landing-page-bottom-row">
160+
<div class="landing-page-col col-12">
161+
<div class="shape shape-sm-circle-bottom-left"></div>
162+
<div class="shape shape-sm-square-bottom-left"></div>
163+
<div class="landing-page-scroll-container">
164+
<p class="landing-page-scroll-text d-block">scroll</p>
165+
<i class="fas fa-arrow-down landing-page-scroll-icon"></i>
166+
</div>
167+
<div class="shape shape-sm-square-bottom-middle_right"></div>
168+
<div class="shape shape-sm-square-bottom-most-right"></div>
169+
</div>
170+
</div>
171+
</section>
172+
<section class="landing-page-clear-bottom d-block d-xl-none"></section>
173+
<!-- /Mobile -->
94174
{{ end }}
95175
<!-- /Banner -->
96176

‎tina/collections/pages/home.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,29 @@ export default {
5252
label: "title line 2 after",
5353
required: true,
5454
},
55+
{
56+
name: "title_mobile_line1",
57+
type: "string",
58+
label: "title mobile line 1",
59+
required: true,
60+
},
61+
{
62+
name: "title_mobile_line2",
63+
type: "string",
64+
label: "title mobile line 2",
65+
},
66+
{
67+
name: "title_mobile_line3_underline",
68+
type: "string",
69+
label: "title mobile line 3 underline",
70+
required: true,
71+
},
72+
{
73+
name: "title_mobile_line3_after",
74+
type: "string",
75+
label: "title mobile line 3 after",
76+
required: true,
77+
},
5578
{
5679
label: "phonetica",
5780
type: "string",

‎tina/tina-lock.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)