Add animated centerpiece to index
This commit is contained in:
parent
6ec0c46171
commit
3e9344a8af
8 changed files with 166 additions and 25 deletions
124
static/assets/css/index.css
Normal file
124
static/assets/css/index.css
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
j-wrap.index {
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "centerpiece" "title" "navigation";
|
||||
|
||||
max-height: 100cqh;
|
||||
overflow: auto;
|
||||
|
||||
figure.centerpiece {
|
||||
grid-area: centerpiece;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
img.centerpiece {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
grid-area: title;
|
||||
text-align: center;
|
||||
font-size: calc(1em + 2vw);
|
||||
margin-bottom: 0.125em;
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: navigation;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline;
|
||||
margin: 0 0.25em;
|
||||
font-size: calc(0.65em + 1vw);
|
||||
}
|
||||
|
||||
* { transition: 5s; }
|
||||
}
|
||||
|
||||
img.centerpiece:hover {
|
||||
cursor: crosshair;
|
||||
border-radius: 180px;
|
||||
backdrop-filter:
|
||||
blur(2px)
|
||||
drop-shadow(4px 4px 10px red)
|
||||
grayscale(70%)
|
||||
;
|
||||
}
|
||||
|
||||
img.centerpiece {
|
||||
animation-name: multi;
|
||||
animation-timing-function: linear;
|
||||
animation-duration: 30s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
img.two { animation-delay: -6s; }
|
||||
img.three { animation-delay: -12s; }
|
||||
img.four { animation-delay: -18s; }
|
||||
img.four { animation-delay: -24s; }
|
||||
img.five { animation-delay: -30s; }
|
||||
|
||||
@keyframes multi {
|
||||
0% {
|
||||
transform: rotate3d(0, 1, 0, 0deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
filter:
|
||||
hue-rotate(0deg)
|
||||
drop-shadow(0 0 8vw #3B050560)
|
||||
brightness(3)
|
||||
blur(0.2px)
|
||||
saturate(1)
|
||||
contrast(3)
|
||||
;
|
||||
}
|
||||
|
||||
40% {
|
||||
filter:
|
||||
hue-rotate(0deg)
|
||||
drop-shadow(0 0 0 #00000000)
|
||||
brightness(1)
|
||||
blur(0.2px)
|
||||
saturate(2)
|
||||
contrast(1)
|
||||
;
|
||||
}
|
||||
|
||||
60% {
|
||||
filter:
|
||||
hue-rotate(0deg)
|
||||
drop-shadow(0 0 8vw #66000060)
|
||||
brightness(1)
|
||||
blur(0.2px)
|
||||
saturate(1)
|
||||
contrast(1)
|
||||
;
|
||||
}
|
||||
|
||||
90% {
|
||||
filter:
|
||||
hue-rotate(50deg)
|
||||
drop-shadow(0 0 0 #00000000)
|
||||
brightness(3)
|
||||
blur(0)
|
||||
saturate(1.2)
|
||||
contrast(2)
|
||||
; }
|
||||
|
||||
100% {
|
||||
transform: rotate3d(0, 1, 0, 360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #080606;
|
||||
--accent: #FF8A8A;
|
||||
--accent-hover: #ffe099;
|
||||
--code: #f06292;
|
||||
|
|
@ -19,15 +20,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
pre span
|
||||
{
|
||||
font-family: "Libre Baskerville";
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Kode Mono Variable';
|
||||
font-style: normal;
|
||||
|
|
@ -59,6 +51,15 @@ html {
|
|||
font-family: "Libre Baskerville";
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
pre span
|
||||
{
|
||||
font-family: "Libre Baskerville";
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mono pre,
|
||||
.mono pre span,
|
||||
.mono code,
|
||||
|
|
@ -68,4 +69,3 @@ html {
|
|||
{
|
||||
font-family: "Fira Mono";
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
static/images/discomedusae.kra
Normal file
BIN
static/images/discomedusae.kra
Normal file
Binary file not shown.
BIN
static/images/discomedusae.png
Normal file
BIN
static/images/discomedusae.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
BIN
static/images/discomedusae_cyan.png
Normal file
BIN
static/images/discomedusae_cyan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 972 KiB |
BIN
static/images/discomedusae_gamma_dark.png
Normal file
BIN
static/images/discomedusae_gamma_dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
|
|
@ -4,19 +4,16 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Incandescência</title>
|
||||
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
||||
<link href="{{ get_url(path="assets/css/overrides.css") }}" rel="stylesheet">
|
||||
<script defer src="https://stats.jutty.dev/script.js" data-website-id="d83c2773-91fb-4b30-a9fb-30cfb34500d3"></script>
|
||||
<noscript><img src="https://stats.jutty.dev/p/r5fN3GRrA"></noscript>
|
||||
<title>Incandescência</title>
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% block content %} {% endblock content %}
|
||||
</div>
|
||||
</section>
|
||||
{% block content %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,32 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link href="{{ get_url(path="assets/css/index.css") }}" rel="stylesheet">
|
||||
{% endblock extra_head %}
|
||||
{% block content %}
|
||||
<h1 class="title">
|
||||
Incandescência
|
||||
</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/poesia">Poesia</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<j-wrap class="index">
|
||||
{% set medusa = get_url(path="images/discomedusae_gamma_dark.png") %}
|
||||
<figure class="centerpiece one">
|
||||
<img class="centerpiece one" src="{{ medusa }}">
|
||||
</figure>
|
||||
<figure class="centerpiece two">
|
||||
<img class="centerpiece two" src="{{ medusa }}">
|
||||
</figure>
|
||||
<figure class="centerpiece three">
|
||||
<img class="centerpiece three" src="{{ medusa }}">
|
||||
</figure>
|
||||
<figure class="centerpiece four">
|
||||
<img class="centerpiece four" src="{{ medusa }}">
|
||||
</figure>
|
||||
<figure class="centerpiece five">
|
||||
<img class="centerpiece five" src="{{ medusa }}">
|
||||
</figure>
|
||||
<h1>Incandescência</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/poesia">Poesia</a></li>
|
||||
<li style="filter: opacity(0.5)">Crítica</li>
|
||||
<li><a href="https://git.jutty.dev/">Código</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</j-wrap>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue