Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 20:13:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

better layout

Browse Source 
we finally use a flexible space, unlike using table
This commit is contained in:
dag7dev 2021-09-05 01:24:07 +02:00
parent bc22dface9
commit 9545fc7363
3 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/scss/icon.scss
View File

@ -1,7 +0,0 @@
.inline-svg {
display: inline-block;
height: 40px;
width: 40px;
top: 0.15rem;
position: relative;
}

27
assets/scss/socialicons.scss Normal file
View File

@ -0,0 +1,27 @@
.inline-svg {
display: inline-block;
height: 40px;
width: 40px;
top: 0.15rem;
position: relative;
}
.social-icons {
display: flex;
flex-wrap: wrap;
flex-direction: row
}
@media screen {
.social-icons>* {
flex: 0 0 25%;
padding-left: 10px;
}
}
@media (max-width:960px) {
.social-icons>* {
flex: 0 0 5%;
padding-left: 10px;
}
}

16
layouts/partials/sidebar/left.html
View File

@ -34,33 +34,29 @@
{{ if (.Site.Params.socialmenu.enable) }}
<div class="social-icons">
<table>
<tr>
{{ if (.Site.Params.socialmenu.email) }}
<td><a href="mailto:{{.Site.Params.socialmenu.email}}"><span class="inline-svg" >{{ partial "fontawesome.html" "envelope" }}</span></a></td>
<div><a href="mailto:{{.Site.Params.socialmenu.email}}"><span class="inline-svg" >{{ partial "fontawesome.html" "envelope" }}</span></a></div>
{{ end }}
{{ if (.Site.Params.socialmenu.github) }}
<td><a href="https://github.com/{{.Site.Params.socialmenu.github}}"><span class="inline-svg" >{{ partial "fontawesome.html" "github" }}</span></a></td>
<div><a href="https://github.com/{{.Site.Params.socialmenu.github}}"><span class="inline-svg" >{{ partial "fontawesome.html" "github" }}</span></a></div>
{{ end }}
{{ if (.Site.Params.socialmenu.instagram) }}
<td><a href="https://instagram.com/{{.Site.Params.socialmenu.instagram}}"><span class="inline-svg" >{{ partial "fontawesome.html" "instagram" }}</span></a></td>
<div><a href="https://instagram.com/{{.Site.Params.socialmenu.instagram}}"><span class="inline-svg" >{{ partial "fontawesome.html" "instagram" }}</span></a></div>
{{ end }}
{{ if (.Site.Params.socialmenu.facebook) }}
<td><a href="https://facebook.com/{{.Site.Params.socialmenu.facebook}}"><span class="inline-svg" >{{ partial "fontawesome.html" "facebook-square" }}</span></a></td>
<div><a href="https://facebook.com/{{.Site.Params.socialmenu.facebook}}"><span class="inline-svg" >{{ partial "fontawesome.html" "facebook-square" }}</span></a></div>
{{ end }}
{{ if (.Site.Params.socialmenu.linkedin) }}
<td><a href="https://linkedin.com/in/{{.Site.Params.socialmenu.linkedin}}"><span class="inline-svg" >{{ partial "fontawesome.html" "linkedin" }}</span></a></td>
<div><a href="https://facebook.com/{{.Site.Params.socialmenu.linkedin}}"><span class="inline-svg" >{{ partial "fontawesome.html" "linkedin" }}</span></a></div>
{{ end }}
{{ if (.Site.Params.socialmenu.twitter) }}
<td><a href="https://twitter.com/{{.Site.Params.socialmenu.twitter}}"><span class="inline-svg" >{{ partial "fontawesome.html" "twitter" }}</span></a></td>
<div><a href="https://twitter.com/{{.Site.Params.socialmenu.twitter}}"><span class="inline-svg" >{{ partial "fontawesome.html" "twitter" }}</span></a></div>
{{ end }}
</tr>
</table>
</div>
{{ end }}