webfinger: Add basic CSS to the page
This commit is contained in:
parent
0498e45b59
commit
7319a3fe71
GPG key ID:
5ADA3868646C3FC0
1 changed files with 176 additions and 91 deletions
|
|
@ -2,97 +2,182 @@
|
|||
<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>
|
||||
<h1>
|
||||
Acrate Webfinger
|
||||
</h1>
|
||||
<h2 id="section-subject">
|
||||
<span>{{ subject }}</span>
|
||||
</h2>
|
||||
{% if aliases %}
|
||||
<section id="section-aliases">
|
||||
<h3>
|
||||
Aliases
|
||||
</h3>
|
||||
<ul>
|
||||
{% for alias in aliases %}
|
||||
<li><span>{{ alias }}</span></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if properties %}
|
||||
<section id="section-properties">
|
||||
<h3>
|
||||
Properties
|
||||
</h3>
|
||||
<dl>
|
||||
{% for property in properties %}
|
||||
<dt>
|
||||
<a href="{{ property[0] }}">{{ property[0] }}</a>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ property[1] }}</span>
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if links %}
|
||||
<section id="section-links">
|
||||
<h3>
|
||||
Links
|
||||
</h3>
|
||||
<dl>
|
||||
{% for link in links %}
|
||||
<dt>
|
||||
<h4>
|
||||
<a href="{{ link[0] }}">{{ link[0] }}</a>{% if link[1] is not none %} <small>(<span>{{ link[1] }}</span>)</small>{% endif %}
|
||||
</h4>
|
||||
</dt>
|
||||
<dd>
|
||||
<h5>
|
||||
Link destination
|
||||
</h5>
|
||||
{% if link[2] is not none %}
|
||||
<a href="{{ link[2] }}">{{ link[2] }}</a>
|
||||
{% elif link[3] is not none %}
|
||||
<span>{{ link[3] }}</span>
|
||||
{% endif %}
|
||||
{% if link[4] %}
|
||||
<h5>
|
||||
Link properties
|
||||
</h5>
|
||||
<dl>
|
||||
{% for property in link[4] %}
|
||||
<dt>
|
||||
<a href="{{ property[0] }}">{{ property[0] }}</a>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ property[1] }}</span>
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
{% endif %}
|
||||
{% if link[5] %}
|
||||
<h5>
|
||||
Link titles
|
||||
</h5>
|
||||
<dl>
|
||||
{% for title in link[5] %}
|
||||
<dt>
|
||||
<span>{{ title[0] }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ title[1] }}</span>
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
{% endif %}
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
</section>
|
||||
{% endif %}
|
||||
<header>
|
||||
<h1>
|
||||
Acrate Webfinger
|
||||
</h1>
|
||||
</header>
|
||||
<main>
|
||||
<h2 id="section-subject">
|
||||
<span id="subject">{{ subject }}</span>
|
||||
</h2>
|
||||
{% if aliases %}
|
||||
<hr>
|
||||
<section id="section-aliases">
|
||||
<h3>
|
||||
Aliases
|
||||
</h3>
|
||||
<ul>
|
||||
{% for alias in aliases %}
|
||||
<li><a href="{{ alias }}">{{ alias }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if properties %}
|
||||
<hr>
|
||||
<section id="section-properties">
|
||||
<h3>
|
||||
Properties
|
||||
</h3>
|
||||
<dl>
|
||||
{% for property in properties %}
|
||||
<dt>
|
||||
<a href="{{ property[0] }}">{{ property[0] }}</a>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ property[1] }}</span>
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if links %}
|
||||
<hr>
|
||||
<section id="section-links">
|
||||
<h3>
|
||||
Links
|
||||
</h3>
|
||||
<dl>
|
||||
{% for link in links %}
|
||||
<dt>
|
||||
<h4>
|
||||
<a href="{{ link[0] }}">{{ link[0] }}</a>{% if link[1] is not none %} <small>(<span>{{ link[1] }}</span>)</small>{% endif %}
|
||||
</h4>
|
||||
</dt>
|
||||
<dd>
|
||||
{% if link[2] is not none %}
|
||||
<h5>
|
||||
Link destination
|
||||
</h5>
|
||||
<a href="{{ link[2] }}">{{ link[2] }}</a>
|
||||
{% endif %}
|
||||
{% if link[3] is not none %}
|
||||
<h5>
|
||||
Link template
|
||||
</h5>
|
||||
<span>{{ link[3] }}</span>
|
||||
{% endif %}
|
||||
{% if link[4] %}
|
||||
<h5>
|
||||
Link properties
|
||||
</h5>
|
||||
<dl>
|
||||
{% for property in link[4] %}
|
||||
<dt>
|
||||
<a href="{{ property[0] }}">{{ property[0] }}</a>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ property[1] }}</span>
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
{% endif %}
|
||||
{% if link[5] %}
|
||||
<h5>
|
||||
Link titles
|
||||
</h5>
|
||||
<dl>
|
||||
{% for title in link[5] %}
|
||||
<dt>
|
||||
<span>{{ title[0] }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ title[1] }}</span>
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
{% endif %}
|
||||
</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
</section>
|
||||
{% endif %}
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue