All tags page draft

This commit is contained in:
Avijit 🚀
2021-05-29 18:13:06 +02:00
committed by Yash Mehrotra
parent 5240bc3e8d
commit 3b47236852
3 changed files with 117 additions and 35 deletions

View File

@@ -0,0 +1,53 @@
<!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">
<li class="post-tag">
<a href="example.com">
<div class="tag-name">
ABC</div>
<div class="tag-posts-count">
2</div>
</a>
</li>
<li class="post-tag">
<a href="example.com">
<div class="tag-name">
Backend</div>
<div class="tag-posts-count">
5</div>
</a>
</li>
<li class="post-tag">
<a href="example.com">
<div class="tag-name">
Devops</div>
<div class="tag-posts-count">
1</div>
</a>
</li>
<li class="post-tag">
<a href="example.com">
<div class="tag-name">
Frontend</div>
<div class="tag-posts-count">
3</div>
</a>
</li>
</ul>
</div>
</main>
{{- partial "footer.html" . -}}
</body>
</html>

View File

@@ -1,4 +1,4 @@
<header class="header header-dark" id="header-sroll">
<header class="header header-dark" id="header-sroll">
<nav class="header-nav">
<div class="avatar">
@@ -34,4 +34,4 @@
-->
</div>
</nav>
</header>
</header>

View File

@@ -50,12 +50,12 @@ html {
.header-nav .avatar {
float: left;
/* display: inline-block; */
margin-left: 15px;
height: 100%;
border: 0.5px solid white;
border-radius: 18px;
}
.header-nav .avatar img {
display: block;
width: 50px;
@@ -108,22 +108,27 @@ html {
color: gray;
}
.post .post-tags {
.post-tags {
padding: 0;
list-style-type: none;
}
.post-tags .post-tag {
display: inline-block;
background-color: #008c86;
background-color: #00b5ad;
padding: 4px 12px;
border-radius: 4px;
border: 1px solid #008c86;
border: 1px solid #00b5ad;
color: white;
font-size: 14px;
font-weight: 700;
}
.post-tag a {
text-decoration: none;
color: inherit;
}
.post .post-content {
margin-top: 50px;
}
@@ -143,3 +148,27 @@ html {
.post-title .post-date {
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;
}