Compare commits

...

4 Commits

Author SHA1 Message Date
Ray Elliott 46f6de852d group categories and tags metadata together 2020-02-18 22:12:32 +00:00
Ray Elliott 38f0b25502 style categories and tags post meta 2020-02-18 21:48:18 +00:00
Ray Elliott a296989a54 move icons inside anchor elements 2020-02-18 21:32:55 +00:00
Ray Elliott 56ec9a6391 style the list pages
center the lists
2020-02-18 20:34:13 +00:00
4 changed files with 63 additions and 19 deletions

View File

@ -72,6 +72,39 @@
margin-left: auto;
margin-right: auto;
}
.taxonomy {
display: flex;
flex-wrap: wrap;
justify-content: center;
@media only screen and (min-width: 768px) {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
}
.category,
.tag {
font-size: 0.8em;
padding: 0 12px;
margin: 3px;
border-radius: 1px;
background-color: #ededed;
color: #333;
text-decoration: none;
&:hover {
opacity: 1;
color: #555;
text-decoration: underline;
}
.icon {
color: inherit;
}
}
}
.avatar img {
@ -85,22 +118,39 @@
.list {
ul {
position: relative;
width: 100%;
margin: 3.2rem 0 3.2rem 0;
list-style: none;
padding: 0;
@media only screen and (max-width: 768px) {
text-align: center;
}
li {
font-size: 1.8rem;
@media only screen and (max-width: 768px) {
margin: 1.6rem 0 1.6rem 0;
}
@media only screen and (min-width: 768px) {
display: flex;
margin-bottom: 0.8rem;
}
.date {
display: inline-block;
width: 20rem;
width: 50%;
text-align: right;
margin-right: 3rem;
padding-right: 1.5rem;
@media only screen and (max-width: 768px) {
width: 100%;
text-align: center;
font-size: 0.9em;
display: block;
text-align: left;
padding-right: 0;
}
@media only screen and (min-width: 768px) {
display: flex;
align-items: start;
justify-content: flex-end;
}
}
.title {
@ -108,6 +158,10 @@
color: $fg-color;
font-family: $heading-font-family;
font-weight: $heading-font-weight--bold;
@media only screen and (min-width: 768px) {
padding-left: 1.5rem;
max-width: 20ch;
}
&:hover,
&:focus {
color: $link-color;

View File

@ -1,9 +1,3 @@
<div class="categories">
<i class="fas fa-folder"></i>
{{- range $index, $el := . -}}
{{- if gt $index 0 }}
<span class="separator"></span>
{{- end }}
<a href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
<a class="category" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
{{- end -}}
</div>

View File

@ -1,9 +1,3 @@
<div class="tags">
<i class="fas fa-tag"></i>
{{- range $index, $el := . -}}
{{- if gt $index 0 }}
<span class="separator"></span>
{{- end }}
<a href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
<a class="tag" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-tag"></i>{{ . }}</a>
{{- end -}}
</div>

View File

@ -21,8 +21,10 @@
{{ i18n "reading_time" .ReadingTime }}
</span>
</div>
{{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
{{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
<div class="taxonomy">
{{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
{{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
</div>
</div>
</header>