moved some CSS properties to variables
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user