Looki2000/sussycraft.cubesoftware.xyz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sussy commit now theres commin soon on itchio sus sussybaka

Browse Source
This commit is contained in:
Looki2000 2023-03-21 12:03:05 +01:00
parent 136785e5be
commit c7a70fc5fc
3 changed files with 69 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -8,8 +8,9 @@
</head>
<body>
<script src="script.js"></script>
<video autoplay muted loop width="100%" height="100%" id="back_video">
<video muted loop width="100%" height="100%" id="back_video">
<source src="assets/video.mp4" type="video/mp4">
</video>
@ -27,8 +28,11 @@
<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' id="google_play_badge"/>
</a>
<a href="" id="itchio_badge_link">
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" id="itchio_badge_link">
<img alt="Available on itch.io" src="assets/itchio_badge.png" id="itchio_badge"/>
<div id="rotated_text">
<p>coming soon!</p>
</div>
</a>
</div>

33
script.js Normal file
View File

@ -0,0 +1,33 @@
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM fully loaded and parsed');
var rotated_text = document.getElementById('rotated_text');
var old_width = rotated_text.offsetWidth;
var width;
// animation frame loop
function loop() {
// get widt of div with id="rotated_text"
width = rotated_text.offsetWidth;
// if width has changed
if (width != old_width) {
// set new width
old_width = width;
// set font-size of p inside rotated_text to width * n
rotated_text.children[0].style.fontSize = width * 0.15 + 'px';
}
requestAnimationFrame(loop);
}
// start the loop
requestAnimationFrame(loop);
});

30
style.css
View File

@ -81,6 +81,7 @@ h1 {
#itchio_badge_link {
padding: 6.6%;
position: relative;
}
#itchio_badge {
@ -88,6 +89,35 @@ h1 {
margin-bottom: -4px;
}
#rotated_text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* bold font*/
font-weight: bold;
/* center text vertically */
display: flex;
align-items: center;
justify-content: center;
color: #cebf82;
}
#rotated_text p {
margin: 0;
/* rotate text */
transform: rotate(13deg);
text-shadow: 0 0 15px #000
}
footer {
--footer-height: 50px;