diff --git a/src/css/main.css b/src/css/main.css index 895a8f8..7784083 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -47,6 +47,13 @@ @apply text-neutral-600; @apply dark:text-neutral-400; } + + img { + @apply py-0; + @apply rounded-lg; + @apply shadow-xl; + @apply object-cover; + } } /* Global default styles */ diff --git a/static/css/base.css b/static/css/base.css index a82e8c0..b1c3020 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -27,4 +27,11 @@ li::marker { color: var(--color-gray-600); } + + img { + @apply py-0; + @apply rounded-lg; + @apply shadow-xl; + @apply object-cover; + } } diff --git a/static/css/main.css b/static/css/main.css index 68d074d..e30e6a4 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -448,15 +448,9 @@ .h-9 { height: calc(var(--spacing) * 9); } - .h-10 { - height: calc(var(--spacing) * 10); - } .h-12 { height: calc(var(--spacing) * 12); } - .h-15 { - height: calc(var(--spacing) * 15); - } .h-16 { height: calc(var(--spacing) * 16); } @@ -502,18 +496,12 @@ .w-9 { width: calc(var(--spacing) * 9); } - .w-10 { - width: calc(var(--spacing) * 10); - } .w-11\/12 { width: calc(11/12 * 100%); } .w-12 { width: calc(var(--spacing) * 12); } - .w-15 { - width: calc(var(--spacing) * 15); - } .w-24 { width: calc(var(--spacing) * 24); } @@ -680,12 +668,6 @@ border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } - .place-self-center { - place-self: center; - } - .self-center { - align-self: center; - } .truncate { overflow: hidden; text-overflow: ellipsis; @@ -797,9 +779,6 @@ .object-cover { object-fit: cover; } - .object-scale-down { - object-fit: scale-down; - } .p-1 { padding: calc(var(--spacing) * 1); } @@ -830,9 +809,6 @@ .px-6 { padding-inline: calc(var(--spacing) * 6); } - .px-20 { - padding-inline: calc(var(--spacing) * 20); - } .py-0 { padding-block: calc(var(--spacing) * 0); } @@ -1299,6 +1275,15 @@ } } } + .hover\:shadow-xl\/30 { + &:hover { + @media (hover: hover) { + --tw-shadow-alpha: 30%; + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 30%)), 0 8px 10px -6px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 30%)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } .hover\:shadow-xl { &:hover { @media (hover: hover) { @@ -1722,6 +1707,13 @@ li::marker { color: var(--color-gray-600); } + img { + padding-block: calc(var(--spacing) * 0); + border-radius: var(--radius-lg); + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + object-fit: cover; + } } @property --tw-translate-x { syntax: "*"; diff --git a/templates/section.html b/templates/section.html index 2f144f6..c073647 100644 --- a/templates/section.html +++ b/templates/section.html @@ -36,7 +36,7 @@ {% else %} {% set resized = "" %} {% endif %} -
+
{% if resized %}