Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Styled social media icons.

Browse Source
This commit is contained in:
Marcus Scholz
2020-09-06 11:36:35 +02:00
parent b437fd5a2e
commit e3b281f868
3 changed files with 31 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/03_Organisms/footer/_footer.scss
View File

@@ -72,13 +72,6 @@ $-primary-line-color: $-almost-white;
width: calc(100% - 20px) width: calc(100% - 20px)
} }
&__social-overlap {
position: relative;
z-index: 2;
background: $-grey;
padding: 0 20px;
}
// Include social media icons. // Include social media icons.
.LP-Footer__Social-Mastodon { .LP-Footer__Social-Mastodon {
.LP-Footer__Icon { .LP-Footer__Icon {
@@ -155,12 +148,16 @@ $-primary-line-color: $-almost-white;
padding: 0px 20px padding: 0px 20px
} }
&__social-overlap > a { &__social-overlap {
font-size: 3em position: relative;
z-index: 2;
background: $-grey;
padding: 0 10px;
} }
&__social-overlap > a:not(:first-child) { &__social-overlap > a {
margin-left: 0.38em font-size: 3em;
padding-right: 50px;
} }
&__bottom-section { &__bottom-section {
@@ -191,7 +188,8 @@ $-primary-line-color: $-almost-white;
font-size: 2.5em font-size: 2.5em
} }
.LP-Footer__social-overlap > a { .LP-Footer__social-overlap > a {
font-size: 2.24em font-size: 2.24em;
height: 50px;
} }
.LP-Footer__bottom-wrapper { .LP-Footer__bottom-wrapper {
font-size: 1.3em font-size: 1.3em
@@ -221,13 +219,14 @@ $-primary-line-color: $-almost-white;
.LP-Footer__social-overlap { .LP-Footer__social-overlap {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 50px;
} }
.LP-Footer__social-icons-wrapper { .LP-Footer__social-icons-wrapper {
width: 100%; width: 100%;
padding: 0 padding: 0
} }
.LP-Footer__social-overlap > a:not(:first-child) { .LP-Footer__social-overlap {
margin-left: 20px; margin-left: 0px;
} }
.LP-Footer__bottom-section { .LP-Footer__bottom-section {
padding: 0 5px 10px 5px padding: 0 5px 10px 5px

14
components/03_Organisms/footer/footer.hbs
View File

@@ -33,27 +33,23 @@
<a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__generic-anchor" <a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__generic-anchor"
target="_blank" title="Mastodon" itemprop="significantLink"> target="_blank" title="Mastodon" itemprop="significantLink">
<span class="LP-Footer__Icon"></span> <span class="LP-Footer__Icon"></span>
</a> </a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
<a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__generic-anchor" <a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__generic-anchor"
target="_blank" title="Twitter" itemprop="significantLink"> target="_blank" title="Twitter" itemprop="significantLink">
<span class="LP-Footer__Icon"></span> <span class="LP-Footer__Icon"></span>
</a> </a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
<a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__generic-anchor" <a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__generic-anchor"
target="_blank" title="Youtube" itemprop="significantLink"> target="_blank" title="Youtube" itemprop="significantLink">
<span class="LP-Footer__Icon"></span> <span class="LP-Footer__Icon"></span>
</a> </a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
<a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__generic-anchor" <a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__generic-anchor"
target="_blank" title="Wordpress" itemprop="significantLink"> target="_blank" title="Wordpress" itemprop="significantLink">
<span class="LP-Footer__Icon"></span> <span class="LP-Footer__Icon"></span>
</a> </a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
<a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__generic-anchor" <a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__generic-anchor"
target="_blank" title="Instagram" itemprop="significantLink"> target="_blank" title="Instagram" itemprop="significantLink">
<span class="LP-Footer__Icon"></span> <span class="LP-Footer__Icon"></span>
</a> </a>
</span> </span>
</section> </section>

25
public/main.css
View File

@@ -1284,11 +1284,6 @@ body {
left: 10px; left: 10px;
border-top: 1px solid #f9f9f9; border-top: 1px solid #f9f9f9;
width: calc(100% - 20px); } width: calc(100% - 20px); }
.LP-Footer__social-overlap {
position: relative;
z-index: 2;
background: #565656;
padding: 0 20px; }
.LP-Footer .LP-Footer__Social-Mastodon .LP-Footer__Icon { .LP-Footer .LP-Footer__Social-Mastodon .LP-Footer__Icon {
background-image: url("icons/social/mastodon.svg"); } background-image: url("icons/social/mastodon.svg"); }
.LP-Footer .LP-Footer__Social-Twitter .LP-Footer__Icon { .LP-Footer .LP-Footer__Social-Twitter .LP-Footer__Icon {
@@ -1322,10 +1317,14 @@ body {
.LP-Footer__social-small { .LP-Footer__social-small {
font-size: 0.6em; font-size: 0.6em;
padding: 0px 20px; } padding: 0px 20px; }
.LP-Footer__social-overlap {
position: relative;
z-index: 2;
background: #565656;
padding: 0 10px; }
.LP-Footer__social-overlap > a { .LP-Footer__social-overlap > a {
font-size: 3em; } font-size: 3em;
.LP-Footer__social-overlap > a:not(:first-child) { padding-right: 50px; }
margin-left: 0.38em; }
.LP-Footer__bottom-section { .LP-Footer__bottom-section {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@@ -1344,7 +1343,8 @@ body {
.LP-Footer .LP-Footer__social-connect { .LP-Footer .LP-Footer__social-connect {
font-size: 2.5em; } font-size: 2.5em; }
.LP-Footer .LP-Footer__social-overlap > a { .LP-Footer .LP-Footer__social-overlap > a {
font-size: 2.24em; } font-size: 2.24em;
height: 50px; }
.LP-Footer .LP-Footer__bottom-wrapper { .LP-Footer .LP-Footer__bottom-wrapper {
font-size: 1.3em; } } font-size: 1.3em; } }
@media (max-width: 750px) { @media (max-width: 750px) {
@@ -1363,12 +1363,13 @@ body {
padding: 0 10px; } padding: 0 10px; }
.LP-Footer .LP-Footer__social-overlap { .LP-Footer .LP-Footer__social-overlap {
display: flex; display: flex;
justify-content: center; } justify-content: center;
height: 50px; }
.LP-Footer .LP-Footer__social-icons-wrapper { .LP-Footer .LP-Footer__social-icons-wrapper {
width: 100%; width: 100%;
padding: 0; } padding: 0; }
.LP-Footer .LP-Footer__social-overlap > a:not(:first-child) { .LP-Footer .LP-Footer__social-overlap {
margin-left: 20px; } margin-left: 0px; }
.LP-Footer .LP-Footer__bottom-section { .LP-Footer .LP-Footer__bottom-section {
padding: 0 5px 10px 5px; } padding: 0 5px 10px 5px; }
.LP-Footer .LP-Footer__bottom-wrapper { .LP-Footer .LP-Footer__bottom-wrapper {