Skip to content

Commit 231164d

Browse files
aedwardgaedwardg
authored
Merge pull request #45 from CodeCafeCommunity/37-css-audit
CSS Audit
2 parents 3a70669 + ab62e6b commit 231164d

File tree

5 files changed

+18
-86
lines changed

5 files changed

+18
-86
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
/>
1414
</head>
1515
<body>
16-
<div id="root"></div>
16+
<div id="root" class="bg-primary"></div>
1717
<script type="module" src="/src/main.tsx"></script>
1818
</body>
1919
</html>

‎src/components/Features.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Users, CircleHelp, BookOpen } from "lucide-react";
33
export default function Features() {
44
return (
55
<section className="bg-background py-20">
6-
<div className="outer">
7-
<div className="inner">
6+
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
7+
<div className="inner rounded-lg flex gap-x-6 py-6 px-4">
88
<div className="flex-1 flex flex-col items-center text-center py-6">
99
<Users size={48} className="text-accent mb-2" />
1010
<h3 className="text-secondary text-xl mb-2 font-mono">

‎src/components/Showcase.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export default function Showcase() {
66
<h2 className="text-xl md:text-xl lg:text-4xl mb-6 text-primary">
77
Community Showcase
88
</h2>
9-
<div className="flex flex-1">
10-
<div className="outer">
11-
<div className="inner min-h-full">
9+
<div className="flex flex-1 gap-1 mx-4">
10+
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
11+
<div className="inner rounded-lg py-6 px-4">
1212
<div className="flex-1 flex flex-col text-center px-6 py-6">
1313
<div className="flex flex-1 justify-start">
1414
<Smile size={48} className="text-accent mb-2 mr-4" />
@@ -24,8 +24,8 @@ export default function Showcase() {
2424
</div>
2525
</div>
2626
</div>
27-
<div className="outer">
28-
<div className="inner min-h-full">
27+
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
28+
<div className="inner rounded-lg py-6 px-4">
2929
<div className="flex-1 flex flex-col text-center px-6 py-6">
3030
<div className="flex flex-1 justify-start">
3131
<Smile size={48} className="text-accent mb-2 mr-4" />
@@ -41,8 +41,8 @@ export default function Showcase() {
4141
</div>
4242
</div>
4343
</div>
44-
<div className="outer">
45-
<div className="inner min-h-full">
44+
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
45+
<div className="inner rounded-lg py-6 px-4">
4646
<div className="flex-1 flex flex-col text-center px-6 py-6">
4747
<div className="flex flex-1 justify-start">
4848
<Smile size={48} className="text-accent mb-2 mr-4" />
@@ -59,8 +59,6 @@ export default function Showcase() {
5959
</div>
6060
</div>
6161
</div>
62-
{/* </div>*/}
63-
{/*</div>*/}
6462
</section>
6563
);
6664
}

‎src/index.css‎

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
#root {
6-
background-color: #240e1f;
7-
}
8-
95
#hero {
10-
background-color: rgb(36, 14, 31);
116
background-image: radial-gradient(
127
circle at 70% 60%,
138
rgba(36, 14, 31, 0.2) 00%,
149
rgba(36, 14, 31, 0.6) 10%,
1510
rgba(36, 14, 31, 0.87) 40%
1611
),
1712
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");
18-
background-blend-mode: normal;
1913
}
2014

2115
.outer {
@@ -26,83 +20,22 @@
2620
rgba(0, 17, 34, 0.4),
2721
rgba(0, 17, 34, 0.733)
2822
);
29-
background-clip: border-box;
30-
background-origin: padding-box;
31-
border: 1px solid rgba(255, 170, 170, 0.733);
32-
border-radius: 16px;
3323
box-shadow:
3424
rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset,
3525
rgba(93, 50, 50, 0.3) 0px 50px 100px -20px,
3626
rgba(0, 0, 0, 0.5) 0px 30px 60px -30px,
3727
rgba(178, 161, 103, 0.3) -10px 10px 60px -10px;
38-
box-sizing: border-box;
39-
color: rgb(51, 51, 56);
40-
font-family:
41-
"Inter var",
42-
system-ui,
43-
-apple-system,
44-
BlinkMacSystemFont,
45-
"Segoe UI",
46-
Ubuntu,
47-
Roboto,
48-
Cantarell,
49-
"Noto Sans",
50-
sans-serif,
51-
"Apple Color Emoji",
52-
"Segoe UI Emoji",
53-
"Segoe UI Symbol",
54-
"Noto Color Emoji";
55-
font-feature-settings: "cv05", "ss01", "ss03", "zero";
56-
font-size: 16px;
57-
line-height: 24px;
58-
max-width: 1200px;
59-
padding: 9.6px;
60-
text-align: center;
61-
margin: 0 auto;
6228
}
6329

6430
.inner {
65-
align-items: flex-start;
6631
background: repeating-conic-gradient(
6732
rgba(0, 0, 0, 0.067) 0deg,
6833
rgba(0, 0, 0, 0.067) 0.0001%,
6934
rgba(0, 0, 0, 0) 0deg,
7035
rgba(0, 0, 0, 0) 0.0002%
7136
),
7237
rgba(0, 17, 34, 0.533);
73-
background-clip: border-box;
74-
background-origin: padding-box;
75-
border-radius: 9.6px;
7638
box-shadow:
7739
rgba(82, 0, 0, 0.6) 0px 1px 1px 0px inset,
7840
rgba(93, 50, 59, 0.7) 0px 5px 10px 0px;
79-
box-sizing: border-box;
80-
color: rgb(255, 255, 255);
81-
column-gap: 24px;
82-
display: flex;
83-
flex-wrap: wrap;
84-
font-family:
85-
"Inter var",
86-
system-ui,
87-
-apple-system,
88-
BlinkMacSystemFont,
89-
"Segoe UI",
90-
Ubuntu,
91-
Roboto,
92-
Cantarell,
93-
"Noto Sans",
94-
sans-serif,
95-
"Apple Color Emoji",
96-
"Segoe UI Emoji",
97-
"Segoe UI Symbol",
98-
"Noto Color Emoji";
99-
font-feature-settings: "cv05", "ss01", "ss03", "zero";
100-
font-size: 16px;
101-
justify-content: center;
102-
line-height: 24px;
103-
margin: 0;
104-
padding: 24px 16px;
105-
/* position: relative; */
106-
row-gap: 24px;
107-
text-align: left;
10841
}

‎tailwind.config.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
export default {
33
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
44
theme: {
5-
colors: {
6-
background: "#b3b3b3",
7-
// background: "#4d4d4d",
8-
primary: "#240e1f",
9-
secondary: "#c08021",
10-
accent: "#e96932",
5+
extend: {
6+
colors: {
7+
background: "#b3b3b3",
8+
// background: "#4d4d4d",
9+
primary: "#240e1f",
10+
secondary: "#c08021",
11+
accent: "#e96932",
12+
},
1113
},
12-
extend: {},
1314
},
1415
plugins: [],
1516
};

0 commit comments

Comments
 (0)