Skip to content

Commit 8b20bcb

Browse files
cyteoncyteon
authored
Merge pull request #57 from hackclub/fixing-styles
Fix the landing page styles
2 parents e602222 + 64d8a04 commit 8b20bcb

File tree

3 files changed

+78
-44
lines changed

3 files changed

+78
-44
lines changed

‎app/assets/stylesheets/application.scss‎

Lines changed: 74 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,17 @@
1616
--color-teal: #A4DDDB;
1717
--shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
1818
--shadow-inset: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
19+
}
1920

21+
* {
2022
font-family: "Jua", sans-serif;
2123
}
2224

25+
body {
26+
padding: 0;
27+
margin: 0;
28+
}
29+
2330
.landing-section-1, .landing-section-2 {
2431
min-height: 100vh;
2532
position: relative;
@@ -121,25 +128,27 @@
121128
background: url("landing/section-2/title.svg") no-repeat center top / 100% auto;
122129
z-index: 100;
123130
position: absolute;
124-
top: 32px;
131+
top: 24px;
125132
left: 50%;
126133
transform: translateX(-50%);
127134
display: flex;
128135
width: 26rem;
129136
min-height: 88px;
137+
height: fit-content;
130138
align-items: center;
131139
justify-content: center;
132-
font-size: 2.5em;
140+
font-size: 1.8em;
133141

134142
h2 {
135143
text-align: center;
136144
color: white;
145+
margin: 0;
137146
}
138147

139148
@media (max-width: 600px) {
140149
width: 20rem;
141150
min-height: 68px;
142-
font-size: 2em;
151+
font-size: 1.2em;
143152
}
144153
}
145154

@@ -148,22 +157,27 @@
148157
border-radius: 16px;
149158
box-shadow: var(--shadow);
150159
width: 75%;
151-
height: 50%;
160+
height: fit-content;
152161
min-height: 24em;
153162
position: relative;
154163
display: flex;
155164
flex-direction: column;
156165
align-items: center;
157166

158167
p {
159-
margin: auto 16px;
168+
margin: 16px;
160169
text-align: center;
161170
font-size: 1.3em;
162171

163172
@media (max-width: 600px) {
164173
font-size: 1em;
165174
}
166175
}
176+
177+
img {
178+
width: 90%;
179+
margin-top: 2em;
180+
}
167181
}
168182

169183
.landing-section-2--step-card-1 {
@@ -181,29 +195,27 @@
181195
color: #3C5E8B;
182196
}
183197

184-
.landing-section-2--step-card--img {
185-
width: 90%;
186-
margin-top: 2em;
187-
position: relative;
188-
}
189-
190198
.landing-section-2--step-card--ribbon {
191199
background: no-repeat center top / 100% auto;
192200
position: absolute;
193-
top: -25px;
201+
top: -21px;
194202
left: 50%;
195203
transform: translateX(-50%);
196204
width: 10em;
197-
min-height: 48px;
205+
min-height: 40px;
198206
display: flex;
199207
align-items: center;
200208
justify-content: center;
201209
color: white;
202-
font-size: 1.2em;
203-
210+
211+
h2 {
212+
margin: 0;
213+
font-size: 1.2em;
214+
font-weight: normal;
215+
}
216+
204217
@media (max-width: 600px) {
205218
top: -21px;
206-
min-height: 40px;
207219
font-size: 1em;
208220
}
209221
}
@@ -221,16 +233,17 @@
221233
}
222234

223235
.landing-section-2--step-card--title {
224-
margin-top: -36px;
236+
margin: -36px 0 0 0;
237+
225238
width: 110%;
226-
min-height: 72px;
239+
min-height: 54px;
227240
z-index: 100;
228241
background: no-repeat center top -2px / 100% auto;
229242
color: white;
230-
font-size: 1.8em;
231243
display: flex;
232244
align-items: center;
233245
justify-content: center;
246+
font-size: 1.5em;
234247

235248
@media (max-width: 600px) {
236249
margin-top: -28px;
@@ -267,7 +280,7 @@
267280
background: url("landing/section-3/title.png") no-repeat center top / 100% auto;
268281
width: 48rem;
269282
min-height: 118px;
270-
margin-top: 32px;
283+
margin: 32px 0 0 0;
271284
font-size: 3em;
272285
color: white;
273286
display: flex;
@@ -287,9 +300,9 @@
287300
justify-items: center;
288301
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
289302
row-gap: 24px;
290-
column-gap: 48px;
303+
column-gap: 32px;
291304
width: 60%;
292-
margin-top: 16px;
305+
margin: 16px 0;
293306

294307
@media (max-width: 600px) {
295308
width: 90%;
@@ -300,15 +313,14 @@
300313
background: var(--color-brown-light);
301314
box-shadow: var(--shadow);
302315
border-radius: 30px;
303-
height: 400px;
304-
max-width: 300px;
316+
max-height: 350px;
317+
max-width: 250px;
305318
padding: 12px;
306319

307320
div {
308321
background: var(--color-brown-darker);
309322
box-shadow: var(--shadow);
310323
border-radius: 20px;
311-
height: 100%;
312324
padding: 10px;
313325
display: flex;
314326
flex-direction: column;
@@ -331,7 +343,7 @@
331343
transform: translateX(calc(-15% + 12px));
332344
width: 130%;
333345
min-height: 48px;
334-
margin-top: auto;
346+
margin: auto 0 0 0;
335347
display: flex;
336348
align-items: center;
337349
justify-content: center;
@@ -402,7 +414,7 @@
402414
> div {
403415
color: var(--color-cream);
404416
background-color: #BE772B;
405-
background-image: linear-gradient(180deg, #BE772B 30%, #DE9E41 30%);
417+
background-image: linear-gradient(180deg, #BE772B 25%, #DE9E41 25%);
406418

407419
box-shadow: var(--shadow-inset);
408420
border-radius: 10px;
@@ -415,7 +427,8 @@
415427

416428
h3 {
417429
font-size: 1.8em;
418-
margin-bottom: 2px; // just a little extra margin cuz i feel like it looks nice
430+
margin-top: 0;
431+
margin-bottom: 4px; // just a little extra margin cuz i feel like it looks nice
419432

420433
@media (max-width: 600px) {
421434
font-size: 1.6em;
@@ -442,6 +455,10 @@
442455
width: 95%;
443456
margin-top: -8px;
444457
align-self: center;
458+
459+
img {
460+
width: 100%;
461+
}
445462
}
446463
}
447464
}
@@ -481,7 +498,7 @@
481498

482499
h2 {
483500
text-align: center;
484-
margin-bottom: 16px;
501+
margin: 16px 0px;
485502
font-size: 2em;
486503
color: var(--color-brown-dark);
487504
}
@@ -490,6 +507,10 @@
490507
color: var(--color-brown);
491508
font-size: 1.2em;
492509
}
510+
511+
a {
512+
color: var(--color-brown);
513+
}
493514
}
494515
}
495516

@@ -514,6 +535,7 @@
514535
background-color: var(--color-brown);
515536
border-radius: 10px;
516537
padding: 8px 0;
538+
margin: 0;
517539

518540
@media (max-width: 600px) {
519541
width: 120%;
@@ -537,25 +559,26 @@
537559
display: flex;
538560
gap: 32px;
539561
justify-content: center;
540-
color: var(--color-brown-dark);
562+
563+
a {
564+
color: var(--color-brown-dark);
565+
}
541566
}
542567

543568
.input-red {
544569
background-color: var(--color-red);
545570
border-radius: 10px;
546571
padding: 8px;
547572
width: 95%;
548-
font-size: 1.2em;
549573

550574
div {
551575
background-color: white;
552-
color: var(--color-red);
553576
border-radius: 5px;
554577
box-shadow: var(--shadow-inset);
555578
display: flex;
556579

557580
svg {
558-
width: 60px;
581+
width: 30px;
559582
padding: 8px 16px;
560583
fill: var(--color-red);
561584
opacity: 75%;
@@ -565,7 +588,15 @@
565588
width: 100%;
566589
opacity: 75%;
567590
margin-top: 3px;
591+
font-size: 1.2em;
592+
color: var(--color-red);
593+
594+
&::placeholder {
595+
color: var(--color-red);
596+
opacity: 75%;
597+
}
568598

599+
border: none;
569600
&:hover, &:focus {
570601
cursor: text;
571602
outline: none;
@@ -592,10 +623,11 @@ button {
592623
padding: 10px;
593624
border-radius: 10px;
594625
background: var(--color-red) url("striped-red-btn-bg.svg") no-repeat calc(50% - 2px) 50% / cover;
626+
border: none;
595627

596628
div {
597-
background: var(--color-red-dark);
598629
color: white;
630+
background: var(--color-red-dark);
599631
box-shadow: var(--shadow);
600632
border-radius: 5px;
601633
padding: 4px 25px;
@@ -606,6 +638,13 @@ button {
606638
img {
607639
filter: invert(1);
608640
}
641+
642+
input {
643+
background: none;
644+
border: none;
645+
color: white;
646+
font-size: 1em;
647+
}
609648
}
610649

611650
&:hover {
@@ -629,6 +668,7 @@ svg {
629668
}
630669

631670
a {
671+
text-decoration: none;
632672
position: relative;
633673
display: inline-block;
634674
z-index: 0;

‎app/views/landing/index.html.erb‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@
2929
<h2>Step 1</h2>
3030
</div>
3131

32-
<div class="landing-section-2--step-card--img">
33-
<%= image_tag "landing/section-2/step-1-img.png" %>
34-
</div>
32+
<%= image_tag "landing/section-2/step-1-img.png" %>
3533

3634
<h3 class="landing-section-2--step-card-1--title landing-section-2--step-card--title">Cook a real tasty project!</h3>
3735

@@ -45,9 +43,7 @@
4543
<h2>Step 2</h2>
4644
</div>
4745

48-
<div class="landing-section-2--step-card--img">
49-
<%= image_tag "landing/section-2/step-2-img.png" %>
50-
</div>
46+
<%= image_tag "landing/section-2/step-2-img.png" %>
5147

5248
<h3 class="landing-section-2--step-card-2--title landing-section-2--step-card--title">Rate your fellow hackers!</h3>
5349

@@ -61,9 +57,7 @@
6157
<h2>Step 3</h2>
6258
</div>
6359

64-
<div class="landing-section-2--step-card--img">
65-
<%= image_tag "landing/section-2/step-3-img.png" %>
66-
</div>
60+
<%= image_tag "landing/section-2/step-3-img.png" %>
6761

6862
<h3 class="landing-section-2--step-card-3--title landing-section-2--step-card--title">Win prizes!</h3>
6963

‎app/views/landing/projects/_project_idea_generator.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474

7575
<div id="shopkeeper-bakery">
7676
<%= image_tag "landing/section-5/bakery/back.png" %>
77-
<img id="shopkeeper-image" src="" class="idle" style="position: absolute; right: 64px; top: 40%;">
77+
<img id="shopkeeper-image" src="" class="idle" style="position: absolute; right: 64px; top: 40%; width: 30%;">
7878
<%= image_tag "landing/section-5/bakery/front.png", style: "position: absolute; top: 0; left: 0;" %>
7979
</div>
8080
</div>

0 commit comments

Comments
 (0)