diff --git a/css/gallery.css b/css/gallery.css index 6eeaf03..ed100bd 100644 --- a/css/gallery.css +++ b/css/gallery.css @@ -20,11 +20,13 @@ .gallery-item { margin: 0.5rem; padding: 0; - max-width: 300px; height: 200px; + max-width: 300px; height: auto; background-color: var(--bg-2); border-radius: var(--rad); + position: relative; + flex: 1 0 150px; transition: transform 0.15s cubic-bezier(.19,1,.22,1); @@ -33,13 +35,46 @@ transform: scale(1.1) rotate(5deg); box-shadow: var(--shadow); } +.gallery-item:after { + content: ""; + display: block; + padding-bottom: 100%; +} .gallery-image { margin: 0; padding: 0; width: 100%; height: 100%; + top: 0; bottom: 0; left: 0; right: 0; + + position: absolute; + object-fit: cover; + object-position: center; border-radius: var(--rad); } + +/*@media (max-width: 701px) { + .gallery-item { + margin: 0; + + width: 33.33%; height: auto; + + flex: none; + + border-radius: 0; + + transform: none; + } + .gallery-item:after { + content: ""; + display: block; + padding-bottom: 100%; + } + + .gallery-image { + border-radius: 0; + } +}*/ diff --git a/css/image.css b/css/image.css index 45406c6..f77150d 100644 --- a/css/image.css +++ b/css/image.css @@ -8,6 +8,8 @@ height: 69vh; position: relative; + + transition: height 0.15s cubic-bezier(.19,1,.22,1); } @media (max-width: 600px) { diff --git a/css/master.css b/css/master.css index 0c396b6..c52b3b6 100644 --- a/css/master.css +++ b/css/master.css @@ -22,6 +22,8 @@ --shadow: 6px 6px 10px #15151588; --rad: 5px; + + --square: 33.33%; } * { diff --git a/css/nav.css b/css/nav.css index 737bbd6..4a7fd07 100644 --- a/css/nav.css +++ b/css/nav.css @@ -33,7 +33,7 @@ nav hr { width: auto; justify-content: space-between; } -@media (max-width: 450px) { +@media (max-width: 569px) { .nav-name h3, .nav-name { display: none; } diff --git a/index.php b/index.php index ebeb601..f835999 100644 --- a/index.php +++ b/index.php @@ -20,8 +20,8 @@ ?>
-

Fluffys Super Duper Secrete Project!

-

Fluffy's test website on uploading images to a database!

+

Welcome!

+

*internal screaming*