diff --git a/index.html b/index.html index 073efcb..96286e2 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ -
@@ -16,7 +16,14 @@

ESSA

+
+
+ +
+ + diff --git a/style.css b/style.css index 417a68d..ab8f077 100644 --- a/style.css +++ b/style.css @@ -11,27 +11,33 @@ header { padding: 2rem; } +/* @media only screen and (min-width: 600px) { + .gallery { + columns: 2; + } +} */ + + .gallery { width: 100%; margin: 0 auto; columns: 3; - columns-gap: 0.25rem; + min-height: 100vh; padding: 2rem; & .media__container { break-inside: avoid; - /* background-color: black; */ position: relative; overflow: hidden; cursor: pointer; + margin-bottom: 0.5rem; & img { - border-radius: 3vh; + border-radius: 2px; width: 100%; - display: block; - margin-bottom: 0.5rem; + } & .media__button { position: absolute; @@ -47,8 +53,9 @@ header { -o-transform: translateY(-50%) translateX(-50%); } &:hover img { - /* scale: 1.1; */ + scale: 1.1; transition: 500ms; + border-radius: 2px; filter: brightness(0.5); -webkit-filter: brightness(0.5); -webkit-transition: 500ms; @@ -98,6 +105,13 @@ header { backdrop-filter: blur(5px) brightness(0.5); } } + +@media (max-width: 800px) { + .gallery { + columns: 2; + } +} + .gallery__loading { text-align: center; & img {