dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-07-06 19:40:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved heaventaker project page

Browse source
This commit is contained in:
Daniel Bulant 2023-05-08 19:09:17 +02:00
parent 68880fd9d3
commit 5a4d7e91ca
1 changed files with 62 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/routes/projects/heaventaker/+page.svelte
View file

@ -1,11 +1,20 @@
<script> <script>
import Button from "$lib/components/projects/heaventaker/button.svelte"; import { browser } from "$app/environment";
import HeaventakerButton from "$lib/components/projects/heaventaker/heaventakerButton.svelte";
let top = 76; let top = 76;
let remSize = 16;
$: if(browser) remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
function scroll() { function scroll() {
top = 76 - document.scrollingElement.scrollTop * (0.35 * window.innerWidth / 1456); const imageHeight = window.innerWidth*1080/2050-10*remSize;
const offset = 76;
// parallax scroll so that the image has only the center of it visible at the end
top = offset - Math.max(0, Math.min(imageHeight-offset, window.scrollY*0.4));
} }
$: if(browser) scroll();
</script> </script>
<svelte:head> <svelte:head>
@ -21,9 +30,9 @@
<section class="px-4 m-auto mb-5 max-w-200"> <section class="px-4 m-auto mb-5 max-w-200">
<div class="flex justify-between items-center flex-wrap"> <div class="flex justify-between items-center flex-wrap">
<Button href="https://heaventaker.danbulant.eu">Play online</Button> <HeaventakerButton href="https://heaventaker.danbulant.eu">Play online</HeaventakerButton>
<Button href="https://play.google.com/store/apps/details?id=eu.danbulant.heaventaker">Google Play</Button> <HeaventakerButton href="https://play.google.com/store/apps/details?id=eu.danbulant.heaventaker">Google Play</HeaventakerButton>
<Button href="https://github.com/danbulant/heaventaker">GitHub</Button> <HeaventakerButton href="https://github.com/danbulant/heaventaker">GitHub</HeaventakerButton>
</div> </div>
<div class="flex items-center justify-center flex-wrap flex-row-reverse"> <div class="flex items-center justify-center flex-wrap flex-row-reverse">
<div class="flex-grow" style="width: 300px;"> <div class="flex-grow" style="width: 300px;">
@ -45,20 +54,23 @@
</div> </div>
</section> </section>
<div class="bg-img secondary-image flex items-center justify-center"> <div class="bg-img image-uriel"></div>
</div>
<section class="px-4 m-auto mb-5 max-w-200"> <div class="bg-img secondary-image"></div>
<h2 class="text-2xl font-bold">Licensing</h2> <section class="licensing">
<div class="infobox">
<h2 class="text-2xl font-bold">Licensing</h2>
<p> <p>
The game is licensed under AGPLv3. This means it's free software, but you must give credit to the author and share your changes under the same license. Read full license <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">here</a>. The game is licensed under AGPLv3. This means it's free software, but you must give credit to the author and share your changes under the same license. Read full license <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">here</a>.
</p> </p>
<p> <p>
Images are licensed under CC-BY-SA. This means you must give credit to the author and share your changes under the same license. Images are licensed under CC-BY-SA. This means you must give credit to the author and share your changes under the same license.
</p> </p>
</div>
<img src="/screenshots/heaventaker/characters.png" width="640" height="381" alt="">
</section> </section>
<div class="bg-img image-michael"></div> <div class="bg-img image-michael"></div>
@ -70,8 +82,10 @@
} }
.main-image { .main-image {
background-image: url("/screenshots/heaventaker/heaventaker2.webp"); background-image: url("/screenshots/heaventaker/heaventaker2.webp");
background-size: calc(100vw - 10rem * 2050 / 1080) calc(100vw*1080/2050 - 10rem); --width: min(1800px, 100vw);
height: calc(100vw*1080/2050 - 10rem); --height: calc(var(--width)*1080/2050);
background-size: var(--width) var(--height);
height: var(--height);
} }
.secondary-image { .secondary-image {
background-image: url("/screenshots/heaventaker/lucifer.png"); background-image: url("/screenshots/heaventaker/lucifer.png");
@ -79,7 +93,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
background-color: #7F4953; background-color: #7F4953;
height: calc(100vw*0.509375); height: 90vh;
} }
.image-michael { .image-michael {
background-image: url("/screenshots/heaventaker/michael.webp"); background-image: url("/screenshots/heaventaker/michael.webp");
@ -88,8 +102,35 @@
height: calc(100vw*0.4312611012); height: calc(100vw*0.4312611012);
background-position: 100% 100%; background-position: 100% 100%;
} }
.image-uriel {
background-image: url("/screenshots/heaventaker/uriel.png");
background-size: cover;
background-repeat: no-repeat;
height: 90vh;
background-position: 50% 100%;
}
.licensing {
@apply px-4 py-8 m-auto mb-5 max-w-300 gap-5 flex items-center justify-center flex-wrap flex-row-reverse;
}
.licensing .infobox {
@apply fleg-grow max-w-60;
}
.licensing img {
@apply rounded w-full h-auto;
max-width: calc(600px - 15rem);
}
@media (max-width: 670px) {
.licensing .infobox {
@apply max-w-full;
}
.licensing img {
@apply max-w-full;
}
}
section { section {
margin-bottom: 0; @apply mb-0;
} }
p { p {
@apply my-2; @apply my-2;