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)
}
&__social-overlap {
position: relative;
z-index: 2;
background: $-grey;
padding: 0 20px;
}
// Include social media icons.
.LP-Footer__Social-Mastodon {
.LP-Footer__Icon {
@@ -155,12 +148,16 @@ $-primary-line-color: $-almost-white;
padding: 0px 20px
}
&__social-overlap > a {
font-size: 3em
&__social-overlap {
position: relative;
z-index: 2;
background: $-grey;
padding: 0 10px;
}
&__social-overlap > a:not(:first-child) {
margin-left: 0.38em
&__social-overlap > a {
font-size: 3em;
padding-right: 50px;
}
&__bottom-section {
@@ -191,7 +188,8 @@ $-primary-line-color: $-almost-white;
font-size: 2.5em
}
.LP-Footer__social-overlap > a {
font-size: 2.24em
font-size: 2.24em;
height: 50px;
}
.LP-Footer__bottom-wrapper {
font-size: 1.3em
@@ -221,13 +219,14 @@ $-primary-line-color: $-almost-white;
.LP-Footer__social-overlap {
display: flex;
justify-content: center;
height: 50px;
}
.LP-Footer__social-icons-wrapper {
width: 100%;
padding: 0
}
.LP-Footer__social-overlap > a:not(:first-child) {
margin-left: 20px;
.LP-Footer__social-overlap {
margin-left: 0px;
}
.LP-Footer__bottom-section {
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"
target="_blank" title="Mastodon" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
</a>
<a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__generic-anchor"
target="_blank" title="Twitter" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
</a>
<a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__generic-anchor"
target="_blank" title="Youtube" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
</a>
<a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__generic-anchor"
target="_blank" title="Wordpress" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
</a>
<a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__generic-anchor"
target="_blank" title="Instagram" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
</a>
</span>
</section>