rayelliott
/
hugo-coder-fork
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improve social link styling

This commit is contained in:
Ray Elliott 2020-02-20 16:47:45 +00:00
parent 7713d4d351
commit 0eecfb50ea
2 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/scss/_content.scss
View File

@ -86,6 +86,39 @@
font-weight: bold;
font-size: 0.95em;
}
.social-links {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.social-link-icon {
font-size: 1em;
height: 2em;
margin-bottom: 1rem;
display: flex;
&:link {
text-decoration: none;
}
&--svg {
svg {
height: 100%;
}
}
&--text {
height: auto;
font-size: 1.3em;
line-height: 1;
font-weight: bold;
}
}
}
div.content .meta-tag {
@ -254,7 +287,6 @@ div.content .meta-tag {
text-transform: uppercase;
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.6rem;
&:hover,
&:focus {
color: $link-color;
@ -262,9 +294,6 @@ div.content .meta-tag {
@media only screen and (max-width: 768px) {
font-size: 1.4rem;
}
i {
font-size: 3.2rem;
}
}
}
}

13
layouts/partials/home.html
View File

@ -6,17 +6,24 @@
<h1>{{ .Site.Params.author }}</h1>
<h2>{{ .Site.Params.info }}</h2>
{{ with .Site.Params.social }}
<ul>
<ul class="social-links">
{{ range sort .}}
{{ if .icon }}
<li>
<a href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
<a class="social-link-icon" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
<i class="{{ .icon }}" aria-hidden="true"></i>
</a>
</li>
{{ else if .svg }}
<li>
<a class="social-link-icon social-link-icon--svg" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
{{ $path := printf "svg/%s" .svg }}
{{ partial $path . }}
</a>
</li>
{{ else }}
<li>
<a href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }}>{{ .name }}</a>
<a class="social-link-icon social-link-icon--text" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }}>{{ .name }}</a>
</li>
{{ end }}
{{ end }}