Front page copy is more interesting

This commit is contained in:
Rob Kelly 2025-12-20 15:12:42 -07:00
parent e863616086
commit 8caff7960d
2 changed files with 37 additions and 8 deletions

View File

@ -8,6 +8,10 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
<!-- REMOVEME !-->
<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=BBH+Bartle&family=BBH+Bogle&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
@ -145,19 +149,22 @@
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
<main class="container mt-2 fs-4 flex-fill"> <main class="container mt-2 fs-4">
<div class="section p-5 text-center"> <div class="section pt-2 text-center">
<p> <p>The</p>
We are artists, designers, developers, and creators based in Albuquerque, New Mexico. <span class="h1 text-impact">INTRUSIVE THOUGHTS</span>
<span class="h1 text-impact">CREATIVE COLLECTIVE</span>
</div>
<div class="section px-5 text-center">
<p class="fading-container">
are artists, designers, developers, <span class="fading">creators, comrades, musicians, technicians, magicians, engineers, entrepreneurs, philosophers, scientists, doctors, poets, warriors, line cooks, private investigators, teachers, train conductors, renegades, fugitives, captains of ships, streetfighters, economists, browsers, mid-sized luxury sedans, animals, out-of-place artifacts, team leaders, billionaires, stalactites, small rodents, firefighters, losers, bowlers, shamans, frameworks, architects, camels, nudists, and so on, and so forth</span>
</p> </p>
<p> <p>
In the summer of 2024, we formed the Intrusive Thoughts Creative Collective as a collectively-organized independent games studio. who assembled as a collectively-organized independent games studio at their secret headquarters in the city of Albuquerque, New Mexico in the summer of 2024 so that by combining their collective efforts they might produce for your enjoyment something
</p>
<p>
We make games to tell the stories we want to tell.
</p> </p>
</div> </div>
</main> </main>
<div class="h2 text-impact flex-fill">interesting.</div>
<footer class="pt-5"> <footer class="pt-5">
<div class="container text-center text-muted text-small"> <div class="container text-center text-muted text-small">
<p> <p>
@ -172,6 +179,15 @@
</footer> </footer>
</div> </div>
</body> </body>
<script>
document.querySelectorAll('.fading').forEach(el => {
const words = el.textContent.trim().split(/,/);
el.innerHTML = "";
for(let i = 0; i < words.length; i++) {
el.innerHTML += `<span style="opacity: ${1.0 - i / (words.length)}; font-size: calc(1.5rem * ${1.0 - i / (words.length + 16)});">${words[i]}, </span>`;
}
});
</script>
<script> <script>
(function() { (function() {
// Executes when DOM available // Executes when DOM available

View File

@ -54,10 +54,23 @@ a {
.text-small { .text-small {
font-size: 12px; font-size: 12px;
} }
.text-xsmall { .text-xsmall {
font-size: 10px; font-size: 10px;
} }
.text-impact {
font-family: "BBH Bartle", sans-serif;
font-weight: 400;
font-style: normal;
width: 100%;
text-align: center;
}
.fading-container {
font-size: 1.5rem;
}
.carousel-fit { .carousel-fit {
height:40vh; height:40vh;
width: 100vw; width: 100vw;