mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2026-03-21 22:32:17 +00:00
Yannik Rödel
00588a516a
These are a few major updates with breaking changes and / or
deprecations. In particular:
- 11ty v3 [1]
- The configuration file has been ESM-ified
- A few things used by the RSS templates had been deprecated. Those
have been corrected.
- Sass
- `transparentize()` -> `color.scale()`
- Mixed declaration syntax changes [2]
[1]: https://github.com/11ty/eleventy/releases/tag/v3.0.0
[2]: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
98 lines
1.8 KiB
SCSS
98 lines
1.8 KiB
SCSS
@use 'sass:color';
|
|
@use 'sass:math';
|
|
@use '../lib/colors';
|
|
@use '../lib/motion';
|
|
@use '../lib/layout';
|
|
|
|
.form-choices {
|
|
@extend %narrow-content;
|
|
margin-top: layout.$huge-gap;
|
|
margin-bottom: layout.$huge-gap;
|
|
list-style: none;
|
|
text-align: center;
|
|
|
|
> li {
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '\2771';
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
&:before {
|
|
top: calc(50% - #{math.div(layout.$large-gap, 2)});
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin: layout.$large-gap auto;
|
|
width: 15rem;
|
|
height: 1px;
|
|
background-color: colors.$gray-300;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
@extend %form-choice-link;
|
|
}
|
|
}
|
|
|
|
&.narrow {
|
|
margin-top: layout.$large-gap;
|
|
margin-bottom: layout.$large-gap;
|
|
|
|
> li::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
%form-choice-link {
|
|
padding: layout.$small-gap layout.$normal-gap;
|
|
display: inline-block;
|
|
line-height: 2.5;
|
|
text-decoration: none;
|
|
transition: motion.$subtle background-color, motion.$subtle box-shadow;
|
|
|
|
@keyframes form-choice-hover {
|
|
0% {
|
|
background-position: -100% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
background-color: colors.$yellow-600;
|
|
background-image: linear-gradient(
|
|
-45deg,
|
|
transparent 0%,
|
|
#{color.scale(colors.$yellow-500, $alpha: -60%)} 50%,
|
|
transparent 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
background-repeat: no-repeat;
|
|
color: inherit;
|
|
@include colors.card-shadow(colors.$yellow-500);
|
|
animation: motion.$prominent 0s 1 normal both running form-choice-hover;
|
|
|
|
> em {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
> em {
|
|
padding-block: layout.$small-gap;
|
|
font-style: inherit;
|
|
background-color: colors.$yellow-600;
|
|
transition: motion.$subtle background-color;
|
|
}
|
|
}
|