Add: Melhorando Modo Mobile

gabrielf7 · May 15, 2022 · 7370001 · 7370001
1 parent af6301a
commit 7370001
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -7,18 +7,19 @@
     <link rel="icon" type="image/png" sizes="128x128" href="./src/relogio-icon.png">
   </head>
   <body id="body-bg">
+    <div id="containerHeader">
+      <p><a id="linkImgFundo" href="#" target="_blank" rel="nofollow"></a></p>
+    </div>
     <header id="containerFHDataHJ">
-      <span id="espacoBottom">
+      <span id="espacoBottom" class="bottomSpanDia">
         <abbr title="Nome do Fuso Horário">
           <p id="nomeDoFusoHorario"></p>
         </abbr>
-        <p class="bottomSpanDia"></p>
       </span>
-      <span>
+      <span class="bottomSpanDia">
         <abbr title="Data Atual">
           <p id="dataHJ"></p>
         </abbr>
-        <p class="bottomSpanDia"></p>
       </span>
     </header>
     <main>
@@ -47,9 +48,6 @@
         GabrielF7
       </a></p>
     </footer>
-    <div id="containerFooter">
-      <p><a id="linkImgFundo" href="#" target="_blank" rel="nofollow"></a></p>
-    </div>
   </body>
   <script type="text/javascript" src="./relogiohd.js" ></script>
 </html>
diff --git a/relogiohd.css b/relogiohd.css
@@ -17,65 +17,64 @@
   --cor-cinza: rgba(231, 227, 231, 0.9);
   --cor-branco: rgba(255, 255, 255, 1);
 }
-
-/* .container {
-  display: flex;
-}
-#container01 {
-  width: 5%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+body {
+  background-color: #0d0d0e;
 }
-#container01 a { 
-  text-decoration: none;
-  width: 1px;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  color: var(--cor-branco);
-}
-#container02 {
-  width: 90%;
-} */
 
 .manha, .tarde, .noite, .madrugada {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  transition:filter .5s ease;
-  backface-visibility: hidden;
 }
 .manha { background-image: url("./src/img-dia-01.jpg"); }
 .tarde { background-image: url("./src/img-dia-02.jpg"); }
 .noite { background-image: url("./src/img-noite-01.jpg"); }
 .madrugada { background-image: url("./src/img-noite-02.jpg"); }
 
+#containerHeader {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+#containerHeader p {
+  margin: 0;
+  padding: 0;
+  background-color: var(--cor-verde);
+}
+#containerHeader a {
+  text-decoration: none;
+  font-size: 10px;
+  color: var(--cor-branco);
+}
+
 abbr[title] {
   text-decoration: none;
 }
 
 #containerFHDataHJ {
   display: flex;
-  font-size: 30px;
   justify-content: space-around;
 }
 #containerFHDataHJ span {
-  padding: 5px 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+  min-width: 450px;
+  padding: 10px 10px;
   border-radius: 10px;
   box-shadow: 0px 0px 20px var(--cor-verde); 
 }
 #containerFHDataHJ span p {
+  font-size: 30px;
   background-color: var(--cor-verde); 
   color: var(--cor-branco);
 }
-#containerFHDataHJ span .bottomSpanDia, #containerFHDataHJ span .bottomSpanNoite {
-  margin-top: -20px;
+#containerFHDataHJ .bottomSpanDia {
+  border-bottom: 4px solid var(--cor-span-01);
 }
-#containerFHDataHJ span .bottomSpanDia {
-  border-bottom: 2px solid var(--cor-span-01);
-}
-#containerFHDataHJ span .bottomSpanNoite {
-  border-bottom: 2px solid var(--cor-span-02);
+#containerFHDataHJ .bottomSpanNoite {
+  border-bottom: 4px solid var(--cor-span-02);
 }
 
 main {
@@ -175,33 +174,23 @@ footer p a {
   text-decoration: none; color: inherit;
 }
 
-#containerFooter {
-  position: absolute;
-  bottom: 0;
-  border: 0;
-  right: 0;
-  margin-bottom: 10px;
-  margin-right: 10px;
-}
-#containerFooter p {
-  margin: 0;
-  padding: 0;
-  background-color: var(--cor-verde);
-}
-#containerFooter a {
-  text-decoration: none;
-  color: var(--cor-branco);
-}
-
 @media only screen and (max-width: 800px) {
+  body {
+    min-height: 100vh;
+  }
   #containerFHDataHJ {
     flex-direction: column;
     text-align: center;
   }
+  #containerFHDataHJ span { 
+    min-width: auto;
+  }
+  #containerFHDataHJ span p {
+    font-size: 20px;
+  }
   #espacoBottom {
     margin-bottom: 10px;
   }
-
   .manha, .tarde, .noite, .madrugada {
     background-position: 70%;
   }