madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madeydanny.uk
danielmorrisey.com
html
css
javascript
hosted-on-wisp
1:root {
2 --bg: #121212;
3 --panel: #1e1e1e;
4 --muted: #888;
5 --text: #e0e0e0;
6 --accent: #f71900;
7 --radius: 12px;
8 --gap: 20px;
9}
10
11body {
12 font-family: 'Fira Code', monospace;
13 background-color: var(--bg);
14 color: var(--text);
15 margin: 40px;
16 line-height: 1.6;
17}
18
19.center {
20 max-width: 800px;
21 margin: 0 auto;
22}
23
24h1 {
25 text-align: center;
26 margin-bottom: 10px;
27}
28
29p {
30 text-align: center;
31 color: var(--muted);
32}
33
34ul, ol {
35 color: var(--text);
36 padding-left: 20px;
37}
38
39li {
40 margin-bottom: 6px;
41}
42
43a {
44 color: var(--accent);
45 text-decoration: none;
46}
47/* Card */
48.card {
49 background-color: var(--panel);
50 padding: 22px;
51 border-radius: var(--radius);
52 margin-top: 20px;
53 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
54 transition: transform 0.3s ease, box-shadow 0.3s ease;
55}
56.card:hover {
57 transform: translateY(-4px);
58 box-shadow: 0 8px 16px rgba(0,0,0,0.25);
59}
60
61.heading {
62 font-size: 18px;
63 margin-bottom: 14px;
64 font-weight: 600;
65}
66
67/* Drop Zone */
68.drop-zone {
69 background-color: #2a2a2a;
70 border: 2px dashed #444;
71 border-radius: var(--radius);
72 padding: 30px;
73 text-align: center;
74 margin-bottom: 18px;
75 cursor: pointer;
76 transition: border-color 0.3s ease, background-color 0.3s ease;
77}
78.drop-zone.drag-over {
79 border-color: var(--accent);
80 background-color: #1b1b1b;
81}
82.drop-zone p {
83 margin: 0;
84 color: var(--muted);
85}
86
87/* Checkbox + Button */
88.checkbox-label {
89 display: flex;
90 align-items: center;
91 gap: 8px;
92 color: var(--text);
93 font-size: 14px;
94 margin-bottom: 16px;
95}
96
97.btn {
98 background: var(--accent);
99 color: white;
100 border: none;
101 border-radius: 8px;
102 padding: 10px 16px;
103 font-family: 'Fira Code', monospace;
104 cursor: pointer;
105 transition: background 0.2s ease, transform 0.2s ease, filter 0.2s ease;
106 display: flex;
107 align-items: center;
108 justify-content: center;
109 gap: 6px;
110 width: 100%;
111}
112.btn:hover {
113 filter: brightness(1.15);
114 transform: translateY(-2px);
115}
116
117.result {
118 margin-top: 16px;
119 text-align: center;
120 word-break: break-all;
121}
122.result a {
123 color: var(--accent);
124}
125
126/* Stats Section */
127.stats {
128 margin-top: 10px;
129 display: flex;
130 justify-content: center;
131 gap: 1rem;
132 flex-wrap: wrap;
133 margin-bottom: 1rem;
134}
135.stat-box {
136 background: var(--panel);
137 border-radius: 10px;
138 padding: 0.8rem 1.2rem;
139 text-align: center;
140 min-width: calc(33% - 3rem);
141}
142.stat-box p {
143 margin: 0;
144 font-size: 13px;
145 color: var(--muted);
146}
147.stat-box h1 {
148 margin: 4px 0 0 0;
149 color: var(--accent);
150 font-weight: 600;
151 font-size: 20px;
152}
153
154/* Features / Docs Section */
155.features-card ul,
156.docs-card ol {
157 margin: 0;
158 padding-left: 20px;
159}
160.features-card li,
161.docs-card li {
162 margin-bottom: 8px;
163}
164
165/* Footer */
166footer {
167 text-align: center;
168 margin-top: 40px;
169}
170hr {
171 border: 0;
172 height: 1px;
173 background: #333;
174 margin: 30px 0;
175}
176
177/* Optional responsive tweaks */
178@media (max-width: 600px) {
179 body {
180 margin: 20px;
181 }
182 .stats {
183 flex-direction: column;
184 align-items: center;
185 }
186 .stat-box {
187 min-width: unset;
188 width: 80%;
189 }
190}
191header2 {
192 display: flex;
193 justify-content: space-between;
194 align-items: center;
195 max-width: 900px;
196 margin: 0 auto 1.5rem;
197}
198header2 h1 {
199 font-size: 1.2rem;
200 margin: 0;
201 color: var(--accent);
202}
203nav a {
204 color: #eaeaea;
205 text-decoration: none;
206 margin-left: 1rem;
207}
208nav a:hover {
209 color: var(--accent);
210}