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>

25
public/main.css
View File

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