diff --git a/sass/style.scss b/sass/style.scss index 16b9671..a7e0876 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -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; + } + +}