feat: disappearing branding (#109)

src/components/Jumbotron.astro

@@ -1,7 +1,7 @@
 ---
 ---
 
-<div><a href="/">
+<div id="jumbotron"><a href="/">
 
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="487.1" height="151.38" version="1.1" viewBox="0 0 128.88 40.052" xmlns="http://www.w3.org/2000/svg">

src/components/Post.astro

@@ -20,10 +20,9 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
 <!-- 
   Changing anything inside the #post div can cause a difference in the cached version of the post in users' devices. For this reason, we should avoid changing the HTML and instead do it with CSS when possible.
  -->
-<div id="post">
   {
     article && article.url !== '/'  &&
-      <>
+      <div id="post">
         {article.source && <span class="source">{article.source}</span>}
         {article.title && <h1 class="title">{article.title}</h1>}
         {(article.author || datePublished) && (
@@ -33,6 +32,5 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
           </ul>
         )}
         <content set:html={cleanContent} />
-      </>
+      </div>
   }
-</div>

src/components/SimpleAddressBar.astro

@@ -25,15 +25,23 @@ const { url } = Astro.props;
     />
     <button
       aria-label="Submit"
-      class="btn right-buttons"
+      class="btn right-buttons primary"
       type="submit"
       id="submit"
     >
       <Icon name="ri:ai-generate" />
     </button>
+    <a
+      aria-label="Home"
+      class="btn right-buttons"
+      type="button"
+      id="app-home"
+      href="/"
+    >
+      <Icon name="mdi:home" />
+    </a>
 
   </form>
-  <SettingsPopover toggle="settings-toggle" />
 </div>
 
 <style>
@@ -73,11 +81,6 @@ const { url } = Astro.props;
       caret-color: var(--accent);
     }
 
-    #app-back,
-    #app-settings {
-      display: none;
-    }
-
     label {
       display: block;
       border: 0px;
@@ -97,14 +100,18 @@ const { url } = Astro.props;
       }
     }
     
+    .btn.primary {
+      color: var(--accent);
+    }
+
     .btn {
+      color: rgb(var(--gray));
       display: block;
       border: 0px;
       height: 100%;
       vertical-align: middle;
       background-color: transparent;
       padding: 0.5rem 0;
-      color: var(--accent);
 
       svg {
         border: 0px;

src/layouts/Layout.astro

@@ -1,9 +1,9 @@
 ---
 import { ArticleData } from "@extractus/article-extractor";
+import "../styles/app.css";
 import "../styles/reset.css";
 import '../styles/variables.css';
 
-import Footer from "../components/Footer.astro";
 export interface Props {
   article: ArticleData | null
 }

src/styles/app.css

@@ -0,0 +1,7 @@
+#app-wrapper {
+    &:has(#router-outlet #post) {
+        #jumbotron {
+            display: none;
+        }
+    }
+}