styles(): use flex-wrap for social icons
This commit is contained in:
parent
779dee41ee
commit
dbe4f6370c
@ -17,14 +17,16 @@
|
||||
<h3>Contact</h3>
|
||||
<p>{{site.authorName}}</p>
|
||||
<p>{{site.authorAddress}}<br>{{site.authorCity}}</p>
|
||||
<a href="{{site.authorSocial.mastodon}}" class="social" title="Mastodon"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.956 18.293c3.007-.36 5.625-2.212 5.954-3.905.519-2.667.476-6.508.476-6.508 0-5.207-3.411-6.733-3.411-6.733C18.255.357 15.302.025 12.233 0h-.075c-3.068.025-6.02.357-7.74 1.147 0 0-3.41 1.526-3.41 6.733 0 .315-.003.647-.004.993-.005.96-.01 2.024.018 3.136.123 5.091.933 10.11 5.64 11.355 2.171.575 4.035.695 5.535.613 2.722-.151 4.25-.972 4.25-.972l-.09-1.974s-1.945.613-4.13.538c-2.163-.074-4.448-.233-4.798-2.89a5.448 5.448 0 01-.048-.745s2.124.519 4.816.642c1.647.076 3.19-.096 4.759-.283zm2.406-3.705V8.283c0-1.288-.328-2.312-.987-3.07-.68-.757-1.57-1.145-2.674-1.145-1.278 0-2.246.491-2.885 1.474l-.623 1.043-.622-1.043c-.64-.983-1.608-1.474-2.886-1.474-1.104 0-1.994.388-2.674 1.146-.659.757-.987 1.781-.987 3.07v6.303h2.498V8.47c0-1.29.543-1.945 1.628-1.945 1.2 0 1.802.777 1.802 2.312v3.35h2.483v-3.35c0-1.535.601-2.312 1.801-2.312 1.086 0 1.629.655 1.629 1.945v6.119h2.497z" fill="#fff"/></svg></a>
|
||||
<a href="{{site.authorSocial.facebook}}" class="social" title="Facebook"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><path d="M24,4C12.972,4,4,12.972,4,24c0,10.006,7.394,18.295,17,19.75V29h-4c-0.552,0-1-0.447-1-1v-3c0-0.553,0.448-1,1-1h4v-3.632 C21,15.617,23.427,13,27.834,13c1.786,0,3.195,0.124,3.254,0.129C31.604,13.175,32,13.607,32,14.125V17.5c0,0.553-0.448,1-1,1h-2 c-1.103,0-2,0.897-2,2V24h4c0.287,0,0.56,0.123,0.75,0.338c0.19,0.216,0.278,0.502,0.243,0.786l-0.375,3 C31.555,28.624,31.129,29,30.625,29H27v14.75c9.606-1.455,17-9.744,17-19.75C44,12.972,35.028,4,24,4z"/></svg></a>
|
||||
<a href="{{site.authorSocial.linkedin}}" class="social" title="Linkedin"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 2.5A2.49 2.49 0 012.5 5 2.49 2.49 0 01.02 2.5C.02 1.12 1.13 0 2.5 0a2.49 2.49 0 012.48 2.5zM5 7H0v16h5V7zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V23H24V12.869c0-7.88-8.922-7.593-11.018-3.714V7z" fill="#fff"/></svg></a>
|
||||
<a href="{{site.authorSocial.instagram}}" class="social" title="Instagram"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z"/></svg></a>
|
||||
<a href="{{site.authorSocial.peertube}}" class="social" title="Peertube"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M8.83,4.5l16.89,9.75L42.6,24,25.72,33.75,8.83,43.5V24l8.36,4.83,8.42,4.87V14.27l-8.42,4.87L8.83,24V4.5Z"/></g></svg></a>
|
||||
<a href="{{site.authorSocial.youtube}}" class="social" title="Youtube"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M44.9,14.5c-0.4-2.2-2.3-3.8-4.5-4.3C37.1,9.5,31,9,24.4,9c-6.6,0-12.8,0.5-16.1,1.2c-2.2,0.5-4.1,2-4.5,4.3C3.4,17,3,20.5,3,25s0.4,8,0.9,10.5c0.4,2.2,2.3,3.8,4.5,4.3c3.5,0.7,9.5,1.2,16.1,1.2s12.6-0.5,16.1-1.2c2.2-0.5,4.1-2,4.5-4.3c0.4-2.5,0.9-6.1,1-10.5C45.9,20.5,45.4,17,44.9,14.5z M19,32V18l12.2,7L19,32z"/></g></svg></a>
|
||||
<a href="{{site.authorSocial.twitch}}" class="social" title="Twitch"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M31.16,12.16v8.19h2.47V12.16Zm-7.75,0v8.19H26V12.16ZM14.11,4.5,7.23,11.34l0,25.12h8.3l0,7,7.06-7H28.2L40.77,24V4.5Zm1.42,2.89H38v15.2L32.55,28H26.94l-5.12,5.13V28H15.53Z"/></g></svg></a>
|
||||
<a href="{{site.authorSocial.rss}}" class="social" title="RSS"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M53.89,58.5a5.51,5.51,0,0,1-5.5-5.5A37.44,37.44,0,0,0,11,15.61a5.5,5.5,0,1,1,0-11A48.45,48.45,0,0,1,59.39,53,5.51,5.51,0,0,1,53.89,58.5ZM11,6.61a3.5,3.5,0,1,0,0,7A39.44,39.44,0,0,1,50.39,53a3.5,3.5,0,0,0,7,0A46.45,46.45,0,0,0,11,6.61Z"></g></svg></a>
|
||||
<div class="socials">
|
||||
<a href="{{site.authorSocial.mastodon}}" class="social" title="Mastodon"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.956 18.293c3.007-.36 5.625-2.212 5.954-3.905.519-2.667.476-6.508.476-6.508 0-5.207-3.411-6.733-3.411-6.733C18.255.357 15.302.025 12.233 0h-.075c-3.068.025-6.02.357-7.74 1.147 0 0-3.41 1.526-3.41 6.733 0 .315-.003.647-.004.993-.005.96-.01 2.024.018 3.136.123 5.091.933 10.11 5.64 11.355 2.171.575 4.035.695 5.535.613 2.722-.151 4.25-.972 4.25-.972l-.09-1.974s-1.945.613-4.13.538c-2.163-.074-4.448-.233-4.798-2.89a5.448 5.448 0 01-.048-.745s2.124.519 4.816.642c1.647.076 3.19-.096 4.759-.283zm2.406-3.705V8.283c0-1.288-.328-2.312-.987-3.07-.68-.757-1.57-1.145-2.674-1.145-1.278 0-2.246.491-2.885 1.474l-.623 1.043-.622-1.043c-.64-.983-1.608-1.474-2.886-1.474-1.104 0-1.994.388-2.674 1.146-.659.757-.987 1.781-.987 3.07v6.303h2.498V8.47c0-1.29.543-1.945 1.628-1.945 1.2 0 1.802.777 1.802 2.312v3.35h2.483v-3.35c0-1.535.601-2.312 1.801-2.312 1.086 0 1.629.655 1.629 1.945v6.119h2.497z" fill="#fff"/></svg></a>
|
||||
<a href="{{site.authorSocial.facebook}}" class="social" title="Facebook"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><path d="M24,4C12.972,4,4,12.972,4,24c0,10.006,7.394,18.295,17,19.75V29h-4c-0.552,0-1-0.447-1-1v-3c0-0.553,0.448-1,1-1h4v-3.632 C21,15.617,23.427,13,27.834,13c1.786,0,3.195,0.124,3.254,0.129C31.604,13.175,32,13.607,32,14.125V17.5c0,0.553-0.448,1-1,1h-2 c-1.103,0-2,0.897-2,2V24h4c0.287,0,0.56,0.123,0.75,0.338c0.19,0.216,0.278,0.502,0.243,0.786l-0.375,3 C31.555,28.624,31.129,29,30.625,29H27v14.75c9.606-1.455,17-9.744,17-19.75C44,12.972,35.028,4,24,4z"/></svg></a>
|
||||
<a href="{{site.authorSocial.linkedin}}" class="social" title="Linkedin"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 2.5A2.49 2.49 0 012.5 5 2.49 2.49 0 01.02 2.5C.02 1.12 1.13 0 2.5 0a2.49 2.49 0 012.48 2.5zM5 7H0v16h5V7zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V23H24V12.869c0-7.88-8.922-7.593-11.018-3.714V7z" fill="#fff"/></svg></a>
|
||||
<a href="{{site.authorSocial.instagram}}" class="social" title="Instagram"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z"/></svg></a>
|
||||
<a href="{{site.authorSocial.peertube}}" class="social" title="Peertube"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M8.83,4.5l16.89,9.75L42.6,24,25.72,33.75,8.83,43.5V24l8.36,4.83,8.42,4.87V14.27l-8.42,4.87L8.83,24V4.5Z"/></g></svg></a>
|
||||
<a href="{{site.authorSocial.youtube}}" class="social" title="Youtube"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M44.9,14.5c-0.4-2.2-2.3-3.8-4.5-4.3C37.1,9.5,31,9,24.4,9c-6.6,0-12.8,0.5-16.1,1.2c-2.2,0.5-4.1,2-4.5,4.3C3.4,17,3,20.5,3,25s0.4,8,0.9,10.5c0.4,2.2,2.3,3.8,4.5,4.3c3.5,0.7,9.5,1.2,16.1,1.2s12.6-0.5,16.1-1.2c2.2-0.5,4.1-2,4.5-4.3c0.4-2.5,0.9-6.1,1-10.5C45.9,20.5,45.4,17,44.9,14.5z M19,32V18l12.2,7L19,32z"/></g></svg></a>
|
||||
<a href="{{site.authorSocial.twitch}}" class="social" title="Twitch"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M31.16,12.16v8.19h2.47V12.16Zm-7.75,0v8.19H26V12.16ZM14.11,4.5,7.23,11.34l0,25.12h8.3l0,7,7.06-7H28.2L40.77,24V4.5Zm1.42,2.89H38v15.2L32.55,28H26.94l-5.12,5.13V28H15.53Z"/></g></svg></a>
|
||||
<a href="{{site.authorSocial.rss}}" class="social" title="RSS"><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M53.89,58.5a5.51,5.51,0,0,1-5.5-5.5A37.44,37.44,0,0,0,11,15.61a5.5,5.5,0,1,1,0-11A48.45,48.45,0,0,1,59.39,53,5.51,5.51,0,0,1,53.89,58.5ZM11,6.61a3.5,3.5,0,1,0,0,7A39.44,39.44,0,0,1,50.39,53a3.5,3.5,0,0,0,7,0A46.45,46.45,0,0,0,11,6.61Z"></g></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
@ -21,10 +21,11 @@
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
+ .social {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.socials {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
width: calc((24px + 1.5rem) * 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user