Skip to content

Commit a8bfc15

Browse files
RandomCoderTinkerRandomCoderTinker
committed
"Added a whole bunch of CSS nonsense to make it slightly less terrible."
1 parent 8d2716d commit a8bfc15

File tree

1 file changed

+371
-0
lines changed

1 file changed

+371
-0
lines changed

‎public_html/cdn/css/docs.css‎

Lines changed: 371 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,371 @@
1+
/*
2+
* Spindle CMS
3+
* Copyright (c) 2025. All rights reserved.
4+
*
5+
* This file is part of the Spindle CMS project — a lightweight, modular PHP content framework derived from OpenCart.
6+
*
7+
* @license GNU General Public License v3.0 (GPL-3.0-or-later)
8+
* @link https://github.com/RandomCoderTinker/Spindle
9+
*/
10+
11+
:root {
12+
--bg-cream: #FFF8EA;
13+
--accent-bronze: #8B7355;
14+
--accent-bronze-light: #A0916B;
15+
--text-dark: #2F2F2F;
16+
--text-medium: #5A5A5A;
17+
--text-light: #8A8A8A;
18+
--border-light: #E8E1D3;
19+
--white: #FFFFFF;
20+
--code-bg: #F5F2EA;
21+
--border-radius: 8px;
22+
--spacing-xs: 0.5rem;
23+
--spacing-sm: 1rem;
24+
--spacing-md: 1.5rem;
25+
--spacing-lg: 2rem;
26+
--spacing-xl: 3rem;
27+
--spacing-xxl: 4rem;
28+
--max-width: 1200px;
29+
--max-width-content: 800px;
30+
--sidebar-width: 280px;
31+
}
32+
33+
/* Reset and base styles */
34+
* {
35+
margin: 0;
36+
padding: 0;
37+
box-sizing: border-box;
38+
}
39+
40+
body {
41+
font-family: 'JetBrains Mono', 'Fira Code', monospace;
42+
background-color: var(--bg-cream);
43+
color: var(--text-dark);
44+
line-height: 1.6;
45+
font-size: 16px;
46+
font-weight: 400;
47+
}
48+
49+
/* Typography */
50+
h1, h2, h3, h4, h5, h6 {
51+
font-weight: 600;
52+
line-height: 1.3;
53+
margin-bottom: var(--spacing-sm);
54+
color: var(--text-dark);
55+
}
56+
57+
h1 {
58+
font-size: 2.5rem;
59+
}
60+
61+
h2 {
62+
font-size: 2rem;
63+
margin-top: var(--spacing-xl);
64+
}
65+
66+
h3 {
67+
font-size: 1.5rem;
68+
margin-top: var(--spacing-lg);
69+
}
70+
71+
h4 {
72+
font-size: 1.25rem;
73+
margin-top: var(--spacing-md);
74+
}
75+
76+
p {
77+
margin-bottom: var(--spacing-sm);
78+
color: var(--text-medium);
79+
}
80+
81+
ul, ol {
82+
margin-bottom: var(--spacing-sm);
83+
padding-left: var(--spacing-lg);
84+
}
85+
86+
li {
87+
margin-bottom: var(--spacing-xs);
88+
color: var(--text-medium);
89+
}
90+
91+
/* Code styling */
92+
code {
93+
background-color: var(--code-bg);
94+
padding: 0.2em 0.4em;
95+
border-radius: 4px;
96+
font-size: 0.9em;
97+
color: var(--accent-bronze);
98+
border: 1px solid var(--border-light);
99+
}
100+
101+
pre {
102+
background-color: var(--code-bg);
103+
padding: var(--spacing-md);
104+
border-radius: var(--border-radius);
105+
overflow-x: auto;
106+
margin-bottom: var(--spacing-md);
107+
border: 1px solid var(--border-light);
108+
}
109+
110+
pre code {
111+
background: none;
112+
padding: 0;
113+
border: none;
114+
color: var(--text-dark);
115+
}
116+
117+
/* Layout utilities */
118+
.container {
119+
max-width: var(--max-width);
120+
margin: 0 auto;
121+
padding: 0 var(--spacing-sm);
122+
}
123+
124+
/* Header */
125+
.header {
126+
background-color: var(--bg-cream);
127+
border-bottom: 2px solid var(--border-light);
128+
padding: var(--spacing-md) 0;
129+
position: sticky;
130+
top: 0;
131+
z-index: 100;
132+
}
133+
134+
.header-content {
135+
display: flex;
136+
justify-content: space-between;
137+
align-items: center;
138+
flex-wrap: wrap;
139+
gap: var(--spacing-sm);
140+
}
141+
142+
.logo {
143+
font-size: 1.5rem;
144+
font-weight: 600;
145+
color: var(--accent-bronze);
146+
text-decoration: none;
147+
display: flex;
148+
align-items: center;
149+
}
150+
151+
.logo::before {
152+
content: "◉";
153+
margin-right: var(--spacing-xs);
154+
font-size: 1.2rem;
155+
}
156+
157+
.nav {
158+
display: flex;
159+
gap: var(--spacing-lg);
160+
list-style: none;
161+
}
162+
163+
.nav-link {
164+
color: var(--text-dark);
165+
text-decoration: none;
166+
font-weight: 400;
167+
padding: var(--spacing-xs) var(--spacing-sm);
168+
border-radius: var(--border-radius);
169+
transition: all 0.2s ease;
170+
}
171+
172+
.nav-link:hover, .nav-link.active {
173+
background-color: var(--accent-bronze);
174+
color: var(--white);
175+
}
176+
177+
/* Main layout */
178+
.docs-layout {
179+
display: grid;
180+
grid-template-columns: var(--sidebar-width) 1fr;
181+
gap: var(--spacing-xl);
182+
max-width: var(--max-width);
183+
margin: 0 auto;
184+
padding: var(--spacing-xl) var(--spacing-sm);
185+
min-height: calc(100vh - 200px);
186+
}
187+
188+
/* Sidebar */
189+
.sidebar {
190+
background-color: var(--white);
191+
padding: var(--spacing-lg);
192+
border-radius: var(--border-radius);
193+
border: 2px solid var(--border-light);
194+
position: sticky;
195+
top: calc(80px + var(--spacing-xl));
196+
height: fit-content;
197+
max-height: calc(100vh - 120px);
198+
overflow-y: auto;
199+
}
200+
201+
.sidebar h3 {
202+
color: var(--accent-bronze);
203+
margin-bottom: var(--spacing-md);
204+
font-size: 1.1rem;
205+
border-bottom: 1px solid var(--border-light);
206+
padding-bottom: var(--spacing-xs);
207+
}
208+
209+
.sidebar ul {
210+
list-style: none;
211+
padding: 0;
212+
margin-bottom: var(--spacing-lg);
213+
}
214+
215+
.sidebar li {
216+
margin-bottom: var(--spacing-xs);
217+
}
218+
219+
.sidebar a {
220+
color: var(--text-medium);
221+
text-decoration: none;
222+
display: block;
223+
padding: var(--spacing-xs) var(--spacing-sm);
224+
border-radius: 4px;
225+
transition: all 0.2s ease;
226+
font-size: 0.9rem;
227+
}
228+
229+
.sidebar a:hover, .sidebar a.active {
230+
background-color: var(--accent-bronze);
231+
color: var(--white);
232+
}
233+
234+
/* Main content */
235+
.docs-content {
236+
background-color: var(--white);
237+
padding: var(--spacing-xl);
238+
border-radius: var(--border-radius);
239+
border: 2px solid var(--border-light);
240+
}
241+
242+
/* Special content blocks */
243+
.warning, .info, .tip {
244+
padding: var(--spacing-md);
245+
border-radius: var(--border-radius);
246+
margin: var(--spacing-md) 0;
247+
border-left: 4px solid;
248+
}
249+
250+
.warning {
251+
background-color: #FEF3E2;
252+
border-left-color: #F59E0B;
253+
}
254+
255+
.info {
256+
background-color: #EFF6FF;
257+
border-left-color: #3B82F6;
258+
}
259+
260+
.tip {
261+
background-color: #F0FDF4;
262+
border-left-color: #10B981;
263+
}
264+
265+
.warning strong, .info strong, .tip strong {
266+
color: var(--text-dark);
267+
}
268+
269+
/* Table styling */
270+
table {
271+
width: 100%;
272+
border-collapse: collapse;
273+
margin: var(--spacing-md) 0;
274+
background-color: var(--white);
275+
}
276+
277+
th, td {
278+
padding: var(--spacing-sm);
279+
text-align: left;
280+
border-bottom: 1px solid var(--border-light);
281+
}
282+
283+
th {
284+
background-color: var(--code-bg);
285+
font-weight: 600;
286+
color: var(--text-dark);
287+
}
288+
289+
td {
290+
color: var(--text-medium);
291+
}
292+
293+
/* Footer */
294+
.footer {
295+
background-color: var(--text-dark);
296+
color: var(--white);
297+
padding: var(--spacing-xl) 0;
298+
text-align: center;
299+
margin-top: var(--spacing-xxl);
300+
}
301+
302+
.footer p {
303+
color: var(--white);
304+
opacity: 0.8;
305+
font-size: 0.9rem;
306+
}
307+
308+
.footer a {
309+
color: var(--accent-bronze-light);
310+
text-decoration: none;
311+
}
312+
313+
.footer a:hover {
314+
text-decoration: underline;
315+
}
316+
317+
/* Responsive design */
318+
@media (max-width: 768px) {
319+
.docs-layout {
320+
grid-template-columns: 1fr;
321+
gap: var(--spacing-lg);
322+
padding: var(--spacing-lg) var(--spacing-sm);
323+
}
324+
325+
.sidebar {
326+
position: static;
327+
max-height: none;
328+
}
329+
330+
.header-content {
331+
flex-direction: column;
332+
text-align: center;
333+
}
334+
335+
.nav {
336+
gap: var(--spacing-md);
337+
flex-wrap: wrap;
338+
justify-content: center;
339+
}
340+
341+
h1 {
342+
font-size: 2rem;
343+
}
344+
345+
h2 {
346+
font-size: 1.75rem;
347+
}
348+
}
349+
350+
@media (max-width: 480px) {
351+
.docs-content {
352+
padding: var(--spacing-lg);
353+
}
354+
355+
.nav {
356+
gap: var(--spacing-sm);
357+
}
358+
359+
.nav-link {
360+
padding: var(--spacing-xs);
361+
font-size: 0.9rem;
362+
}
363+
}
364+
365+
/* Focus states for accessibility */
366+
.nav-link:focus,
367+
.sidebar a:focus,
368+
.logo:focus {
369+
outline: 2px solid var(--accent-bronze);
370+
outline-offset: 2px;
371+
}

0 commit comments

Comments
 (0)