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;
// 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-color:#000;
$article-date-color:#888;

26
sass/style.scss
View File

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