Skip to content

Commit fd59208

Browse files
JamesllllllllllJamesllllllllll
committed
Style upgrades
1 parent bbaf2cf commit fd59208

5 files changed

Lines changed: 146 additions & 44 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>Code Café Community</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎src/components/Features.tsx‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,40 @@ import { Users, CircleHelp, BookOpen } from "lucide-react";
22

33
export default function Features() {
44
return (
5-
<section
6-
id="features"
7-
className="min-h-[35vh] bg-secondary flex flex-wrap gap-8 items-stretch p-8"
8-
>
9-
<div className="bg-primary shadow-lg rounded-3xl p-8 lg:p-12 text-center flex flex-col items-center justify-center flex-1 min-w-[300px]">
10-
<Users size={48} className="text-accent mb-2" />
11-
<h3 className="text-secondary text-xl mb-2">Active Community</h3>
12-
<p className="text-secondary text-sm">
13-
Connect with like-minded developers and build lasting relationships.
14-
</p>
15-
</div>
16-
<div className="bg-primary shadow-lg rounded-3xl p-8 lg:p-12 text-center flex flex-col items-center justify-center flex-1 min-w-[300px]">
17-
<CircleHelp size={48} className="text-accent mb-2" />
18-
<h3 className="text-secondary text-xl mb-2">Some other thing</h3>
19-
<p className="text-secondary text-sm">
20-
Description about that other thing.
21-
</p>
22-
</div>
23-
<div className="bg-primary shadow-lg rounded-3xl p-8 lg:p-12 text-center flex flex-col items-center justify-center flex-1 min-w-[300px]">
24-
<BookOpen size={48} className="text-accent mb-2" />
25-
<h3 className="text-secondary text-xl mb-2">Learning Resources</h3>
26-
<p className="text-secondary text-sm">
27-
Access curated learning materials and documentation.
28-
</p>
5+
<section className="bg-secondary py-36">
6+
<div className="outer">
7+
<div className="inner">
8+
<div className="flex-1 flex flex-col items-center text-center py-6">
9+
<Users size={48} className="text-accent mb-2" />
10+
<h3 className="text-secondary text-xl mb-2 font-mono">
11+
Active Community
12+
</h3>
13+
<p className="text-secondary text-sm">
14+
Connect with like-minded developers and build lasting
15+
relationships.
16+
</p>
17+
</div>
18+
<div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>
19+
20+
<div className="flex-1 flex flex-col items-center text-center py-6 font-mono">
21+
<CircleHelp size={48} className="text-accent mb-2" />
22+
<h3 className="text-secondary text-xl mb-2">Some other thing</h3>
23+
<p className="text-secondary text-sm">
24+
Description about that other thing.
25+
</p>
26+
</div>
27+
<div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>
28+
29+
<div className="flex-1 flex flex-col items-center text-center py-6">
30+
<BookOpen size={48} className="text-accent mb-2" />
31+
<h3 className="text-secondary text-xl mb-2 font-mono">
32+
Learning Resources
33+
</h3>
34+
<p className="text-secondary text-sm">
35+
Access curated learning materials and documentation.
36+
</p>
37+
</div>
38+
</div>
2939
</div>
3040
</section>
3141
);

‎src/components/Header.tsx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,25 @@ import { Code } from "lucide-react";
33

44
export default function Header() {
55
return (
6-
<header className="bg-secondary py-4 flex justify-around items-center">
6+
<header className="sticky top-0 bg-primary/80 backdrop-blur-lg py-4 flex justify-around items-center">
77
<div className="flex gap-2 items-center">
8-
<Code size={48} className="text-primary" />
9-
<h1 className="text-primary text-3xl">Code Cafe</h1>
8+
<Code size={48} className="text-secondary" />
9+
<h1 className="text-secondary text-3xl">Code Cafe</h1>
1010
</div>
1111
<nav>
12-
<ul className="flex list-none gap-3">
12+
<ul className="flex list-none gap-3 text-secondary">
1313
<li>
14-
<NavLink
15-
className="text-primary hover:text-accent transition-all"
16-
to="/"
17-
>
14+
<NavLink className="hover:text-accent" to="/">
1815
Home
1916
</NavLink>
2017
</li>
2118
<li>
22-
<NavLink
23-
className="text-primary hover:text-accent transition-colors"
24-
to="/about"
25-
>
19+
<NavLink className="hover:text-accent" to="/about">
2620
About Us
2721
</NavLink>
2822
</li>
2923
<li>
30-
<NavLink
31-
className="text-primary hover:text-accent transition-colors"
32-
to="/events"
33-
>
24+
<NavLink className="hover:text-accent" to="/events">
3425
Events
3526
</NavLink>
3627
</li>

‎src/components/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ export default function Hero() {
22
return (
33
<section
44
id="hero"
5-
className="min-h-[85vh] bg-primary flex flex-col justify-evenly items-center text-accent py-8"
5+
className="min-h-[80vh] bg-primary flex flex-col justify-evenly items-center text-accent py-8"
66
>
77
<div className="text-center flex items-center justify-center flex-wrap xl:flex-nowrap p-8 lg:p-20">
88
<div className="flex flex-col items-center">
99
<h2 className="text-5xl md:text-6xl lg:text-8xl mb-4">
1010
Where Code Meets Community
1111
</h2>
12-
<p className="text-2xl max-w-prose">
12+
<p className="font-mono text-2xl max-w-prose">
1313
Join our vibrant community of developers, share knowledge and grow
1414
together in a welcoming environment.
1515
</p>

‎src/index.css‎

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
color-scheme: light dark;
1111
color: rgba(255, 255, 255, 0.87);
12-
background-color: #242424;
12+
background-color: #240e1f;
1313

1414
font-synthesis: none;
1515
text-rendering: optimizeLegibility;
@@ -79,3 +79,104 @@ button:focus-visible {
7979
background-color: #f9f9f9;
8080
}
8181
}
82+
83+
#hero {
84+
background-color: rgb(36, 14, 31);
85+
background-image: radial-gradient(
86+
circle at 70% 60%,
87+
rgba(36, 14, 31, 0.2) 00%,
88+
rgba(36, 14, 31, 0.6) 10%,
89+
rgba(36, 14, 31, 0.87) 40%
90+
),
91+
url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 0H0v36h36V0zM15.126 2H2v13.126c.367.094.714.24 1.032.428L15.554 3.032c-.188-.318-.334-.665-.428-1.032zM18 4.874V18H4.874c-.094-.367-.24-.714-.428-1.032L16.968 4.446c.318.188.665.334 1.032.428zM22.874 2h11.712L20 16.586V4.874c1.406-.362 2.512-1.468 2.874-2.874zm10.252 18H20v13.126c.367.094.714.24 1.032.428l12.522-12.522c-.188-.318-.334-.665-.428-1.032zM36 22.874V36H22.874c-.094-.367-.24-.714-.428-1.032l12.522-12.522c.318.188.665.334 1.032.428zm0-7.748V3.414L21.414 18h11.712c.362-1.406 1.468-2.512 2.874-2.874zm-18 18V21.414L3.414 36h11.712c.362-1.406 1.468-2.512 2.874-2.874zM4.874 20h11.712L2 34.586V22.874c1.406-.362 2.512-1.468 2.874-2.874z' fill='%23f0b052' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
92+
background-blend-mode: normal;
93+
}
94+
95+
.outer {
96+
background: linear-gradient(
97+
145deg,
98+
rgba(0, 17, 34, 0.733),
99+
rgba(0, 17, 34, 0.4),
100+
rgba(0, 17, 34, 0.733)
101+
);
102+
background-color: rgba(0, 0, 0, 0);
103+
background-clip: border-box;
104+
background-origin: padding-box;
105+
border: 1px solid rgba(255, 170, 170, 0.733);
106+
border-radius: 16px;
107+
box-shadow:
108+
rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset,
109+
rgba(93, 50, 50, 0.3) 0px 50px 100px -20px,
110+
rgba(0, 0, 0, 0.5) 0px 30px 60px -30px,
111+
rgba(178, 161, 103, 0.3) -10px 10px 60px -10px;
112+
box-sizing: border-box;
113+
color: rgb(51, 51, 56);
114+
font-family:
115+
"Inter var",
116+
system-ui,
117+
-apple-system,
118+
BlinkMacSystemFont,
119+
"Segoe UI",
120+
Ubuntu,
121+
Roboto,
122+
Cantarell,
123+
"Noto Sans",
124+
sans-serif,
125+
"Apple Color Emoji",
126+
"Segoe UI Emoji",
127+
"Segoe UI Symbol",
128+
"Noto Color Emoji";
129+
font-feature-settings: "cv05", "ss01", "ss03", "zero";
130+
font-size: 16px;
131+
line-height: 24px;
132+
max-width: 1200px;
133+
padding: 9.6px;
134+
text-align: center;
135+
margin: 0 auto;
136+
}
137+
138+
.inner {
139+
align-items: flex-start;
140+
background: repeating-conic-gradient(
141+
rgba(0, 0, 0, 0.067) 0deg,
142+
rgba(0, 0, 0, 0.067) 0.0001%,
143+
rgba(0, 0, 0, 0) 0deg,
144+
rgba(0, 0, 0, 0) 0.0002%
145+
),
146+
rgba(0, 17, 34, 0.533);
147+
background-clip: border-box;
148+
background-origin: padding-box;
149+
border-radius: 9.6px;
150+
box-shadow:
151+
rgba(82, 0, 0, 0.6) 0px 1px 1px 0px inset,
152+
rgba(93, 50, 59, 0.7) 0px 5px 10px 0px;
153+
box-sizing: border-box;
154+
color: rgb(255, 255, 255);
155+
column-gap: 24px;
156+
display: flex;
157+
flex-wrap: wrap;
158+
font-family:
159+
"Inter var",
160+
system-ui,
161+
-apple-system,
162+
BlinkMacSystemFont,
163+
"Segoe UI",
164+
Ubuntu,
165+
Roboto,
166+
Cantarell,
167+
"Noto Sans",
168+
sans-serif,
169+
"Apple Color Emoji",
170+
"Segoe UI Emoji",
171+
"Segoe UI Symbol",
172+
"Noto Color Emoji";
173+
font-feature-settings: "cv05", "ss01", "ss03", "zero";
174+
font-size: 16px;
175+
justify-content: center;
176+
line-height: 24px;
177+
margin: 0;
178+
padding: 24px 16px;
179+
/* position: relative; */
180+
row-gap: 24px;
181+
text-align: left;
182+
}

0 commit comments

Comments
 (0)