Merge pull request #9 from 526avijitgupta/all-tags-page

All tags page draft
This commit is contained in:
Avijit Gupta
2021-05-29 18:53:38 +02:00
committed by GitHub
5 changed files with 93 additions and 37 deletions

View File

@@ -1,7 +1,6 @@
--- ---
title: "Tatooine" title: "Tatooine"
date: 2021-05-12T23:39:49+05:30 date: 2021-05-12T23:39:49+05:30
tags: ["abc", "def"]
type: singles type: singles
--- ---

View File

@@ -1,6 +1,5 @@
--- ---
title: "Projects" title: "Projects"
tags: ["abc", "def"]
type: singles type: singles
--- ---

View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<main id="content">
<div class="container tags-list">
<h2 class="list-title">Tags</h2>
<ul class="post-tags">
{{ range $key, $value := .Data.Terms.ByCount }}
<li class="post-tag">
<a href="/tags/{{ $value.Name | urlize }}/">
<div class="tag-name">{{ $value.Name }}</div>
<div class="tag-posts-count">{{ $value.Count }}</div>
</a>
</li>
{{ end }}
</ul>
</div>
</main>
{{- partial "footer.html" . -}}
</body>
</html>

View File

@@ -1,37 +1,37 @@
<header class="header header-dark" id="header-sroll"> <header class="header header-dark" id="header-sroll">
<nav class="header-nav"> <nav class="header-nav">
<div class="avatar"> <div class="avatar">
<a href="{{ .Site.BaseURL }}"> <a href="{{ .Site.BaseURL }}">
<img src=".Site.Params.Avatar" alt="Avatar" /> <img src=".Site.Params.Avatar" alt="Avatar" />
</a>
</div>
<div class="nav-title">
<a class="nav-brand" href="https://example.com">Title title</a>
</div>
<div class="nav-links">
{{ range .Site.Menus.main }}
<div class="nav-link">
<a href="{{ .URL }}">
{{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
</a> </a>
</div> </div>
{{ end }}
<div class="nav-title"> <!-- TODO: Handle
<a class="nav-brand" href="https://example.com">Title title</a> <div class="nav-link icon">
<a href="http://example.com">
<span class="fab fa-github"></span>
</a>
</div> </div>
<div class="nav-link icon">
<div class="nav-links"> <a href="http://example.com">
{{ range .Site.Menus.main }} <span class="fab fa-linkedin"></span>
<div class="nav-link"> </a>
<a href="{{ .URL }}">
{{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
</a>
</div>
{{ end }}
<!-- TODO: Handle
<div class="nav-link icon">
<a href="http://example.com">
<span class="fab fa-github"></span>
</a>
</div>
<div class="nav-link icon">
<a href="http://example.com">
<span class="fab fa-linkedin"></span>
</a>
</div>
-->
</div> </div>
</nav> -->
</header> </div>
</nav>
</header>

View File

@@ -50,12 +50,12 @@ html {
.header-nav .avatar { .header-nav .avatar {
float: left; float: left;
/* display: inline-block; */
margin-left: 15px; margin-left: 15px;
height: 100%; height: 100%;
border: 0.5px solid white; border: 0.5px solid white;
border-radius: 18px; border-radius: 18px;
} }
.header-nav .avatar img { .header-nav .avatar img {
display: block; display: block;
width: 50px; width: 50px;
@@ -108,22 +108,27 @@ html {
color: gray; color: gray;
} }
.post .post-tags { .post-tags {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
} }
.post-tags .post-tag { .post-tags .post-tag {
display: inline-block; display: inline-block;
background-color: #008c86; background-color: #00b5ad;
padding: 4px 12px; padding: 4px 12px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #008c86; border: 1px solid #00b5ad;
color: white; color: white;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
} }
.post-tag a {
text-decoration: none;
color: inherit;
}
.post .post-content { .post .post-content {
margin-top: 50px; margin-top: 50px;
} }
@@ -143,3 +148,27 @@ html {
.post-title .post-date { .post-title .post-date {
float: right; float: right;
} }
.tags-list .post-tags {
margin-top: 50px;
}
.tags-list .post-tags .post-tag {
padding: 0;
margin: 0 5px;
}
.tags-list .post-tags .post-tag:hover {
background-color: #009c95;
border: 1px solid #00b5ad;
}
.tags-list .post-tags .post-tag a div {
display: inline-block;
padding: 5px 8px;
}
.tags-list .post-tags .post-tag a .tag-posts-count {
background: rgba(0, 0, 0, 0.1);
opacity: 0.8;
}