angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add boxes component

Browse source
This commit is contained in:
Yannik Rödel 2021-09-20 15:50:27 +02:00
parent a7020638a2
commit fd60642ba0
4 changed files with 81 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
index.md
View file

@ -1,13 +1,29 @@
--- ---
layout: layouts/home.njk layout: layouts/home.njk
eleventyNavigation:
key: Startseite
order: 1
--- ---
{% banner "Angestöpselt", "images/home-banner.jpg", "Kinder und Jugendliche verfolgen der Präsentation eines 3D-Druckers" %} {% banner "Angestöpselt", "images/home-banner.jpg", "Kinder und Jugendliche verfolgen der Präsentation eines 3D-Druckers" %}
Wir bieten Bedürftigen Zugang in die digitale Welt Wir bieten Bedürftigen Zugang in die digitale Welt
{% endbanner %} {% endbanner %}
<section class="page-actions">
<div>
<h2>Wie du mitmachen kannst</h2>
<p>Wenn du Lust hast unseren Verein zu unterstützen, dann komm' vorbei und bastel mit! Oder spende Geld, mit dem wir unsere anfallenden Kosten bezahlen!</p>
</div>
<a href="/computer-beantragen" class="first">
<h3>Computer bekommen</h3>
</a>
<a href="/hardware-spenden">
<h3>Computer spenden</h3>
</a>
<a href="/mitmachen">
<h3>Zeit spenden</h3>
</a>
<a href="#">
<h3>Geld spenden</h3>
</a>
</section>
{% section %} {% section %}
## Projekte ## Projekte

56
styles/components/_boxes.scss
View file

@ -1,56 +0,0 @@
@use '../colors';
@use '../layout';
.boxes-module {
padding: layout.$large-gap;
background-color: colors.$teal-300;
.content,
.box {
&:not(:last-child) {
margin-bottom: layout.$large-gap;
}
}
.content {
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
.box {
margin: layout.$large-gap 0;
padding: layout.$large-gap;
background: colors.$gray-50;
@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;
.content,
.box {
grid-column: span 3;
margin: 0;
&:not(:last-child) {
margin-bottom: 0;
}
}
.box:not(.first) {
grid-column: span 2;
}
}
}

62
styles/components/_page.scss
View file

@ -76,3 +76,65 @@
} }
} }
} }
// 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;
}
}
}
}

1
styles/main.scss
View file

@ -2,6 +2,5 @@
@use 'base'; @use 'base';
@use 'components/site'; @use 'components/site';
@use 'components/page'; @use 'components/page';
@use 'components/boxes';
@use 'components/tabs'; @use 'components/tabs';
@use 'components/forms'; @use 'components/forms';