ladas552.me
My Blog, build with Norgolith
blog.ladas552.me
blog
remove toc on small width devices
+1
-1
README.md
+1
-1
README.md
···
14
14
15
15
- add code block expansion
16
16
- better nav bar, add some flair to background color
17
-
- Table of Content can rended too long for the user to use on small width phone with a lot of headings. So need to fix that, but don't make the table scrollable. I hate that
17
+
- Table of Content can render too long for the user to use on small width phone with a lot of headings. So I hid it on small width devices. But there is probably a better way for it, without making ToC scrollable because that would be 1000 times worse
18
18
- Pokemons aren't centered
19
19
- I want a [project oriented pages too](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages#using-a-custom-domain-across-multiple-repositories)
20
20
- better rss.xml theme, like [boltless](https://github.com/boltlessengineer/boltlessengineer.github.io/blob/989b409505d56f2c9fcbaf3cec1db8aac52156c7/templates/rss.xml#L2)
+1
-1
public/assets/css/toc.css
+1
-1
public/assets/css/toc.css
···
1
-
:root{--base:#24273a;--mantle:#1e2030;--surface0:#363a4f;--rosewater:#f4dbd6;--peach:#f5a97f;--text:#c9d1d9;--lavender:#b7bdf8;--shadow:0 8px 16px #00000026}#toc-toggle{display:none}.toc-button{background:var(--mantle);cursor:pointer;z-index:1000;width:36px;height:36px;box-shadow:var(--shadow);border-radius:6px;justify-content:center;align-items:center;transition:background .2s,right .2s;display:flex;position:fixed;top:15%;right:15px;transform:translateY(0)}.toc-button:hover{background:var(--surface0)}.toc-button:before{content:"➤";color:var(--rosewater);font-size:18px;transition:transform .2s;transform:rotate(180deg)}#toc-toggle:checked~.toc-button:before{transform:rotate(0)}#toc-toggle:checked~.toc-button{right:375px}.toc-panel{background:var(--mantle);border:1px solid var(--surface0);width:360px;height:auto;box-shadow:var(--shadow);z-index:999;border-radius:8px;transition:transform .2s;position:fixed;top:15%;right:-360px;overflow-y:visible}#toc-toggle:checked~.toc-panel{transform:translate(-360px)}.toc-content ul{margin:0;padding:0;list-style-type:none}.toc-content li{margin-bottom:.25rem;padding-top:.25rem;padding-left:.25rem}.toc-content ul ul{padding-left:.5rem}.toc-content ul ul ul{padding-left:.75rem}.toc-content a[href]{white-space:nowrap;text-overflow:ellipsis;border-radius:4px;max-width:100%;padding:.5rem 1rem;transition:background .2s,color .2s;display:block;overflow:hidden}.toc-content a[href]:hover{background:var(--surface0)}@media (width<=768px){.toc-button{width:32px;height:32px;right:10px}#toc-toggle:checked~.toc-button{right:295px}.toc-panel{width:280px;right:-280px}#toc-toggle:checked~.toc-panel{transform:translate(-280px)}.toc-content a{padding:.4rem .8rem}}
1
+
:root{--base:#24273a;--mantle:#1e2030;--surface0:#363a4f;--rosewater:#f4dbd6;--peach:#f5a97f;--text:#c9d1d9;--lavender:#b7bdf8;--shadow:0 8px 16px #00000026}#toc-toggle{display:none}.toc-button{background:var(--mantle);cursor:pointer;z-index:1000;width:36px;height:36px;box-shadow:var(--shadow);border-radius:6px;justify-content:center;align-items:center;transition:background .2s,right .2s;display:flex;position:fixed;top:15%;right:15px;transform:translateY(0)}.toc-button:hover{background:var(--surface0)}.toc-button:before{content:"➤";color:var(--rosewater);font-size:18px;transition:transform .2s;transform:rotate(180deg)}#toc-toggle:checked~.toc-button:before{transform:rotate(0)}#toc-toggle:checked~.toc-button{right:375px}.toc-panel{background:var(--mantle);border:1px solid var(--surface0);width:360px;height:auto;box-shadow:var(--shadow);z-index:999;border-radius:8px;transition:transform .2s;position:fixed;top:15%;right:-360px;overflow-y:visible}#toc-toggle:checked~.toc-panel{transform:translate(-360px)}.toc-content ul{margin:0;padding:0;list-style-type:none}.toc-content li{margin-bottom:.25rem;padding-top:.25rem;padding-left:.25rem}.toc-content ul ul{padding-left:.5rem}.toc-content ul ul ul{padding-left:.75rem}.toc-content a[href]{white-space:nowrap;text-overflow:ellipsis;border-radius:4px;max-width:100%;padding:.5rem 1rem;transition:background .2s,color .2s;display:block;overflow:hidden}.toc-content a[href]:hover{background:var(--surface0)}@media (width<=768px){.toc-button,.toc-panel,.overlay{display:none}}
+1
-1
public/rss.xml
+1
-1
public/rss.xml
···
6
6
<description>Latest posts</description>
7
7
<generator>Norgolith</generator>
8
8
<language>en-us</language>
9
-
<lastBuildDate>Sat, 13 Sep 2025 04:31:50 +0000</lastBuildDate>
9
+
<lastBuildDate>Sat, 13 Sep 2025 04:42:45 +0000</lastBuildDate>
10
10
<ttl>60</ttl>
11
11
<atom:link href="https://ladas552.me/rss.xml" rel="self" type="application/rss+xml" />
12
12
+4
-15
theme/assets/css/toc.css
+4
-15
theme/assets/css/toc.css
···
114
114
/* Responsive Design */
115
115
@media (max-width: 768px) {
116
116
.toc-button {
117
-
width: 32px;
118
-
height: 32px;
119
-
right: 10px;
120
-
}
121
-
122
-
#toc-toggle:checked ~ .toc-button {
123
-
right: 295px;
117
+
display: none; /* Hide button on small screens */
124
118
}
125
119
126
120
.toc-panel {
127
-
width: 280px;
128
-
right: -280px;
121
+
display: none; /* Hide panel on small screens */
129
122
}
130
123
131
-
#toc-toggle:checked ~ .toc-panel {
132
-
transform: translateX(-280px);
133
-
}
134
-
135
-
.toc-content a {
136
-
padding: 0.4rem 0.8rem;
124
+
.overlay {
125
+
display: none; /* Hide overlay on small screens */
137
126
}
138
127
}