From b437fd5a2eb66e3efb4aafa04d1d9cfb48c3525b Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sun, 6 Sep 2020 05:00:17 +0200 Subject: [PATCH] Added social media icons to the footer. Still ugly. I hate CSS! --- components/03_Organisms/footer/_footer.scss | 75 +++++++++++++++++++-- components/03_Organisms/footer/footer.hbs | 31 +++++++-- public/main.css | 25 +++++++ 3 files changed, 121 insertions(+), 10 deletions(-) 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 @@
  • NEW USERS
  • ORDER STATUS
    • + +
    +
    Proudly made by reverend and Commander1024 diff --git a/public/main.css b/public/main.css index 045d5ea..769b94a 100644 --- a/public/main.css +++ b/public/main.css @@ -1289,6 +1289,31 @@ body { z-index: 2; background: #565656; padding: 0 20px; } + .LP-Footer .LP-Footer__Social-Mastodon .LP-Footer__Icon { + background-image: url("icons/social/mastodon.svg"); } + .LP-Footer .LP-Footer__Social-Twitter .LP-Footer__Icon { + background-image: url("icons/social/twitter.svg"); } + .LP-Footer .LP-Footer__Social-Facebook .LP-Footer__Icon { + background-image: url("icons/social/facebook.svg"); } + .LP-Footer .LP-Footer__Social-Youtube .LP-Footer__Icon { + background-image: url("icons/social/youtube.svg"); } + .LP-Footer .LP-Footer__Social-Vimeo .LP-Footer__Icon { + background-image: url("icons/social/vimeo.svg"); } + .LP-Footer .LP-Footer__Social-Instagram .LP-Footer__Icon { + background-image: url("icons/social/instagram.svg"); } + .LP-Footer .LP-Footer__Social-Vkontakte .LP-Footer__Icon { + background-image: url("icons/social/vkontakte.svg"); } + .LP-Footer .LP-Footer__Social-Wordpress .LP-Footer__Icon { + background-image: url("icons/social/wordpress.svg"); } + .LP-Footer .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); } .LP-Footer__social-explore { display: flex; align-items: center;