bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #12 from bartlomiej-pluta/rwd-social

Browse Source 
Enable RWD for social buttons
This commit is contained in:
Bartłomiej Przemysław Pluta
2018-04-16 12:00:59 +02:00
committed by GitHub
parent 4b5d2198d2 719906d227
commit eb04cb6a08
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@@ -243,21 +243,21 @@
<div class="social container"> <div class="social container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="social__content col-10"> <div class="social__content col-10">
<div> <div class="social__github">
<button class="rect-button rect-button--github rect-button--fixed-width"> <button class="rect-button rect-button--github rect-button--fixed-width">
<span class="rect-button__icon fab fa-github"></span> <span class="rect-button__icon fab fa-github"></span>
GitHub GitHub
</button> </button>
<p class="social__stats">7 352 Followers</p> <p class="social__stats">7 352 Followers</p>
</div> </div>
<div> <div class="social__twitter">
<button class="rect-button rect-button--twitter rect-button--fixed-width"> <button class="rect-button rect-button--twitter rect-button--fixed-width">
<span class="rect-button__icon fab fa-twitter"></span> <span class="rect-button__icon fab fa-twitter"></span>
Twitter Twitter
</button> </button>
<p class="social__stats">136 312 Followers</p> <p class="social__stats">136 312 Followers</p>
</div> </div>
<div> <div class="social__facebook">
<button class="rect-button rect-button--facebook rect-button--fixed-width"> <button class="rect-button rect-button--facebook rect-button--fixed-width">
<span class="rect-button__icon fab fa-facebook-f"></span> <span class="rect-button__icon fab fa-facebook-f"></span>
Facebook Facebook

13
src/scss/_social.scss
View File

@@ -4,6 +4,10 @@
padding-bottom: 80px; padding-bottom: 80px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media all and (max-width: $tablet) {
flex-direction: column;
}
} }
.social__stats { .social__stats {
@@ -13,4 +17,13 @@
font-size: 14px; font-size: 14px;
color: $regular-text; color: $regular-text;
text-align: center; text-align: center;
}
.social__github,
.social__twitter,
.social__facebook {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }