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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{{ subject }} · Acrate Webfinger</title> <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> </head>
<body> <body>
<header>
<h1> <h1>
Acrate Webfinger Acrate Webfinger
</h1> </h1>
</header>
<main>
<h2 id="section-subject"> <h2 id="section-subject">
<span>{{ subject }}</span> <span id="subject">{{ subject }}</span>
</h2> </h2>
{% if aliases %} {% if aliases %}
<hr>
<section id="section-aliases"> <section id="section-aliases">
<h3> <h3>
Aliases Aliases
</h3> </h3>
<ul> <ul>
{% for alias in aliases %} {% for alias in aliases %}
<li><span>{{ alias }}</span></li> <li><a href="{{ alias }}">{{ alias }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</section> </section>
{% endif %} {% endif %}
{% if properties %} {% if properties %}
<hr>
<section id="section-properties"> <section id="section-properties">
<h3> <h3>
Properties Properties
@ -40,6 +119,7 @@
</section> </section>
{% endif %} {% endif %}
{% if links %} {% if links %}
<hr>
<section id="section-links"> <section id="section-links">
<h3> <h3>
Links Links
@ -52,12 +132,16 @@
</h4> </h4>
</dt> </dt>
<dd> <dd>
{% if link[2] is not none %}
<h5> <h5>
Link destination Link destination
</h5> </h5>
{% if link[2] is not none %}
<a href="{{ link[2] }}">{{ link[2] }}</a> <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> <span>{{ link[3] }}</span>
{% endif %} {% endif %}
{% if link[4] %} {% if link[4] %}
@ -95,4 +179,5 @@
</dl> </dl>
</section> </section>
{% endif %} {% endif %}
</main>
</body> </body>