Skip to content

Commit f8cfa80

Browse files
maskedsyntaxmaskedsyntax
committed
wip(ui): udpate ui for home page
the homepage looks nice, but mobile responsiveness and polishing the dark theme is wip
1 parent 6af4c5a commit f8cfa80

5 files changed

Lines changed: 392 additions & 483 deletions

File tree

‎css/styles.css‎

Lines changed: 169 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,37 @@
1-
/* @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
22

33
.space-mono-regular {
4-
font-family: "Space Mono", monospace;
5-
font-weight: 400;
6-
font-style: normal;
4+
font-family: "Space Mono", monospace;
5+
font-weight: 400;
6+
font-style: normal;
77
}
88

99
.space-mono-bold {
10-
font-family: "Space Mono", monospace;
11-
font-weight: 700;
12-
font-style: normal;
10+
font-family: "Space Mono", monospace;
11+
font-weight: 700;
12+
font-style: normal;
1313
}
1414

1515
.space-mono-regular-italic {
16-
font-family: "Space Mono", monospace;
17-
font-weight: 400;
18-
font-style: italic;
16+
font-family: "Space Mono", monospace;
17+
font-weight: 400;
18+
font-style: italic;
1919
}
2020

2121
.space-mono-bold-italic {
22-
font-family: "Space Mono", monospace;
23-
font-weight: 700;
24-
font-style: italic;
22+
font-family: "Space Mono", monospace;
23+
font-weight: 700;
24+
font-style: italic;
2525
}
2626

27-
2827
body {
29-
font-family: 'Space Mono', monospace;
28+
font-family: "Space Mono", monospace;
3029
background: #0a0a0a;
30+
/* Note: This overrides the Tailwind body bg; consider removing if conflicting */
31+
}
32+
33+
.hero-header {
34+
text-shadow: 4px 4px 0px #7c6f64;
3135
}
3236

3337
.leaf-icon {
@@ -70,30 +74,87 @@ body {
7074
background-clip: text;
7175
}
7276

77+
.cta-button {
78+
display: inline-block;
79+
padding: 1rem 2rem;
80+
background: #427b58;
81+
color: #fbf1c7;
82+
text-decoration: none;
83+
font-weight: bold;
84+
border: 3px solid #000;
85+
/*transform: translate(0, 0);*/
86+
transition: all 0.2s ease;
87+
font-size: 1.1rem;
88+
box-shadow: 6px 6px 0 #000;
89+
}
90+
91+
.cta-button:hover {
92+
transform: translate(-4px, -4px);
93+
box-shadow: 8px 8px 0px #000;
94+
}
95+
96+
.navbar-button.active {
97+
display: inline-block;
98+
padding: 0.5rem 1rem;
99+
background: #427b58;
100+
color: #fbf1c7;
101+
text-decoration: none;
102+
font-weight: bold;
103+
border: 3px solid #000;
104+
/*transform: translate(0, 0);*/
105+
transition: all 0.2s ease;
106+
/* font-size: 1.1rem; */
107+
box-shadow: 4px 4px 0 #000;
108+
}
109+
73110
.mission-section {
74111
background: rgba(17, 24, 39, 0.5);
75112
backdrop-filter: blur(10px);
76113
border: 1px solid #374151;
77114
}
78115

79-
80116
@keyframes typing {
81-
from { width: 0 }
82-
to { width: 100% }
117+
from {
118+
width: 0;
119+
}
120+
121+
to {
122+
width: 100%;
123+
}
83124
}
84125

85126
@keyframes blink-caret {
86-
from, to { border-color: transparent }
87-
50% { border-color: #10b981; }
127+
128+
from,
129+
to {
130+
border-color: transparent;
131+
}
132+
133+
50% {
134+
border-color: #10b981;
135+
}
88136
}
89137

90138
.fade-in {
91139
animation: fadeIn 1s ease-in;
92140
}
93141

94142
@keyframes fadeIn {
95-
from { opacity: 0; transform: translateY(20px); }
96-
to { opacity: 1; transform: translateY(0); }
143+
from {
144+
opacity: 0;
145+
transform: translateY(20px);
146+
}
147+
148+
to {
149+
opacity: 1;
150+
transform: translateY(0);
151+
}
152+
}
153+
154+
/* Content Sections */
155+
.section {
156+
padding: 4rem 0;
157+
border-bottom: 3px solid var(--bg1);
97158
}
98159

99160
.social-icon {
@@ -103,134 +164,130 @@ body {
103164
.social-icon:hover {
104165
color: #10b981;
105166
transform: translateY(-2px);
106-
} */
107-
108-
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
109-
110-
.space-mono-regular {
111-
font-family: "Space Mono", monospace;
112-
font-weight: 400;
113-
font-style: normal;
114167
}
115168

116-
.space-mono-bold {
117-
font-family: "Space Mono", monospace;
118-
font-weight: 700;
119-
font-style: normal;
169+
/* HashPrep Section */
170+
.product-header {
171+
display: flex;
172+
align-items: center;
173+
gap: 1rem;
174+
margin-bottom: 1.5rem;
120175
}
121176

122-
.space-mono-regular-italic {
123-
font-family: "Space Mono", monospace;
124-
font-weight: 400;
125-
font-style: italic;
177+
.product-logo {
178+
font-size: 3rem;
179+
font-weight: bold;
180+
background: linear-gradient(45deg, #8f3f71, #b16286);
181+
-webkit-background-clip: text;
182+
-webkit-text-fill-color: transparent;
183+
background-clip: text;
126184
}
127185

128-
.space-mono-bold-italic {
129-
font-family: "Space Mono", monospace;
130-
font-weight: 700;
131-
font-style: italic;
186+
.beta-badge {
187+
background: #d3869b;
188+
color: var(--bg);
189+
padding: 0.25rem 0.75rem;
190+
font-size: 0.8rem;
191+
font-weight: bold;
192+
border: 2px solid #8f3f71;
193+
transform: rotate(-3deg);
132194
}
133195

134-
body {
135-
font-family: 'Space Mono', monospace;
136-
background: #0a0a0a; /* Note: This overrides the Tailwind body bg; consider removing if conflicting */
196+
.hashprep-description {
197+
/* font-size: 1.1rem; */
198+
color: var(--fg2);
199+
margin-bottom: 2rem;
137200
}
138201

139-
.leaf-icon {
140-
width: 24px;
141-
height: 24px;
142-
background: linear-gradient(135deg, #10b981, #059669);
143-
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
202+
.hashprep-description strong {
203+
color: var(--accent);
144204
}
145205

146-
.nav-item {
147-
position: relative;
148-
transition: all 0.3s ease;
206+
.feature-grid {
207+
display: grid;
208+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
209+
gap: 1.5rem;
210+
margin-top: 2rem;
149211
}
150212

151-
.nav-item:hover {
152-
text-decoration: underline;
153-
text-decoration-thickness: 1px;
213+
.feature-item {
214+
background: #fbf1c7;
215+
border: 2px solid #32302f;
216+
padding: 1.5rem;
217+
border-left: 5px solid #427b58;
154218
}
155219

156-
.github-btn {
157-
background: linear-gradient(135deg, #689d6a, #427b58);
158-
transition: all 0.3s ease;
220+
.feature-item h4 {
221+
color: #427b58;
222+
font-weight: bold;
223+
font-size: 1.1rem;
224+
margin-bottom: 0.5rem;
159225
}
160226

161-
.mission-btn {
162-
border: 1px solid #374151;
163-
transition: all 0.3s ease;
164-
backdrop-filter: blur(10px);
227+
.feature-item p {
228+
color: #1d1d1d;
165229
}
166230

167-
.mission-btn:hover {
168-
border-color: #10b981;
169-
background: rgba(16, 185, 129, 0.1);
170-
}
171231

172-
.hero-text {
173-
background: linear-gradient(135deg, #ffffff, #d1d5db);
174-
-webkit-background-clip: text;
175-
-webkit-text-fill-color: transparent;
176-
background-clip: text;
232+
/* Ensure nav height is accounted for in positioning */
233+
nav {
234+
min-height: 64px;
235+
/* Matches approximate nav height with padding */
177236
}
178237

179-
.mission-section {
180-
background: rgba(17, 24, 39, 0.5);
181-
backdrop-filter: blur(10px);
182-
border: 1px solid #374151;
238+
/* Mission Section */
239+
.mission-grid {
240+
display: grid;
241+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
242+
gap: 2rem;
243+
margin-top: 2rem;
183244
}
184245

185-
@keyframes typing {
186-
from { width: 0 }
187-
to { width: 100% }
188-
}
246+
.mission-card {
247+
background: #fbf1c7;
248+
border: 3px solid #427b58;
249+
padding: 2rem;
250+
transform: translate(0, 0);
251+
transition: all 0.2s ease;
252+
box-shadow: 8px 8px 0px #427b58;
189253

190-
@keyframes blink-caret {
191-
from, to { border-color: transparent }
192-
50% { border-color: #10b981; }
193254
}
194255

195-
.fade-in {
196-
animation: fadeIn 1s ease-in;
256+
.mission-card:hover {
257+
/* transform: translate(-4px, -4px); */
258+
/* box-shadow: 8px 8px 0px #427b58; */
197259
}
198260

199-
@keyframes fadeIn {
200-
from { opacity: 0; transform: translateY(20px); }
201-
to { opacity: 1; transform: translateY(0); }
261+
.mission-card h3 {
262+
font-weight: bold;
263+
color: #427b58;
264+
margin-bottom: 1rem;
265+
font-size: 1.3rem;
202266
}
203267

204-
.social-icon {
205-
transition: all 0.3s ease;
268+
.mission-card p {
269+
color: #1d1d1d;
206270
}
207271

208-
.social-icon:hover {
209-
color: #10b981;
210-
transform: translateY(-2px);
211-
}
212272

213-
/* Custom Media Queries for Mobile Menu (beyond Tailwind) */
214-
@media (max-width: 639px) {
215-
#nav-links {
216-
transition: all 0.3s ease-in-out;
273+
@media (max-width: 768px) {
274+
275+
.product-header {
276+
flex-direction: column;
277+
align-items: flex-start;
278+
gap: 0.5rem;
217279
}
218-
}
219280

220-
/* Custom Media Queries for Mobile Menu */
221-
@media (max-width: 639px) {
222-
#nav-links {
223-
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
224-
opacity: 0;
225-
transform: translateY(-10px);
281+
.product-logo {
282+
font-size: 2.5rem;
226283
}
227-
#nav-links:not(.hidden) {
228-
opacity: 1;
229-
transform: translateY(0);
284+
285+
.feature-grid {
286+
grid-template-columns: 1fr;
287+
gap: 1.5rem;
230288
}
231-
}
232289

233-
/* Ensure nav height is accounted for in positioning */
234-
nav {
235-
min-height: 64px; /* Matches approximate nav height with padding */
290+
.feature-item {
291+
padding: 1.5rem;
292+
}
236293
}

0 commit comments

Comments
 (0)