Skip to content

Instantly share code, notes, and snippets.

@varjmes

varjmes/website.html

Created July 13, 2023 15:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save varjmes/ac50d7966a3a68a7c2f30b6cc2934cfe to your computer and use it in GitHub Desktop.
Save varjmes/ac50d7966a3a68a7c2f30b6cc2934cfe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
website.html
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.cache.lol/css/style.css">
<style>
body {
background-color: var(--violet-3) !important;
margin: var(--spacing);
max-width: 1200px;
}
header {
color: var(--grey-0) !important;
margin-top: 0;
margin-right: 0;
margin-left: 0.25em;
}
.logotype {
color: var(--grey-0) !important;
}
aside {
display: none;
max-width: 500px;
margin-bottom: calc(var(--spacing) * 2);
}
aside:has(.statuslol_container) {
display: block;
}
.statuslol {
background: #ffdbdb !important;
padding: 1em 1em 0.75em 1em !important;
}
.statuslol_content p {
margin-bottom: 0 !important;
}
.statuslol_emoji_container {
font-size: unset !important;
}
.statuslol_emoji_container img {
width: 35px;
height: 35px;
}
section {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-row-gap: var(--spacing);
grid-column-gap: calc(var(--spacing) * 1.5);
}
figure img {
border: 3px solid;
border-color: var(--grey-0);
border-radius: var(--radius);
max-width: 100%;
width: 400px;
height: 250px;
object-fit: cover;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
figure img:hover {
cursor: pointer;
box-shadow: 1px 16px 29px -5px rgba(0, 0, 0, 0.75);
}
footer {
border: none;
margin: 0;
}
footer a {
margin: 0 5px;
}
footer a:first-of-type {
margin-left: 0;
padding-left: 0;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
/* The Close Button */
#close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
#close:hover,
#close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
section {
text-align: center;
}
@media (min-width: 600px) {
section {
text-align: left;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 750px) {
section {
text-align: left;
grid-template-columns: repeat(3, 1fr);
}
}
</style>
</head>
<body>
<header class="logotype">
<h1>
jmes.omg.lol
<img src="https://cdn.cache.lol/img/prami.svg" alt="Prami, the omg.lol official logo, a smiling love heart with rosy cheeks">
</h1>
</header>
<aside>
<div class="statuslol_container"><div class="statuslol" style="display: flex; flex-wrap: wrap; gap: 1em; background: #dbfff3; color: #111; border-radius: .5em; padding: 1em;"><div class="statuslol_emoji_container" style="flex: 0 0 1em; font-size: 3em; padding-right: 0;"><img class="statuslol_emoji" style="width: 1.5em;" alt="Laptop" src="https://cdn.cache.lol/type/fluentui-emoji-main/assets/Laptop/3D/laptop_3d.png"></div><div class="statuslol_content" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0; margin: -.5em 0 0 0; text-align: left; overflow-wrap: break-word; overflow-wrap: anywhere; color: #111;"><p>Building my portfolio for <a href="https://jmes.omg.lol">https://jmes.omg.lol</a>!</p> <div class="statuslol_time"><small style="opacity: .5; color: #111;"><a style="color: #111;" href="https://jmes.status.lol/63e65b8372a57">5 months ago</a></small></div></div></div></div><script src="https://status.lol/jmes.js?time&amp;link&amp;fluent&amp;pretty"></script>
</aside>
<section>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/jHnkIJy.png" alt="A digital illustration of Totoro! He’s staring straight head, grinning a big toothy grin with a leaf on his head. Behind him is a circle of brown twigs with green leaves. I’ve used Procreate brushes that mimic pencil and watercolour.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/OUeLesV.png" alt="A digital drawing of myself. Yellow background. Blue shirt. Three toned Caucasian skin. Resting my cheek on my hand with cocked eyebrows. Black beanie, black round rimmed glasses. I did not draw my eyes because that shit is hard.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/ME6M6LN.png" alt="A simple lined illustration. Fast food fries within a light purple box (think McDonalds). It has a cute smiling face on the front.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/wO0dmJd.png" alt="A pixel art piece. An orange leaved tree with a dark think trunk sits on a grey background. A few leaves have fallen off into the wind.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/9HlZjA8.png" alt="A pixel art piece. A white castle with blue turrets faces us head on. It's sitting on a floating island just wider than the castle. All is backed by a pink setting sky and a few fluffy clouds.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/LbgU9bQ.png" alt="A pixel art rendition of the famously botched restoration of Ecce Homo.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/xptgTIl.png" alt="A pixel art piece. A birds eye view of farmland surrounded by a large forest with a river running between it.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/pCxupNe.gif" alt="An animated pixel art piece. A magpie is perched atop a locked treasure chest. Both bird and chest are glowing a pulsating light blue.">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/auNPhf8.png" alt="A digital drawing in a painterly style. A dimly lit bagel sits on a black background. Sesame seeds floating in space, the center of the bagel reads 'Sucked into a bagel', referencing the film Everything Everywhere All at Once (2022).">
</figure>
<figure>
<img class="modal-trigger" src="https://i.imgur.com/S4xHufv.png" alt="A grayscale pixel art piece. Batman is standing on a roof within a line of building roofs. There are tall skyscrapers in the background with hundreds of lit windows. In the distance we can see the bat signal has been raised.">
</figure>
</section>
<footer>
<a href="https://strangeobject.space/@james" rel="me noopener noreferrer">
mastodon
</a>
|
<a href="https://jmes.tech" rel="noopener noreferrer"> blog </a>
|
<a href="https://home.omg.lol/referred-by/jmes">built by me, powered by
<span class="logotype">omg<span class="logotype dot" style="color: #f06595">.</span>lol</span>
</a>
</footer>
<div id="modal" class="modal">
<span id="close">×</span>
<img class="modal-content" id="modal-image">
</div>
<script type="text/javascript">
const modal = document.getElementById("modal");
const images = document.getElementsByClassName("modal-trigger");
const modalImage = document.getElementById("modal-image");
function lightbox(e) {
modal.style.display = "block";
modalImage.src = this.src;
modalImage.alt = this.alt;
}
for (let img of images) {
img.addEventListener("click", lightbox);
}
const close = document.getElementById("close");
close.addEventListener("click", () => {
modal.style.display = "none";
});
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment