melhorias de design: menu (#25)

· melhora a exibição do menu em telas extra pequenas
covid19br · May 1, 2020 · 6afc83e · 6afc83e
1 parent 9a6687e
commit 6afc83e
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 12 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -376,21 +376,31 @@ a.text-reset:hover {
     display: flex;
     flex-wrap: nowrap;
     overflow: auto;
-    margin: .5rem;
+    margin: 1.25rem .5rem;
 }
 
 .menu {
     flex: 0 0 auto;
     margin: 0 .5rem 0 0;
     min-width: 14rem;
-    height: 11rem;
+    height: 8rem;
+}
+
+.card.menu {
+    padding: 1.25rem 1rem;
 }
 
 .menu > .card-body {
     display: flex;
     align-items: center;
 }
 
+@media (max-width: 575.98px) {
+.menu > .card-body > .card-hero > .hero-body > .card-text {
+    font-size: 65%;
+}
+}
+
 /* small: 576px and up */
 @media (min-width: 576px) {
     .menu {
@@ -434,6 +444,9 @@ a.text-reset:hover {
         min-height: 100%;
         height: auto;
     }
+    .menu > .card-body > .card-hero > .hero-body > .card-text {
+        font-size: inherit;
+    }
 }
 
 /* GLOBAL: CARD HERO */

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.64" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.65" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
@@ -115,7 +115,7 @@ <h1 class="display" id="page-title">Visão Geral</h1><small class="page-title-up
 
   <!-- Cards -->
   <!-- CARD.MENU -->
-  <div class="card-menu mb-4"> <!-- COLUMNS.NUM -->
+  <div class="card-menu"> <!-- COLUMNS.NUM -->
     <!-- NEW.CARD -->
 
     <!-- PERGUNTAS.CARD -->
@@ -147,7 +147,7 @@ <h5 class="card-title">Perguntas</h5> <!-- CARD.TITLE.TEXT -->
           <div class="card-hero">
             <img src="./img/icon_news.svg" width=48px alt="Ícone que representa um jornal" class="card-icon"> <!-- CARD.TITLE.ICON -->
             <div class="hero-body">
-              <h5 class="card-title">Análise do Noticiário</h5> <!-- CARD.TITLE.TEXT -->
+              <h5 class="card-title">Reportagens</h5> <!-- CARD.TITLE.TEXT -->
               <p class="card-text">Confira as aparições do Observatório na mídia e análises diárias dos notíciarios no Brasil</p> <!-- CARD.TITLE.DESCRIPTION -->
             </div>
           </div>

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.64" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.65" 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.64" rel="stylesheet">
+    <link href="./css/custom.css?ver=1.65" 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.64" rel="stylesheet">
+    <link href="./css/custom.css?ver=1.65" 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.64" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.65" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

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.64" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.65" 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.64" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.65" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

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.64" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.65" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">