Skip to content

Commit 026ca23

Browse files
smeubanksmeubank
committed
update styling to be less hideous
1 parent 1f077aa commit 026ca23

10 files changed

+408
-14
lines changed

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -140,4 +140,6 @@ api/__pycache__/
140140

141141
.pytest_cache
142142
.coverage
143-
coverage.xml
143+
coverage.xml
144+
145+
blog.mdx

‎next-example/layout.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { Metadata } from "next";
2+
import localFont from "next/font/local";
3+
import "./globals.css";
4+
5+
const geistSans = localFont({
6+
src: "./fonts/GeistVF.woff",
7+
variable: "--font-geist-sans",
8+
weight: "100 900",
9+
});
10+
const geistMono = localFont({
11+
src: "./fonts/GeistMonoVF.woff",
12+
variable: "--font-geist-mono",
13+
weight: "100 900",
14+
});
15+
16+
export const metadata: Metadata = {
17+
title: "Create Next App",
18+
description: "Generated by create next app",
19+
};
20+
21+
export default function RootLayout({
22+
children,
23+
}: Readonly<{
24+
children: React.ReactNode;
25+
}>) {
26+
return (
27+
<html lang="en">
28+
<body className={`${geistSans.variable} ${geistMono.variable}`}>
29+
{children}
30+
</body>
31+
</html>
32+
);
33+
}

‎next-example/page.module.css

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
.page {
2+
--gray-rgb: 0, 0, 0;
3+
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
4+
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
5+
6+
--button-primary-hover: #383838;
7+
--button-secondary-hover: #f2f2f2;
8+
9+
display: grid;
10+
grid-template-rows: 20px 1fr 20px;
11+
align-items: center;
12+
justify-items: center;
13+
min-height: 100svh;
14+
padding: 80px;
15+
gap: 64px;
16+
font-family: var(--font-geist-sans);
17+
}
18+
19+
@media (prefers-color-scheme: dark) {
20+
.page {
21+
--gray-rgb: 255, 255, 255;
22+
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
23+
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
24+
25+
--button-primary-hover: #ccc;
26+
--button-secondary-hover: #1a1a1a;
27+
}
28+
}
29+
30+
.main {
31+
display: flex;
32+
flex-direction: column;
33+
gap: 32px;
34+
grid-row-start: 2;
35+
}
36+
37+
.main ol {
38+
font-family: var(--font-geist-mono);
39+
padding-left: 0;
40+
margin: 0;
41+
font-size: 14px;
42+
line-height: 24px;
43+
letter-spacing: -0.01em;
44+
list-style-position: inside;
45+
}
46+
47+
.main li:not(:last-of-type) {
48+
margin-bottom: 8px;
49+
}
50+
51+
.main code {
52+
font-family: inherit;
53+
background: var(--gray-alpha-100);
54+
padding: 2px 4px;
55+
border-radius: 4px;
56+
font-weight: 600;
57+
}
58+
59+
.ctas {
60+
display: flex;
61+
gap: 16px;
62+
}
63+
64+
.ctas a {
65+
appearance: none;
66+
border-radius: 128px;
67+
height: 48px;
68+
padding: 0 20px;
69+
border: none;
70+
border: 1px solid transparent;
71+
transition:
72+
background 0.2s,
73+
color 0.2s,
74+
border-color 0.2s;
75+
cursor: pointer;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
font-size: 16px;
80+
line-height: 20px;
81+
font-weight: 500;
82+
}
83+
84+
a.primary {
85+
background: var(--foreground);
86+
color: var(--background);
87+
gap: 8px;
88+
}
89+
90+
a.secondary {
91+
border-color: var(--gray-alpha-200);
92+
min-width: 180px;
93+
}
94+
95+
.footer {
96+
grid-row-start: 3;
97+
display: flex;
98+
gap: 24px;
99+
}
100+
101+
.footer a {
102+
display: flex;
103+
align-items: center;
104+
gap: 8px;
105+
}
106+
107+
.footer img {
108+
flex-shrink: 0;
109+
}
110+
111+
/* Enable hover only on non-touch devices */
112+
@media (hover: hover) and (pointer: fine) {
113+
a.primary:hover {
114+
background: var(--button-primary-hover);
115+
border-color: transparent;
116+
}
117+
118+
a.secondary:hover {
119+
background: var(--button-secondary-hover);
120+
border-color: transparent;
121+
}
122+
123+
.footer a:hover {
124+
text-decoration: underline;
125+
text-underline-offset: 4px;
126+
}
127+
}
128+
129+
@media (max-width: 600px) {
130+
.page {
131+
padding: 32px;
132+
padding-bottom: 80px;
133+
}
134+
135+
.main {
136+
align-items: center;
137+
}
138+
139+
.main ol {
140+
text-align: center;
141+
}
142+
143+
.ctas {
144+
flex-direction: column;
145+
}
146+
147+
.ctas a {
148+
font-size: 14px;
149+
height: 40px;
150+
padding: 0 16px;
151+
}
152+
153+
a.secondary {
154+
min-width: auto;
155+
}
156+
157+
.footer {
158+
flex-wrap: wrap;
159+
align-items: center;
160+
justify-content: center;
161+
}
162+
}
163+
164+
@media (prefers-color-scheme: dark) {
165+
.logo {
166+
filter: invert();
167+
}
168+
}

‎next-example/page.tsx

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import Image from "next/image";
2+
import styles from "./page.module.css";
3+
4+
export default function Home() {
5+
return (
6+
<div className={styles.page}>
7+
<main className={styles.main}>
8+
<Image
9+
className={styles.logo}
10+
src="/next.svg"
11+
alt="Next.js logo"
12+
width={180}
13+
height={38}
14+
priority
15+
/>
16+
<ol>
17+
<li>
18+
Get started by editing <code>src/app/page.tsx</code>.
19+
</li>
20+
<li>Save and see your changes instantly.</li>
21+
</ol>
22+
23+
<div className={styles.ctas}>
24+
<a
25+
className={styles.primary}
26+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
27+
target="_blank"
28+
rel="noopener noreferrer"
29+
>
30+
<Image
31+
className={styles.logo}
32+
src="/vercel.svg"
33+
alt="Vercel logomark"
34+
width={20}
35+
height={20}
36+
/>
37+
Deploy now
38+
</a>
39+
<a
40+
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
className={styles.secondary}
44+
>
45+
Read our docs
46+
</a>
47+
</div>
48+
</main>
49+
<footer className={styles.footer}>
50+
<a
51+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
>
55+
<Image
56+
aria-hidden
57+
src="/file.svg"
58+
alt="File icon"
59+
width={16}
60+
height={16}
61+
/>
62+
Learn
63+
</a>
64+
<a
65+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
>
69+
<Image
70+
aria-hidden
71+
src="/window.svg"
72+
alt="Window icon"
73+
width={16}
74+
height={16}
75+
/>
76+
Examples
77+
</a>
78+
<a
79+
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
80+
target="_blank"
81+
rel="noopener noreferrer"
82+
>
83+
<Image
84+
aria-hidden
85+
src="/globe.svg"
86+
alt="Globe icon"
87+
width={16}
88+
height={16}
89+
/>
90+
Go to nextjs.org →
91+
</a>
92+
</footer>
93+
</div>
94+
);
95+
}

‎src/components/ProductCard.vue

+15-5
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,27 @@ function addToCart() {
2424
<style scoped>
2525
.product-card {
2626
position: relative;
27-
border: 1px solid #ddd;
27+
border: 1px solid rgba(221, 221, 221, 0.5);
2828
padding: 1rem;
2929
text-align: center;
30-
background: linear-gradient(135deg, #e0d8b4, #e2dcbb, #e5e0c1, #e8e3c7, #eae7ce, #edead4, #efeedb, #f2f1e1);
31-
background-size: cover;
32-
background-position: center;
33-
height: 350px; /* Adjusted height to accommodate image and text */
30+
background: linear-gradient(135deg,
31+
rgba(224, 216, 180, 0.9),
32+
rgba(226, 220, 187, 0.85),
33+
rgba(229, 224, 193, 0.8)
34+
);
35+
backdrop-filter: blur(5px);
36+
border-radius: 8px;
37+
height: 350px;
3438
color: black;
3539
display: flex;
3640
flex-direction: column;
3741
justify-content: space-between;
42+
transition: transform 0.2s, box-shadow 0.2s;
43+
}
44+
45+
.product-card:hover {
46+
transform: translateY(-5px);
47+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
3848
}
3949
4050
.product-image {

‎src/global.css

+41-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,43 @@
11
body {
2-
background-image: url("/background-image.png");
3-
background-repeat: repeat;
4-
background-size: cover;
5-
background-repeat: no-repeat;
2+
min-height: 100vh;
3+
margin: 0;
4+
padding: 0;
5+
background: radial-gradient(
6+
circle at center,
7+
rgba(88, 236, 13, 0.2) 0%, /* Light green center */
8+
rgba(135, 232, 0, 0.15) 30%, /* Fading green */
9+
rgba(245, 245, 245, 0.95) 100% /* Light grey edge */
10+
);
11+
background-attachment: fixed;
12+
position: relative;
613
}
14+
15+
/* Add a subtle animated fog overlay */
16+
body::before {
17+
content: '';
18+
position: fixed;
19+
top: 0;
20+
left: 0;
21+
right: 0;
22+
bottom: 0;
23+
background: radial-gradient(
24+
circle at 50% 50%,
25+
transparent,
26+
rgba(135, 232, 0, 0.05) 40%,
27+
rgba(88, 236, 13, 0.1) 60%
28+
);
29+
pointer-events: none;
30+
animation: fogAnimation 15s infinite alternate;
31+
}
32+
33+
@keyframes fogAnimation {
34+
0% {
35+
opacity: 0.5;
36+
transform: scale(1);
37+
}
38+
100% {
39+
opacity: 0.8;
40+
transform: scale(1.1);
41+
}
42+
}
43+
å

0 commit comments

Comments
 (0)