Don't set up for animation when no JavaScript available.

This commit is contained in:
Ben Sturmfels 2022-06-27 23:40:17 +10:00
parent ab49894281
commit 0e70fcd238
Signed by: bsturmfels
GPG key ID: 023C05E2C9C068F0

View file

@ -73,7 +73,22 @@
header a.active {
text-decoration: underline;
}
/* Set up the home page title animation */
header h1#title {
opacity: 0;
translate: 0 -10px;
}
</style>
<noscript>
<style>
/* But reset it if we don't have JavaScript to animate with. */
header h1#title {
opacity: 1;
translate: 0 0;
}
</style>
</noscript>
{% endblock head %}
</head>
@ -102,7 +117,7 @@
</nav>
</div>
{% if output_file == 'index.html' %}
<h1 id="title" class="f2 f1-m f-subheadline-ns lh-title mb4 mt4 code black-70 tracked-tight" style="color: #3b1c4a; opacity: 0; translate: 0 -10px; position: relative;">&gt;&nbsp;{{ SITENAME }}</h1>
<h1 id="title" class="f2 f1-m f-subheadline-ns lh-title mb4 mt4 code black-70 tracked-tight" style="color: var(--purple);">&gt;&nbsp;{{ SITENAME }}</h1>
<p class="f4 f3-ns measure lh-copy">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</p>
{% endif %}
</header>