styles: adiciona responsividade ao site

cesargabrielphd · Dec 15, 2024 · 5ac7e1c · 5ac7e1c
1 parent 85e698f
commit 5ac7e1c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 43 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -29,4 +29,4 @@ Contribuições são bem-vindas! Sinta-se à vontade para abrir issues e pull re
 
 ## Licença
 
-Este projeto está licenciado sob a Licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
+Este projeto está licenciado sob a Licença MIT. Veja o arquivo [LICENSE](.github/LICENSE) para mais detalhes.
diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,5 @@
 body {
-  --header-hight: 4em;
+  --header-hight: calc(4em + 1.5em);
   --bg-color-white: rgba(255, 255, 257, 1);
   --bg-color-gray: rgb(245, 245, 247, 1);
   --bg-color-blue: #2997ff;
@@ -41,18 +41,29 @@ select option[disabled] {
 }
 
 #header {
-  position: sticky;
+  position: fixed;
   top: 0;
   z-index: 1000;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: nowrap;
-  align-items: stretch;
+  align-items: center;
   justify-content: space-around;
   gap: 0.5rem;
   background-color: var(--bg-color-gray);
   width: 100%;
+  height: var(--header-hight);
+}
+
+@media (max-width: 768px) {
+  #header {
+    flex-direction: column;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    height: max-content;
+  }
 }
+
 #titulo,
 #ira-mp {
   text-align: center;
@@ -62,10 +73,17 @@ select option[disabled] {
 main {
   position: relative;
   max-width: 2560px;
-  margin-top: 0px;
-  margin-right: auto;
-  margin-bottom: 0px;
-  margin-left: auto;
+  margin: 0 auto;
+  padding-top: var(--header-hight);
+}
+@media (max-width: 768px) {
+  main {
+    --header-hight: 8em;
+    position: relative;
+    max-width: 2560px;
+    margin: 0 auto;
+    padding-top: var(--header-hight);
+  }
 }
 #container {
   margin-bottom: 400px;
@@ -81,9 +99,6 @@ div#container {
 }
 div#linhaSuperior {
   position: sticky;
-  top: calc(10px + var(--header-hight));
-  display: flex;
-  justify-content: center;
 }
 
 div[id^="periodo"] {
@@ -108,25 +123,60 @@ div.row.g-3 > div.row.g-3 {
   width: 100%;
   justify-content: space-evenly;
   align-items: center;
+  row-gap: 1em; /* Adiciona espaçamento vertical entre os elementos */
+}
+
+@media (max-width: 768px) {
+  div.row.g-3 > div.row.g-3 {
+    flex-direction: column;
+  }
 }
+
+.btn-success,
+.btn-success:hover,
+.btn-primary {
+  color: #fff;
+  background-color: #157347;
+  border-color: #146c43;
+}
+
 .btn-success,
 .btn-success:hover,
 .btn-primary {
-    color: #fff;
-    background-color: #157347;
-    border-color: #146c43;
+  color: #fff;
+  background-color: #157347;
+  border-color: #146c43;
 }
 .btn-danger,
 .btn-danger:hover {
-    color: #fff;
-    background-color: #bb2d3b;
-    border-color: #b02a37;
+  color: #fff;
+  background-color: #bb2d3b;
+  border-color: #b02a37;
 }
 footer {
   position: fixed;
+  bottom: 0;
+  padding-top: 1em;
+  padding-bottom: 1em;
   width: 100%;
-  left: 0;
+  background-color: var(--bg-color-gray);
+}
+footer p {
   bottom: 0;
+  margin: 0;
   text-align: center;
-  background-color: var(--bg-color-gray);
+}
+@media (max-width: 768px) {
+  footer {
+    position: static;
+    text-align: justify;
+    width: 100%;
+    bottom: 0;
+    padding-bottom: 1em;
+  }
+  footer p {
+    text-align: justify;
+    padding-right: 1em;
+    padding-left: 1em;
+  }
 }
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
     <title>Calcular IRA UnB</title>
   </head>
   <body onload="criaPeriodo();">
-    <div id="header">
+    <header id="header">
       <h1 id="titulo">Calculadora de IRA</h1>
       <h3 id="ira-mp">IRA: 0.00 MP: 0.00</h3>
       <div id="linhaSuperior">
@@ -21,7 +21,7 @@ <h3 id="ira-mp">IRA: 0.00 MP: 0.00</h3>
           Novo Período
         </button>
       </div>
-    </div>
+    </header>
     <main>
       <div class="container" id="container">
         <!-- Exemplo de Período 1 -->
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,4 +29,4 @@ Contribuições são bem-vindas! Sinta-se à vontade para abrir issues e pull re

		## Licença

		Este projeto está licenciado sob a Licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
		Este projeto está licenciado sob a Licença MIT. Veja o arquivo [LICENSE](.github/LICENSE) para mais detalhes.