1
Fork 0

webfinger: Add basic CSS to the page

This commit is contained in:
Steffo 2024-11-16 07:24:14 +01:00
parent 0498e45b59
commit 7319a3fe71
Signed by: steffo
GPG key ID: 5ADA3868646C3FC0

View file

@ -2,27 +2,106 @@
<head>
<meta charset="UTF-8">
<title>{{ subject }} · Acrate Webfinger</title>
<style>
:root {
--wf-yellow: #e2bb03;
--wf-brown: #3b351d;
--link-color: #0094b9;
}
body {
font-family: sans-serif;
}
h1, h2 {
text-align: center;
}
main {
max-width: 800px;
padding: 8px;
margin: 0 auto;
border: 2px solid currentColor;
border-radius: 8px;
}
a {
color: var(--link-color);
}
hr {
margin: 8px -8px;
border: 1px solid currentColor;
opacity: 1;
}
small span {
font-family: monospace;
}
@media screen {
main {
box-shadow: 4px 4px 10px currentColor;
}
}
@media screen and (prefers-color-scheme: dark) {
body {
background-color: black;
color: var(--wf-yellow);
}
main {
background-color: var(--wf-brown);
}
main, hr {
border-color: var(--wf-yellow);
}
}
@media screen and (prefers-color-scheme: light) {
body {
background-color: var(--wf-yellow);
color: var(--wf-brown);
}
main {
background-color: white;
}
main, hr {
border-color: var(--wf-brown);
}
}
</style>
</head>
<body>
<header>
<h1>
Acrate Webfinger
</h1>
</header>
<main>
<h2 id="section-subject">
<span>{{ subject }}</span>
<span id="subject">{{ subject }}</span>
</h2>
{% if aliases %}
<hr>
<section id="section-aliases">
<h3>
Aliases
</h3>
<ul>
{% for alias in aliases %}
<li><span>{{ alias }}</span></li>
<li><a href="{{ alias }}">{{ alias }}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if properties %}
<hr>
<section id="section-properties">
<h3>
Properties
@ -40,6 +119,7 @@
</section>
{% endif %}
{% if links %}
<hr>
<section id="section-links">
<h3>
Links
@ -52,12 +132,16 @@
</h4>
</dt>
<dd>
{% if link[2] is not none %}
<h5>
Link destination
</h5>
{% if link[2] is not none %}
<a href="{{ link[2] }}">{{ link[2] }}</a>
{% elif link[3] is not none %}
{% endif %}
{% if link[3] is not none %}
<h5>
Link template
</h5>
<span>{{ link[3] }}</span>
{% endif %}
{% if link[4] %}
@ -95,4 +179,5 @@
</dl>
</section>
{% endif %}
</main>
</body>