mirror of
https://github.com/kogakure/website-11ty-kogakure.de.git
synced 2026-02-03 20:25:30 +00:00
61 lines
1.1 KiB
CSS
61 lines
1.1 KiB
CSS
/** Image */
|
|
img {
|
|
background-color: var(--color-fg-feather);
|
|
border-color: var(--color-fg-feather);
|
|
border-radius: var(--radius-1);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
box-shadow: 0 2px 3px var(--color-fg-feather);
|
|
display: block;
|
|
font-size: 0;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.dark img {
|
|
opacity: 0.87;
|
|
}
|
|
|
|
.dark .show-light,
|
|
.light .show-dark {
|
|
display: none;
|
|
}
|
|
|
|
img[src$='.svg'],
|
|
.no-background {
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.image-shadow {
|
|
position: relative;
|
|
transition-duration: var(--transition-duration-5);
|
|
transition-property: transform;
|
|
transition-timing-function: ease-in-out;
|
|
|
|
&::after {
|
|
box-shadow: var(--shadow-subtle-shade);
|
|
content: '';
|
|
height: 100%;
|
|
inset-block-start: 0;
|
|
inset-inline-start: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
transition-duration: var(--transition-duration-5);
|
|
transition-property: opacity;
|
|
transition-timing-function: ease-in-out;
|
|
width: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
transform: scale(1.03);
|
|
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|