Skip to content

Commit 5b38419

Browse files
author
wanchufley
committed
added better visualitzation in file explorer and improved performance and load times of the page
1 parent 20a8e7e commit 5b38419

File tree

4 files changed

+233
-28
lines changed

4 files changed

+233
-28
lines changed

‎docs/stylesheets/cards.css‎

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,18 @@
1515
background-repeat: no-repeat;
1616
color: white;
1717
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
18-
transition: 0.2s ease-in-out;
18+
transform: translateZ(0);
19+
backface-visibility: hidden;
20+
will-change: transform;
21+
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
1922
min-height: 180px;
2023
display: flex;
2124
flex-direction: column;
2225
justify-content: flex-end;
2326
}
2427

2528
.card:hover {
26-
transform: translateY(-4px);
29+
transform: translateY(-4px) translateZ(0);
2730
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
2831
}
2932

@@ -51,13 +54,15 @@
5154
.md-header__button.md-logo {
5255
margin: 0;
5356
padding: 0.6rem;
54-
transition: all 0.3s ease;
57+
transform: translateZ(0);
58+
backface-visibility: hidden;
59+
will-change: transform;
60+
transition: transform 0.3s ease;
5561
background: none;
5662
}
5763

5864
.md-header__button.md-logo:hover {
59-
transform: scale(1.1) rotate(-5deg);
60-
background: none;
65+
transform: scale(1.1) rotate(-5deg) translateZ(0);
6166
}
6267

6368
.md-header__button.md-logo svg {
@@ -67,13 +72,10 @@
6772
filter: drop-shadow(3px 3px 0 rgba(255, 0, 255, 0.4))
6873
drop-shadow(-3px -3px 0 rgba(0, 255, 255, 0.4))
6974
drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
70-
transform: skew(-8deg) scaleY(1.2);
75+
transform: skew(-8deg) scaleY(1.2) translateZ(0);
7176
font-weight: 900;
7277
stroke: white;
7378
stroke-width: 1px;
74-
background: none;
75-
border: none;
76-
box-shadow: none;
7779
}
7880

7981
.md-header__button.md-logo img {
@@ -151,6 +153,7 @@
151153
font-size: 0.9rem;
152154
padding: 0.4rem 0.8rem;
153155
border-radius: 4px;
156+
transform: translateZ(0);
154157
transition: all 0.2s ease;
155158
opacity: 0.9;
156159
white-space: nowrap;
@@ -239,8 +242,7 @@ html {
239242
#1a1a2e 60%,
240243
#0a192f 80%,
241244
#000000
242-
);
243-
background-attachment: fixed;
245+
) fixed;
244246
}
245247

246248
body {
@@ -261,21 +263,74 @@ body::before {
261263
height: 100%;
262264
pointer-events: none;
263265
background-image:
264-
radial-gradient(1.5px 1.5px at 50% 50%, rgba(255, 255, 255, 0.15) 100%, transparent),
266+
radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.1) 100%, transparent),
267+
radial-gradient(1.5px 1.5px at 15% 15%, rgba(255, 255, 255, 0.15) 100%, transparent),
268+
radial-gradient(1px 1px at 20% 20%, rgba(255, 255, 255, 0.1) 100%, transparent),
265269
radial-gradient(2px 2px at 25% 25%, rgba(255, 255, 255, 0.2) 100%, transparent),
266-
radial-gradient(1.2px 1.2px at 75% 75%, rgba(255, 255, 255, 0.15) 100%, transparent);
267-
background-size: 100px 100px, 120px 120px, 80px 80px;
270+
radial-gradient(1.5px 1.5px at 30% 30%, rgba(255, 255, 255, 0.15) 100%, transparent),
271+
radial-gradient(1px 1px at 35% 35%, rgba(255, 255, 255, 0.1) 100%, transparent),
272+
radial-gradient(1.5px 1.5px at 40% 40%, rgba(255, 255, 255, 0.15) 100%, transparent),
273+
radial-gradient(2px 2px at 45% 45%, rgba(255, 255, 255, 0.2) 100%, transparent),
274+
radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.1) 100%, transparent),
275+
radial-gradient(1.5px 1.5px at 55% 55%, rgba(255, 255, 255, 0.15) 100%, transparent),
276+
radial-gradient(1px 1px at 60% 60%, rgba(255, 255, 255, 0.1) 100%, transparent),
277+
radial-gradient(2px 2px at 65% 65%, rgba(255, 255, 255, 0.2) 100%, transparent),
278+
radial-gradient(1.5px 1.5px at 70% 70%, rgba(255, 255, 255, 0.15) 100%, transparent),
279+
radial-gradient(1px 1px at 75% 75%, rgba(255, 255, 255, 0.1) 100%, transparent),
280+
radial-gradient(1.5px 1.5px at 80% 80%, rgba(255, 255, 255, 0.15) 100%, transparent),
281+
radial-gradient(2px 2px at 85% 85%, rgba(255, 255, 255, 0.2) 100%, transparent),
282+
radial-gradient(1px 1px at 90% 90%, rgba(255, 255, 255, 0.1) 100%, transparent),
283+
radial-gradient(1.5px 1.5px at 95% 95%, rgba(255, 255, 255, 0.15) 100%, transparent);
284+
background-size:
285+
150px 150px,
286+
170px 170px,
287+
200px 200px,
288+
220px 220px,
289+
250px 250px,
290+
270px 270px,
291+
300px 300px,
292+
320px 320px,
293+
350px 350px,
294+
370px 370px,
295+
400px 400px,
296+
420px 420px,
297+
450px 450px,
298+
470px 470px,
299+
500px 500px,
300+
520px 520px,
301+
550px 550px,
302+
570px 570px;
303+
background-position:
304+
17% 13%,
305+
23% 27%,
306+
37% 31%,
307+
43% 47%,
308+
57% 53%,
309+
63% 67%,
310+
77% 73%,
311+
83% 87%,
312+
19% 83%,
313+
29% 73%,
314+
41% 67%,
315+
61% 47%,
316+
71% 37%,
317+
89% 23%,
318+
97% 13%,
319+
13% 97%,
320+
31% 91%,
321+
47% 79%;
322+
background-repeat: repeat;
268323
animation: twinkle 8s ease-in-out infinite;
269324
z-index: -1;
270325
}
271326

272327
@keyframes twinkle {
273328
0%, 100% { opacity: 0.3; }
274-
50% { opacity: 0.8; }
329+
50% { opacity: 0.7; }
275330
}
276331

277332
/* Nebula Glow */
278-
body::before {
333+
body::after {
279334
content: "";
280335
position: fixed;
281336
top: 0;

‎docs/stylesheets/extra.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
.md-typeset .abstract,
2+
.md-typeset details.abstract {
3+
border-color: white;
4+
}
5+
6+
.md-typeset .abstract > .admonition-title,
7+
.md-typeset details.abstract > summary {
8+
background-color: rgba(255, 255, 255, 0.1);
9+
}
10+
11+
/* Target specifically the file explorer containers */
12+
.md-typeset .file-browser .admonition,
13+
.md-typeset .file-browser details {
14+
border-color: white !important;
15+
margin: 0.8em 0 !important;
16+
position: relative !important;
17+
}
18+
19+
.md-typeset .file-browser .admonition > .admonition-title,
20+
.md-typeset .file-browser details > summary {
21+
background-color: rgba(255, 255, 255, 0.1) !important;
22+
padding: 0.8rem !important;
23+
min-height: 3rem !important;
24+
display: flex !important;
25+
align-items: center !important;
26+
}
27+
28+
/* Specific styling for file and folder containers */
29+
.md-typeset details:has(summary:contains("📂")),
30+
.md-typeset details:has(summary:contains("📄")) {
31+
border-color: white !important;
32+
margin: 0.5em 0 !important;
33+
}
34+
35+
.md-typeset details:has(summary:contains("📂")) > summary,
36+
.md-typeset details:has(summary:contains("📄")) > summary {
37+
background-color: rgba(255, 255, 255, 0.1) !important;
38+
padding: 0.8rem 2.5rem !important;
39+
position: relative !important;
40+
}
41+
42+
/* Keep other admonitions with their original styling */
43+
.md-typeset .admonition:not(.file-browser *),
44+
.md-typeset details:not(.file-browser *):not(:has(summary:contains("📂"))):not(:has(summary:contains("📄"))) {
45+
border-color: inherit;
46+
}
47+
48+
.md-typeset .admonition:not(.file-browser *) > .admonition-title,
49+
.md-typeset details:not(.file-browser *):not(:has(summary:contains("📂"))):not(:has(summary:contains("📄"))) > summary {
50+
background-color: inherit;
51+
}
52+
53+
/* Style modifications for file explorer admonitions */
54+
.md-typeset details.info,
55+
.md-typeset details.abstract,
56+
.md-typeset details.example {
57+
border-color: rgba(255, 255, 255, 0.87) !important;
58+
border-width: 1px !important;
59+
border-style: solid !important;
60+
border-radius: 4px !important;
61+
}
62+
63+
.md-typeset details.info > summary,
64+
.md-typeset details.abstract > summary,
65+
.md-typeset details.example > summary {
66+
background-color: rgba(255, 255, 255, 0.05) !important;
67+
border-bottom: 1px solid rgba(255, 255, 255, 0.87) !important;
68+
}
69+
70+
/* Target all file and folder containers */
71+
.md-typeset details {
72+
border: 1px solid rgba(255, 255, 255, 0.87) !important;
73+
border-radius: 4px !important;
74+
margin: 0.8em 0 !important;
75+
background-color: var(--md-admonition-bg-color) !important;
76+
}
77+
78+
/* Summary/Title bar styling */
79+
.md-typeset details > summary {
80+
position: relative !important;
81+
padding: 0.8rem !important;
82+
min-height: 3rem !important;
83+
display: flex !important;
84+
align-items: center !important;
85+
gap: 0.5rem !important;
86+
cursor: pointer !important;
87+
background-color: rgba(255, 255, 255, 0.05) !important;
88+
border-bottom: 1px solid rgba(255, 255, 255, 0.87) !important;
89+
}
90+
91+
/* Remove default arrow */
92+
.md-typeset summary::after {
93+
display: none !important;
94+
}
95+
96+
/* Icon base styles */
97+
.md-typeset details > summary::before {
98+
position: static !important;
99+
flex-shrink: 0 !important;
100+
width: 1.5rem !important;
101+
height: 1.5rem !important;
102+
margin: 0 !important;
103+
background-color: currentColor !important;
104+
mask: var(--md-folder-icon) no-repeat center / contain !important;
105+
-webkit-mask: var(--md-folder-icon) no-repeat center / contain !important;
106+
}
107+
108+
/* Open folder state */
109+
.md-typeset details[open] > summary::before {
110+
mask-image: var(--md-folder-open-icon) !important;
111+
-webkit-mask-image: var(--md-folder-open-icon) !important;
112+
}
113+
114+
/* File icon for leaf nodes */
115+
.md-typeset details:not(:has(details)) > summary::before {
116+
mask-image: var(--md-document-icon) !important;
117+
-webkit-mask-image: var(--md-document-icon) !important;
118+
}
119+
120+
/* Content styling */
121+
.md-typeset details > div {
122+
padding: 1rem !important;
123+
margin: 0 !important;
124+
}
125+
126+
/* Nested containers */
127+
.md-typeset details details {
128+
margin-left: 1.5rem !important;
129+
width: calc(100% - 1.5rem) !important;
130+
}
131+
132+
/* Content spacing */
133+
.md-typeset details p {
134+
margin: 0.5em 0 !important;
135+
}
136+
137+
/* Description text */
138+
.md-typeset details > div > p:first-of-type {
139+
margin-top: 0 !important;
140+
color: rgba(255, 255, 255, 0.7) !important;
141+
}
142+
143+
/* Code blocks */
144+
.md-typeset details pre {
145+
margin: 1em 0 !important;
146+
}
147+
148+
/* Optimized SVG icons */
149+
:root {
150+
--md-folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
151+
--md-folder-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 20H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h6l2 2h7c1.1 0 2 .9 2 2H4v10l2.1-8h17.1l-2.3 8.5c-.2.9-1 1.5-1.9 1.5z'/%3E%3C/svg%3E");
152+
--md-document-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h5.5L13 3.5V9M6 2h8l6 6v12c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2z'/%3E%3C/svg%3E");
153+
}

‎docs/tags.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 🏷️ Tags
2+
3+
[TAGS]

‎mkdocs.yml‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,10 @@ theme:
1515
icon: material/brightness-4
1616
name: Switch to system preference
1717
features:
18-
- header.autohide
1918
- navigation.instant
2019
- navigation.tracking
2120
- navigation.sections
2221
- toc.follow
23-
- search.suggest
24-
- search.highlight
2522
icon:
2623
logo: material/alpha-w
2724

@@ -33,6 +30,7 @@ extra:
3330

3431
extra_css:
3532
- stylesheets/cards.css
33+
- stylesheets/extra.css
3634

3735
nav:
3836
- 🏠 Home: index.md
@@ -54,15 +52,11 @@ nav:
5452
plugins:
5553
- search:
5654
separator: '[\s\-,:!=\[\]()"/]+|(?!\b)(?=[A-Z][a-z])|\.(?!\d)|&[lg]t;'
57-
# - blog:
58-
# blog_dir: .
59-
# categories_allowed:
60-
# - Tech
61-
# post_url_format: "{slug}"
62-
# blog_toc: true
63-
# archive: false
64-
# index_page: false
65-
- tags
55+
- tags:
56+
enabled: true
57+
tags_file: tags.md
58+
tags_extra_files:
59+
tags.md: "Tags"
6660

6761
markdown_extensions:
6862
- attr_list

0 commit comments

Comments
 (0)