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-left: auto;
margin-right: 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 { .avatar img {
@ -85,22 +118,39 @@
.list { .list {
ul { ul {
position: relative;
width: 100%;
margin: 3.2rem 0 3.2rem 0; margin: 3.2rem 0 3.2rem 0;
list-style: none; list-style: none;
padding: 0; padding: 0;
@media only screen and (max-width: 768px) {
text-align: center;
}
li { li {
font-size: 1.8rem; font-size: 1.8rem;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
margin: 1.6rem 0 1.6rem 0; margin: 1.6rem 0 1.6rem 0;
} }
@media only screen and (min-width: 768px) {
display: flex;
margin-bottom: 0.8rem;
}
.date { .date {
display: inline-block; display: inline-block;
width: 20rem; width: 50%;
text-align: right; text-align: right;
margin-right: 3rem; padding-right: 1.5rem;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
width: 100%;
text-align: center;
font-size: 0.9em;
display: block; 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 { .title {
@ -108,6 +158,10 @@
color: $fg-color; color: $fg-color;
font-family: $heading-font-family; font-family: $heading-font-family;
font-weight: $heading-font-weight--bold; font-weight: $heading-font-weight--bold;
@media only screen and (min-width: 768px) {
padding-left: 1.5rem;
max-width: 20ch;
}
&:hover, &:hover,
&:focus { &:focus {
color: $link-color; color: $link-color;

View File

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

View File

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

View File

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