From 9fe04dcadfc5461c952e7e0b2ad49f300d025782 Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Sun, 19 Jan 2025 10:57:35 +0100 Subject: [PATCH] refactor: move card_content style to card template --- templates/_home.html | 138 ---------------------------------- templates/_tag.html | 138 ---------------------------------- templates/card.html | 171 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 171 insertions(+), 276 deletions(-) diff --git a/templates/_home.html b/templates/_home.html index 1c1cb54..714ec5a 100644 --- a/templates/_home.html +++ b/templates/_home.html @@ -150,109 +150,6 @@ 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-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) { html, @@ -271,41 +168,6 @@ } } - .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); - } - } - } - .pill { background-color: rgba(0, 0, 0, 0.15); color: var(--text-color-light-faded); diff --git a/templates/_tag.html b/templates/_tag.html index 179c863..5129238 100644 --- a/templates/_tag.html +++ b/templates/_tag.html @@ -144,109 +144,6 @@ 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-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) { html, @@ -265,41 +162,6 @@ } } - .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); - } - } - } - .pill { background-color: rgba(0, 0, 0, 0.15); color: var(--text-color-light-faded); diff --git a/templates/card.html b/templates/card.html index e9904cc..2251295 100644 --- a/templates/card.html +++ b/templates/card.html @@ -1,3 +1,174 @@ +
{% if thread.account.avatar is defined %}