Skip to content

Commit c05c84b

Browse files
Aditya-150Aditya-150
authored
fix: responsiveness fixed (#32)
Signed-off-by: Aditya Prasad Mohanty <[email protected]>
1 parent 9c64e7c commit c05c84b

File tree

37 files changed

+807
-908
lines changed

37 files changed

+807
-908
lines changed

‎src/components/HomepageAdopters/index.js

+42-35
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,50 @@ import { FaAngleRight } from "react-icons/fa6";
88

99
export default function HomepageAdopters() {
1010
return (
11-
<section className={`adopters ${styles.adopters}`}>
12-
<div className={styles.adoptersLogos}>
13-
<h4 className={styles.adoptersTitle}>Adopted By</h4>
14-
<div className={styles.logos}>
15-
<Link to="https://open-horizon.github.io/">
16-
<img
17-
className={styles.logo}
18-
src={adoptersLogo2}
19-
alt="adopter logo"
20-
/>
21-
</Link>
22-
<Link to="https://www.accuknox.com/">
23-
<AdoptersLogo1 className={`${styles.logo} ${styles.accuknox}`} alt="adopter logo" />
24-
</Link>
25-
<Link to="https://www.intel.com/content/www/us/en/edge-computing/smart-edge.html">
26-
<img
27-
className={styles.logo}
28-
src={adoptersLogo3}
29-
alt="adopter logo"
30-
/>
31-
</Link>
11+
<section className={`Section adopters ${styles.adopters}`}>
12+
<div className={`container`}>
13+
<div className={`centerSectionHeading`}>
14+
<h1 className={styles.adoptersTitle}>Adopted By</h1>
3215
</div>
33-
</div>
34-
<div className={styles.container}>
35-
<div className={styles.containerContent}>
36-
<h3 className={styles.containerTitle}>Want to Add Your Logo ?</h3>
37-
<p className={styles.containerDescription}>
38-
Be one of the adopters for our organization
39-
</p>
16+
<div className={styles.adoptersLogos}>
17+
<div className={styles.logos}>
18+
<Link to="https://open-horizon.github.io/">
19+
<img
20+
className={styles.logo}
21+
src={adoptersLogo2}
22+
alt="adopter logo"
23+
/>
24+
</Link>
25+
<Link to="https://www.accuknox.com/">
26+
<AdoptersLogo1
27+
className={`${styles.logo} ${styles.accuknox}`}
28+
alt="adopter logo"
29+
/>
30+
</Link>
31+
<Link to="https://www.intel.com/content/www/us/en/edge-computing/smart-edge.html">
32+
<img
33+
className={styles.logo}
34+
src={adoptersLogo3}
35+
alt="adopter logo"
36+
/>
37+
</Link>
38+
</div>
39+
</div>
40+
<div className={styles.container}>
41+
<div className={styles.containerContent}>
42+
<h3 className={styles.containerTitle}>Want to Add Your Logo ?</h3>
43+
<p className={styles.containerDescription}>
44+
Be one of the adopters for our organization
45+
</p>
46+
</div>
47+
<Link
48+
to="https://github.com/kubearmor/KubeArmor/blob/main/ADOPTERS.md"
49+
className={styles.containerButton}
50+
>
51+
Apply
52+
<FaAngleRight color="var(--color-primary)" />
53+
</Link>
4054
</div>
41-
<Link
42-
to="https://github.com/kubearmor/KubeArmor/blob/main/ADOPTERS.md"
43-
className={styles.containerButton}
44-
>
45-
Apply
46-
<FaAngleRight color="var(--color-primary)" />
47-
</Link>
4855
</div>
4956
</section>
5057
);

‎src/components/HomepageAdopters/styles.module.css

-6
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
.adoptersLogos {
77
display: flex;
88
flex-direction: column;
9-
padding: 10rem 5.625rem 0;
109
align-items: center;
1110
justify-content: space-between;
1211
}
@@ -32,7 +31,6 @@
3231
}
3332

3433
.container {
35-
width: 80%;
3634
background: var(--color-primary);
3735
align-self: center;
3836
margin-top: 8rem;
@@ -82,17 +80,13 @@
8280
}
8381

8482
@media screen and (max-width: 1080px) {
85-
.adoptersLogos {
86-
padding: 10rem 2rem 0;
87-
}
8883
.logos {
8984
width: 100%;
9085
}
9186
}
9287
@media screen and (max-width: 550px) {
9388
.logos {
9489
flex-direction: column;
95-
height: 60vh;
9690
}
9791
.logo {
9892
cursor: pointer;

‎src/components/HomepageArchitecture/index.js

+19-12
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,25 @@ import architectureImage from "../../../static/img/architecture/architecture-dia
44

55
export default function HomepageArchitecture() {
66
return (
7-
<section className={`architecture ${styles.architecture}`}>
8-
<h2 className={styles.architectureTitle}>ARCHITECTURE</h2>
9-
<h1 className={styles.architectureHeader}>
10-
First K8s Security Engine to Leverage BPF-LSM
11-
</h1>
12-
<p className={styles.architectureDescription}>
13-
KubeArmor is a runtime Kubernetes security engine. It uses eBPF and
14-
Linux Security Modules(LSM) for fortifying workloads based on Cloud
15-
Containers, IoT/Edge, and 5G networks. It enforces policy-based
16-
controls.
17-
</p>
18-
<img className={styles.architectureImage} aria-label="architecture image" src={architectureImage} alt="architecture image"/>
7+
<section className={`Section architecture ${styles.architecture}`}>
8+
<div className={`container`}>
9+
<div className={`centerSectionHeading`}>
10+
<h2>ARCHITECTURE</h2>
11+
<h1>First K8s Security Engine to Leverage BPF-LSM</h1>
12+
<p>
13+
KubeArmor is a runtime Kubernetes security engine. It uses eBPF and
14+
Linux Security Modules(LSM) for fortifying workloads based on Cloud
15+
Containers, IoT/Edge, and 5G networks. It enforces policy-based
16+
controls.
17+
</p>
18+
</div>
19+
<img
20+
className={styles.architectureImage}
21+
aria-label="architecture image"
22+
src={architectureImage}
23+
alt="architecture image"
24+
/>
25+
</div>
1926
</section>
2027
);
2128
}

‎src/components/HomepageArchitecture/styles.module.css

+2-27
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,15 @@
11
.architecture {
2-
padding: 13rem 5.625rem 0;
32
display: flex;
43
flex-direction: column;
54
justify-content: space-between;
65
align-items: center;
76
background: var(--color-bg);
87
}
9-
.architectureTitle {
10-
font-family: var(--font-main-medium);
11-
font-size: 1rem;
12-
font-weight: 500;
13-
color: var(--color-primary);
14-
letter-spacing: 0.18rem;
15-
}
16-
.architectureHeader {
17-
font-family: var(--font-main-semibold);
18-
font-size: 3rem;
19-
font-weight: 600;
20-
color: var(--color-font-header);
21-
text-align: center;
22-
width: 60%;
23-
}
24-
.architectureDescription {
25-
font-family: var(--font-main-regular);
26-
font-size: 1rem;
27-
font-weight: 400;
28-
color: var(--color-font-sub);
29-
text-align: center;
30-
width: 60%;
31-
margin-bottom: 0;
32-
}
338
.architectureImage {
349
height: auto;
3510
width: 100%;
3611
}
37-
@media screen and (max-width: 1080px) {
12+
/* @media screen and (max-width: 1080px) {
3813
.architectureHeader,
3914
.architectureDescription {
4015
width: 80%;
@@ -55,4 +30,4 @@
5530
margin-bottom: 2rem;
5631
width: 100%;
5732
}
58-
}
33+
} */

0 commit comments

Comments
 (0)