81 lines
3.2 KiB
HTML
81 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Puercito Fiction</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script>
|
|
// Randomize background color on page load
|
|
const colors = [
|
|
'#f5d9e3', // muted rose
|
|
'#f5e3d9', // muted peach
|
|
'#e3d9f5', // muted lavender
|
|
'#f5f5d9', // muted yellow
|
|
'#d9f5e3', // muted teal
|
|
'#f5d9d9', // muted coral
|
|
'#d9e3f5', // muted blue
|
|
'#f5dfe3' // muted peach-pink
|
|
];
|
|
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
|
document.documentElement.style.setProperty('--bg-color', randomColor);
|
|
|
|
// Randomize byline on page load
|
|
const bylines = [
|
|
'vamos a la casa',
|
|
'population: 3 (7 if you count the dogs, 8 with the cat)',
|
|
'don\'t look now it\'s right behind you',
|
|
'time will forget (it\'s mutual)',
|
|
'blink and you\'ll miss it (please don\'t)',
|
|
'*whispers* everyone knows your business',
|
|
'too abstract for maps',
|
|
'who needs productivity when you can nap',
|
|
'arros con gris y puerco lechon por favor',
|
|
'established sometime, perhaps',
|
|
'it is a little pig'
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const randomByline = bylines[Math.floor(Math.random() * bylines.length)];
|
|
document.querySelector('.byline').textContent = randomByline;
|
|
});
|
|
</script>
|
|
</head>
|
|
<body style="background-color: var(--bg-color);">
|
|
<div class="container">
|
|
<header>
|
|
<h1>Puercito Fiction</h1>
|
|
</header>
|
|
|
|
<nav>
|
|
<a href="about.html">about</a>
|
|
<a href="comics.html">comics</a>
|
|
<a href="projects.html">projects</a>
|
|
<a href="https://pencilbooth.com/puercito" target="_blank" rel="noopener noreferrer">newsletter<img src="images/icons/external.svg" alt="" class="external-icon"></a>
|
|
<a href="links.html">links</a>
|
|
<a href="contact.html">contact</a>
|
|
<a href="now.html">now</a>
|
|
<a href="uses.html">uses</a>
|
|
</nav>
|
|
|
|
<main>
|
|
<p class="byline">stories from the little town</p>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="social-links">
|
|
<a href="https://instagram.com/puercito" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
|
|
<img src="images/icons/instagram.svg" alt="Instagram" width="20" height="20">
|
|
</a>
|
|
<a href="mailto:hello@puercito.net" aria-label="Email">
|
|
<img src="images/icons/mail.svg" alt="Email" width="20" height="20">
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|