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

Compare commits

base: rayelliott:fc0acf05f489d4dd2854a275e100bdeaf8dd804a
Branches Tags
rayelliott:master
rayelliott:dev
..
compare: rayelliott:0eecfb50ea9608039aadd10ce2b5962816a765f2
Branches Tags
rayelliott:master
rayelliott:dev

5 Commits
fc0acf05f4 ... 0eecfb50ea

Author SHA1 Message Date
Ray Elliott 0eecfb50ea improve social link styling 2020-02-20 17:14:19 +00:00
Ray Elliott 7713d4d351 update icon padding 2020-02-20 15:07:05 +00:00
Ray Elliott e67b2c24af use svg icons for taxonomies,date and time icons 2020-02-20 15:02:14 +00:00
Ray Elliott f7c750185f use material icons 2020-02-20 12:53:28 +00:00
Ray Elliott 8b37a91efe tidy up font requests, add material icons 2020-02-20 12:53:09 +00:00
13 changed files with 103 additions and 25 deletions
Show Stats Expand all files Collapse all files

67
assets/scss/_content.scss
View File

@ -86,9 +86,44 @@
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 {
display: flex;
align-items: center;
padding: 0 12px;
margin: 3px;
border-radius: 1px;
@ -96,8 +131,11 @@ div.content .meta-tag {
color: lighten($fg-color, 15%);
i {
.icon {
display: flex;
font-size: 0.9em;
line-height: 1;
padding-right: 6px;
}
&--link {
@ -112,18 +150,30 @@ div.content .meta-tag {
.icon {
color: $link-color;
}
.svg-icon {
color: $fg-color;
}
}
i {
font-size: 1em;
.svg-icon {
color: $fg-color;
}
}
.icon {
color: inherit;
.svg-icon {
> svg {
height: 1em;
width: 1em;
}
}
}
.post-meta .meta-tag:not(.meta-tag--link) {
display: flex;
align-items: center;
}
.avatar img {
width: 20rem;
height: auto;
@ -193,9 +243,8 @@ div.content .meta-tag {
text-align: center;
.meta-tag {
display: inline-flex;
font-size: 0.7em;
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1.6rem;
i {
@ -238,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;
@ -246,9 +294,6 @@ div.content .meta-tag {
@media only screen and (max-width: 768px) {
font-size: 1.4rem;
}
i {
font-size: 3.2rem;
}
}
}
}

8
assets/scss/_content_dark.scss
View File

@ -35,12 +35,18 @@
}
.meta-tag {
color: darken($fg-color-dark, 35%);
$tag-color: darken($fg-color-dark, 35%);
color: $tag-color;
background-color: lighten($bg-color-dark, 5%);
&--link {
color: $link-color-dark;
.icon {
color: $tag-color;
}
&:hover {
opacity: 1;
color: lighten($link-color-dark, 15%);

2
assets/scss/_variables.scss
View File

@ -4,7 +4,7 @@ $heading-font-family: "Open Sans", sans-serif;
$code-font-family: "Source Code Pro", "Lucida Console", monospace;
$text-font-weight: 400;
$text-font-weight--bold: 600;
$text-font-weight--bold: 700;
$heading-font-weight: 600;
$heading-font-weight--bold: 700;
$code-font-weight: 400;

2
layouts/_default/baseof.html
View File

@ -21,7 +21,7 @@
<link rel="canonical" href="{{ .Permalink }}">
{{ end }}
<link href="https://fonts.googleapis.com/css?family=Lato:400,600%7COpen+Sans:600,700%7CSource+Code+Pro:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />

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 }}

4
layouts/partials/list.html
View File

@ -6,9 +6,9 @@
<div class="list-meta">
<span class="meta-tag">
{{- if eq .Data.Singular "category" -}}
<i class="icon fas fa-folder"></i>
<span class="icon svg-icon">{{ partial "svg/folder.svg" }}</span>
{{- else if eq .Data.Singular "tag" -}}
<i class="icon fas fa-tag"></i>
<span class="icon svg-icon">{{ partial "svg/tag.svg" }}</span>
{{- end -}}
{{- .Data.Term -}}
</span>

4
layouts/partials/svg/calendar.svg Normal file
View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

4
layouts/partials/svg/clock.svg Normal file
View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

3
layouts/partials/svg/folder.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 177 B

3
layouts/partials/svg/tag.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

5
layouts/partials/taxonomy/categories.html
View File

@ -1,3 +1,6 @@
{{- range $index, $el := . -}}
<a class="meta-tag meta-tag--link" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
<a class="meta-tag meta-tag--link" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">
<span class="icon svg-icon">{{ partial "svg/folder.svg" }}</span>
{{ . }}
</a>
{{- end -}}

5
layouts/partials/taxonomy/tags.html
View File

@ -1,3 +1,6 @@
{{- range $index, $el := . -}}
<a class="meta-tag meta-tag--link" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-tag"></i>{{ . }}</a>
<a class="meta-tag meta-tag--link" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">
<span class="icon svg-icon">{{ partial "svg/tag.svg" }}</span>
{{ . }}
</a>
{{- end -}}

4
layouts/posts/single.html
View File

@ -10,13 +10,13 @@
</div>
<div class="post-meta">
<div class="meta-tag posted-on">
<i class="fas fa-calendar"></i>
<span class="icon svg-icon">{{ partial "svg/calendar.svg" }}</span>
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
</time>
</div>
<div class="meta-tag reading-time">
<i class="fas fa-clock"></i>
<span class="icon svg-icon">{{ partial "svg/clock.svg" }}</span>
{{ i18n "reading_time" .ReadingTime }}
</div>
<div class="taxonomy">