PVR/gokarna
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix theme switching and templating

Browse Source
This commit is contained in:
Avijit 🚀
2021-06-04 16:43:45 +02:00
committed by Yash Mehrotra
parent f1b6f08dc4
commit f9ee24248e
9 changed files with 125 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
themes/gokarna/layouts/_default/baseof.html
View File

@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html class="gokarna-dark">
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="content">
<main id="content">
{{- block "main" . }}{{- end }}
</div>
</main>
{{- partial "footer.html" . -}}
</body>
</html>

52
themes/gokarna/layouts/_default/list.html
View File

@@ -1,38 +1,26 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
{{ define "main" }}
<!-- TODO: @yash Paginate this if items more than n -->
<div class="container list-posts">
<body>
{{- partial "header.html" . -}}
<main id="content">
<h2 class="list-title">{{ .Name }}</h2>
<!-- TODO: @yash Paginate this if items more than n -->
<div class="container list-posts">
{{ $posts := where .Data.Pages "Params.type" "post" }}
{{ range $posts.GroupByDate "2006" }}
<h2 class="list-title">{{ .Name }}</h2>
<h2 class="posts-year">{{ .Key }}</h2>
{{ $posts := where .Data.Pages "Params.type" "post" }}
{{ range $posts.GroupByDate "2006" }}
<!-- TODO: @yash The month param should be optional -->
{{ range .Pages.GroupByDate "January" }}
<h4 class="posts-month">{{ .Key }}</h4>
{{- range .Pages -}}
<article class="post-title">
<a href="{{ .RelPermalink }}" class="post-link">{{ .Title }}</a>
<span class="post-date">{{ dateFormat "January 2, 2006" .Date }}</span>
</article>
<h2 class="posts-year">{{ .Key }}</h2>
{{ end }}
{{ end }}
{{ end }}
<!-- TODO: @yash The month param should be optional -->
{{ range .Pages.GroupByDate "January" }}
<h4 class="posts-month">{{ .Key }}</h4>
{{- range .Pages -}}
<article class="post-title">
<a href="{{ .RelPermalink }}" class="post-link">{{ .Title }}</a>
<span class="post-date">{{ dateFormat "January 2, 2006" .Date }}</span>
</article>
{{ end }}
{{ end }}
{{ end }}
</div>
</main>
{{- partial "footer.html" . -}}
</body>
</html>
</div>
{{ end }}

28
themes/gokarna/layouts/_default/single.html
View File

@@ -1,21 +1,9 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
{{ define "main" }}
{{ if eq .Type "post" }}
{{- partial "post.html" . -}}
{{ end }}
<body>
{{- partial "header.html" . -}}
<main id="content">
{{ if eq .Type "post" }}
{{- partial "post.html" . -}}
{{ end }}
{{ if eq .Type "singles" }}
{{- partial "single.html" . -}}
{{ end }}
</main>
{{- partial "footer.html" . -}}
</body>
</html>
{{ if eq .Type "singles" }}
{{- partial "single.html" . -}}
{{ end }}
{{ end }}

42
themes/gokarna/layouts/_default/terms.html
View File

@@ -1,29 +1,17 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
{{ define "main" }}
<div class="container tags-list">
<body>
{{- partial "header.html" . -}}
<main id="content">
<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 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>
</div>
{{ end }}

4
themes/gokarna/layouts/partials/head.html
View File

@@ -2,11 +2,11 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script src="/js/jquery-3.6.0.slim.min.js"></script>
<link disabled id="dark-theme" rel="stylesheet" href="/css/dark.css">
<script src="/js/main.js"></script>
{{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}

4
themes/gokarna/layouts/partials/header.html
View File

@@ -1,4 +1,4 @@
<header class="header gokarna-dark">
<header class="header">
<nav class="header-nav">
<div class="avatar">
@@ -33,7 +33,7 @@
</div>
-->
<span class="nav-icons-divider"></span>
<div class="nav-link" id="dark-light-theme-toggle">
<div class="nav-link" id="dark-theme-toggle">
<a>
<span class="fa fa-moon-o"></span>
</a>

21
themes/gokarna/static/css/dark.css Normal file
View File

@@ -0,0 +1,21 @@
html {
background: #171717 !important;
color: white !important;
}
/* html {
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
} */
.header {
background-color: #1b1c1d !important;
color: white !important;
}
/* body {
background-color: #fff !important;
} */
/* img,
video,
body * [style*="background-image"] {
filter: hue-rotate(180deg) contrast(100%) invert(100%);
-webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%); */
/* } */

38
themes/gokarna/static/css/main.css
View File

@@ -1,36 +1,24 @@
html {
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
}
html.gokarna-dark {
background: #252525;
color: white;
}
html.gokarna-light {
background: white;
color: black;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
}
/* HEADER */
.header {
background-color: #bbb;
color: black;
height: 70px;
left: 0;
position: fixed;
top: 0;
-ms-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-ms-transition: height 0.5s ease-out;
-moz-transition: height 0.5s ease-out;
-webkit-transition: height 0.5s ease-out;
-o-transition: height 0.5s ease-out;
transition: height 0.5s ease-out;
width: 100%;
}
.header.gokarna-dark {
background-color: #1b1c1d;
color: white;
}
.header.gokarna-light {
background-color: #bbb;
color: black;
}
.header.small {
height: 50px;
}
@@ -41,11 +29,11 @@ html.gokarna-light {
.header .header-nav {
height: 50px;
margin-top: 10px;
-ms-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-ms-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-webkit-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.header .header-nav.small {
margin-top: 0;

65
themes/gokarna/static/js/main.js
View File

@@ -1,29 +1,46 @@
window.onload = () => {
const GOKARNA_LIGHT_THEME = 'gokarna-light';
const GOKARNA_DARK_THEME = 'gokarna-dark';
const themeClassSwitcherMap = {
[GOKARNA_LIGHT_THEME]: GOKARNA_DARK_THEME,
[GOKARNA_DARK_THEME]: GOKARNA_LIGHT_THEME
};
document.addEventListener('DOMContentLoaded', ready, false);
document.getElementById('dark-light-theme-toggle').addEventListener('click', () => {
const currentTheme = document.querySelector('html').classList[0];
const themeToSwitchTo = themeClassSwitcherMap[currentTheme];
document.querySelectorAll(`.${currentTheme}`).forEach((element) => {
element.classList.add(themeToSwitchTo);
element.classList.remove(currentTheme);
});
});
const THEME_PREF_STORAGE_KEY = "theme-preference";
const GOKARNA_LIGHT_THEME = 'gokarna-light';
const GOKARNA_DARK_THEME = 'gokarna-dark';
let toggleIcon = '';
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.add('small')
})
} else {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.remove('small')
})
function ready() {
toggleIcon = document.querySelector('#dark-theme-toggle span');
// TODO: Fetch programatically by user's system preference
const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || GOKARNA_LIGHT_THEME;
setTheme(savedTheme);
document.getElementById('dark-theme-toggle').addEventListener('click', () => {
if (toggleIcon.className === "fa fa-moon-o") {
setTheme(GOKARNA_DARK_THEME);
} else if (toggleIcon.className === "fa fa-sun-o") {
setTheme(GOKARNA_LIGHT_THEME);
}
});
}
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.add('small')
})
} else {
document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.remove('small')
})
}
});
function setTheme(themeToSet) {
const darkThemeCss = document.getElementById("dark-theme");
localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
if (themeToSet === GOKARNA_DARK_THEME) {
darkThemeCss.disabled = false;
toggleIcon.className = "fa fa-sun-o";
} else if(themeToSet === GOKARNA_LIGHT_THEME) {
darkThemeCss.disabled = true;
toggleIcon.className = "fa fa-moon-o";
}
}