Update home page #1
Conversation
✅ Deploy Preview for arcade-metalmancy ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for prod-arcade-metalmancy ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
@cdsupina and I talked about it and we think this looks better on the thetawave main website, while this arcade site will just link to a couple of games (it was just a placeholder up until now). So can you copy this index.html and style.css to https://github.com/thetawavegame/thetawave/blob/main/wasm-page-template/index.html ? The only difference is the logic for the button onClick.
| <div class="screen scanlines"> | ||
| <div class="flexbox hcenter screen-content"> | ||
| <div id="logo-container" class="hcenter"> | ||
| <img src="logo.gif" width="800" alt="logo"/> |
There was a problem hiding this comment.
| <img src="logo.gif" width="800" alt="logo"/> | |
| <img src="https://assets.thetawave.metalmancy.tech/promo/thetawave_logo_animated.gif" width="800" alt="logo"/> |
I put this thing in S3, since we have used it a couple of times (probably better than google drive). Depending on how i set up CORS, we may need to do a little redirect in "dev_netlify.toml" and "prod_netlify.toml" to route "/logo.gif" to "https://assets.thetawave.metalmancy.tech/promo/thetawave_logo_animated.gif"
| a:active, a:focus, a:hover { | ||
| background: var(--primaryGradient); | ||
| color: var(--bgColor); | ||
| animation: glitch 0.3s cubic-bezier(0.5, 1, 0.5, 1) both; |
There was a problem hiding this comment.
This is such a neat trick. A good CSS lesson for the day :)
The buttons & logo are animated.