styled rss box on small viewports

rosenpass · Jul 29, 2024 · aaf2061 · aaf2061
1 parent 29c00a9
commit aaf2061
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/layouts/shortcodes/blocks/rss-button.html b/layouts/shortcodes/blocks/rss-button.html
@@ -3,10 +3,20 @@
 {{ $href := .Get "href" | default "https://rosenpass.eu" }}
 {{ $text := .Get "text" | default " " }}
 <div class="row d-flex justify-content-center">
-<span class="td-blog d-flex px-3 py-3 mx-1 my-3 td-box--{{ $col_id }}" id="rss-button">
-    <a class="td-rss-button rss-feed-button" title="RSS" href="{{ $href }}" target="_blank" rel="noopener">
-      <i class="fa-solid fa-rss" aria-hidden="true"></i>
-    </a> <span>{{ $text }}
-    </span>
-</span> 
+  <span class="td-blog d-flex px-3 py-3 mx-1 my-3 td-box--{{ $col_id }}" id="rss-button">
+      <a class="td-rss-button rss-feed-button" title="RSS" href="{{ $href }}" target="_blank" rel="noopener">
+        <i class="fa-solid fa-rss" aria-hidden="true"></i>
+      </a> <span>{{ $text }}
+      </span>
+  </span> 
+  <span class="td-blog d-flex px-3 py-3 mx-1 my-3 td-box--{{ $col_id }}" id="rss-button-mobile">
+    <a href="{{ $href }}" id="rss-link-mobile">
+      <span class="td-rss-button rss-feed-button" title="RSS" href="{{ $href }}" target="_blank" rel="noopener">
+        <i class="fa-solid fa-rss" aria-hidden="true"></i>
+      </span> 
+        <span>
+          {{ $text }}
+        </span>
+      </span> 
+    </a>
 </div>
diff --git a/static/css/rosenpass.css b/static/css/rosenpass.css
@@ -26,9 +26,33 @@
 
 /* General, site-wide changes to the theme */
 
-@media (min-width: 768px) {  /* adjustments for middle sized screens*/
+@media (min-width: 768px) {
+
+  #rss-button-mobile{
+    display: none !important;
+  }
+
+}
+
+@media (max-width: 768px) {  /* adjustments for middle sized screens*/
 	#rss-button{
-    width: 40vw !important;
+    display: none !important;
+  }
+
+  #rss-button-mobile{
+    width: 80vw;
+  }
+  #rss-link-mobile{
+    display: flex;
+    align-items: center;
+    color: inherit;
+    text-decoration: inherit;
+    cursor: inherit;
+    font-weight: inherit;
+  }
+  #rss-link-mobile:active { 
+    transform: scale(0.98); 
+    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 
   }
 }
 
@@ -571,9 +595,6 @@ align-self: center;
 	}
 }
 
-
-
-
 /* blog list */
 
 .post-list .post-list-item {