diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss
index f65779d..6ad75ea 100644
--- a/components/03_Organisms/footer/_footer.scss
+++ b/components/03_Organisms/footer/_footer.scss
@@ -1,6 +1,6 @@
// Define easily accessible color-defalts for the footer.
-$primary-link-color: $-beige;
-$primary-line-color: $-almost-white;
+$-primary-link-color: $-beige;
+$-primary-line-color: $-almost-white;
.LP-Footer {
margin: auto;
@@ -22,9 +22,10 @@ $primary-line-color: $-almost-white;
}
&__generic-anchor {
- color: $primary-link-color;
+ color: $-primary-link-color;
+
&:hover {
- color: $primary-line-color
+ color: $-primary-line-color
}
}
@@ -67,7 +68,7 @@ $primary-line-color: $-almost-white;
z-index: 1;
top: 50%;
left: 10px;
- border-top: 1px solid $primary-line-color;
+ border-top: 1px solid $-primary-line-color;
width: calc(100% - 20px)
}
@@ -78,6 +79,68 @@ $primary-line-color: $-almost-white;
padding: 0 20px;
}
+ // Include social media icons.
+ .LP-Footer__Social-Mastodon {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/mastodon.svg');
+ }
+ }
+
+ .LP-Footer__Social-Twitter {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/twitter.svg');
+ }
+ }
+
+ .LP-Footer__Social-Facebook {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/facebook.svg');
+ }
+ }
+
+ .LP-Footer__Social-Youtube {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/youtube.svg');
+ }
+ }
+
+ .LP-Footer__Social-Vimeo {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/vimeo.svg');
+ }
+ }
+
+ .LP-Footer__Social-Instagram {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/instagram.svg');
+ }
+ }
+
+ .LP-Footer__Social-Vkontakte {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/vkontakte.svg');
+ }
+ }
+
+ .LP-Footer__Social-Wordpress {
+ .LP-Footer__Icon {
+ background-image: url('icons/social/wordpress.svg');
+ }
+ }
+
+ // !! WIP and broken Wurstwasser !!
+ // Social media icons style.
+ .LP-Footer__Icon {
+ background-size: 40px 40px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-clip: content-box;
+ position: absolute;
+ height: 50px;
+ width: 50px;
+ filter: invert(1); // Bullshit, have to properly style the svg.
+ }
+
// Big letters of "EXPLORE WITH US"
&__social-explore {
display: flex;
@@ -103,7 +166,7 @@ $primary-line-color: $-almost-white;
&__bottom-section {
width: 100%;
padding: 10px;
- border-top: 1px solid $primary-line-color;
+ border-top: 1px solid $-primary-line-color;
margin-top: 10px
}
diff --git a/components/03_Organisms/footer/footer.hbs b/components/03_Organisms/footer/footer.hbs
index 2dfe212..89f4bfa 100644
--- a/components/03_Organisms/footer/footer.hbs
+++ b/components/03_Organisms/footer/footer.hbs
@@ -23,18 +23,41 @@
+
+
+