Skip to content

Commit d5f60aa

Browse files
ThatOneYoshiThatOneYoshi
committed
watch ts fix after a copy & paste 😭
1 parent 58d698d commit d5f60aa

2 files changed

Lines changed: 349 additions & 1 deletion

File tree

‎blogs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Yoshi's lil blogs ig</title>
77
<link rel="icon" href="/media/onekoicon.gif" type="image/gif">
8-
<link rel="stylesheet" href="/styles.css">
8+
<link rel="stylesheet" href="styles.css">
99
<script>
1010
function getRandYoncat() {
1111
return Math.floor(Math.random() * 9) + 1;

‎blogs/styles.css‎

Lines changed: 348 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
/* Heyo if your looking at this, im trying to find someone to make an actual CSS for me as this CSS is AI made and i dont like how it came out but if you know how to code PLEASE reach to me via discord or email in the contact page :3*/
2+
3+
:root {
4+
--wiiu-dark: #1a1a1a;
5+
--wiiu-darker: #0d0d0d;
6+
--wiiu-accent: #00a3e0;
7+
--wiiu-hover: #00c3ff;
8+
--wiiu-white: #FFFFFF;
9+
--wiiu-gray: #2a2a2a;
10+
--wiiu-light-gray: #3a3a3a;
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
font-family: "Helvetica Neue", Arial, sans-serif;
21+
background: linear-gradient(135deg, var(--wiiu-darker) 0%, var(--wiiu-dark) 100%);
22+
color: var(--wiiu-white);
23+
min-height: 100vh;
24+
overflow-x: hidden;
25+
}
26+
27+
header {
28+
background: rgba(26, 26, 26, 0.8);
29+
backdrop-filter: blur(10px);
30+
padding: 20px;
31+
text-align: center;
32+
border-bottom: 2px solid var(--wiiu-gray);
33+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
34+
}
35+
36+
header .logo {
37+
filter: drop-shadow(0 4px 10px rgba(0, 163, 224, 0.3));
38+
transition: transform 0.3s ease;
39+
}
40+
41+
header .logo:hover {
42+
transform: scale(1.05);
43+
}
44+
45+
.nav-menu {
46+
display: flex;
47+
justify-content: center;
48+
gap: 20px;
49+
margin-top: 20px;
50+
padding: 15px 0;
51+
flex-wrap: wrap;
52+
}
53+
54+
.nav-link {
55+
color: var(--wiiu-white);
56+
text-decoration: none;
57+
padding: 10px 25px;
58+
border-radius: 25px;
59+
background: rgba(42, 42, 42, 0.6);
60+
border: 2px solid var(--wiiu-gray);
61+
transition: all 0.3s ease;
62+
font-weight: 500;
63+
font-size: 1em;
64+
}
65+
66+
.nav-link:hover {
67+
background: linear-gradient(135deg, var(--wiiu-accent) 0%, var(--wiiu-hover) 100%);
68+
border-color: var(--wiiu-hover);
69+
transform: translateY(-2px);
70+
box-shadow: 0 4px 15px rgba(0, 163, 224, 0.4);
71+
border-bottom: 2px solid var(--wiiu-hover);
72+
}
73+
74+
.nav-link.active {
75+
background: linear-gradient(135deg, var(--wiiu-accent) 0%, var(--wiiu-hover) 100%);
76+
border-color: var(--wiiu-hover);
77+
box-shadow: 0 2px 10px rgba(0, 163, 224, 0.3);
78+
}
79+
80+
main {
81+
padding: 40px 20px;
82+
max-width: 1200px;
83+
margin: 0 auto;
84+
}
85+
86+
section {
87+
background: rgba(42, 42, 42, 0.6);
88+
backdrop-filter: blur(10px);
89+
border-radius: 20px;
90+
padding: 40px;
91+
margin: 20px 0;
92+
border: 2px solid var(--wiiu-gray);
93+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
94+
}
95+
96+
h2 {
97+
color: var(--wiiu-hover);
98+
font-size: 2em;
99+
margin-bottom: 20px;
100+
text-shadow: 0 2px 10px rgba(0, 163, 224, 0.5);
101+
}
102+
103+
p {
104+
font-size: 1.1em;
105+
line-height: 1.6;
106+
color: #e0e0e0;
107+
}
108+
109+
a {
110+
color: var(--wiiu-accent);
111+
text-decoration: none;
112+
transition: color 0.3s ease;
113+
border-bottom: 2px solid transparent;
114+
}
115+
116+
a:hover {
117+
color: var(--wiiu-hover);
118+
border-bottom: 2px solid var(--wiiu-hover);
119+
}
120+
121+
.menu-grid {
122+
display: grid;
123+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
124+
gap: 25px;
125+
padding: 20px;
126+
margin: 20px 0;
127+
}
128+
129+
.menu-item {
130+
background: linear-gradient(135deg, var(--wiiu-gray) 0%, var(--wiiu-light-gray) 100%);
131+
border-radius: 15px;
132+
padding: 30px 20px;
133+
text-align: center;
134+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
135+
cursor: pointer;
136+
border: 2px solid transparent;
137+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
138+
position: relative;
139+
overflow: hidden;
140+
}
141+
142+
.menu-item::before {
143+
content: '';
144+
position: absolute;
145+
top: 0;
146+
left: -100%;
147+
width: 100%;
148+
height: 100%;
149+
background: linear-gradient(90deg, transparent, rgba(0, 163, 224, 0.2), transparent);
150+
transition: left 0.5s ease;
151+
}
152+
153+
.menu-item:hover::before {
154+
left: 100%;
155+
}
156+
157+
.menu-item:hover {
158+
transform: translateY(-10px) scale(1.05);
159+
background: linear-gradient(135deg, var(--wiiu-accent) 0%, var(--wiiu-hover) 100%);
160+
border-color: var(--wiiu-hover);
161+
box-shadow: 0 12px 40px rgba(0, 163, 224, 0.5);
162+
}
163+
164+
.menu-item img {
165+
width: 80px;
166+
height: 80px;
167+
margin-bottom: 15px;
168+
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
169+
transition: transform 0.3s ease;
170+
}
171+
172+
.menu-item:hover img {
173+
transform: scale(1.1) rotate(5deg);
174+
}
175+
176+
.menu-item h3 {
177+
margin: 0;
178+
font-size: 1.3em;
179+
color: var(--wiiu-white);
180+
font-weight: 500;
181+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
182+
}
183+
184+
.btn {
185+
display: inline-block;
186+
background: linear-gradient(135deg, var(--wiiu-accent) 0%, var(--wiiu-hover) 100%);
187+
color: var(--wiiu-white);
188+
padding: 15px 40px;
189+
border-radius: 30px;
190+
font-size: 1.1em;
191+
font-weight: 600;
192+
text-decoration: none;
193+
border: 2px solid var(--wiiu-hover);
194+
box-shadow: 0 4px 15px rgba(0, 163, 224, 0.4);
195+
transition: all 0.3s ease;
196+
margin: 10px;
197+
}
198+
199+
.btn:hover {
200+
transform: translateY(-3px);
201+
box-shadow: 0 8px 25px rgba(0, 195, 255, 0.6);
202+
background: linear-gradient(135deg, var(--wiiu-hover) 0%, var(--wiiu-accent) 100%);
203+
border-bottom: 2px solid var(--wiiu-hover);
204+
}
205+
206+
.footer {
207+
background: rgba(26, 26, 26, 0.9);
208+
backdrop-filter: blur(10px);
209+
padding: 15px;
210+
text-align: center;
211+
position: fixed;
212+
bottom: 0;
213+
width: 100%;
214+
border-top: 2px solid var(--wiiu-gray);
215+
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
216+
color: #a0a0a0;
217+
}
218+
219+
.not-found {
220+
filter: drop-shadow(0 4px 15px rgba(255, 0, 0, 0.3));
221+
}
222+
223+
@media (max-width: 768px) {
224+
.menu-grid {
225+
grid-template-columns: repeat(2, 1fr);
226+
gap: 15px;
227+
}
228+
229+
section {
230+
padding: 25px;
231+
}
232+
233+
h2 {
234+
font-size: 1.5em;
235+
}
236+
237+
.nav-menu {
238+
gap: 10px;
239+
}
240+
241+
.nav-link {
242+
padding: 8px 20px;
243+
font-size: 0.9em;
244+
}
245+
}
246+
247+
@media (max-width: 480px) {
248+
.menu-grid {
249+
grid-template-columns: 1fr;
250+
}
251+
252+
section {
253+
padding: 20px;
254+
}
255+
256+
main {
257+
padding: 20px 10px;
258+
}
259+
260+
.nav-menu {
261+
flex-direction: column;
262+
align-items: center;
263+
gap: 10px;
264+
}
265+
266+
.nav-link {
267+
width: 80%;
268+
text-align: center;
269+
}
270+
}
271+
272+
center {
273+
display: block;
274+
text-align: center;
275+
}
276+
277+
.blog-container {
278+
max-width: 900px;
279+
margin: 0 auto;
280+
}
281+
282+
.blog-card {
283+
display: flex;
284+
background: rgba(42, 42, 42, 0.8);
285+
margin-bottom: 20px;
286+
text-decoration: none;
287+
color: var(--wiiu-white);
288+
border-radius: 15px;
289+
overflow: hidden;
290+
border: 2px solid var(--wiiu-gray);
291+
transition: all 0.3s ease;
292+
}
293+
294+
.blog-card:hover {
295+
transform: translateY(-5px);
296+
border-color: var(--wiiu-hover);
297+
box-shadow: 0 8px 25px rgba(0, 163, 224, 0.4);
298+
filter: brightness(1.1);
299+
}
300+
301+
.card-image img {
302+
width: 180px;
303+
height: 140px;
304+
object-fit: cover;
305+
display: block;
306+
border-right: 2px solid var(--wiiu-gray);
307+
}
308+
309+
.card-content {
310+
padding: 20px;
311+
flex-grow: 1;
312+
position: relative;
313+
display: flex;
314+
flex-direction: column;
315+
}
316+
317+
.card-content h3 {
318+
margin: 0;
319+
font-size: 1.4em;
320+
color: var(--wiiu-hover);
321+
}
322+
323+
.preview {
324+
font-style: italic;
325+
font-size: 1em;
326+
margin-top: 10px;
327+
color: #ccc;
328+
}
329+
330+
.date {
331+
margin-top: auto;
332+
text-align: right;
333+
font-size: 0.85em;
334+
font-weight: bold;
335+
color: var(--wiiu-accent);
336+
}
337+
338+
@media (max-width: 600px) {
339+
.blog-card {
340+
flex-direction: column;
341+
}
342+
.card-image img {
343+
width: 100%;
344+
height: 150px;
345+
border-right: none;
346+
border-bottom: 2px solid var(--wiiu-gray);
347+
}
348+
}

0 commit comments

Comments
 (0)