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

style: spacing & colors

Browse source
This commit is contained in:
Ayo Ayco 2024-05-20 20:15:21 +02:00
parent 21c892abc4
commit 1b202ab5de
1 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
templates/threads.html
View file

@ -33,6 +33,9 @@
margin: 0 auto; margin: 0 auto;
color: var(--text-color-dark); color: var(--text-color-dark);
font-size: var(--font-size-base); font-size: var(--font-size-base);
display: grid;
padding: 0 1em;
gap: 1em;
a { a {
color: var(--color-link); color: var(--color-link);
@ -42,18 +45,23 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }
} }
header, footer, main {
padding: 1em;
}
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;
padding: 1em;
text-wrap: balance;
& a { & a {
color: var(--text-color-light); color: var(--text-color-light);
} }
} }
footer {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
main.home { main.home {
& .back { & .back {
display: none display: none
@ -87,7 +95,7 @@
display: grid; display: grid;
grid-template-columns: 55px auto; grid-template-columns: 55px auto;
gap: 5px; gap: 5px;
padding-top: 1em; padding-bottom: 1em;
} }
.card_content { .card_content {
@ -147,18 +155,22 @@
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
gap: 5px; gap: 5px;
height: 40px;
& .right_menu { & .right_menu {
padding-top: 5px; font-size: var(--font-size-sm);
font-size: small; text-align:right;
text-align: right;
& a, & span {
line-height: 40px;
}
& a{ & a{
color: var(--text-color-dark-faded); color: var(--text-color-dark);
&:hover { &:hover {
color: var(--color-link); color: var(--color-link);
} }
} }
} }
@ -199,9 +211,8 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html, body { html, body {
background: #212529; background: var(--bg-darker);
color: #f8f9fa; color: var(--text-color-light);
} }
main a { main a {
color: var(--color-brand-complement); color: var(--color-brand-complement);
@ -220,7 +231,7 @@
color: #f8f9fa; color: #f8f9fa;
} }
& .heading .right_menu a{ & .heading .right_menu a{
color: var(--text-color-light-faded); color: var(--text-color-light);
&:hover { &:hover {
color: var(--color-brand-complement); color: var(--color-brand-complement);
@ -279,7 +290,8 @@
<div class="right_menu"> <div class="right_menu">
<a href="{{ thread.url }}" title="{{ thread.created_at }}"> <a href="{{ thread.url }}" title="{{ thread.created_at }}">
<relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time> <relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
</a> &middot; </a>
<span>&middot;</span>
<a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">anchor</a> <a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">anchor</a>
</div> </div>
</div> </div>
@ -355,7 +367,8 @@
<div class="right_menu"> <div class="right_menu">
<a href="{{ descendant.url }}" title="{{ descendant.created_at }}"> <a href="{{ descendant.url }}" title="{{ descendant.created_at }}">
<relative-time datetime="{{ descendant.created_at }}" precision="day">{{ descendant.created_at }}</relative-time> <relative-time datetime="{{ descendant.created_at }}" precision="day">{{ descendant.created_at }}</relative-time>
</a> &middot; </a>
<span>&middot;</span>
<a href="{{ url_for('threads.thread', id=thread['id']) + '#' + descendant['id'] }}">Anchor</a> <a href="{{ url_for('threads.thread', id=thread['id']) + '#' + descendant['id'] }}">Anchor</a>
</div> </div>
</div> </div>