Skip to content

Commit 1c07fd4

Browse files
badainbadain
committed
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
1 parent 3802934 commit 1c07fd4

9 files changed

+42
-35
lines changed

‎css/custom.css

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -324,39 +324,46 @@ a.text-reset:hover {
324324
}
325325
}
326326

327-
.cd-30 {
328-
flex: 1 0 32.185%!important;
329-
}
330-
331-
.cd-70 {
332-
flex: 1 0 65.815%!important;
327+
/* GLOBAL: CARD DECK */
328+
.card-deck {
329+
margin: 0.5rem;
330+
flex-flow: column wrap;
333331
}
334332

335-
.cd-gap {
336-
margin-right: 1.25rem!important;
333+
.card-deck > .card {
334+
margin: 0 0 1rem 0; /* gap */
337335
}
338336

339-
.card-deck {
340-
flex-flow: row wrap;
337+
.card-deck > .card:last-child {
338+
margin: 0; /* gap */
341339
}
342340

343-
@media (max-width: 1030px) {
344-
.card-deck .card {
345-
margin-bottom: 0.75rem!important;
346-
margin-right: 1rem!important;
341+
/* tablets: 768px and up */
342+
@media (min-width: 768px){
343+
.card-deck {
344+
margin: 1rem;
347345
}
348346
}
349347

350-
@media (min-width: 576px){
348+
/* desktops: 992px and up */
349+
@media (min-width: 992px) {
351350
.card-deck {
352-
margin: 1rem!important;
351+
flex-flow: row nowrap;
353352
}
354-
.card-deck .card {
355-
margin-right: 0;
356-
margin-left: 0;
353+
.card-deck > .card {
354+
margin: 0 1rem 0 0; /* gap */
357355
}
358356
}
359357

358+
/* proportions */
359+
.cd-30 {
360+
flex: 1 0 32.185%!important;
361+
}
362+
363+
.cd-70 {
364+
flex: 1 0 65.815%!important;
365+
}
366+
360367
/* CARD TYPE */
361368
.text-justify {
362369
margin-top: 1rem;

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1515
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
1616
<!-- Poppins Font -->
17-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
17+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
1818

1919
<!-- Favicons -->
2020
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

‎informacoes.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<link rel="stylesheet" href="./css/toc.css?ver=1.15" />
1717
<!-- Poppins Font -->
1818
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
19-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
19+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
2020

2121
<!-- Favicons -->
2222
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

‎leitos.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1515
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
1616
<!-- Poppins Font -->
17-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
17+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
1818

1919
<!-- Favicons -->
2020
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

‎midia.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1515
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
1616
<!-- Poppins Font -->
17-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
17+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
1818

1919
<!-- Favicons -->
2020
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

‎municipios.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1515
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
1616
<!-- Poppins Font -->
17-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
17+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
1818

1919
<!-- Favicons -->
2020
<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 -->
207207
<div class="card-deck hosp">
208208
<!-- COLUMNS.NUM -->
209209
<!-- HOSPITALIZAÇÕES.CONTENT.CARD -->
210-
<div class="card cd-30 cd-gap">
210+
<div class="card cd-30">
211211
<div class="card-body">
212212

213213
<!-- CARD.HEADER -->
@@ -308,7 +308,7 @@ <h5 class="card-title">Casos graves de COVID-19 em <span class="municipio"></spa
308308
<!-- Velocidade-->
309309
<div class="card-deck vel">
310310
<!-- VELOCIDADE.CONTENT.CARD -->
311-
<div class="card cd-30 cd-gap">
311+
<div class="card cd-30">
312312
<div class="card-body">
313313

314314
<!-- CARD.HEADER -->
@@ -359,7 +359,7 @@ <h5 class="card-title">Velocidade de propagação em <span class="municipio"></s
359359
<div class="card-deck infec">
360360
<!-- COLUMNS.NUM -->
361361
<!-- TAXA.CONTENT.CARD -->
362-
<div class="card cd-30 cd-gap">
362+
<div class="card cd-30">
363363
<div class="card-body">
364364

365365
<!-- CARD.HEADER -->
@@ -412,7 +412,7 @@ <h5 class="card-title">Taxa de infecção em <span class="municipio"></span></h5
412412
<!-- Sobre -->
413413
<div class="card-deck sobre">
414414
<!-- SOBRE.CONTENT.CARD -->
415-
<div class="card cd-30 cd-gap">
415+
<div class="card cd-30">
416416
<div class="card-body">
417417

418418
<!-- CARD.HEADER -->

‎perguntas.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1515
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
1616
<!-- Poppins Font -->
17-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
17+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
1818

1919
<!-- Favicons -->
2020
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

‎progressao.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1515
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
1616
<!-- Poppins Font -->
17-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
17+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
1818

1919
<!-- Favicons -->
2020
<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>
157157
<!-- NEW.CARD -->
158158

159159
<!-- GRAPH.CARD -->
160-
<div class="card cd-70 cd-gap">
160+
<div class="card cd-70">
161161
<div class="card-body">
162+
162163
<!-- CARD.GGPLOT -->
163164
<div data-src="./web/plot.forecast.exp.html" class="codegena_iframe"
164-
data-css="background:url('./img/loading.gif') white center center no-repeat;border:0px;"
165-
data-responsive="true">
165+
data-css="background:url('./img/loading.gif') white center center no-repeat;border:0px;"
166+
data-responsive="true">
166167
<img src=./web/plot.forecast.exp.svg class="placeholder_svg" width="100%">
167168
</div>
168169
<script src="./js/async-iframe.js"></script>
@@ -173,7 +174,6 @@ <h1 class="display" id="page-title">Brasil</h1>
173174
<small class="chartLegendSquare" id="legendBlue">Previsão</small>
174175
</div>
175176

176-
177177
</div>
178178
</div>
179179

‎sobre.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1515
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
1616
<!-- Poppins Font -->
17-
<link href="./css/custom.css?ver=1.63" rel="stylesheet">
17+
<link href="./css/custom.css?ver=1.64" rel="stylesheet">
1818

1919
<!-- Favicons -->
2020
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">

0 commit comments

Comments
 (0)