style: ✨ add HTMX

www/static/dergstyle.css

@@ -6,9 +6,11 @@
 	padding: 0;
 }
 
-svg {
+.fa-icn {
 	fill: var(--text_1);
 	padding-top: 0.1rem;
+	height: 1em;
+	vertical-align: -0.125em;
 }
 
 body {
@@ -175,6 +177,35 @@ a:hover {
 	background: var(--bg_2);
 }
 
+body::before {
+	content: '';
+	
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	
+	width: 100%;
+	height: 100%;
+	
+	background-image: url('/static/three-dots.svg');
+	background-repeat: no-repeat;
+	background-position: center;
+	
+	opacity: 0;
+	
+	z-index: 10;
+	pointer-events: none;
+	
+  transition: opacity 0.2s;
+}
+body.htmx-request::before {
+	opacity: 1;	
+	
+	transition-delay: 0.5s;
+}
+
 #post_file_bar {
 	position: sticky;
 
@@ -196,35 +227,14 @@ a:hover {
 	padding: 0px;
 }
 
-#post_file_titles li {
+#post_file_titles > li {
 	padding: 0.2rem 0.8rem;
 	
 	font-style: bold;
-	font-size: 1.3rem;
+	font-size: 1.5rem;
 
 	background: var(--highlight_1);
 }
-#post_file_titles li:hover {
-  background: var(--highlight_0) !important;
-}
-
-#post_file_bar_dirbtn {	
-	margin-left: 0.15rem;
-	background: var(--bg_2) !important;
-}
-#post_file_bar #dir_collapse {
-	display: none;
-}
-#post_file_bar #dir_collapse:checked + #post_file_bar_dirbtn {
-	background: var(--highlight_1) !important;
-}
-
-.directory {
-	display: none;
-}
-#dir_collapse:checked ~ .directory {
-	display: block;
-}
 
 #post_file_path {
 	width: 100%;
@@ -232,6 +242,8 @@ a:hover {
 	padding-left: 0.5rem;
 
 	background: var(--highlight_1);
+	
+	font-size: 1.1rem;
 
 	display: flex;
 	flex-direction: row;
@@ -247,6 +259,76 @@ a:hover {
 	padding-right: 0.2rem;
 }
 
+.navbar-expand {
+	background-color: var(--bg_3);
+	
+	border: 0.15rem solid var(--highlight_1);
+	border-top: none;
+	
+	border-radius: 0 0 0.2rem 0.2rem;
+	overflow: clip;
+	
+	padding-bottom: 0.2rem;
+	padding-left: 0.3rem;
+
+	max-height: 80vh;
+	overflow-y: scroll;
+}
+
+.navbar-full-path {
+	width: 100%;
+	font-style: italic;
+	padding-left: 0.2rem;
+	
+	display: flex;
+	flex-direction: row;
+	list-style-type: none;
+
+	overflow-x: scroll;
+	overflow-y: hidden;
+
+	white-space: nowrap;
+}
+.navbar-full-path li {
+	margin-left: 0.3rem;
+}
+
+.navbar-folder-list span, .navbar-folder-list label {
+	width: 1rem;
+	display: inline-block;
+	cursor: pointer;
+}
+.navbar-folder-list ul, .navbar-folder-list {
+	list-style: none;
+	padding-left: 0.4rem;
+	margin-left: 0.4rem;
+	
+	border-left: 1px solid var(--text_border);
+}
+.navbar-folder-list a:hover {
+	background-color: rgba(255, 255, 255, 0.1);
+}
+.folder-listing input {
+	display: none;
+}
+.folder-listing input + ul {
+	display: none;
+}
+.folder-listing input:checked + ul {
+	display: block;
+}
+
+#navbar-expand-label {
+	cursor: pointer;
+}
+#navbar-expander, .navbar-expand {
+	display: none;
+}
+
+#navbar-expander:checked + .navbar-expand {
+	display: block;
+}
+
 article {
 	background: var(--bg_3);