Add the ember animation
This commit is contained in:
parent
8fc15e483b
commit
d1d785b41e
1
.gitattributes
vendored
1
.gitattributes
vendored
|
@ -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
|
||||||
|
|
|
@ -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
BIN
static/glow.wasm
(Stored with Git LFS)
Normal file
Binary file not shown.
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue