mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
64 lines
1.2 KiB
SCSS
64 lines
1.2 KiB
SCSS
@use '../lib/colors';
|
|
@use '../lib/layout';
|
|
|
|
// Actions are another module that is present on the home page. It shows a small
|
|
// number of CTA-style buttons which lead to different parts of the site.
|
|
.page-actions {
|
|
padding: layout.$large-gap;
|
|
background-color: colors.$teal-300;
|
|
|
|
> *:not(:last-child) {
|
|
margin-bottom: layout.$large-gap;
|
|
}
|
|
|
|
> div {
|
|
> *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
> *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
margin: layout.$large-gap 0;
|
|
padding: layout.$large-gap;
|
|
background: colors.$gray-50;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
@include colors.card-shadow;
|
|
|
|
> h3 {
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: layout.$breakpoint) {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: layout.$large-gap;
|
|
align-items: stretch;
|
|
|
|
> * {
|
|
grid-column: span 3;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
margin: 0;
|
|
|
|
&.first {
|
|
transform: translateY(#{-1 * layout.$huge-gap});
|
|
}
|
|
|
|
&:not(.first) {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
}
|
|
}
|