emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pictures page base

This commit is contained in:
Emilia Allison 2023-11-21 22:38:26 -05:00
parent 7c7cf7b406
commit 21855241fd
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
5 changed files with 94 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.html
View File

@ -45,6 +45,9 @@
<a title="i love email" href="mailto:em@ilia.moe">
&#128224
</a>
<a id="camera" title="picture" href="pictures">
&#128247
</a>
</footer>
</main>
</html>

5
src/js/index.js
View File

@ -12,6 +12,9 @@ if (is_mobile === '1') {
}
const moon = document.getElementById('moonlink');
console.log(moon);
moon.onmouseover = function() {moon.innerHTML = "&#127771"}
moon.onmouseout = function() {moon.innerHTML = "&#127772"}
const camera = document.getElementById('camera');
camera.onmouseover = function() {camera.innerHTML = "&#128248"}
camera.onmouseout = function() {camera.innerHTML = "&#128247"}

36
src/pictures.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>Emilia Allison</title>
<link rel="stylesheet" href="css/pictures.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="overlay"></div>
<main class="offset-grid--top--wide fullsize side-a">
<div>
<div>
<h1>
Pictures
</h1>
<h2>gated because the internet is scary</h2>
</div>
<div class="gallery">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F2.bp.blogspot.com%2F-VODMluYzKLA%2FUQDmN2PsvPI%2FAAAAAAAAAXQ%2FbCXLPQVOopM%2Fs1600%2Fwatermelon.jpg&f=1&nofb=1&ipt=51fa9013d1c92f230719fc93cc490475e46bb3775730cbbadd6803d5ffda7582&ipo=images" />
<img class="no-bg" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.gannett-cdn.com%2F-mm-%2F82d06058e2866109dabc6df7695aa0dffd4fc59d%2Fc%3D0-543-1618-1457%2Flocal%2F-%2Fmedia%2F2017%2F09%2F14%2FDetroitFreeP%2FDetroitFreePress%2F636410008923334869-AP17255445389919.jpg%3Fwidth%3D3200%26height%3D1680%26fit%3Dcrop&f=1&nofb=1&ipt=a47769f7a186156f67c89dae605251da4c74ad51ff95a982d9edd1d4fffc00c4&ipo=images" />
<img class="black-bg" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Frlv.zcache.com%2Fhappy_3d_effect_emoji_with_sunglasses_classic_round_sticker-r44667472b52b46468b185042e78df585_0ugmp_8byvr_704.jpg&f=1&nofb=1&ipt=53c07ce5915c3f450c1d03a77955fe2613de5b29d68b7d6ff27287427927da41&ipo=images" />
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fjefftcanndotcom.files.wordpress.com%2F2021%2F03%2Fshrimp.jpg&f=1&nofb=1&ipt=eea5f7486eca46714f74e8acd4b6983cfcfe946035d491e47f7fc3ea8408cd0c&ipo=images" />
</div>
</div>
<a href="../">
</a>
<div class="side-a__main-content-cover"></div>
</main>
<footer class="lock-bottom">
<p><a href="../">Return</a></p>
</footer>
</body>
</html>

50
src/scss/pictures.scss Normal file
View File

@ -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;
}
}
}

2
src/scss/waltuh/layouts/_grid.scss
View File

@ -22,7 +22,7 @@
height: 100vh;
width: 100%;
div {
&>div {
justify-self: center;
grid-area: center;