feat: add dedicated class to hide contents on small-width screens

www/static/dergstyle.css

@@ -31,6 +31,13 @@ body {
 	padding-bottom: 4rem;
 }
 
+@media only screen and (max-width: 600px) {
+	.hsmol_hide {
+		display: none !important;
+		visibility: hidden !important;
+	}
+}
+
 :link {
 	color: var(--highlight_1);
 	font-style: italic;
@@ -158,6 +165,11 @@ a:hover {
 	display: flex;
 	flex-direction: row;
 	list-style-type: none;
+
+	overflow-x: scroll;
+	overflow-y: hidden;
+
+	white-space: nowrap;
 }
 #post_file_path a {
 	color: var(--text_1);

www/static/directorystyle.css

@@ -33,11 +33,4 @@ table.directory tr.entry .entry_title {
 table.directory .entry_update_time {
 	display: block;
 	width: 12rem;
-}
-
-@media only screen and (max-width: 600px) {
-	table.directory .entry_update_time {
-		visibility: hidden;
-		display: none;
-	}
 }

www/templates/fragments/filepath_bar.html

@@ -8,12 +8,9 @@
         {% set split_post = post.post_path |split('/') %}
         {% for i in range(0, split_post|length - 1) %}
             <li>
-                {% if i != 0 %}
-                    >
-                {% endif %}
                 {% if i != 0 %}
                     <a href="{{split_post|slice(0,i+1)|join('/')}}">
-                        {{ split_post[i] }}
+                        > {{ split_post[i] }}
                     </a>
                 {% else %}
                     <a href="/">root</a>
@@ -22,11 +19,11 @@
         {% endfor %}
 
 
-        <li style="margin-left: auto;">
+        <li class="hsmol_hide" style="margin-left: auto;">
             <a href="/raw{{post.post_path}}">raw</a>
             <a href="/api/posts{{post.post_path}}">api</a>
         </li>
-        <li>
+        <li class="hsmol_hide">
             <a rel="alternate" type="application/rss+xml" target="_blank"
                style="padding-left: 0.3rem;" href="/feed/rss{{post.post_path}}">
                 {{ fa['rss']|raw }}

www/templates/post_types/directory.html

@@ -14,7 +14,7 @@
 				<th></th>
 				<th>Name</th>
 				<th>Title</th>
-				<th class="entry_update_time">Modified</th>
+				<th class="entry_update_time hsmol_hide">Modified</th>
 			</tr>
 			{% for subpost in subposts %}
 				<tr class="entry">
@@ -27,7 +27,7 @@
 					<td class="entry_title">
 						{{ subpost.post_metadata.title }}
 					</td>
-					<td class="entry_update_time">
+					<td class="entry_update_time hsmol_hide">
 						{{ subpost.post_update_time }}
 					</td>
 				</tr>