added header and footer to thread view

-clicking on app name in header returns user back to main page (closes #3)
RealDekkia · Apr 14, 2024 · 05f3fc0 · 05f3fc0
1 parent f0825a0
commit 05f3fc0
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 45 deletions.
diff --git a/css/global.css b/css/global.css
@@ -4,6 +4,7 @@
     --markedfg: var(--accent-text);
     --bannerfg: #ffc400;
     --bannerbg: #212121;
+    --accentbgdark: #e2e7fd;
     --headerbg: rgba(255, 255, 255, .65);
     --headerblend: lighten;
 }
@@ -12,11 +13,18 @@
     :root {
         --accent: #858AFA;
         --marked: #858AFA;
+        --accentbgdark: #161616;
         --headerbg: rgba(0, 0, 0, .65);
         --headerblend: darken;
     }
 }
 
+html,
+body {
+    height: 100%;
+    width: 100%;
+}
+
 mark {
     color: var(--markedfg);
 }
@@ -28,4 +36,42 @@ banner {
     display: none;
     background-color: var(--bannerfg);
     color: var(--bannerbg);
+}
+
+body {
+    display: grid;
+    grid-template-rows: 18vh 20vh calc(100% - 41vh) 3vh;
+    grid-template-columns: 100%;
+    overflow: hidden;
+}
+
+#topBarBox {
+    grid-row: 1;
+    grid-column: 1;
+    background-color: var(--accent-bg);
+    display: grid;
+    grid-template-columns: 18vh auto;
+    grid-template-rows: 100%;
+}
+
+#topBarBox #topBarImage {
+    height: 15vh;
+    justify-self: center;
+    align-self: center;
+}
+
+#topBarBox #topBarText {
+    justify-self: left;
+    align-self: center;
+}
+
+#pageFooter {
+    background-color: var(--accent-bg);
+    grid-row: 4;
+    grid-column: 1;
+    font-weight: lighter;
+    text-align: right;
+    padding-right: 1vw;
+    line-height: 3vh;
+    font-size: 1.5vh;
 }
diff --git a/css/style.css b/css/style.css
@@ -1,36 +1,3 @@
-html,
-body {
-    height: 100%;
-    width: 100%;
-}
-
-body {
-    display: grid;
-    grid-template-rows: 18vh 20vh calc(100% - 41vh) 3vh;
-    grid-template-columns: 100%;
-    overflow: hidden;
-}
-
-#topBarBox {
-    grid-row: 1;
-    grid-column: 1;
-    background-color: var(--accent-bg);
-    display: grid;
-    grid-template-columns: 18vh auto;
-    grid-template-rows: 100%;
-}
-
-#topBarBox>#topBarImage {
-    height: 15vh;
-    justify-self: center;
-    align-self: center;
-}
-
-#topBarBox>#topBarText {
-    justify-self: left;
-    align-self: center;
-}
-
 #urlInputForm {
     grid-row: 2;
     grid-column: 1;
@@ -47,15 +14,4 @@ body {
     max-width: 50rem;
     overflow-y: auto;
     height: 100%;
-}
-
-#pageFooter {
-    background-color: var(--accent-bg);
-    grid-row: 4;
-    grid-column: 1;
-    font-weight: lighter;
-    text-align: right;
-    padding-right: 1vw;
-    line-height: 3vh;
-    font-size: 1.5vh;
 }
diff --git a/thread/css/style.css b/thread/css/style.css
@@ -1,5 +1,36 @@
+body {
+    grid-template-rows: 5vh calc(100% - 8vh) 3vh;
+    background-color: var(--accentbgdark);
+}
+
+#topBarBox {
+    grid-template-columns: 5vh auto;
+}
+
+#topbarMainPageButton {
+    display: contents;
+    color: var(--text);
+}
+
+#topBarBox #topBarImage {
+    height: 4vh;
+    align-self: center;
+    justify-self: center;
+}
+
+#topBarBox #topBarText {
+    font-size: 1.5rem;
+}
+
 .mainBody {
-    padding-top: 3vh;
+    background-color: var(--bg);
+    grid-row: 2;
+    grid-column: 1;
+    overflow-y: auto;
+    justify-self: center;
+    padding: 5vh;
+    max-width: 50rem;
+    width: 100%;
 }
 
 section {
@@ -57,4 +88,8 @@ section:hover {
     align-self: end;
     margin-bottom: 1vh;
     text-wrap: balance;
+}
+
+#pageFooter {
+    grid-row: 3;
 }
diff --git a/thread/index.html b/thread/index.html
@@ -14,7 +14,19 @@
 </head>
 
 <body>
+  <div id="topBarBox">
+    <a id="topbarMainPageButton" href="../">
+      <img id="topBarImage" src="../img/logo.svg">
+      <h1 id="topBarText">Unroll Ninja</h1>
+    </a>
+  </div>
+
   <div class="mainBody" id="mainBody"></div>
+
+  <div id="pageFooter">
+    <a href="https://github.com/RealDekkia/unroll-ninja">https://github.com/RealDekkia/unroll-ninja</a>
+  </div>
+
   <script src="../lib/mastodon.js/mastodon.js" type="text/javascript"></script>
   <script src="js/main.js" type="text/javascript"></script>
 </body>