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

Zlepšení struktury responzivity v CSS

Browse Source
This commit is contained in:
Emil Miler 2020-11-30 15:12:49 +01:00
parent 3ec8c3191b
commit 26be6b8521
1 changed files with 38 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
sass/style.scss
View File

@ -5,59 +5,6 @@
@import "tables"; @import "tables";
@import "fonts"; @import "fonts";
@media screen and (max-width: 699px){
main {
margin:0;
&.recipe {
padding:1em;
border:none;
border-radius:0;
table {
float:none;
width:100%;
margin:0 0 2em 0;
}
}
h2 { margin-top:0.85em; }
}
main section article {
width:$article-width-narrow;
margin:$article-margin-narrow;
}
}
@media screen and (min-width: 700px){
main {
margin:3em auto;
&.recipe {
padding:1em 4em;
border:1px solid $border;
border-radius:8px;
table {
float:right;
width:45%;
margin:0 0 2em 2em;
}
}
h2 { margin:0; }
}
main section article {
width:$article-width;
margin:$article-margin;
}
}
html, body { html, body {
margin:0; margin:0;
@ -85,6 +32,7 @@ img {
main { main {
max-width:$main-wrap; max-width:$main-wrap;
padding:$main-padding; padding:$main-padding;
margin:3em auto;
h2 { h2 {
font-size:3em; font-size:3em;
@ -94,6 +42,15 @@ main {
&.recipe { &.recipe {
background:$recipe-background; background:$recipe-background;
max-width:$recipe-wrap; max-width:$recipe-wrap;
padding:1em 4em;
border:1px solid $border;
border-radius:8px;
table {
float:right;
width:45%;
margin:0 0 2em 2em;
}
img { img {
display:block; display:block;
@ -138,6 +95,8 @@ 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;
margin:$article-margin;
&:hover { &:hover {
color:$anchor-hover-color; color:$anchor-hover-color;
@ -162,3 +121,29 @@ main {
} }
} }
@media screen and (max-width: 699px){
main {
margin:0;
&.recipe {
padding:1em;
border:none;
border-radius:0;
table {
float:none;
width:100%;
margin:0 0 2em 0;
}
}
h2 { margin-top:0.85em; }
}
main section article {
width:$article-width-narrow;
margin:$article-margin-narrow;
}
}