moved some CSS properties to variables

This commit is contained in:
2026-02-12 16:21:20 +01:00
parent 6119ee8eda
commit 632eef453b
8 changed files with 34 additions and 26 deletions

View File

@@ -21,11 +21,11 @@
font-family: var(--font-mono);
font-size: var(--font-size-mono);
padding: 8px;
border: dashed 2px var(--color-highlight);
border: dashed var(--border-dash-size) var(--color-highlight);
color: var(--color-highlight);
font-weight: 700;
cursor: pointer;
transition: background-color 0.05s ease-out;
transition: background-color var(--duration-animation) ease-out;
}
.outlined-button:hover {

View File

@@ -53,7 +53,7 @@
text-decoration: none;
font-size: 1.0rem;
line-height: 1.4rem;
transition: color 0.1s ease-out, font-weight 0.1s ease-out;
transition: color var(--duration-animation) ease-out, font-weight var(--duration-animation) ease-out;
}
a:link, a:visited, span {
color: var(--color-highlight);

View File

@@ -43,10 +43,10 @@
.subtitled-img-container {
display: flex;
flex-direction: column;
border: 2px var(--color-highlight) dashed;
border: var(--border-dash-size) var(--color-highlight) dashed;
text-decoration: none;
box-sizing: border-box;
transition: background-color 0.1s ease-out;
transition: background-color var(--duration-animation) ease-out;
}
.subtitled-img-container-centred {

View File

@@ -32,8 +32,6 @@
.row-container {
display: flex;
flex-direction: row;
/* margin-bottom: 8px;
gap: 8px; */
}
.row-entry {
@@ -42,10 +40,10 @@
margin: 0;
padding: 8px;
text-decoration: none;
transition: background-color 0.1s ease-out,
border-color 0.1s ease-out,
backdrop-filter 0.2s ease-out;
border: 2px dashed transparent;
transition: background-color var(--duration-animation) ease-out,
border-color var(--duration-animation) ease-out,
backdrop-filter var(--duration-blur) ease-out;
border: var(--border-dash-size) dashed transparent;
}
.row-entry:hover {
@@ -69,7 +67,7 @@
.row-img {
width: 100%;
object-fit: cover;
transition: scale 0.1s ease-out;
transition: scale var(--duration-animation) ease-out;
}
.row-text-container {

View File

@@ -71,7 +71,7 @@
margin: 0;
object-fit: cover;
/* filter: grayscale(60%); */
transition: margin 0.1s ease-out;
transition: margin var(--duration-animation) ease-out;
}
.gallery-img-placeholder {
@@ -88,17 +88,17 @@
border-style: dashed;
justify-content: center;
border-color: transparent;
border-width: 2px;
border-width: var(--border-dash-size);
border-left: none;
transition: border-color 0.1s ease-out,
padding-right 0.1s ease-out,
background-color 0.1s ease-out,
backdrop-filter 0.2s ease-out;
transition: border-color var(--duration-animation) ease-out,
padding-right var(--duration-animation) ease-out,
background-color var(--duration-animation) ease-out,
backdrop-filter var(--duration-blur) ease-out;
}
.gallery-title, .gallery-subtitle {
margin: 0;
transition: color 0.1s ease-out;
transition: color var(--duration-animation) ease-out;
}
.gallery-title {

View File

@@ -45,7 +45,6 @@
/* mouse over link */
a:hover {
color: var(--color-highlight);
/* text-decoration: underline dashed 2px var(--color-highlight); */
}
@media screen and (max-width: 500px) {