Add compact list for tags
This commit is contained in:
parent
4d0799668f
commit
ff077672ac
34
assets/sass/_compact-list.scss
Normal file
34
assets/sass/_compact-list.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
.compact-list {
|
||||||
|
h3 {}
|
||||||
|
|
||||||
|
.compact-list-items {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
.compact-list-item {
|
||||||
|
$arrowWidth: 25px;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: $arrowWidth 1fr;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: $arrowWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -14,4 +14,5 @@
|
|||||||
@import "footer";
|
@import "footer";
|
||||||
|
|
||||||
// Component-specific styling
|
// Component-specific styling
|
||||||
@import "list"
|
@import "compact-list";
|
||||||
|
@import "list";
|
||||||
|
|||||||
@ -3,29 +3,5 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "aside" }}
|
{{ define "aside" }}
|
||||||
<section class="blog-popular">
|
{{ partial "tag-compact-list" }}
|
||||||
<h3>Popular content</h3>
|
|
||||||
<ul class="popular-items">
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
14
layouts/partials/generic-compact-list.html
Normal file
14
layouts/partials/generic-compact-list.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{{ $title := index $ "title" }}
|
||||||
|
{{ $data := index $ "data" }}
|
||||||
|
|
||||||
|
<section class="compact-list">
|
||||||
|
<h3>{{ $title }}</h3>
|
||||||
|
<ul class="compact-list-items">
|
||||||
|
{{ range $data }}
|
||||||
|
<li class="compact-list-item">
|
||||||
|
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
||||||
|
<a class="link" href="{{ index . "Href" }}">{{ index . "Label" }}</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
8
layouts/partials/tag-compact-list.html
Normal file
8
layouts/partials/tag-compact-list.html
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{{ $pageType := "snippets" }}
|
||||||
|
|
||||||
|
{{ $data := slice }}
|
||||||
|
{{ range first 5 site.Taxonomies.tags.ByCount }}
|
||||||
|
{{ $data = $data | append (dict "Label" .Name "Href" "/") }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ partial "generic-compact-list" (dict "title" "Common tags" "data" $data) }}
|
||||||
@ -3,29 +3,5 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "aside" }}
|
{{ define "aside" }}
|
||||||
<section class="blog-popular">
|
{{ partial "tag-compact-list" }}
|
||||||
<h3>Popular content</h3>
|
|
||||||
<ul class="popular-items">
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
|
|
||||||
<a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user