Skip to content

CSS Audit #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aedwardg merged 3 commits into from
Jan 24, 2025
Merged

CSS Audit #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a85e8d
extend rather than override color palette
aedwardg Jan 23, 2025
c30b722
use tailwind for root background color
aedwardg Jan 23, 2025
ab62e6b
remove dead css and convert remaining styles to tailwind
aedwardg Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
/>
</head>
<body>
<div id="root"></div>
<div id="root" class="bg-primary"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions src/components/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Users, CircleHelp, BookOpen } from "lucide-react";
export default function Features() {
return (
<section className="bg-background py-20">
<div className="outer">
<div className="inner">
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
<div className="inner rounded-lg flex gap-x-6 py-6 px-4">
<div className="flex-1 flex flex-col items-center text-center py-6">
<Users size={48} className="text-accent mb-2" />
<h3 className="text-secondary text-xl mb-2 font-mono">
Expand Down
16 changes: 7 additions & 9 deletions src/components/Showcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ export default function Showcase() {
<h2 className="text-xl md:text-xl lg:text-4xl mb-6 text-primary">
Community Showcase
</h2>
<div className="flex flex-1">
<div className="outer">
<div className="inner min-h-full">
<div className="flex flex-1 gap-1 mx-4">
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
<div className="inner rounded-lg py-6 px-4">
<div className="flex-1 flex flex-col text-center px-6 py-6">
<div className="flex flex-1 justify-start">
<Smile size={48} className="text-accent mb-2 mr-4" />
Expand All @@ -24,8 +24,8 @@ export default function Showcase() {
</div>
</div>
</div>
<div className="outer">
<div className="inner min-h-full">
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
<div className="inner rounded-lg py-6 px-4">
<div className="flex-1 flex flex-col text-center px-6 py-6">
<div className="flex flex-1 justify-start">
<Smile size={48} className="text-accent mb-2 mr-4" />
Expand All @@ -41,8 +41,8 @@ export default function Showcase() {
</div>
</div>
</div>
<div className="outer">
<div className="inner min-h-full">
<div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
<div className="inner rounded-lg py-6 px-4">
<div className="flex-1 flex flex-col text-center px-6 py-6">
<div className="flex flex-1 justify-start">
<Smile size={48} className="text-accent mb-2 mr-4" />
Expand All @@ -59,8 +59,6 @@ export default function Showcase() {
</div>
</div>
</div>
{/* </div>*/}
{/*</div>*/}
</section>
);
}
67 changes: 0 additions & 67 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,14 @@
@tailwind components;
@tailwind utilities;

#root {
background-color: #240e1f;
}

#hero {
background-color: rgb(36, 14, 31);
background-image: radial-gradient(
circle at 70% 60%,
rgba(36, 14, 31, 0.2) 00%,
rgba(36, 14, 31, 0.6) 10%,
rgba(36, 14, 31, 0.87) 40%
),
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");
background-blend-mode: normal;
}

.outer {
Expand All @@ -26,83 +20,22 @@
rgba(0, 17, 34, 0.4),
rgba(0, 17, 34, 0.733)
);
background-clip: border-box;
background-origin: padding-box;
border: 1px solid rgba(255, 170, 170, 0.733);
border-radius: 16px;
box-shadow:
rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset,
rgba(93, 50, 50, 0.3) 0px 50px 100px -20px,
rgba(0, 0, 0, 0.5) 0px 30px 60px -30px,
rgba(178, 161, 103, 0.3) -10px 10px 60px -10px;
box-sizing: border-box;
color: rgb(51, 51, 56);
font-family:
"Inter var",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Ubuntu,
Roboto,
Cantarell,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
font-feature-settings: "cv05", "ss01", "ss03", "zero";
font-size: 16px;
line-height: 24px;
max-width: 1200px;
padding: 9.6px;
text-align: center;
margin: 0 auto;
}

.inner {
align-items: flex-start;
background: repeating-conic-gradient(
rgba(0, 0, 0, 0.067) 0deg,
rgba(0, 0, 0, 0.067) 0.0001%,
rgba(0, 0, 0, 0) 0deg,
rgba(0, 0, 0, 0) 0.0002%
),
rgba(0, 17, 34, 0.533);
background-clip: border-box;
background-origin: padding-box;
border-radius: 9.6px;
box-shadow:
rgba(82, 0, 0, 0.6) 0px 1px 1px 0px inset,
rgba(93, 50, 59, 0.7) 0px 5px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
column-gap: 24px;
display: flex;
flex-wrap: wrap;
font-family:
"Inter var",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Ubuntu,
Roboto,
Cantarell,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
font-feature-settings: "cv05", "ss01", "ss03", "zero";
font-size: 16px;
justify-content: center;
line-height: 24px;
margin: 0;
padding: 24px 16px;
/* position: relative; */
row-gap: 24px;
text-align: left;
}
15 changes: 8 additions & 7 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
colors: {
background: "#b3b3b3",
// background: "#4d4d4d",
primary: "#240e1f",
secondary: "#c08021",
accent: "#e96932",
extend: {
colors: {
background: "#b3b3b3",
// background: "#4d4d4d",
primary: "#240e1f",
secondary: "#c08021",
accent: "#e96932",
},
},
extend: {},
},
plugins: [],
};
Loading