Skip to content

Commit 7d43a4b

Browse files
jfpariejfparie
authored
Merge pull request #216 from NGO-Algorithm-Audit/feature/landing-page-shapes
Feature/landing page shapes
2 parents 50499ec + 538c6a0 commit 7d43a4b

File tree

16 files changed

+1402
-896
lines changed

16 files changed

+1402
-896
lines changed

‎assets/scss/_common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
22
background-color: $body-color;
33
overflow-x: hidden;
4-
font-family: avenir, sans-serif !important;
4+
font-family: AvenirNextProDemi, avenir, sans-serif !important;
55
}
66

77
body::-webkit-scrollbar {

‎assets/scss/_custom.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@
2323
padding: 0.25rem 0.5rem !important;
2424
}
2525

26+
.highlight-red {
27+
border: #FFCBBD 0.5rem solid;
28+
border-radius: 1.4rem;
29+
background-color: #FFCBBD;
30+
color: #005aa7;
31+
margin: 0.25rem 0.25rem 0.5rem 0.25rem !important;
32+
padding: 0.25rem 0.5rem !important;
33+
font-style: normal;
34+
}
35+
2636
.yellow-button {
2737
margin-left: 20px;
2838
background-color: #005aa7;
@@ -37,7 +47,7 @@
3747
}
3848

3949
.ac .ac-trigger {
40-
font-family: avenir, sans-serif;
50+
font-family: AvenirNextProDemi, avenir, sans-serif;
4151
}
4252

4353
.ac .ac-trigger::after {

‎assets/scss/_landingpage.scss‎

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
.landing-page-container {
2+
width: 100vw;
3+
max-width: 100vw;
4+
5+
@media (max-width: 1200px) {
6+
min-height: 77vh;
7+
}
8+
9+
@media (min-width: 1200px) {
10+
min-height: 100vh;
11+
}
12+
background-color: #DFF1FF;
13+
}
14+
15+
.landing-page-top-row {
16+
@media (max-width: 1200px) {
17+
min-height: 20vh;
18+
}
19+
20+
@media (min-width: 1200px) {
21+
min-height: 33vh;
22+
}
23+
}
24+
25+
.landing-page-middle-row {
26+
min-height: 42vh;
27+
}
28+
29+
.landing-page-bottom-row {
30+
31+
@media (max-width: 1200px) {
32+
min-height: 15vh;
33+
}
34+
35+
@media (min-width: 1200px) {
36+
min-height: 25vh;
37+
}
38+
}
39+
40+
.landing-page-col-content {
41+
z-index: 20;
42+
}
43+
44+
.landing-page-title {
45+
46+
47+
@media (max-width: 1200px) {
48+
font-size: 3rem;
49+
}
50+
51+
@media (min-width: 1200px) {
52+
font-size: 4.25rem;
53+
}
54+
text-align: center;
55+
font-weight: 600;
56+
font-family: AvenirNextProDemi, avenir, sans-serif;
57+
}
58+
.landing-page-slogan-title {
59+
@media (max-width: 1200px) {
60+
font-size: 1.5rem;
61+
}
62+
63+
@media (min-width: 1200px) {
64+
font-size: 2.5rem;
65+
}
66+
margin-top: 1rem;
67+
}
68+
69+
.landing-page-slogan-slider {
70+
@media (max-width: 1200px) {
71+
height: 3.75rem;
72+
}
73+
74+
@media (min-width: 1200px) {
75+
margin-top: -0.5rem;
76+
height: 5rem;
77+
}
78+
}
79+
80+
.landing-page-slogan-slider-li {
81+
margin-top: 0.3rem;
82+
}
83+
84+
.landing-page-slide-title {
85+
@media (max-width: 1200px) {
86+
font-size: 1.5rem;
87+
}
88+
89+
@media (min-width: 1200px) {
90+
font-size: 2.5rem;
91+
}
92+
padding: 0.75rem;
93+
margin: 0;
94+
margin-top: -0.75rem;
95+
margin-left: -0.75rem;
96+
}
97+
98+
.landing-page-col {
99+
position: relative;
100+
101+
.shape {
102+
position: absolute;
103+
background-color: #BED8F1;
104+
z-index: 10;
105+
box-sizing: border-box;
106+
}
107+
108+
.shape-square-top-left {
109+
top: 10%;
110+
left: 0px;
111+
transform-origin: top left;
112+
transform: rotate(6deg);
113+
width: 110%;
114+
padding: 37%;
115+
}
116+
117+
.shape-square-middle-left {
118+
top: 80%;
119+
right: 45%;
120+
transform-origin: top right;
121+
transform: rotate(-28deg);
122+
padding: 37%;
123+
}
124+
125+
.shape-square-bottom-left {
126+
top: 17%;
127+
right: 63%;
128+
transform-origin: top right;
129+
transform: rotate(4deg);
130+
padding: 37%;
131+
}
132+
133+
.shape-circle-middle-left {
134+
border-radius: 50%;
135+
top: 73%;
136+
right: 5%;
137+
padding: 35%;
138+
}
139+
140+
.shape-circle-top-middle__left {
141+
border-radius: 50%;
142+
bottom: 53%;
143+
left: -1%;
144+
padding: 9%;
145+
}
146+
147+
.shape-triangle-top-middle {
148+
bottom: 10%;
149+
left: 7%;
150+
padding: 12%;
151+
transform-origin: top middle;
152+
transform: rotate(-73deg);
153+
clip-path: polygon(50% 13%, 0% 100%, 100% 100%);
154+
}
155+
156+
.shape-square-top-middle__middle {
157+
top: 0;
158+
left: 40%;
159+
transform-origin: top right;
160+
transform: rotate(3deg);
161+
padding: 9%;
162+
}
163+
164+
.shape-circle-top-middle__right {
165+
border-radius: 50%;
166+
bottom: 9%;
167+
right: 15%;
168+
padding: 9%;
169+
}
170+
171+
.shape-square-top-middle__right {
172+
bottom: 37%;
173+
right: -8%;
174+
transform-origin: top left;
175+
transform: rotate(25deg);
176+
padding: 9%;
177+
}
178+
179+
.shape-circle-top-right {
180+
border-radius: 50%;
181+
top: 22%;
182+
left: 40%;
183+
padding: 35%;
184+
}
185+
186+
.shape-square-middle-right {
187+
top: 20%;
188+
right: 0%;
189+
transform-origin: bottom right;
190+
transform: rotate(12deg);
191+
padding: 37%;
192+
}
193+
194+
.shape-triangle-bottom-right {
195+
top: -35%;
196+
left: -34%;
197+
padding: 50%;
198+
transform-origin: top;
199+
transform: rotate(-37deg);
200+
clip-path: polygon(50% 13%, 0% 100%, 100% 100%);
201+
}
202+
203+
.shape-square-bottom-middle__most-left {
204+
top: 7%;
205+
left: 0%;
206+
transform-origin: top left;
207+
transform: rotate(8deg);
208+
padding: 9%;
209+
}
210+
211+
.shape-square-bottom-middle__left {
212+
top: 12%;
213+
left: 12%;
214+
transform-origin: top right;
215+
transform: rotate(-33deg);
216+
padding: 9%;
217+
}
218+
219+
.shape-square-bottom-middle__right {
220+
top: 27%;
221+
left: 66%;
222+
transform-origin: top left;
223+
transform: rotate(9deg);
224+
padding: 9%;
225+
}
226+
227+
.shape-square-bottom-middle__most-right {
228+
top: -10%;
229+
right: 2%;
230+
transform-origin: top right;
231+
transform: rotate(-16deg);
232+
padding: 9%;
233+
}
234+
235+
.landing-page-scroll-container {
236+
z-index: 20;
237+
position: absolute;
238+
239+
@media (max-width: 1200px) {
240+
bottom: 20%;
241+
left: 43%;
242+
}
243+
244+
@media (min-width: 1200px) {
245+
bottom: 30%;
246+
left: 45%;
247+
}
248+
padding: 1rem;
249+
text-align: center;
250+
}
251+
252+
.landing-page-scroll-text {
253+
font-size: 1.8rem;
254+
color: #005aa7 !important;
255+
font-family: sans-serif;
256+
margin-bottom: 0rem;
257+
}
258+
.landing-page-scroll-icon {
259+
font-size: 1.5rem;
260+
color: #005aa7 !important;
261+
animation: bounce 2s infinite;
262+
animation-delay: 3s;
263+
}
264+
265+
@-moz-keyframes bounce {
266+
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
267+
40% {-moz-transform: translateY(-15px);}
268+
60% {-moz-transform: translateY(-7px);}
269+
}
270+
271+
@-o-keyframes bounce {
272+
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
273+
40% {-o-transform: translateY(-15px);}
274+
60% {-o-transform: translateY(-7px);}
275+
}
276+
@keyframes bounce {
277+
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
278+
40% {transform: translateY(-15px);}
279+
60% {transform: translateY(-7px);}
280+
}
281+
}
282+
283+
.landing-page-clear-bottom {
284+
z-index: 11;
285+
background-color: #FFF;
286+
width: 100vw;
287+
min-height: 35vh;
288+
position: relative;
289+
margin-bottom: -20vh;
290+
padding: 0;
291+
}
292+
293+
.activitifeed-section {
294+
z-index: 20;
295+
position: relative;
296+
}

‎assets/scss/style.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,6 @@ $icon-font: '{{.icon_font | default "Font Awesome 5 Free"}}';
2626

2727
@import 'templates/main.scss';
2828

29-
@import 'custom';
29+
@import 'custom';
30+
31+
@import 'landingpage';

‎assets/scss/templates/_main.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -448,7 +448,7 @@ a.post-title {
448448
padding-left: 20px;
449449
position: relative;
450450

451-
&::before {
451+
&:not(.ms-slider__word)::before {
452452
position: absolute;
453453
content: '';
454454
height: 8px;
@@ -727,12 +727,12 @@ vertical-align: top;
727727
padding-top: 5px;
728728
}
729729

730-
.content ul li:before{
730+
.content ul li:not(.ms-slider__word):before{
731731
height: 0px;
732732
width: 0px;
733733
}
734734

735-
.content ul li:before {
735+
.content ul li:not(.ms-slider__word):before {
736736
position: absolute;
737737
content: ">" !important;
738738
color:#005AA7;
@@ -744,7 +744,7 @@ vertical-align: top;
744744
}
745745

746746
li {
747-
font-family: avenir, sans-serif;
747+
font-family: AvenirNextProDemi, avenir, sans-serif;
748748
line-height: 1.7;
749749
}
750750

@@ -922,9 +922,11 @@ padding: 20px 0px 0px 0px;
922922
}
923923

924924
.slider-wrapper{
925-
display: flex;
925+
display: block;
926926
flex-direction: row;
927927
align-items: center;
928+
width: 100%;
929+
text-align: center;
928930
}
929931

930932
.ms-slider {

‎assets/scss/templates/_navigation.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
}
4242

4343
#header-navigation {
44-
background:#deecf7;
44+
background:#FFF;
4545
}
4646

4747
@media (max-width: 1400px) {

0 commit comments

Comments
 (0)