Skip to content

Commit 5461a12

Browse files
AymenFJAAymenFJA
committed
align theme
1 parent 854c1e2 commit 5461a12

1 file changed

Lines changed: 192 additions & 28 deletions

File tree

‎docs/css/extra.css‎

Lines changed: 192 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,224 @@
1-
/* Background like landing page */
1+
/* Import fonts */
2+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
3+
4+
/* Root theme variables */
5+
:root {
6+
--primary-cyan: #00f5ff;
7+
--primary-pink: #ff0080;
8+
--primary-purple: #8a2be2;
9+
--primary-green: #00ff41;
10+
--glass-bg: rgba(255, 255, 255, 0.05);
11+
--glass-border: rgba(255, 255, 255, 0.1);
12+
--text-primary: #ffffff;
13+
--text-secondary: #cccccc;
14+
}
15+
16+
/* Background animation */
217
body {
318
background: linear-gradient(45deg, #0a0a0a, #1a1a2e, #16213e, #0f3460);
419
background-size: 400% 400%;
520
animation: gradientFlow 15s ease infinite;
6-
color: #fff;
721
}
822

9-
/* Gradient animation */
1023
@keyframes gradientFlow {
1124
0% { background-position: 0% 50%; }
1225
50% { background-position: 100% 50%; }
1326
100% { background-position: 0% 50%; }
1427
}
1528

16-
/* Nav bar glass effect */
17-
.md-header, .md-tabs {
18-
background: rgba(255, 255, 255, 0.05) !important;
19-
backdrop-filter: blur(12px);
29+
/* Header */
30+
.md-header {
31+
background: #0a0a0a; /* solid dark background */
32+
backdrop-filter: blur(12px); /* optional */
2033
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
2134
}
2235

23-
/* Headings gradient */
24-
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
25-
background: linear-gradient(135deg, #00f5ff, #ff0080, #8a2be2, #00ff41);
36+
37+
.md-header__inner {
38+
width: 100%;
39+
max-width: 1200px;
40+
margin: 0 auto;
41+
display: flex;
42+
align-items: center;
43+
justify-content: space-between;
44+
gap: 2rem; /* uniform spacing between logo, search, tabs */
45+
}
46+
47+
/* Logo/title */
48+
.md-header__title {
49+
font-size: 1rem;
50+
font-weight: 700;
51+
color: var(--primary-cyan);
52+
text-decoration: none;
53+
font-family: 'Space Grotesk', sans-serif;
54+
flex-shrink: 0;
55+
margin-right: 10rem; /* extra spacing between logo and search bar */
56+
}
57+
58+
59+
60+
/* Search */
61+
.md-search {
62+
flex: 1;
63+
display: flex;
64+
justify-content: center;
65+
margin: 0 -4rem; /* spacing from logo and tabs */
66+
}
67+
.md-search__form {
68+
background: rgba(20, 20, 20, 0.85);
69+
border-radius: 25px;
70+
border: 1px solid rgba(255, 255, 255, 0.2);
71+
min-width: 300px;
72+
max-width: 500px;
73+
width: 100%;
74+
}
75+
.md-search__input {
76+
background: transparent;
77+
color: #fff;
78+
font-size: 1rem;
79+
font-weight: 500;
80+
text-shadow: 0 0 2px rgba(0,0,0,0.7);
81+
}
82+
83+
/* Tabs aligned right */
84+
.md-tabs {
85+
background: transparent;
86+
display: flex;
87+
align-items: center;
88+
height: 2px !important;
89+
margin-left: 3rem; /* extra spacing from search bar */
90+
}
91+
.md-tabs__list {
92+
list-style: none;
93+
display: flex;
94+
gap: 2rem; /* spacing between individual tabs */
95+
margin: 0;
96+
padding: 0;
97+
}
98+
99+
/* Buttons */
100+
.md-header__button,
101+
.md-header__source {
102+
color: #ffffff;
103+
transition: all 0.3s ease;
104+
}
105+
.md-header__button:hover,
106+
.md-header__source:hover {
107+
color: var(--primary-cyan);
108+
transform: scale(1.05);
109+
}
110+
111+
/* Responsive header */
112+
@media (max-width: 768px) {
113+
.md-header__inner {
114+
flex-wrap: wrap;
115+
gap: 1rem; /* maintain spacing when wrapping */
116+
}
117+
.md-search {
118+
order: 3;
119+
width: 100%;
120+
margin: 0.5rem 0;
121+
}
122+
.md-tabs {
123+
order: 4;
124+
width: 100%;
125+
justify-content: center;
126+
margin-left: 0; /* remove left margin on mobile */
127+
}
128+
}
129+
/* Typography */
130+
.md-typeset h1 {
131+
font-size: clamp(2rem, 5vw, 3.5rem);
132+
font-weight: 700;
133+
margin-bottom: 2rem;
134+
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-pink), var(--primary-purple), var(--primary-green));
135+
background-size: 300% 300%;
26136
-webkit-background-clip: text;
27-
color: transparent;
137+
background-clip: text;
138+
-webkit-text-fill-color: transparent;
139+
animation: titleGlow 3s ease-in-out infinite alternate;
140+
}
141+
@keyframes titleGlow {
142+
0% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.3)); }
143+
100% { background-position: 100% 50%; filter: drop-shadow(0 0 40px rgba(255, 0, 128, 0.4)); }
144+
}
145+
.md-typeset h2 {
146+
font-size: clamp(1.5rem, 4vw, 2.5rem);
147+
font-weight: 600;
148+
background: linear-gradient(135deg, var(--primary-cyan), var(--text-primary));
149+
-webkit-background-clip: text;
150+
background-clip: text;
151+
-webkit-text-fill-color: transparent;
152+
}
153+
.md-typeset h3 {
154+
font-size: clamp(1.2rem, 3vw, 1.8rem);
155+
font-weight: 500;
156+
color: var(--primary-cyan);
28157
}
29158

30159
/* Links */
31160
.md-typeset a {
32-
color: #00f5ff;
161+
color: var(--primary-cyan);
33162
font-weight: 500;
34-
transition: color 0.3s ease;
163+
transition: all 0.3s ease;
164+
text-decoration: none;
35165
}
36-
37166
.md-typeset a:hover {
38-
color: #ff0080;
167+
color: var(--primary-pink);
168+
text-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
39169
}
40170

41171
/* Code blocks */
42-
.highlight {
43-
background: rgba(255, 255, 255, 0.05) !important;
44-
border-radius: 8px;
45-
padding: 1rem;
172+
.md-typeset pre,
173+
.md-typeset code {
174+
background: rgba(0, 0, 0, 0.4);
175+
border: 1px solid rgba(255, 255, 255, 0.1);
176+
border-radius: 10px;
177+
font-family: 'JetBrains Mono', monospace;
178+
color: var(--text-secondary);
179+
}
180+
.md-typeset code {
181+
padding: 0.2em 0.4em;
182+
background: rgba(0, 245, 255, 0.1);
183+
border: 1px solid rgba(0, 245, 255, 0.2);
184+
color: var(--primary-cyan);
46185
}
47186

48-
/* Buttons like landing page */
49-
.md-button {
50-
background: linear-gradient(135deg, #00f5ff, #ff0080);
51-
color: #fff;
187+
/* Sidebar */
188+
.md-sidebar {
189+
background: rgba(255, 255, 255, 0.02);
190+
backdrop-filter: blur(10px);
191+
border-right: 1px solid rgba(255, 255, 255, 0.05);
192+
}
193+
.md-nav__title {
194+
color: var(--primary-cyan);
52195
font-weight: 600;
53-
border-radius: 25px;
54-
padding: 0.6rem 1.5rem;
55-
transition: transform 0.3s ease;
196+
}
197+
.md-nav__link {
198+
color: var(--text-secondary);
199+
transition: all 0.3s ease;
200+
}
201+
.md-nav__link:hover,
202+
.md-nav__link--active {
203+
color: var(--primary-cyan);
56204
}
57205

58-
.md-button:hover {
59-
transform: scale(1.05);
206+
/* Footer */
207+
.md-footer {
208+
background: rgba(255, 255, 255, 0.05);
209+
backdrop-filter: blur(20px);
210+
border-top: 1px solid rgba(255, 255, 255, 0.1);
211+
color: var(--text-secondary);
60212
}
213+
214+
/* Scrollbar */
215+
::-webkit-scrollbar { width: 8px; }
216+
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
217+
::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary-cyan), var(--primary-pink)); border-radius: 4px; }
218+
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--primary-pink), var(--primary-cyan)); }
219+
220+
/* Selection */
221+
::selection { background: rgba(0, 245, 255, 0.3); color: var(--text-primary); }
222+
.md-tabs__link[href$="/"] {
223+
display: none !important;
224+
}

0 commit comments

Comments
 (0)