em/receptty.org
2
1
Fork 1
Code Pull Requests Actions Releases Activity

Zobrazení receptů v mřížce a škálování na malé obrazovky

Browse Source
This commit is contained in:
Emil Miler 2020-11-30 15:24:52 +01:00
parent 26be6b8521
commit 18e0f22f02
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sass/_variables.scss
View File

@ -37,10 +37,6 @@ $recipe-background:#fff;
$recipe-wrap:800px; $recipe-wrap:800px;
// article // article
$article-width:24%;
$article-width-narrow:48%;
$article-margin:0 .5% 2em .5%;
$article-margin-narrow:0 1% 2em 1%;
$article-background:#fff; $article-background:#fff;
$article-color:#000; $article-color:#000;
$article-date-color:#888; $article-date-color:#888;

26
sass/style.scss
View File

@ -32,7 +32,7 @@ img {
main { main {
max-width:$main-wrap; max-width:$main-wrap;
padding:$main-padding; padding:$main-padding;
margin:3em auto; margin:0 auto 3em auto;
h2 { h2 {
font-size:3em; font-size:3em;
@ -45,6 +45,7 @@ main {
padding:1em 4em; padding:1em 4em;
border:1px solid $border; border:1px solid $border;
border-radius:8px; border-radius:8px;
margin-top: 2em;
table { table {
float:right; float:right;
@ -82,9 +83,11 @@ main {
section { section {
&.list { &.list {
display:flex; display:grid;
flex-wrap:wrap; grid-template-columns: auto auto auto auto;
justify-content:center; column-gap: .5em;
row-gap: 2em;
margin-bottom: 2em;
} }
article { article {
@ -95,8 +98,7 @@ main {
border-radius:$article-border-radius; border-radius:$article-border-radius;
overflow:hidden; overflow:hidden;
box-sizing:border-box; box-sizing:border-box;
width:$article-width; width:100%;
margin:$article-margin;
&:hover { &:hover {
color:$anchor-hover-color; color:$anchor-hover-color;
@ -121,7 +123,7 @@ main {
} }
} }
@media screen and (max-width: 699px){ @media screen and (max-width: 950px){
main { main {
margin:0; margin:0;
@ -130,6 +132,8 @@ main {
padding:1em; padding:1em;
border:none; border:none;
border-radius:0; border-radius:0;
margin:0;
max-width: 100%;
table { table {
float:none; float:none;
@ -139,11 +143,9 @@ main {
} }
h2 { margin-top:0.85em; } h2 { margin-top:0.85em; }
}
main section article { section.list {
width:$article-width-narrow; grid-template-columns: auto auto;
margin:$article-margin-narrow; }
} }
} }