From 9214b5eebdafca2772eb1fdd9a0d2fd35025f408 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Mon, 2 Sep 2024 13:31:05 +0200
Subject: [PATCH] feat: disappearing branding (#109)

---
 src/components/Jumbotron.astro        |  2 +-
 src/components/Post.astro             |  6 ++----
 src/components/SimpleAddressBar.astro | 23 +++++++++++++++--------
 src/layouts/Layout.astro              |  2 +-
 src/styles/app.css                    |  7 +++++++
 5 files changed, 26 insertions(+), 14 deletions(-)
 create mode 100644 src/styles/app.css

diff --git a/src/components/Jumbotron.astro b/src/components/Jumbotron.astro
index a95f0e8..e7e40f4 100644
--- a/src/components/Jumbotron.astro
+++ b/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">
diff --git a/src/components/Post.astro b/src/components/Post.astro
index 2a694c7..6c0f7d1 100644
--- a/src/components/Post.astro
+++ b/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>
diff --git a/src/components/SimpleAddressBar.astro b/src/components/SimpleAddressBar.astro
index 769254a..6237bc1 100644
--- a/src/components/SimpleAddressBar.astro
+++ b/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;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c51e3e9..84cf4d3 100644
--- a/src/layouts/Layout.astro
+++ b/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
 }
diff --git a/src/styles/app.css b/src/styles/app.css
new file mode 100644
index 0000000..68c0347
--- /dev/null
+++ b/src/styles/app.css
@@ -0,0 +1,7 @@
+#app-wrapper {
+    &:has(#router-outlet #post) {
+        #jumbotron {
+            display: none;
+        }
+    }
+}
\ No newline at end of file