Skip to content

Commit

Permalink
Enhance and sort social media icons
Browse files Browse the repository at this point in the history
Related fossasia#186
  • Loading branch information
myfrom committed Nov 3, 2018
1 parent 546b950 commit f307a6c
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 30 deletions.
36 changes: 18 additions & 18 deletions _includes/footer.html
Expand Up @@ -53,53 +53,53 @@ <h6 class="title">Latest Updates</h6>
<div class="col-sm-6 text-right">
<ul class="list-inline social-list">
<li>
<a href="https://fossasia.org/" target="_blank">
<i class="ti-world"></i>
<a href="https://www.facebook.com/fossasia/" target="_blank" rel="noopener noreferrer">
<i class="ti-facebook"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank">
<i class="ti-youtube"></i>
<a href="https://twitter.com/fossasia" target="_blank" rel="noopener noreferrer">
<i class="ti-twitter-alt"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/fossasia/" target="_blank">
<a href="https://www.instagram.com/fossasia/" target="_blank" rel="noopener noreferrer">
<i class="ti-instagram"></i>
</a>
</li>
<li>
<a href="https://twitter.com/fossasia" target="_blank">
<i class="ti-twitter-alt"></i>
<a href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank" rel="noopener noreferrer">
<i class="ti-youtube"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/fossasia/" target="_blank">
<i class="ti-facebook"></i>
<a href="https://github.com/fossasia" target="_blank" rel="noopener noreferrer">
<i class="ti-github"></i>
</a>
</li>
<li>
<a href="https://codein.withgoogle.com/organizations/fossasia/" target="_blank">
<i class="ti-settings"></i>
<a href="https://www.linkedin.com/groups/FOSSASIA-3762811" target="_blank" rel="noopener noreferrer">
<i class="ti-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/fossasia" target="_blank">
<i class="ti-github"></i>
<a href="https://plus.google.com/108920596016838318216" target="_blank" rel="noopener noreferrer">
<i class="ti-google"></i>
</a>
</li>
<li>
<a href="https://flickr.com/photos/fossasia" target="_blank">
<a href="https://flickr.com/photos/fossasia" target="_blank" rel="noopener noreferrer">
<i class="ti-flickr"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/groups/FOSSASIA-3762811" target="_blank">
<i class="ti-linkedin"></i>
<a href="https://codein.withgoogle.com/organizations/fossasia/" target="_blank" rel="noopener noreferrer">
<i class="ti-settings"></i>
</a>
</li>
<li>
<a href="https://plus.google.com/108920596016838318216" target="_blank">
<i class="ti-google"></i>
<a href="https://fossasia.org/" target="_blank" rel="noopener noreferrer">
<i class="ti-world"></i>
</a>
</li>
</ul>
Expand Down
47 changes: 46 additions & 1 deletion css/socialmedia-icons.css
@@ -1,10 +1,55 @@
@charset "utf-8";
/* CSS Document */

.lgi{
#social_icons {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}

.lgi {
flex-grow: 1;
min-width: 120px;
width: 20px;
padding: 20px;
font-size: 30px;
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.lgi div {
font-size: 15px;
opacity: 0.8;
margin-top: 1.2em;
transition:
opacity 100ms ease-in-out,
transform 100ms ease-in-out;
}

footer .social-list {
padding-right: 8vw;
}

@media
(min-width: 1200px) and (orientation: landscape),
(min-width: 900px) and (orientation: portrait)
{

.lgi div {
opacity: 0;
transform: translateY(-100%);
}

.lgi:hover div,
.lgi:focus div,
.lgi:focus-within div {
opacity: 0.8;
transform: none;
}

}
43 changes: 32 additions & 11 deletions index.html
Expand Up @@ -118,17 +118,38 @@ <h3>What is FOSSASIA?</h3>
<div class="col-md-8 col-md-offset-2 text-center">
<h1>Connect with Fossasia on Social Media</h1>
<p> Be sure to follow us on social media! </p>
<p class="large">
<a href="https://www.facebook.com/fossasia/" class="ti-facebook lgi" target="_blank"></a>
<a href="https://twitter.com/fossasia" class="ti-twitter lgi" target="_blank"></a>
<a href="https://www.instagram.com/fossasia/" target="_blank" class="ti-instagram lgi"></a>
<a href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank" class="ti-youtube lgi"></a>
<a href="https://github.com/fossasia" target="_blank" class="ti-github lgi"></a>
<a href="https://flickr.com/photos/fossasia" target="_blank" class="ti-flickr lgi"></a>
<a href="https://www.linkedin.com/groups/FOSSASIA-3762811" target="_blank" class="ti-linkedin lgi"></a>
<a href="https://plus.google.com/108920596016838318216" target="_blank" class="ti-google lgi"></a>
<a href="https://codein.withgoogle.com/organizations/fossasia/" target="_blank" class="ti-settings lgi"></a>
</p>
<div id="social_icons">
<a href="https://www.facebook.com/fossasia/" class="ti-facebook lgi" target="_blank" rel="noopener noreferrer">
<div>Facebook</div>
</a>
<a href="https://twitter.com/fossasia" class="ti-twitter lgi" target="_blank" rel="noopener noreferrer">
<div>Twitter</div>
</a>
<a href="https://www.instagram.com/fossasia/" target="_blank" class="ti-instagram lgi" rel="noopener noreferrer">
<div>Instagram</div>
</a>
<a href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank" class="ti-youtube lgi" rel="noopener noreferrer">
<div>YouTube</div>
</a>
<a href="https://github.com/fossasia" target="_blank" class="ti-github lgi">
<div>Github</div>
</a>
<a href="https://www.linkedin.com/groups/FOSSASIA-3762811" target="_blank" class="ti-linkedin lgi" rel="noopener noreferrer">
<div>LinkedIn</div>
</a>
<a href="https://plus.google.com/108920596016838318216" target="_blank" class="ti-google lgi" rel="noopener noreferrer">
<div>Google+</div>
</a>
<a href="https://flickr.com/photos/fossasia" target="_blank" class="ti-flickr lgi" rel="noopener noreferrer">
<div>Flickr</div>
</a>
<a href="https://codein.withgoogle.com/organizations/fossasia/" target="_blank" class="ti-settings lgi" rel="noopener noreferrer">
<div>Code-In page</div>
</a>
<a href="https://fossasia.org" target="_blank" class="ti-world lgi" rel="noopener noreferrer">
<div>Website</div>
</a>
</div>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffossasia%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId"
width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media">
</iframe>
Expand Down

0 comments on commit f307a6c

Please sign in to comment.