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,97 +2,182 @@
<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>
<h1> <header>
Acrate Webfinger <h1>
</h1> Acrate Webfinger
<h2 id="section-subject"> </h1>
<span>{{ subject }}</span> </header>
</h2> <main>
{% if aliases %} <h2 id="section-subject">
<section id="section-aliases"> <span id="subject">{{ subject }}</span>
<h3> </h2>
Aliases {% if aliases %}
</h3> <hr>
<ul> <section id="section-aliases">
{% for alias in aliases %} <h3>
<li><span>{{ alias }}</span></li> Aliases
{% endfor %} </h3>
</ul> <ul>
</section> {% for alias in aliases %}
{% endif %} <li><a href="{{ alias }}">{{ alias }}</a></li>
{% if properties %} {% endfor %}
<section id="section-properties"> </ul>
<h3> </section>
Properties {% endif %}
</h3> {% if properties %}
<dl> <hr>
{% for property in properties %} <section id="section-properties">
<dt> <h3>
<a href="{{ property[0] }}">{{ property[0] }}</a> Properties
</dt> </h3>
<dd> <dl>
<span>{{ property[1] }}</span> {% for property in properties %}
</dd> <dt>
{% endfor %} <a href="{{ property[0] }}">{{ property[0] }}</a>
</dl> </dt>
</section> <dd>
{% endif %} <span>{{ property[1] }}</span>
{% if links %} </dd>
<section id="section-links"> {% endfor %}
<h3> </dl>
Links </section>
</h3> {% endif %}
<dl> {% if links %}
{% for link in links %} <hr>
<dt> <section id="section-links">
<h4> <h3>
<a href="{{ link[0] }}">{{ link[0] }}</a>{% if link[1] is not none %} <small>(<span>{{ link[1] }}</span>)</small>{% endif %} Links
</h4> </h3>
</dt> <dl>
<dd> {% for link in links %}
<h5> <dt>
Link destination <h4>
</h5> <a href="{{ link[0] }}">{{ link[0] }}</a>{% if link[1] is not none %} <small>(<span>{{ link[1] }}</span>)</small>{% endif %}
{% if link[2] is not none %} </h4>
<a href="{{ link[2] }}">{{ link[2] }}</a> </dt>
{% elif link[3] is not none %} <dd>
<span>{{ link[3] }}</span> {% if link[2] is not none %}
{% endif %} <h5>
{% if link[4] %} Link destination
<h5> </h5>
Link properties <a href="{{ link[2] }}">{{ link[2] }}</a>
</h5> {% endif %}
<dl> {% if link[3] is not none %}
{% for property in link[4] %} <h5>
<dt> Link template
<a href="{{ property[0] }}">{{ property[0] }}</a> </h5>
</dt> <span>{{ link[3] }}</span>
<dd> {% endif %}
<span>{{ property[1] }}</span> {% if link[4] %}
</dd> <h5>
{% endfor %} Link properties
</dl> </h5>
{% endif %} <dl>
{% if link[5] %} {% for property in link[4] %}
<h5> <dt>
Link titles <a href="{{ property[0] }}">{{ property[0] }}</a>
</h5> </dt>
<dl> <dd>
{% for title in link[5] %} <span>{{ property[1] }}</span>
<dt> </dd>
<span>{{ title[0] }}</span> {% endfor %}
</dt> </dl>
<dd> {% endif %}
<span>{{ title[1] }}</span> {% if link[5] %}
</dd> <h5>
{% endfor %} Link titles
</dl> </h5>
{% endif %} <dl>
</dd> {% for title in link[5] %}
{% endfor %} <dt>
</dl> <span>{{ title[0] }}</span>
</section> </dt>
{% endif %} <dd>
<span>{{ title[1] }}</span>
</dd>
{% endfor %}
</dl>
{% endif %}
</dd>
{% endfor %}
</dl>
</section>
{% endif %}
</main>
</body> </body>