Skip to content

Commit bfd8a1d

Browse files
448-OG448-OG
committed
Use responsive design
1 parent 2e9257a commit bfd8a1d

3 files changed

Lines changed: 49 additions & 17 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.vscode

‎index.html‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,35 @@
1313
</head>
1414

1515
<body>
16-
<div id="hero" class="height-100vh">
17-
<div class="frow column-center direction-column width-100 justify-center centered-column">
18-
<div id="logo" class="frow col-xs-4-6 col-md-1-6">
19-
<img src="/RustaceansKenya-icon.svg" alt="" srcset="">
16+
<div id="hero" class="frow height-100vh ">
17+
<div class="frow column-center direction-column width-100 justify-center ">
18+
<div class="frow col-xs-1-1">
19+
<div id="logo" class="frow">
20+
<img src="/RustaceansKenya-icon.svg" alt="RustaceansKenya-Logo" class="frow">
21+
</div>
2022
</div>
21-
<div class="frow pr-10 pl-10">
22-
<h1 class="frow color-primary font-brizel-regular font-size-300">Rustaceans Kenya</h1>
23+
<div class="frow col-xs-1-1">
24+
<div class="frow pr-10 pl-10">
25+
<h1 class="frow color-primary font-brizel-regular font-size-100">Rustaceans Kenya</h1>
26+
</div>
2327
</div>
24-
<div class="frow font-poppins-regular col-xs-7-8 mt-20 p-5">
25-
<h3 class="color-primary">Collaboration and Meetups for the Rust Programming Language Community in
26-
Kenya.</h3>
28+
<div class="frow col-xs-1-1">
29+
<div class="frow font-poppins-regular col-xs-7-8 mt-20 p-10">
30+
<h3 class="color-primary global-font-size">Collaboration and Meetups for the Rust Programming Language Community in
31+
Kenya.</h3>
32+
</div>
2733
</div>
28-
<div class="frow w-50 row-around mt-50 font-size-150 justify-around">
29-
<div class="frow button-link">
34+
<div class="frow direction-row p-10 col-xs-6-8 gutters justify-evenly">
35+
<div class="frow mb-5 button-link col-xs-2-3 col-md-2-12">
3036
<a class="color-primary" href="https://github.com/RustaceansKenya/">Github</a>
3137
</div>
32-
<div class="frow button-link">
38+
<div class="frow mb-5 button-link col-xs-2-3 col-md-2-12">
3339
<a class="color-primary" href="https://t.me/+G8BrYdWiqhNjMWRk">Telegram</a>
3440
</div>
35-
<div class="frow button-link">
41+
<div class="frow mb-5 button-link col-xs-2-3 col-md-2-12">
3642
<a class="color-primary min-width-100" href="https://x.com/RustaceansKenya">X</a>
3743
</div>
38-
<div class="frow button-link">
44+
<div class="frow mb-5 button-link col-xs-2-3 col-md-2-12">
3945
<a class="color-primary min-width-100" href="https://github.com/RustaceansKenya/Brand-Collateral/blob/master/RustaceansKenya-Partnerships-deck.pdf">Partnerships</a>
4046
</div>
4147
</div>

‎styles/main.css‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,45 @@
1+
img {
2+
max-width: 100% !important;
3+
}
4+
15
#hero {
26
background-repeat: no-repeat;
37
background-size: cover;
48
background-position: center;
59
width: 100vw !important;
6-
height: 100vh !important;
10+
min-height: 100vh !important;
711
text-align: center !important;
812
}
913

1014
@media only screen and (max-width:991px) {
1115
#hero {
1216
background-image: url('/images/hero-small.svg');
1317
}
18+
19+
#logo {
20+
width: 50%;
21+
}
22+
23+
.global-font-size {
24+
font-size: 50%;
25+
}
1426
}
1527

1628
@media only screen and (min-width:992px) {
1729
#hero {
1830
background-image: url('/images/hero-large.svg');
1931
}
32+
#logo {
33+
width: 20%;
34+
}
35+
36+
.global-font-size {
37+
font-size: 150%;
38+
}
2039
}
2140

2241
.height-100vh {
23-
height: 100vh !important;
42+
min-height: 100vh !important;
2443
}
2544

2645
.font-brizel-regular {
@@ -31,6 +50,12 @@
3150
font-family: "poppinsregular", "sans-serif";
3251
}
3352

53+
54+
55+
.font-size-50 {
56+
font-size: 50%;
57+
}
58+
3459
.font-size-400 {
3560
font-size: 400%;
3661
}
@@ -128,4 +153,4 @@ body {
128153
}
129154
.min-width-100 {
130155
width: 100px;
131-
}
156+
}

0 commit comments

Comments
 (0)