Fix footer (#13)

* fix: error handler + fix parsing event when NOTICE * feat: add Redis as cache (#5) * style: remove console.log (#6) * chore: new project structure (#8) * chore: new project structure * docs: add README.md * feat: add a stats page (#9) * Fixed typo * Prevent copy-text from bleeding out of container width * Use grid styling for better footer placement * Header styling for mobile view * Remove duplicate border-radius * Styling footer for mobile view --------- Co-authored-by: Dolu <[email protected]>
Dolu89 · Feb 16, 2023 · 59fce83 · 59fce83
1 parent 2e69826
commit 59fce83
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -6,6 +6,13 @@ body {
   font-family: 'Inter', sans-serif;
 }
 
+body {
+  height: 100vh;
+  height: 100dvh;
+  display: grid;
+  grid-template-rows: 1fr min-content;
+}
+
 a {
   color: #ce9ffc;
   text-decoration: none;
@@ -22,16 +29,23 @@ a:hover {
   justify-content: space-between;
   width: 100%;
   height: 100%;
+  overflow-y: auto;
 }
 
 .header {
   display: flex;
   flex-direction: column;
-  align-items: end;
+  align-items: start;
   justify-content: center;
   margin-bottom: 50px;
 }
 
+@media (min-width: 421px) {
+  .header {
+    align-items: end;
+  }
+}
+
 .header > .title {
   font-size: 4.5rem;
   font-weight: 900;
@@ -50,8 +64,8 @@ a:hover {
 
 .copy-text {
   width: 100%;
+  box-sizing: border-box;
   padding: 10px;
-  border-radius: 5px;
   font-size: 1.2rem;
   font-weight: 500;
   color: #000;
@@ -65,14 +79,21 @@ a:hover {
 
 .footer {
   padding: 10px 30px;
-  position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
-  gap: 30px;
+  flex-direction: column;
+  gap: 10px;
   align-items: baseline;
-  justify-content: end;
   background: #000;
   color: #fff;
 }
+
+@media (min-width: 480px) {
+  .footer {
+    flex-direction: row;
+    justify-content: end;
+    gap: 30px;
+  }
+}
diff --git a/resources/views/welcome.edge b/resources/views/welcome.edge
@@ -32,7 +32,7 @@
         @end
       </ul>
 
-      <span>🔴 Diconnected</span>
+      <span>🔴 Disconnected</span>
       <ul>
         @each(relay in relays.filter(relay => !relay.connected))
         <li> {{ relay.url }} </li>