Skip to content

Commit 06caa82

Browse files
authored
Add custom CSS for light and lab page themes
1 parent 46a6567 commit 06caa82

1 file changed

Lines changed: 80 additions & 0 deletions

File tree

‎assets/css/custom.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* --- 1. THEME RESTORATION (FORCING LIGHT MODE) --- */
2+
/* This is the default for all pages that ARE NOT the lab page. */
3+
4+
/* Force light background on body */
5+
body:not(.lab-page-bg) {
6+
background-color: #ffffff !important;
7+
color: #333 !important;
8+
}
9+
/* Force light background on theme's structural elements */
10+
body:not(.lab-page-bg) #main,
11+
body:not(.lab-page-bg) .page__content,
12+
body:not(.lab-page-bg) .initial-content,
13+
body:not(.lab-page-bg) .page__footer {
14+
background-color: #ffffff !important;
15+
color: #333 !important;
16+
background-image: none !important;
17+
}
18+
/* Hide the background layer on non-lab pages */
19+
body:not(.lab-page-bg) .site-background {
20+
display: none !important;
21+
}
22+
23+
/* --- 2. TARGETED LAB PAGE STYLES (CLOUDS PAGE ONLY) --- */
24+
25+
/* Keyframes for the animation */
26+
@keyframes cloud-drift {
27+
0% { background-position-x: 0; }
28+
100% { background-position-x: 100%; }
29+
}
30+
31+
/* Lab page body (dark sky) */
32+
body.lab-page-bg {
33+
background-color: #0d0d0d !important;
34+
color: #e0e0e0 !important;
35+
}
36+
37+
/* Lab page fixed background layer */
38+
.lab-page-bg .site-background {
39+
position: fixed !important;
40+
top: 0; left: 0; width: 100%; height: 100%;
41+
z-index: -1 !important;
42+
display: block !important;
43+
44+
/* * THE FINAL IMAGE PATH.
45+
* We use the simplest, absolute path because your baseurl is ""
46+
* This path is correct. If it fails, the image file is not at this location.
47+
*/
48+
background-image:
49+
linear-gradient(to bottom,
50+
rgba(13, 13, 13, 0) 0%,
51+
rgba(13, 13, 13, 1) 100%
52+
),
53+
url("/assets/images/clouds_lab.png") !important;
54+
55+
background-attachment: fixed !important;
56+
background-position: center top !important;
57+
background-size: auto 100vh !important;
58+
background-repeat: repeat-x !important;
59+
animation: cloud-drift 120s linear infinite !important;
60+
}
61+
62+
/* Lab page content box (dark, readable) */
63+
.lab-page-bg #main,
64+
.lab-page-bg .page__content {
65+
background-color: rgba(10, 10, 10, 0.98) !important;
66+
padding: 30px !important;
67+
margin: 40px auto !important;
68+
max-width: 900px !important;
69+
border-radius: 10px !important;
70+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9) !important;
71+
color: #e0e0e0 !important;
72+
}
73+
74+
/* Lab page headings/links */
75+
.lab-page-bg h1, .lab-page-bg h2, .lab-page-bg h3, .lab-page-bg h4 {
76+
color: #ffffff !important;
77+
}
78+
.lab-page-bg a {
79+
color: #87ceeb !important;
80+
}

0 commit comments

Comments
 (0)