Skip to content

Commit

Permalink
More tweaks for footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@nanoparsec
nanoparsec committed Feb 19, 2024
1 parent ee162f5 commit 3545e29
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 46 deletions.
52 changes: 30 additions & 22 deletions lib/components/footer/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,35 @@
margin: 0 auto;
padding: 0 $spacer-xs;

/* stylelint-disable-next-line order/order */
@include for-tablet-landscape-up {
display: grid;
grid-column-gap: $spacer-2xl;
grid-template-areas: "left right";
grid-template-columns: 2fr 1fr;

padding: 0 $spacer-base;
}
}

.footer__top__content__right {
display: flex;
grid-area: right;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;

> * + * {
margin-top: $spacer-base;
margin-top: $spacer-md;
}
}

.footer__top__content__left {
grid-area: left;
margin-top: $spacer-base;

> * + * {
margin-top: $spacer-md;
}

> * {
Expand All @@ -25,24 +52,7 @@

/* stylelint-disable-next-line order/order */
@include for-tablet-landscape-up {
display: grid;
grid-column-gap: $spacer-base;
grid-template-areas:
"left-1 right"
"left-2 right"
"left-3 right";
grid-template-columns: 2fr 1fr;
grid-template-rows: auto;

padding: 0 $spacer-base;

h2 {
grid-area: left-2;
}

form {
grid-area: left-3;
}
margin-top: 0;
}
}

Expand All @@ -65,18 +75,16 @@
}

.footer__logo {
grid-area: left-1;
height: 3rem;
}

.footer__linkarea {
display: flex;
grid-area: right;
gap: $spacer-base;
justify-self: center;
}

.footer__links {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
Expand Down
53 changes: 29 additions & 24 deletions lib/components/footer/footer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,36 @@ description: Footer
<footer>
<div class="footer__top">
<div class="footer__top__content">
<img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
<h2>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen.</h2>
<form class="form" action="#" method="post" target="_blank">
<div class="form__field">
<label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
<input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
<div class="footer__top__content__right">
<img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
<div class="footer__linkarea">
<ul class="footer__links">
<li class="footer__link"><a href="#">Trainings</a></li>
<li class="footer__link"><a href="#">Trainer:innen</a></li>
<li class="footer__link"><a href="#">Modulbaukasten</a></li>
<li class="footer__link"><a href="#">News</a></li>
</ul>
<ul class="footer__links">
<li class="footer__link"><a href="#">Impressum</a></li>
<li class="footer__link"><a href="#">Datenschutz</a></li>
<li class="footer__link"><a href="#">AGB</a></li>
<li class="footer__link"><a href="#">Kontakt</a></li>
</ul>
</div>
<div class="form__field">
<label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
<input class="form__input" type="email" name="email" id="text8475487" />
</div>
</form>
<div class="footer__linkarea">
<ul class="footer__links">
<li class="footer__link"><a href="#">Trainings</a></li>
<li class="footer__link"><a href="#">Trainer:innen</a></li>
<li class="footer__link"><a href="#">Modulbaukasten</a></li>
<li class="footer__link"><a href="#">News</a></li>
</ul>
<ul class="footer__links">
<li class="footer__link"><a href="#">Impressum</a></li>
<li class="footer__link"><a href="#">Datenschutz</a></li>
<li class="footer__link"><a href="#">AGB</a></li>
<li class="footer__link"><a href="#">Kontakt</a></li>
</ul>
</div>
<div class="footer__top__content__left">
<h2>Newsletter</h2>
<p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen</p>
<form class="form" action="#" method="post" target="_blank">
<div class="form__field">
<label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
<input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
</div>
<div class="form__field">
<label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
<input class="form__input" type="email" name="email" id="text8475487" />
</div>
</form>
</div>
</div>
</div>
Expand Down

0 comments on commit 3545e29

Please sign in to comment.