Pictures page base
This commit is contained in:
parent
7c7cf7b406
commit
21855241fd
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -45,6 +45,9 @@
|
||||||
<a title="i love email" href="mailto:em@ilia.moe">
|
<a title="i love email" href="mailto:em@ilia.moe">
|
||||||
📠
|
📠
|
||||||
</a>
|
</a>
|
||||||
|
<a id="camera" title="picture" href="pictures">
|
||||||
|
📷
|
||||||
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,9 @@ if (is_mobile === '1') {
|
||||||
}
|
}
|
||||||
|
|
||||||
const moon = document.getElementById('moonlink');
|
const moon = document.getElementById('moonlink');
|
||||||
console.log(moon);
|
|
||||||
moon.onmouseover = function() {moon.innerHTML = "🌛"}
|
moon.onmouseover = function() {moon.innerHTML = "🌛"}
|
||||||
moon.onmouseout = function() {moon.innerHTML = "🌜"}
|
moon.onmouseout = function() {moon.innerHTML = "🌜"}
|
||||||
|
|
||||||
|
const camera = document.getElementById('camera');
|
||||||
|
camera.onmouseover = function() {camera.innerHTML = "📸"}
|
||||||
|
camera.onmouseout = function() {camera.innerHTML = "📷"}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
div {
|
&>div {
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
grid-area: center;
|
grid-area: center;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue