Add the ember animation

This commit is contained in:
Ember 2021-12-17 22:19:50 -05:00
parent 8fc15e483b
commit d1d785b41e
No known key found for this signature in database
GPG key ID: D84A93D6860F93FD
4 changed files with 17 additions and 6 deletions

1
.gitattributes vendored
View file

@ -2,3 +2,4 @@
*.otf filter=lfs diff=lfs merge=lfs -text *.otf filter=lfs diff=lfs merge=lfs -text
*.woff filter=lfs diff=lfs merge=lfs -text *.woff filter=lfs diff=lfs merge=lfs -text
*.woff2 filter=lfs diff=lfs merge=lfs -text *.woff2 filter=lfs diff=lfs merge=lfs -text
*.wasm filter=lfs diff=lfs merge=lfs -text

View file

@ -17,6 +17,11 @@
<meta property="og:image:alt" content="Ember: vi/vir pronouns, a beautiful affront to order and reason; website: emii.gay/bio" /> <meta property="og:image:alt" content="Ember: vi/vir pronouns, a beautiful affront to order and reason; website: emii.gay/bio" />
</head> </head>
<body> <body>
<div>
<canvas id="glcanvas" tabindex='1'></canvas>
<script src="https://not-fl3.github.io/miniquad-samples/gl.js"></script>
<script>load("{{ site.base_url }}/static/glow.wasm");</script>
</div>
<header> <header>
<p>Welcome to</p> <p>Welcome to</p>
<h1>{{ site.title }}</h1> <h1>{{ site.title }}</h1>

BIN
static/glow.wasm (Stored with Git LFS) Normal file

Binary file not shown.

View file

@ -32,18 +32,24 @@ header {
height: 70vh; height: 70vh;
display: grid; display: grid;
align-content: center; align-content: center;
background-color: #280C3F;
} }
header p { header p {
margin: 0 20px; margin: 0 20px;
} }
canvas {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: calc(100vh + 200px);
z-index: -1;
}
/* Styles for the cards */ /* Styles for the cards */
#cards { #cards {
display: grid; display: grid;
grid-template-columns: repeat(3, max(20vw, 350px)); grid-template-columns: repeat(3, max(20vw, 350px));
justify-content: space-evenly; justify-content: space-evenly;
background-color: #280C3F;
padding: 40px 0; padding: 40px 0;
} }
.card { .card {
@ -180,10 +186,6 @@ h1, a {
h2 { h2 {
color: #F10385; color: #F10385;
} }
main > section {
counter-increment: section-number;
background-color: rgba(40, 12, 63, calc(1 - var(--section-number) / var(--section-count, 5)));
}
svg { svg {
fill: currentColor; fill: currentColor;