diff options
| -rw-r--r-- | contact.css | 30 | ||||
| -rw-r--r-- | gallerie.css | 36 |
2 files changed, 40 insertions, 26 deletions
diff --git a/contact.css b/contact.css index 0fc5988..6bd68ec 100644 --- a/contact.css +++ b/contact.css @@ -1,18 +1,20 @@ -main { - display: grid; - grid-template-columns: 60% 40%; - padding-right: 4%; -} +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 60% 40%; + padding-right: 4%; + } -main > div { - padding: 2%; -} + main > div { + padding: 2%; + } -#contact-us dl { - display: grid; - grid-template-columns: 1fr 2fr; -} + #contact-us dl { + display: grid; + grid-template-columns: 1fr 2fr; + } -#contact-us dd { - margin-left: inherit; + #contact-us dd { + margin-left: inherit; + } } diff --git a/gallerie.css b/gallerie.css index f8f6369..a75faf7 100644 --- a/gallerie.css +++ b/gallerie.css @@ -1,18 +1,9 @@ -main { - padding-top: 2%; - padding-bottom: 2%; - padding-right: 2%; -} - .mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr)); grid-gap: 0.8em; } -.mosaic.photos { - --mosaic-side: 14em; -} .mosaic .photo { position: relative; width: 100%; @@ -38,9 +29,6 @@ main { filter: none; } -.mosaic.videos { - --mosaic-side: 25em; -} .mosaic .video { position: relative; width: 100%; @@ -54,3 +42,27 @@ main { width: 100%; height: 100%; } + +@media (min-width: 40em) { + main { + padding-top: 2%; + padding-bottom: 2%; + padding-right: 2%; + } + + .mosaic.photos { + --mosaic-side: 14em; + } + .mosaic.videos { + --mosaic-side: 25em; + } +} + +@media (max-width: 40em) { + .mosaic.photos { + --mosaic-side: 8em; + } + .mosaic.videos { + --mosaic-side: 10em; + } +} |