feat: separate nav.html; apply formatting

This commit is contained in:
Ayo Ayco 2025-01-18 14:58:38 +01:00
parent f7e3640b92
commit e4fe74bd6b
3 changed files with 321 additions and 313 deletions

View file

@ -1,73 +1,57 @@
<article class="card">
<div class="card_avatar">
{% if thread.account.avatar is defined %}
<img class="avatar" src="{{ thread.account.avatar }}" alt="avatar of {{ thread.account.display_name }}"
title="avatar of {{ thread.account.display_name }}" />
{% endif %}
</div>
<article class="card"> <div class="card_content" id="{{ thread.id }}">
<div class="card_avatar"> <div class="heading">
{% if thread.account.avatar is defined %} <h2 class="author" rel="author">
<img class="avatar" src="{{ thread.account.avatar }}" {{thread.account.display_name | safe}}
alt="avatar of {{ thread.account.display_name }}" </h2>
title="avatar of {{ thread.account.display_name }}" />
{% endif %}
</div>
<div class="card_content" id="{{ thread.id }}"> <div class="right_menu">
<div class="heading"> <a href="{{ thread.url }}" title="{{ thread.created_at }}">
<h2 class="author" rel="author"> <relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
{{thread.account.display_name | safe}} </a>
</h2> <span>&middot;</span>
<a href="{{ url_for('threads.thread', id=parent_id) + '#' + thread['id'] }}">Anchor</a>
</div>
</div>
<div class="right_menu"> <div class="body">
<a href="{{ thread.url }}" title="{{ thread.created_at }}"> {{thread.content | safe}}
<relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time> {% for media in thread.media_attachments %}
</a> {% if media.type == 'image'%}
<span>&middot;</span> <a href="{{ media.url }}">
<a href="{{ url_for('threads.thread', id=parent_id) + '#' + thread['id'] }}">Anchor</a> <img class="media" width="{{ media.meta.small.width }}" height="{{ media.meta.small.height }}"
</div> src="{{media.preview_url}}" alt="{{ media.description or 'media attachment' }}"
</div> title="{{ media.description or 'media attachment' }}" />
</a>
<div class="body"> {% elif media.type == 'gifv' %}
{{thread.content | safe}} <video class="media" controls autoplay="autoplay" muted loop alt="{{ media.description or 'media attachment' }}"
{% for media in thread.media_attachments %} title="{{ media.description or 'media attachment' }}">
{% if media.type == 'image'%} <source src="{{media.url}}" type="video/mp4" />
<a href="{{ media.url }}"> Your browser does not support the video tag.
<img </video>
class="media" {% endif %}
width="{{ media.meta.small.width }}" {% endfor %}
height="{{ media.meta.small.height }}" {% if thread.media_attachments|length <= 0 and thread.card %} <a href="{{ thread.card.url }}">
src="{{media.preview_url}}" <div class="link_card">
alt="{{ media.description or 'media attachment' }}" <small>
title="{{ media.description or 'media attachment' }}" {{ thread.card.provider_name or
/> thread.card.provider_url }}
</a> </small>
{% elif media.type == 'gifv' %} <strong>{{ thread.card.title }}</strong>
<video <small>{{thread.card.description}}</small>
class="media" </div>
controls </a>
autoplay="autoplay" {% endif %}
muted
loop
alt="{{ media.description or 'media attachment' }}"
title="{{ media.description or 'media attachment' }}"
>
<source src="{{media.url}}" type="video/mp4" />
Your browser does not support the video tag.
</video>
{% endif %}
{% endfor %}
{% if thread.media_attachments|length <= 0 and thread.card %}
<a href="{{ thread.card.url }}">
<div class="link_card">
<small>
{{ thread.card.provider_name or
thread.card.provider_url }}
</small>
<strong>{{ thread.card.title }}</strong>
<small>{{thread.card.description}}</small>
</div>
</a>
{% endif %}
</div>
{% if is_thread %}
<a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
{% endif %}
</article>
</div>
{% if is_thread %}
<a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
{% endif %}
</article>

1
templates/nav.html Normal file
View file

@ -0,0 +1 @@
<nav><a href="/">Go home</a></nav>

View file

@ -1,283 +1,306 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ app.title }}</title>
<meta name="theme-color" content="#3054bf">
{% if threads|length == 1 %}
<meta name="description" content="{{ threads[0].summary }}" />
<meta property="og:description" content="{{ threads[0].summary }}" />
{% else %}
<meta name="description" content="{{ app.description }}" />
<meta property="og:description" content="{{ app.description }}" />
{% endif %}
<meta name="author" content="{{ attribution.owner }}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{{ app.site_name }}" />
<meta property="og:title" content="{{ app.title }}" />
<script type="module"> <head>
import TimeAgo from 'https://esm.sh/v135/@github/relative-time-element@4.4.0' <meta charset="UTF-8" />
</script> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ app.title }}</title>
<meta name="theme-color" content="#3054bf">
{% if threads|length == 1 %}
<meta name="description" content="{{ threads[0].summary }}" />
<meta property="og:description" content="{{ threads[0].summary }}" />
{% else %}
<meta name="description" content="{{ app.description }}" />
<meta property="og:description" content="{{ app.description }}" />
{% endif %}
<meta name="author" content="{{ attribution.owner }}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{{ app.site_name }}" />
<meta property="og:title" content="{{ app.title }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" /> <script type="module">
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" /> import TimeAgo from 'https://esm.sh/v135/@github/relative-time-element@4.4.0'
<style> </script>
html {
scroll-behavior: smooth; <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
<style>
html {
scroll-behavior: smooth;
}
body {
font-family: system-ui, sans-serif;
max-width: 600px;
margin: 0 auto;
color: var(--text-color-dark);
font-size: var(--font-size-base);
display: grid;
padding: 0 1em;
gap: 1em;
a {
color: var(--color-link);
} }
body {
font-family: system-ui, sans-serif;
max-width: 600px;
margin: 0 auto;
color: var(--text-color-dark);
font-size: var(--font-size-base);
display: grid;
padding: 0 1em;
gap: 1em;
a { small {
color: var(--color-link); font-size: var(--font-size-sm);
}
small {
font-size: var(--font-size-sm);
}
} }
header, footer { }
background: var(--ayo-gradient);
header,
footer {
background: var(--ayo-gradient);
color: var(--text-color-light);
border-radius: 5px;
padding: 1em;
text-wrap: balance;
& a {
color: var(--text-color-light); color: var(--text-color-light);
border-radius: 5px; }
padding: 1em; }
text-wrap: balance;
& a { footer {
color: var(--text-color-light); border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
main {
display: grid;
gap: 1em;
}
main.home {
& .back {
display: none
}
}
main.thread {
& .card:not(:last-of-type) .card_avatar::after {
content: " ";
display: block;
height: 100%;
border-right: 2px solid rgba(34, 34, 34, 0.15);
width: 26px;
margin-top: -8px;
}
}
.card_avatar img {
border: 2px solid rgba(197, 209, 222, 0.15);
border-radius: 50%;
display: inline;
width: 50px;
}
.card {
grid-template-columns: 55px auto;
display: grid;
gap: 5px;
}
.card_content {
& .invisible {
display: none;
}
& .emoji {
display: inline;
height: calc(1rem + 6px);
margin-bottom: -4px;
}
& .ellipsis::after {
content: '...'
}
& .body {
& code {
font-size: var(--font-size-sm);
background: rgb(245, 242, 240);
padding: 0.25em 0.3em;
border-radius: 5px;
display: inline;
vertical-align: text-bottom;
}
& a:has(.link_card) {
text-decoration: none
}
& .media,
& .link_card {
border: 1px solid rgba(34, 34, 34, 0.15);
border-radius: 5px;
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
max-width: 100%;
margin: 15px 0 1em;
object-fit: contain;
height: auto;
text-decoration: none;
text-wrap: balance;
}
& .media:hover,
& .link_card:hover {
color: var(--color-link);
text-decoration-color: var(--color-link);
border-color: var(--color-link);
}
& p {
margin-bottom: 1em;
} }
} }
footer { & .heading {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
main {
display: grid; display: grid;
gap: 1em; grid-template-columns: auto auto;
gap: 5px;
height: 20px;
& .author {
font-size: var(--font-size-lg)
}
& .right_menu {
font-size: var(--font-size-sm);
text-align: right;
& a,
& span {
line-height: 36px;
}
& a {
color: var(--text-color-dark);
&:hover {
color: var(--color-link);
}
}
}
} }
main.home { & .link_card {
& .back { color: var(--text-color-dark-faded);
display: none text-decoration: underline;
text-decoration-color: var(--text-color-light-faded);
& strong,
& small {
text-decoration-thickness: 1px;
display: block;
} }
padding: 1rem;
}
}
@media (prefers-color-scheme: dark) {
html,
body {
background: var(--bg-darker);
color: var(--text-color-light);
}
main a {
color: var(--color-brand-complement);
} }
main.thread { main.thread {
& .card:not(:last-of-type) .card_avatar::after { & .card:not(:last-of-type) .card_avatar::after {
content: " "; border-right: 2px solid rgba(197, 209, 222, 0.15);
display: block;
height: 100%;
border-right: 2px solid rgba(34, 34, 34, 0.15);
width: 26px;
margin-top: -8px;
} }
} }
.card_avatar img {
border: 2px solid rgba(197, 209, 222, 0.15);
border-radius: 50%;
display: inline;
width: 50px;
}
.card {
grid-template-columns: 55px auto;
display: grid;
gap: 5px;
}
.card_content { .card_content {
& .action {
& .invisible { color: var(--color-brand-complement);
display: none;
} }
& .emoji { & .heading .right_menu a {
display: inline; color: var(--text-color-light);
height: calc(1rem + 6px);
margin-bottom: -4px;
}
& .ellipsis::after { &:hover {
content: '...' color: var(--color-brand-complement);
}
} }
& .body { & .body {
code {
& code { background: rgb(45, 51, 59);
font-size: var(--font-size-sm); color: rgb(197, 209, 222);
background: rgb(245, 242, 240);
padding: 0.25em 0.3em;
border-radius: 5px;
display: inline;
vertical-align: text-bottom;
} }
& a:has(.link_card) { & .media,
text-decoration: none & .link_card {
border: 1px solid rgba(197, 209, 222, 0.15);
color: var(--text-color-light-faded);
background: var(--bg-dark);
} }
& .media, & .link_card { & .media:hover,
border: 1px solid rgba(34, 34, 34, 0.15); & .link_card:hover {
border-radius: 5px;
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
max-width: 100%;
margin: 15px 0 1em;
object-fit: contain;
height: auto;
text-decoration: none;
text-wrap: balance;
}
& .media:hover, & .link_card:hover {
color: var(--color-link);
text-decoration-color: var(--color-link);
border-color: var(--color-link);
}
& p {
margin-bottom: 1em;
}
}
& .heading {
display: grid;
grid-template-columns: auto auto;
gap: 5px;
height: 20px;
& .author {
font-size: var(--font-size-lg)
}
& .right_menu {
font-size: var(--font-size-sm);
text-align:right;
& a, & span {
line-height: 36px;
}
& a{
color: var(--text-color-dark);
&:hover {
color: var(--color-link);
}
}
}
}
& .link_card {
color: var(--text-color-dark-faded);
text-decoration: underline;
text-decoration-color: var(--text-color-light-faded);
& strong, & small {
text-decoration-thickness: 1px;
display: block;
}
padding: 1rem;
}
}
@media (prefers-color-scheme: dark) {
html, body {
background: var(--bg-darker);
color: var(--text-color-light);
}
main a {
color: var(--color-brand-complement); color: var(--color-brand-complement);
} text-decoration-color: var(--color-brand-complement);
border-color: var(--color-brand-complement);
main.thread {
& .card:not(:last-of-type) .card_avatar::after {
border-right: 2px solid rgba(197, 209, 222, 0.15);
} }
} }
.card_content {
& .action {
color: var(--color-brand-complement);
}
& .heading .right_menu a{
color: var(--text-color-light);
&:hover {
color: var(--color-brand-complement);
}
}
& .body {
code {
background: rgb(45, 51, 59);
color: rgb(197, 209, 222);
}
& .media, & .link_card {
border: 1px solid rgba(197, 209, 222, 0.15);
color: var(--text-color-light-faded);
background: var(--bg-dark);
}
& .media:hover, & .link_card:hover {
color: var(--color-brand-complement);
text-decoration-color: var(--color-brand-complement);
border-color: var(--color-brand-complement);
}
}
}
} }
</style> }
</head> </style>
<body> </head>
<a id="top"></a>
<header> <body>
<nav><a href="/">Go home</a></nav> <a id="top"></a>
<h1>{{ app.title }}</h1> <header>
<p>{{ app.description }}</p> {% include "nav.html" %}
</header> <h1>{{ app.title }}</h1>
<main class={{ "thread" if threads|length == 1 else "home" }}> <p>{{ app.description }}</p>
<div class="back"> </header>
<a href="{{url_for('threads.home')}}">Back</a> <main class={{ "thread" if threads|length==1 else "home" }}>
</div> <div class="back">
{% for thread in threads %} <a href="{{url_for('threads.home')}}">Back</a>
{% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1 %} </div>
{% include "card.html" %} {% for thread in threads %}
{% endwith %} {% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1 %}
{% if thread.descendants is defined %} {% include "card.html" %}
{% for descendant in thread.descendants %} {% endwith %}
{% with thread=descendant, parent_id=thread.id %} {% if thread.descendants is defined %}
{% include "card.html" %} {% for descendant in thread.descendants %}
{% endwith %} {% with thread=descendant, parent_id=thread.id %}
{% endfor %} {% include "card.html" %}
{% endif %} {% endwith %}
{% endfor %} {% endfor %}
<a href="#top">Top</a> {% endif %}
</main> {% endfor %}
<footer> <a href="#top">Top</a>
<p> </main>
Copyright &copy; <footer>
{% if attribution.current_year %} <p>
{{ attribution.year}}-{{ attribution.current_year }} Copyright &copy;
{% else %} {% if attribution.current_year %}
{{ attribution.year}} {{ attribution.year}}-{{ attribution.current_year }}
{% endif %} {% else %}
{{ attribution.owner }} {{ attribution.year}}
</p> {% endif %}
<p>Powered by <a href="https://ayco.io/sh/threads">/threads</a></p> {{ attribution.owner }}
<p>Rendered on {{ render_date }} in Europe/Amsterdam</p> </p>
</footer> <p>
</body> Powered by <a href="https://ayco.io/sh/threads">/threads</a>
</html> </p>
<p>Rendered on {{ render_date }} in Europe/Amsterdam</p>
</footer>
</body>
</html>