ayo/threads
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: separate nav.html; apply formatting

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

30
templates/card.html
View file

@ -1,9 +1,7 @@
<article class="card"> <article class="card">
<div class="card_avatar"> <div class="card_avatar">
{% if thread.account.avatar is defined %} {% if thread.account.avatar is defined %}
<img class="avatar" src="{{ thread.account.avatar }}" <img class="avatar" src="{{ thread.account.avatar }}" alt="avatar of {{ thread.account.display_name }}"
alt="avatar of {{ thread.account.display_name }}"
title="avatar of {{ thread.account.display_name }}" /> title="avatar of {{ thread.account.display_name }}" />
{% endif %} {% endif %}
</div> </div>
@ -28,32 +26,19 @@
{% for media in thread.media_attachments %} {% for media in thread.media_attachments %}
{% if media.type == 'image'%} {% if media.type == 'image'%}
<a href="{{ media.url }}"> <a href="{{ media.url }}">
<img <img class="media" width="{{ media.meta.small.width }}" height="{{ media.meta.small.height }}"
class="media" src="{{media.preview_url}}" alt="{{ media.description or 'media attachment' }}"
width="{{ media.meta.small.width }}" title="{{ media.description or 'media attachment' }}" />
height="{{ media.meta.small.height }}"
src="{{media.preview_url}}"
alt="{{ media.description or 'media attachment' }}"
title="{{ media.description or 'media attachment' }}"
/>
</a> </a>
{% elif media.type == 'gifv' %} {% elif media.type == 'gifv' %}
<video <video class="media" controls autoplay="autoplay" muted loop alt="{{ media.description or 'media attachment' }}"
class="media" title="{{ media.description or 'media attachment' }}">
controls
autoplay="autoplay"
muted
loop
alt="{{ media.description or 'media attachment' }}"
title="{{ media.description or 'media attachment' }}"
>
<source src="{{media.url}}" type="video/mp4" /> <source src="{{media.url}}" type="video/mp4" />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if thread.media_attachments|length <= 0 and thread.card %} {% if thread.media_attachments|length <= 0 and thread.card %} <a href="{{ thread.card.url }}">
<a href="{{ thread.card.url }}">
<div class="link_card"> <div class="link_card">
<small> <small>
{{ thread.card.provider_name or {{ thread.card.provider_name or
@ -70,4 +55,3 @@
<a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a> <a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
{% endif %} {% endif %}
</article> </article>

1
templates/nav.html Normal file
View file

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

43
templates/threads.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -27,6 +28,7 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
max-width: 600px; max-width: 600px;
@ -45,7 +47,9 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }
} }
header, footer {
header,
footer {
background: var(--ayo-gradient); background: var(--ayo-gradient);
color: var(--text-color-light); color: var(--text-color-light);
border-radius: 5px; border-radius: 5px;
@ -128,7 +132,8 @@
text-decoration: none text-decoration: none
} }
& .media, & .link_card { & .media,
& .link_card {
border: 1px solid rgba(34, 34, 34, 0.15); border: 1px solid rgba(34, 34, 34, 0.15);
border-radius: 5px; border-radius: 5px;
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15); box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
@ -140,7 +145,8 @@
text-wrap: balance; text-wrap: balance;
} }
& .media:hover, & .link_card:hover { & .media:hover,
& .link_card:hover {
color: var(--color-link); color: var(--color-link);
text-decoration-color: var(--color-link); text-decoration-color: var(--color-link);
border-color: var(--color-link); border-color: var(--color-link);
@ -166,7 +172,8 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
text-align: right; text-align: right;
& a, & span { & a,
& span {
line-height: 36px; line-height: 36px;
} }
@ -186,7 +193,8 @@
text-decoration: underline; text-decoration: underline;
text-decoration-color: var(--text-color-light-faded); text-decoration-color: var(--text-color-light-faded);
& strong, & small { & strong,
& small {
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
display: block; display: block;
} }
@ -197,10 +205,13 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html, body {
html,
body {
background: var(--bg-darker); background: var(--bg-darker);
color: var(--text-color-light); color: var(--text-color-light);
} }
main a { main a {
color: var(--color-brand-complement); color: var(--color-brand-complement);
} }
@ -210,10 +221,12 @@
border-right: 2px solid rgba(197, 209, 222, 0.15); border-right: 2px solid rgba(197, 209, 222, 0.15);
} }
} }
.card_content { .card_content {
& .action { & .action {
color: var(--color-brand-complement); color: var(--color-brand-complement);
} }
& .heading .right_menu a { & .heading .right_menu a {
color: var(--text-color-light); color: var(--text-color-light);
@ -221,17 +234,22 @@
color: var(--color-brand-complement); color: var(--color-brand-complement);
} }
} }
& .body { & .body {
code { code {
background: rgb(45, 51, 59); background: rgb(45, 51, 59);
color: rgb(197, 209, 222); color: rgb(197, 209, 222);
} }
& .media, & .link_card {
& .media,
& .link_card {
border: 1px solid rgba(197, 209, 222, 0.15); border: 1px solid rgba(197, 209, 222, 0.15);
color: var(--text-color-light-faded); color: var(--text-color-light-faded);
background: var(--bg-dark); background: var(--bg-dark);
} }
& .media:hover, & .link_card:hover {
& .media:hover,
& .link_card:hover {
color: var(--color-brand-complement); color: var(--color-brand-complement);
text-decoration-color: var(--color-brand-complement); text-decoration-color: var(--color-brand-complement);
border-color: var(--color-brand-complement); border-color: var(--color-brand-complement);
@ -241,10 +259,11 @@
} }
</style> </style>
</head> </head>
<body> <body>
<a id="top"></a> <a id="top"></a>
<header> <header>
<nav><a href="/">Go home</a></nav> {% include "nav.html" %}
<h1>{{ app.title }}</h1> <h1>{{ app.title }}</h1>
<p>{{ app.description }}</p> <p>{{ app.description }}</p>
</header> </header>
@ -276,8 +295,12 @@
{% endif %} {% endif %}
{{ attribution.owner }} {{ attribution.owner }}
</p> </p>
<p>Powered by <a href="https://ayco.io/sh/threads">/threads</a></p> <p>
Powered by <a href="https://ayco.io/sh/threads">/threads</a>
</p>
<p>Rendered on {{ render_date }} in Europe/Amsterdam</p> <p>Rendered on {{ render_date }} in Europe/Amsterdam</p>
</footer> </footer>
</body> </body>
</html> </html>