diff --git a/index.md b/index.md index 6400fe9..d8372ef 100644 --- a/index.md +++ b/index.md @@ -1,13 +1,29 @@ --- 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" %} Wir bieten Bedürftigen Zugang in die digitale Welt {% endbanner %} +
+
+

Wie du mitmachen kannst

+

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!

+
+ +

Computer bekommen

+
+ +

Computer spenden

+
+ +

Zeit spenden

+
+ +

Geld spenden

+
+
+ {% section %} ## Projekte diff --git a/styles/components/_boxes.scss b/styles/components/_boxes.scss deleted file mode 100644 index 3b43a7d..0000000 --- a/styles/components/_boxes.scss +++ /dev/null @@ -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; - } - } -} diff --git a/styles/components/_page.scss b/styles/components/_page.scss index 4e71fbd..237da5f 100644 --- a/styles/components/_page.scss +++ b/styles/components/_page.scss @@ -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; + } + } + } +} diff --git a/styles/main.scss b/styles/main.scss index 652bcd5..c14bdf7 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -2,6 +2,5 @@ @use 'base'; @use 'components/site'; @use 'components/page'; -@use 'components/boxes'; @use 'components/tabs'; @use 'components/forms';