Skip to content

Commit c0cb79f

Browse files
nanoparsecnanoparsec
committed
add social media bar component
1 parent 8f7ac52 commit c0cb79f

File tree

14 files changed

+108
-18
lines changed

14 files changed

+108
-18
lines changed

‎lib/assets/images/icons/social-bsky.svg

Lines changed: 5 additions & 0 deletions
Loading

‎lib/assets/images/icons/social-linkedin.svg

Lines changed: 1 addition & 0 deletions
Loading

‎lib/assets/images/icons/social-mastodon.svg

Lines changed: 1 addition & 0 deletions
Loading

‎lib/assets/images/icons/social-x.svg

Lines changed: 1 addition & 0 deletions
Loading

‎lib/assets/images/icons/social-youtube.svg

Lines changed: 1 addition & 0 deletions
Loading

‎lib/assets/stylesheets/application.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,11 @@ Application specific code
4949
@import "../../components/profile/profile";
5050
@import "../../components/quote/quote";
5151
@import "../../components/rating/rating";
52-
@import "../../components/table/table";
53-
@import "../../components/testimonial/testimonial";
52+
@import "../../components/social-media-bar/social-media-bar";
5453
@import "../../components/status/status";
5554
@import "../../components/stripe/stripe";
55+
@import "../../components/table/table";
56+
@import "../../components/testimonial/testimonial";
5657
@import "../../components/teaser/teaser";
5758
@import "../../components/text/text";
5859

‎lib/components/footer/_footer.scss

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,13 @@
3232
flex-direction: column;
3333
align-items: flex-start;
3434

35-
> * + * {
36-
margin-top: $spacer-md;
35+
.footer__headline,
36+
.footer__linkarea {
37+
margin-top: $spacer-lg;
3738
}
3839

39-
/* stylelint-disable-next-line order/order */
40-
@include for-tablet-landscape-up {
41-
> * + * {
42-
margin-top: $spacer-2xl;
43-
}
40+
.social-media-bar {
41+
margin-top: $spacer-md;
4442
}
4543
}
4644

‎lib/components/footer/footer.md

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,36 @@ description: Footer
88
<div class="footer__top">
99
<div class="footer__top__content">
1010
<div class="footer__top__content__right">
11-
<img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
12-
<div class="footer__linkarea">
11+
<img class="footer__logo" src="/snippet/images/logos/soc_logo.svg"
12+
alt="Software Creators Academy Logo" />
13+
<h2 class="footer__headline">Folge uns auf</h2>
14+
<ul class="social-media-bar">
15+
<li class="social-media-bar__item">
16+
<a href="#" class="social-media-bar__link" title="Twitter">
17+
<span class="icon icon--twitter icon--brand-primary"></span>
18+
<span class="sr-only">Twitter</span>
19+
</a>
20+
</li>
21+
<li class="social-media-bar__item">
22+
<a href="#" class="social-media-bar__link" title="Mastodon">
23+
<span class="icon icon--mastodon icon--brand-primary"></span>
24+
<span class="sr-only">Mastodon/span>
25+
</a>
26+
</li>
27+
<li class="social-media-bar__item">
28+
<a href="#" class="social-media-bar__link" title="Linkedin">
29+
<span class="icon icon--linkedin icon--brand-primary"></span>
30+
<span class="sr-only">Linkedin</span>
31+
</a>
32+
</li>
33+
<li class="social-media-bar__item">
34+
<a href="#" class="social-media-bar__link" title="Bsky">
35+
<span class="icon icon--bsky icon--brand-primary"></span>
36+
<span class="sr-only">Bluesky</span>
37+
</a>
38+
</li>
39+
</ul>
40+
<div class="footer__linkarea m-t-lg">
1341
<ul class="footer__links">
1442
<li class="footer__link"><a href="#">Trainings</a></li>
1543
<li class="footer__link"><a href="#">Trainer:innen</a></li>
@@ -25,11 +53,13 @@ description: Footer
2553
</div>
2654
</div>
2755
<div class="footer__top__content__left">
28-
<h2>Newsletter</h2>
29-
<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>
56+
<h2 class="footer__headline">Newsletter</h2>
57+
<p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als
58+
erste(r) von neuen Angeboten und Themen</p>
3059
<form class="form" action="#" method="post" target="_blank">
3160
<div class="form__field">
32-
<label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
61+
<label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr
62+
title="required">*</abbr></label>
3363
<input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
3464
</div>
3565
<div class="form__field">

‎lib/components/icons/_icons.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,23 @@
3434
.icon--idea {
3535
@include icon-before("icons/light-bulb-shine.svg", $brand-black, 2rem);
3636
}
37+
38+
.icon--linkedin {
39+
@include icon-before("icons/social-linkedin.svg", $brand-black, 1.5rem);
40+
}
41+
42+
.icon--mastodon {
43+
@include icon-before("icons/social-mastodon.svg", $brand-black, 1.5rem);
44+
}
45+
46+
.icon--youtube {
47+
@include icon-before("icons/social-youtube.svg", $brand-black, 1.5rem);
48+
}
49+
50+
.icon--twitter {
51+
@include icon-before("icons/social-x.svg", $brand-black, 1.5rem);
52+
}
53+
54+
.icon--bsky {
55+
@include icon-before("icons/social-bsky.svg", $brand-black, 1.6rem);
56+
}

‎lib/components/link/_link.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
.link-unstyled,
2+
%link-unstyled {
3+
color: inherit;
4+
text-decoration: none;
5+
border-bottom: 0;
6+
7+
&:hover,
8+
&:focus {
9+
background-color: initial;
10+
}
11+
}
12+
113
p a,
214
a:not([class]) {
315
color: $brand-text;

0 commit comments

Comments
 (0)