From 21855241fdb78ed45ac138a85a3952ceca29e930 Mon Sep 17 00:00:00 2001 From: Emilia Date: Tue, 21 Nov 2023 22:38:26 -0500 Subject: [PATCH] Pictures page base --- src/index.html | 3 ++ src/js/index.js | 5 ++- src/pictures.html | 36 +++++++++++++++++++++ src/scss/pictures.scss | 50 ++++++++++++++++++++++++++++++ src/scss/waltuh/layouts/_grid.scss | 2 +- 5 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 src/pictures.html create mode 100644 src/scss/pictures.scss diff --git a/src/index.html b/src/index.html index d945138..b53ea7b 100644 --- a/src/index.html +++ b/src/index.html @@ -45,6 +45,9 @@ 📠 + + 📷 + diff --git a/src/js/index.js b/src/js/index.js index d0b7a65..8750372 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -12,6 +12,9 @@ if (is_mobile === '1') { } const moon = document.getElementById('moonlink'); -console.log(moon); moon.onmouseover = function() {moon.innerHTML = "🌛"} moon.onmouseout = function() {moon.innerHTML = "🌜"} + +const camera = document.getElementById('camera'); +camera.onmouseover = function() {camera.innerHTML = "📸"} +camera.onmouseout = function() {camera.innerHTML = "📷"} diff --git a/src/pictures.html b/src/pictures.html new file mode 100644 index 0000000..89020ca --- /dev/null +++ b/src/pictures.html @@ -0,0 +1,36 @@ + + + + + Emilia Allison + + + + + +
+
+
+
+

+ Pictures +

+

gated because the internet is scary

+
+
+ + + + +
+
+ + +
+
+ + + + diff --git a/src/scss/pictures.scss b/src/scss/pictures.scss new file mode 100644 index 0000000..464a7b5 --- /dev/null +++ b/src/scss/pictures.scss @@ -0,0 +1,50 @@ +@import "waltuh/waltuh"; + +main { + grid-template-rows: 0.1fr 1fr 1fr !important; // Override default + grid-template-columns: 15vw 1fr 15vw !important; // Mobile compat is less of a concern for this page + + div:first-child { + div:first-child { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + } + } +} + +h1 { + margin-top: 3vh; +} + +.gallery { + width: 100%; + margin-top: 3vh; + + display: flex; + justify-content: space-evenly; + align-items: center; + + flex-wrap: wrap; + + img { + width: clamp(12rem, calc(20vw + 1vmin), calc(20vw + 1vmin)); // Add 1vmin to account for padding + aspect-ratio: auto; + + margin: 1vmin 1vmin; + padding: 1vmin 1vmin; + + background: white; + + + .black-bg { + background: black !important; + } + + .no-bg { + background: transparent !important; + } + } + + +} diff --git a/src/scss/waltuh/layouts/_grid.scss b/src/scss/waltuh/layouts/_grid.scss index a620444..5c26afe 100644 --- a/src/scss/waltuh/layouts/_grid.scss +++ b/src/scss/waltuh/layouts/_grid.scss @@ -22,7 +22,7 @@ height: 100vh; width: 100%; - div { + &>div { justify-self: center; grid-area: center;