harmonized accent color; made sure that "Schwarzspeicher" fits on one line in cards template

This commit is contained in:
eclipse 2025-03-16 16:19:55 +01:00
parent 4b7139bb8c
commit e71f5197df

View File

@ -24,6 +24,7 @@
:root { :root {
--tr-card-height: 300px; --tr-card-height: 300px;
--tr-smallest-width: 350px; --tr-smallest-width: 350px;
--tr-accent-color: #cf0000;
--pico-font-family-sans-serif: LibertinusSans, system-ui, "Segoe UI", Roboto, --pico-font-family-sans-serif: LibertinusSans, system-ui, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
@ -277,7 +278,7 @@ h1, h2, h3, h4, h5, h6 {
.required:after { .required:after {
content: " *"; content: " *";
color: red; color: var(--tr-accent-color);
} }
@ -374,7 +375,7 @@ article form {
top: calc( 100% - 2px ); top: calc( 100% - 2px );
width: 100%; width: 100%;
height: 4px; height: 4px;
background-color: #cf0000; background-color: var(--tr-accent-color);
transform-origin: center center; transform-origin: center center;
transform: scaleX( 0 ); transform: scaleX( 0 );
animation: line-animation 3s ease; animation: line-animation 3s ease;
@ -435,9 +436,6 @@ article form {
/* flexitem settings for single card */ /* flexitem settings for single card */
.card-header { .card-header {
flex: 0 0 3.5lh; flex: 0 0 3.5lh;
/* set card header to fixed height equivalent to two lines of text */
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
/* Use overflow on card heading if it's longer than two lines of text */ /* Use overflow on card heading if it's longer than two lines of text */
h3 { h3 {
@ -452,6 +450,10 @@ article form {
} }
} }
article:not(:has(> form:first-child)) > header.card-header {
padding: calc(var(--pico-block-spacing-vertical) * 0.66) calc(var(--pico-block-spacing-horizontal) * 0.8); /* a bit of a hack to make sure "Schwarzspeicher" fits on one line */
}
.card-body img { .card-body img {
height: var(--tr-card-height); height: var(--tr-card-height);
object-fit: contain; object-fit: contain;
@ -685,7 +687,7 @@ img.impr {
} }
.heart { .heart {
color: red; color: var(--tr-accent-color);
} }
/* /*