🐞 fix: styles

Author: CleilsonAndrade

index.html

@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="./style.css">
     <!-- META NAME & DESCRIPTION -->
     <meta name="author" content="Cleilson Andrade">
-    <meta name="description" content="Seu app de controle de finanças pessoal.">
+    <meta name="description" content="Seu app de controle de finanças pessoais.">
     <!-- META SOCIAL MEDIAS -->
     <meta name="twitter:title" content="dev.finance$">
     <meta property="og:title" content="dev.finance$" />
@@ -69,18 +69,20 @@ <h3>
         <section id="transaction">
             <h2 class="sr-only">Transações</h2>
             <a href="#" onclick="Modal.open()" class="button new">+ Nova transação</a>
-            <table id="data-table">
-                <thead>
-                    <tr>
-                        <th>Descrição</th>
-                        <th>Valor</th>
-                        <th>Data</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                </tbody>
-            </table>
+            <div class="table-container">
+                <table id="data-table">
+                    <thead>
+                        <tr>
+                            <th>Descrição</th>
+                            <th>Valor</th>
+                            <th>Data</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
         </section>
     </main>
 
@@ -119,8 +121,7 @@ <h2>Nova Transação</h2>
 
     <footer>dev.finance$</footer>
 
-    <script src="./scripts.js">
-    </script>
+    <script src="./scripts.js" defer></script>
 </body>
 
 </html>

scripts.js

@@ -1,14 +1,14 @@
 const Modal = {
     open() {
-        // ABRIR MODAL
-        // Adicionar a class active ao modal
+        // OPEN MODE
+        // Add the active class to the modal
         document.querySelector('.modal-overlay').classList.add('active-overlay')
         document.querySelector('.modal').classList.toggle('active-modal')
         document.querySelector('.attention').classList.add('sr-only')
 
     },
     close() {
-        // FECHAR MODAL
+        // CLOSE MODAL
         // Remover a class active do modal
         document.querySelector('.modal-overlay').classList.remove('active-overlay')
         document.querySelector('.modal').classList.toggle('active-modal')

site.webmanifest

@@ -2,7 +2,7 @@
     "name": "dev.finance$",
     "short_name": "dev.finance$",
     "lang": "pt-BR",
-    "description": "Seu app de controle de finanças pessoal.",
+    "description": "Seu app de controle de finanças pessoais.",
     "icons": [
         {
             "src": "./assets/favicon/android-chrome-192x192.png",

style.css

@@ -38,6 +38,7 @@ body {
 .container {
     width: min(90vw, 800px);
     margin: 0 auto;
+    min-height: 80vh;
 }
 
 .attention {
@@ -105,6 +106,8 @@ header {
     background: #2D4A22;
     padding: 2rem 0 10rem;
     text-align: center;
+    display: flex;
+    justify-content: center;
 }
 
 #logo {
@@ -132,8 +135,9 @@ header {
 }
 
 .card:hover {
-    transition: 0.4s;
+    transition: 0.8s;
     background: #e8f0ff;
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 .card h3 {
@@ -160,6 +164,12 @@ header {
     display: block;
     width: 100%;
     overflow-x: auto;
+    position: relative;
+}
+
+.table-container {
+    max-height: 20vh;
+    overflow-y: auto;
 }
 
 #data-table {
@@ -183,6 +193,9 @@ table thead th {
     font-weight: normal;
     padding: 1rem 2rem;
     text-align: left;
+    position: sticky;
+    top: 0;
+    z-index: 2;
 }
 
 table tbody tr {
@@ -224,13 +237,13 @@ td.expense {
     opacity: 0;
     visibility: hidden;
     z-index: 999;
-    transition: 0.4s;
+    transition: 0.6s;
 }
 
 .modal-overlay.active-overlay {
     opacity: 1;
     visibility: visible;
-    backdrop-filter: blur(5px);
+    backdrop-filter: blur(2px);
 }
 
 .modal {
@@ -239,7 +252,7 @@ td.expense {
     padding: 2.4rem;
     position: relative;
     z-index: 1;
-    transition: 0.2s;
+    transition: 0.6s;
 }
 
 .modal.active-modal {
@@ -285,9 +298,12 @@ input {
 /* FOOTER============================================= */
 footer {
     text-align: center;
-    padding: 4rem 0 2rem;
+    padding: 2rem 0 2rem;
     color: var(--dark-blue);
     opacity: 0.6;
+    width: 100%;
+    position: relative;
+    bottom: 0;
 }
 
 /* RESPONSIVE============================================= */
@@ -302,4 +318,8 @@ footer {
         grid-template-columns: repeat(3, 1fr);
         gap: 2rem;
     }
+
+    .table-container {
+        max-height: 54vh;
+    }
 }