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

34
templates/card.html
View file

@ -1,9 +1,7 @@
<article class="card">
<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 }}"
<img class="avatar" src="{{ thread.account.avatar }}" alt="avatar of {{ thread.account.display_name }}"
title="avatar of {{ thread.account.display_name }}" />
{% endif %}
</div>
@ -28,32 +26,19 @@
{% for media in thread.media_attachments %}
{% if media.type == 'image'%}
<a href="{{ media.url }}">
<img
class="media"
width="{{ media.meta.small.width }}"
height="{{ media.meta.small.height }}"
src="{{media.preview_url}}"
alt="{{ media.description or 'media attachment' }}"
title="{{ media.description or 'media attachment' }}"
/>
<img class="media" width="{{ media.meta.small.width }}" height="{{ media.meta.small.height }}"
src="{{media.preview_url}}" alt="{{ media.description or 'media attachment' }}"
title="{{ media.description or 'media attachment' }}" />
</a>
{% elif media.type == 'gifv' %}
<video
class="media"
controls
autoplay="autoplay"
muted
loop
alt="{{ media.description or 'media attachment' }}"
title="{{ media.description or 'media attachment' }}"
>
<video class="media" controls autoplay="autoplay" 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 }}">
{% if thread.media_attachments|length <= 0 and thread.card %} <a href="{{ thread.card.url }}">
<div class="link_card">
<small>
{{ thread.card.provider_name or
@ -69,5 +54,4 @@
{% if is_thread %}
<a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
{% endif %}
</article>
</article>

1
templates/nav.html Normal file
View file

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

59
templates/threads.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ app.title }}</title>
@ -27,6 +28,7 @@
html {
scroll-behavior: smooth;
}
body {
font-family: system-ui, sans-serif;
max-width: 600px;
@ -45,7 +47,9 @@
font-size: var(--font-size-sm);
}
}
header, footer {
header,
footer {
background: var(--ayo-gradient);
color: var(--text-color-light);
border-radius: 5px;
@ -128,7 +132,8 @@
text-decoration: none
}
& .media, & .link_card {
& .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);
@ -140,7 +145,8 @@
text-wrap: balance;
}
& .media:hover, & .link_card:hover {
& .media:hover,
& .link_card:hover {
color: var(--color-link);
text-decoration-color: var(--color-link);
border-color: var(--color-link);
@ -164,13 +170,14 @@
& .right_menu {
font-size: var(--font-size-sm);
text-align:right;
text-align: right;
& a, & span {
& a,
& span {
line-height: 36px;
}
& a{
& a {
color: var(--text-color-dark);
&:hover {
@ -186,7 +193,8 @@
text-decoration: underline;
text-decoration-color: var(--text-color-light-faded);
& strong, & small {
& strong,
& small {
text-decoration-thickness: 1px;
display: block;
}
@ -197,10 +205,13 @@
@media (prefers-color-scheme: dark) {
html, body {
html,
body {
background: var(--bg-darker);
color: var(--text-color-light);
}
main a {
color: var(--color-brand-complement);
}
@ -210,28 +221,35 @@
border-right: 2px solid rgba(197, 209, 222, 0.15);
}
}
.card_content {
& .action {
color: var(--color-brand-complement);
}
& .heading .right_menu a{
& .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 {
& .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 {
& .media:hover,
& .link_card:hover {
color: var(--color-brand-complement);
text-decoration-color: var(--color-brand-complement);
border-color: var(--color-brand-complement);
@ -240,15 +258,16 @@
}
}
</style>
</head>
<body>
</head>
<body>
<a id="top"></a>
<header>
<nav><a href="/">Go home</a></nav>
{% include "nav.html" %}
<h1>{{ app.title }}</h1>
<p>{{ app.description }}</p>
</header>
<main class={{ "thread" if threads|length == 1 else "home" }}>
<main class={{ "thread" if threads|length==1 else "home" }}>
<div class="back">
<a href="{{url_for('threads.home')}}">Back</a>
</div>
@ -276,8 +295,12 @@
{% endif %}
{{ attribution.owner }}
</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>
</footer>
</body>
</body>
</html>