melhorias de design: espaçamento (#25)

· melhora o espaçamento entre os cards de conteúdo de páginas com gráficos · otimiza a marcação css
covid19br · May 1, 2020 · 1c07fd4 · 1c07fd4
1 parent 3802934
commit 1c07fd4
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 35 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -324,39 +324,46 @@ a.text-reset:hover {
     }
 }
 
-.cd-30 {
-    flex: 1 0 32.185%!important;
-}
-
-.cd-70 {
-    flex: 1 0 65.815%!important;
+/* GLOBAL: CARD DECK */
+.card-deck {
+    margin: 0.5rem;
+    flex-flow: column wrap;
 }
 
-.cd-gap {
-    margin-right: 1.25rem!important;
+.card-deck > .card {
+    margin: 0 0 1rem 0; /* gap */
 }
 
-.card-deck {
-    flex-flow: row wrap;
+.card-deck > .card:last-child {
+    margin: 0; /* gap */
 }
 
-@media (max-width: 1030px) {
-    .card-deck .card {
-        margin-bottom: 0.75rem!important;
-        margin-right: 1rem!important;
+/* tablets: 768px and up */
+@media (min-width: 768px){
+    .card-deck {
+        margin: 1rem;
     }
 }
 
-@media (min-width: 576px){
+/* desktops: 992px and up */
+@media (min-width: 992px) {
     .card-deck {
-        margin: 1rem!important;
+        flex-flow: row nowrap;
     }
-    .card-deck .card {
-        margin-right: 0;
-        margin-left: 0;
+    .card-deck > .card {
+        margin: 0 1rem 0 0; /* gap */
     }
 }
 
+/* proportions */
+.cd-30 {
+    flex: 1 0 32.185%!important;
+}
+
+.cd-70 {
+    flex: 1 0 65.815%!important;
+}
+
 /* CARD TYPE */
 .text-justify {
     margin-top: 1rem;

diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
   <!-- Poppins Font -->
-  <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

diff --git a/informacoes.html b/informacoes.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="./css/toc.css?ver=1.15" />
   <!-- Poppins Font -->
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
-  <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

diff --git a/leitos.html b/leitos.html
@@ -14,7 +14,7 @@
         integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
     <!-- Poppins Font -->
-    <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+    <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
     <!-- Favicons -->
     <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

diff --git a/midia.html b/midia.html
@@ -14,7 +14,7 @@
         integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
     <!-- Poppins Font -->
-    <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+    <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
     <!-- Favicons -->
     <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

diff --git a/municipios.html b/municipios.html
@@ -14,7 +14,7 @@
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
   <!-- Poppins Font -->
-  <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
@@ -207,7 +207,7 @@ <h5 class="card-title">Sobre</h5> <!-- CARD.TITLE.TEXT -->
   <div class="card-deck hosp">
     <!-- COLUMNS.NUM -->
     <!-- HOSPITALIZAÇÕES.CONTENT.CARD -->
-    <div class="card cd-30 cd-gap">
+    <div class="card cd-30">
       <div class="card-body">
 
         <!-- CARD.HEADER -->
@@ -308,7 +308,7 @@ <h5 class="card-title">Casos graves de COVID-19 em <span class="municipio"></spa
   <!-- Velocidade-->
   <div class="card-deck vel">
     <!-- VELOCIDADE.CONTENT.CARD -->
-    <div class="card cd-30 cd-gap">
+    <div class="card cd-30">
       <div class="card-body">
 
         <!-- CARD.HEADER -->
@@ -359,7 +359,7 @@ <h5 class="card-title">Velocidade de propagação em <span class="municipio"></s
   <div class="card-deck infec">
     <!-- COLUMNS.NUM -->
     <!-- TAXA.CONTENT.CARD -->
-    <div class="card cd-30 cd-gap">
+    <div class="card cd-30">
       <div class="card-body">
 
         <!-- CARD.HEADER -->
@@ -412,7 +412,7 @@ <h5 class="card-title">Taxa de infecção em <span class="municipio"></span></h5
   <!-- Sobre -->
   <div class="card-deck sobre">
     <!-- SOBRE.CONTENT.CARD -->
-    <div class="card cd-30 cd-gap">
+    <div class="card cd-30">
       <div class="card-body">
 
         <!-- CARD.HEADER -->

diff --git a/perguntas.html b/perguntas.html
@@ -14,7 +14,7 @@
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
   <!-- Poppins Font -->
-  <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

diff --git a/progressao.html b/progressao.html
@@ -14,7 +14,7 @@
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
   <!-- Poppins Font -->
-  <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
@@ -157,12 +157,13 @@ <h1 class="display" id="page-title">Brasil</h1>
     <!-- NEW.CARD -->
 
     <!-- GRAPH.CARD -->
-    <div class="card cd-70 cd-gap">
+    <div class="card cd-70">
       <div class="card-body">
+
         <!-- CARD.GGPLOT -->
         <div data-src="./web/plot.forecast.exp.html" class="codegena_iframe"
-          data-css="background:url('./img/loading.gif') white center center no-repeat;border:0px;"
-          data-responsive="true">
+             data-css="background:url('./img/loading.gif') white center center no-repeat;border:0px;"
+             data-responsive="true">
           <img src=./web/plot.forecast.exp.svg class="placeholder_svg" width="100%">
         </div>
         <script src="./js/async-iframe.js"></script>
@@ -173,7 +174,6 @@ <h1 class="display" id="page-title">Brasil</h1>
           <small class="chartLegendSquare" id="legendBlue">Previsão</small>
         </div>
 
-
       </div>
     </div>
 

diff --git a/sobre.html b/sobre.html
@@ -14,7 +14,7 @@
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
   <!-- Poppins Font -->
-  <link href="./css/custom.css?ver=1.63" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.64" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">