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 "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 {
margin:0;
@ -85,6 +32,7 @@ img {
main {
max-width:$main-wrap;
padding:$main-padding;
margin:3em auto;
h2 {
font-size:3em;
@ -94,6 +42,15 @@ main {
&.recipe {
background:$recipe-background;
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 {
display:block;
@ -138,6 +95,8 @@ main {
border-radius:$article-border-radius;
overflow:hidden;
box-sizing:border-box;
width:$article-width;
margin:$article-margin;
&:hover {
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;
}
}