commit 2628518d8383532fa62966a76e2ad711c0cd6747
parent 770e48236843afb2534cbfea1e8dd9568173c258
Author: Michael Neuper <michael@michaelneuper.com>
Date: Tue, 31 Oct 2023 09:13:14 +0200
Add sidebar to right to display tags
Diffstat:
6 files changed, 75 insertions(+), 101 deletions(-)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -71,15 +71,9 @@
<body>
<div id="wrapper">
- <div class="container">
- <div class="side-panel">
- {{ partial "header.html" . }}
- </div>
- <div class="main-content">
- {{ block "main" . }}{{ end }}
- {{ partial "footer.html" . }}
- </div>
- </div>
+ {{ partial "header.html" . }}
+ {{ block "main" . }}{{ end }}
+ {{ partial "footer.html" . }}
</div>
<!-- custom css -->
diff --git a/layouts/index.html b/layouts/index.html
@@ -3,58 +3,24 @@
{{ end }}
{{ define "main" }}
-<main id="main" class="index">
- {{ $paginator := .Paginate (where .Site.RegularPages "Type" "==" "post") }}
- {{ range $paginator.Pages }}
- <div class="post">
- <h2>
- <a href="{{ .Permalink }}">{{ .Title }}</a>
- <div>
- {{ if .Site.Params.showWordCount }}
- <span>{{ .WordCount }} words</span>
+<main class="grid-container">
+ <div id="content" class="index">
+ <!-- Content goes here -->
+ {{ with .Site.GetPage "_index.md" }}
+ {{ .Content }}
{{ end }}
-
- {{ if gt .ReadingTime 1 }}
- {{ .Scratch.Set "timeUnit" "mins" }}
- {{ else }}
- {{ .Scratch.Set "timeUnit" "min" }}
- {{ end }}
- {{ if .Site.Params.showReadingTime }}
- <span>~{{.ReadingTime}} {{ .Scratch.Get "timeUnit" }}</span>
- {{ end }}
-
- <time>{{ .PublishDate.Format .Site.Params.dateFormat }}</time>
- </div>
- </h2>
- {{ if ne .Params.tags nil }}
- <div>
- {{ range .Params.tags }}
- <a class="link" href='{{ "tags" | absURL }}/{{ . | urlize }}'>#{{ . }}</a>
- {{ end }}
</div>
- {{ end }}
- <div class="content">
- {{ if .Site.Params.emphasisWithDots }}
- {{ .Summary | replaceRE "<strong>(\\p{Han}+?)</strong>" "<strong class=chinese>$1</strong>" | safeHTML }}
- {{ else }}
- {{ .Summary }}
- {{ end }}
+
+ <div class="sidebar">
+ <h3>Categories</h3>
+ <ul class="nav-list sidenav">
+ {{ partial "categories.html" . }}
+ </ul>
+ <p></p>
+ <h3>Tags</h3>
+ <ul class="nav-list sidenav">
+ {{ partial "tags.html" . }}
+ </ul>
</div>
- </div>
- {{ end }}
- {{ if or $paginator.HasPrev $paginator.HasNext}}
- <div class="paginator">
- {{ if $paginator.HasPrev }}
- <a class="link" href="{{ $paginator.Prev.URL }}">← prev</a>
- {{ else }}
- <a></a>
- {{ end }}
- {{ if $paginator.HasNext }}
- <a class="link" href="{{ $paginator.Next.URL }}">next →</a>
- {{ else }}
- <a></a>
- {{ end }}
- </div>
- {{ end }}
</main>
{{ end }}
diff --git a/layouts/partials/categories.html b/layouts/partials/categories.html
@@ -0,0 +1,5 @@
+{{range first 10 ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
+<li>
+ <a href="{{ .Permalink }}">{{.Title}}</a>
+</li>
+{{ end }}
+\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -7,17 +7,6 @@
</h1>
<nav>
-
- <!-- <div class="nav-bar-item">
- <ul>
- {{ range .Site.Menus.main }}
- <li>
- <a class="link" href="{{ .URL | safeURL }}">{{ .Name }}</a>
- </li>
- {{ end }}
- </ul>
- </div> -->
-
{{ range .Site.Menus.main }}
<span class="nav-bar-item">
<a class="link" href="{{ .URL | safeURL }}">{{ .Name }}</a>
diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
@@ -0,0 +1,5 @@
+{{range first 10 ($.Site.GetPage "taxonomyTerm" "tags").Pages }}
+<li>
+ <a href="{{ .Permalink }}">{{.Title}}</a>
+</li>
+{{ end }}
+\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -32,10 +32,6 @@
background-color: var(--base02);
}
- .side-panel {
- background-color: var(--base02);
- }
-
blockquote {
background: var(--base02);
}
@@ -74,7 +70,6 @@
header {
background: var(--base02);
- border-bottom: 0px;
}
h2 a {
color: var(--base1) !important;
@@ -129,10 +124,6 @@
background: var(--base3);
}
- .side-panel {
- background-color: var(--base2);
- }
-
a:link {
color: var(--blue);
}
@@ -154,7 +145,6 @@
header {
background: var(--base3);
- border-bottom: 0px;
}
h2 a {
color: var(--base01) !important;
@@ -218,29 +208,8 @@ button.copyButton:hover {
padding-left: 0;
}
-.container {
- display: flex;
- flex-wrap: wrap;
-}
-
-.side-panel {
- width: 300px;
- position: fixed;
- top: 0;
- height: 100vh;
- overflow-y: auto;
- z-index: 1;
-
- @media (max-width: 768px) {
- position: static;
- width: 100%;
- height: auto;
- }
-}
-
.main-content {
flex: 1;
- /* max-width: calc(100% - 300px); */
max-width: 80%;
margin: 0 auto;
box-sizing: border-box;
@@ -274,3 +243,47 @@ nav a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
+
+.nav-list {
+ display: block;
+ padding: 10px 15px;
+ margin: 10px 5px;
+ margin-left: -5px;
+ border: 2px solid white;
+}
+
+.grid-container {
+ display: grid;
+ grid-template-columns: 3fr 1fr;
+ gap: 20px;
+}
+
+main {
+ display: flex;
+}
+
+.index {
+ flex: 3;
+ padding-left: 50px;
+ padding-right: 20px;
+ padding-top: 20px;
+}
+
+.sidebar {
+ flex: 1;
+}
+
+/* Responsive layout for smaller screens */
+@media (max-width: 767px) {
+ .grid-container {
+ grid-template-columns: 1fr; /* Set one column for smaller screens */
+ }
+
+ .sidebar {
+ order: 1; /* Move the sidebar above content */
+ }
+
+ .index {
+ padding-left: 30px;
+ }
+}
