From 497043edf50bc83f7e2b51464a2e0e756ab3899e Mon Sep 17 00:00:00 2001 From: Halbear Date: Wed, 20 May 2026 17:34:46 +0100 Subject: [PATCH] GalleryExample --- Gallery.html | 74 ++++++++++++++++++++++++++++++++ StyleSheets/ExampleStructure.css | 36 ++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 Gallery.html diff --git a/Gallery.html b/Gallery.html new file mode 100644 index 0000000..3626a4e --- /dev/null +++ b/Gallery.html @@ -0,0 +1,74 @@ + + + + + Title + + + +
+
+ +

ExampleTitle

+
+
+
+
+ + + +
+ +
+
+
+ + +
+

Gallery

+
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/StyleSheets/ExampleStructure.css b/StyleSheets/ExampleStructure.css index 2ac9709..fa1a6dc 100644 --- a/StyleSheets/ExampleStructure.css +++ b/StyleSheets/ExampleStructure.css @@ -12,6 +12,12 @@ border:none; background-color: transparent; } +.hidden{ + display: none !important; +} +.FlexWrap{ + flex-wrap: wrap; +} body{ max-width: 100vw; overflow-x:hidden; @@ -231,3 +237,33 @@ body{ align-content: center; } } + +/*Gallery Stuff*/ +.GalleryImageGridContainer:hover{ + filter: drop-shadow(#28947f -1.5vh 1.5vh); + cursor: pointer; + transform: translate(0.25vh,-0.25vh) scale(1.01); +} +.GalleryImageGridContainer.Wide{ + width:18rem; + height: 14rem; +} +.GalleryImageGridContainer{ + margin: 1vh; + width: 14rem; + height: 14rem; + transition: 0.25s; +} + +@media only screen and (max-aspect-ratio: 12/9) { + .GalleryImageGridContainer.Wide{ + width:8rem !important; + height: 6rem !important; + } + .GalleryImageGridContainer{ + margin: 1rem; + width: 6rem !important; + height: 6rem !important; + transition: 0.25s; + } +} \ No newline at end of file