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

style: modularized stylesheets for button, card, pills

Browse source 
- better looking directional buttons
- consistent colors
This commit is contained in:
Ayo Ayco 2025-01-19 16:37:35 +01:00
parent 2022c14668
commit 1354a8bab4
9 changed files with 277 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
static/button.css Normal file
View file

@ -0,0 +1,29 @@
.btn {
text-decoration: none;
border-radius: 5px;
border: 1px solid;
color: var(--text-color-dark);
border-color: var(--border-color-light);
background-color: var(--bg-light);
padding: 0.25em 0.5em;
font-weight: bold;
font-size: var(--font-size-base);
&:hover {
color: var(--color-brand-blue-3);
border-color: var(--color-brand-blue-3);
}
}
@media (prefers-color-scheme: dark) {
.btn {
color: var(--text-color-light);
border-color: var(--border-color-dark);
background-color: var(--bg-dark);
&:hover {
color: var(--color-brand-complement);
border-color: var(--color-brand-complement);
}
}
}

170
static/card.css Normal file
View file

@ -0,0 +1,170 @@
.card_content {
& .invisible {
display: none;
}
& .emoji {
display: inline;
height: calc(1rem + 6px);
margin-bottom: -4px;
}
& .ellipsis::after {
content: "...";
}
& .body {
.hashtag:not(.pill),
.mention:not(.pill) {
color: var(--text-color-dark-faded);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
& code {
font-size: var(--font-size-sm);
background: rgb(245, 242, 240);
padding: 0.25em 0.3em;
border-radius: 5px;
display: inline-block;
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;
}
}
& .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-faded);
text-decoration: none;
&:hover {
color: var(--color-link);
text-decoration: underline;
}
}
}
}
& .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;
}
}
article.card {
/* border-bottom: 1px solid;
border-color: var(--border-color-light);
*/
& .bottom-menu {
padding: 1em 0;
}
}
@media (prefers-color-scheme: dark) {
.card_content {
& .action {
color: var(--color-brand-complement);
}
& .heading .right_menu a {
color: var(--text-color-light-faded);
&:hover {
color: var(--color-brand-complement);
}
}
& .body {
.hashtag:not(.pill),
.mention:not(.pill) {
color: var(--text-color-light-faded);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
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);
}
}
}
/* article.card {
border-color: var(--border-color-dark);
} */
}

34
static/pills.css
View file

@ -3,18 +3,18 @@
& .pill {
border-radius: 5px;
border: 1px solid;
border-color: rgba(197, 209, 222, 0.25);
background-color: rgba(197, 209, 222, 0.15);
border-color: var(--border-color-light);
background-color: var(--bg-light);
margin-bottom: 0.5em;
padding: 0.25em 1em;
padding: 0.25em 0.5em;
display: inline-block;
font-size: var(--font-size-sm);
color: var(--text-color-dark-faded);
text-decoration: none;
&:hover {
color: var(--color-link);
border: 1px solid var(--color-link);
color: var(--color-brand-blue-3);
border: 1px solid var(--color-brand-blue-3);
}
& .pill-label {
@ -32,8 +32,8 @@
& .pill {
color: var(--text-color-light-faded);
border: 1px solid;
border-color: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.15);
border-color: var(--border-color-dark);
background-color: var(--bg-dark);
text-decoration: none;
&:hover {
@ -44,12 +44,24 @@
}
}
.featured-tags .pill {
color: var(--text-color-dark);
.featured-tags {
& strong small {
color: var(--text-color-dark-faded);
}
& .pill {
color: var(--text-color-dark);
}
}
@media (prefers-color-scheme: dark) {
.featured-tags .pill {
color: var(--text-color-light);
.featured-tags {
& strong small {
color: var(--text-color-light-faded);
}
& .pill {
color: var(--text-color-light);
}
}
}

45
static/variables.css
View file

@ -1,28 +1,31 @@
:root {
--content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-border: hsl(17, 24%, 90%);
--color-link: var(--color-brand-blue-5);
--color-border: hsl(17, 24%, 90%);
--color-link: var(--color-brand-blue-5);
--color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880;
--color-brand-blue-3: #416fff;
--color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6;
--color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880;
--color-brand-blue-3: #416fff;
--color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6;
--color-brand-complement: orange;
--color-brand-complement: orange;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: #232323;
--text-color-dark-faded: #555;
--text-color-light: #f8f9fa;
--text-color-light-faded: #999;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: #232323;
--text-color-dark-faded: #555;
--text-color-light: #f8f9fa;
--text-color-light-faded: #999;
--bg-dark: #343a40;
--bg-darker: #212529;
--bg-darkest: #000;
--border-color-light: rgba(197, 209, 222, 0.7);
--bg-light: rgba(197, 209, 222, 0.15);
--border-color-dark: rgba(0, 0, 0, 0.25);
--bg-dark: #343a40;
--bg-darker: #212529;
--bg-darkest: #000;
}

23
templates/_home.html
View file

@ -18,15 +18,6 @@
<meta property="og:site_name" content="{{ app.site_name }}" />
<meta property="og:title" content="{{ app.title }}" />
{% include "import-map.html" %}
<!-- Use parent app's variables & reset stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
<!-- threads specific static css-->
<link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
<style>
html {
scroll-behavior: smooth;
@ -39,7 +30,6 @@
color: var(--text-color-dark);
font-size: var(--font-size-base);
display: grid;
padding: 0 1em;
gap: 1em;
a {
@ -149,6 +139,15 @@
}
</style>
<!-- Use parent app's variables & reset stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
<!-- threads specific static css-->
{% include "styles.html" %}
{% include "import-map.html" %}
</head>
<body>
@ -168,7 +167,7 @@
{% endwith %}
{% endif %}
<div class="back">
<a href="{{url_for('threads.home')}}">Back</a>
<a class="btn" href="{{url_for('threads.home')}}">&larr; Back</a>
</div>
{% for thread in threads %}
{% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1, server=app.server %}
@ -182,7 +181,7 @@
{% endfor %}
{% endif %}
{% endfor %}
<a href="#top">Top</a>
<a class="btn" href="#top">&uarr; Top</a>
</main>
<footer>
<p>

22
templates/_tag.html
View file

@ -18,14 +18,6 @@
<meta property="og:site_name" content="{{ app.site_name }}" />
<meta property="og:title" content="{{ app.title }} / {{ tag }}" />
{% include "import-map.html" %}
<!-- Use parent app's variables & reset stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
<!-- threads specific static css-->
<link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
<style>
html {
@ -39,7 +31,6 @@
color: var(--text-color-dark);
font-size: var(--font-size-base);
display: grid;
padding: 0 1em;
gap: 1em;
a {
@ -143,6 +134,15 @@
}
}
</style>
<!-- Use parent app's variables & reset stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
<!-- threads specific static css-->
{% include "styles.html" %}
{% include "import-map.html" %}
</head>
<body>
@ -161,7 +161,7 @@
{% endwith %}
{% endif %} -->
<div class="back">
<a href="{{url_for('threads.home')}}">Back</a>
<a class="btn" href="{{url_for('threads.home')}}">&larr; Back</a>
</div>
<h2>{{ tag }}</h2>
{% for thread in threads %}
@ -176,7 +176,7 @@
{% endfor %}
{% endif %}
{% endfor %}
<a href="#top">Top</a>
<a class="btn" href="#top">&uarr; Top</a>
</main>
<footer>
<p>

166
templates/card.html
View file

@ -1,165 +1,3 @@
<style>
.card_content {
& .invisible {
display: none;
}
& .emoji {
display: inline;
height: calc(1rem + 6px);
margin-bottom: -4px;
}
& .ellipsis::after {
content: '...'
}
& .body {
.hashtag:not(.pill),
.mention:not(.pill) {
color: var(--text-color-dark-faded);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
& code {
font-size: var(--font-size-sm);
background: rgb(245, 242, 240);
padding: 0.25em 0.3em;
border-radius: 5px;
display: inline-block;
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;
}
}
& .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) {
.card_content {
& .action {
color: var(--color-brand-complement);
}
& .heading .right_menu a {
color: var(--text-color-light);
&:hover {
color: var(--color-brand-complement);
}
}
& .body {
.hashtag:not(.pill),
.mention:not(.pill) {
color: var(--text-color-light-faded);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
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>
<article class="card">
<div class="card_avatar">
{% if thread.account.avatar is defined %}
@ -219,6 +57,8 @@
</div>
{% if is_thread and not is_tag %}
<a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
<div class="bottom-menu">
<a class="btn" href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread &rarr;</a>
</div>
{% endif %}
</article>

3
templates/styles.html Normal file
View file

@ -0,0 +1,3 @@
<link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
<link rel="stylesheet" href="{{ url_for('threads.static', filename='card.css') }}" />
<link rel="stylesheet" href="{{ url_for('threads.static', filename='button.css') }}" />

3
templates/tag-pills.html
View file

@ -1,4 +1,7 @@
<div class="featured-tags">
<div>
<strong><small>Featured tags</small></strong>
</div>
{% for tag in tags %}
<a class="hashtag pill" href="{{url_for('threads.tag', id=tag.name) }}">
{{ tag.name }}