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> <!DOCTYPE html>
<html class="gokarna-dark"> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<div id="content"> <main id="content">
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</div> </main>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</body> </body>
</html> </html>

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

@@ -1,13 +1,6 @@
<!DOCTYPE html> {{ define "main" }}
<html> <!-- TODO: @yash Paginate this if items more than n -->
{{- partial "head.html" . -}} <div class="container list-posts">
<body>
{{- partial "header.html" . -}}
<main id="content">
<!-- TODO: @yash Paginate this if items more than n -->
<div class="container list-posts">
<h2 class="list-title">{{ .Name }}</h2> <h2 class="list-title">{{ .Name }}</h2>
@@ -29,10 +22,5 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>
{{ end }}
</main>
{{- partial "footer.html" . -}}
</body>
</html>

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

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

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

@@ -1,12 +1,5 @@
<!DOCTYPE html> {{ define "main" }}
<html> <div class="container tags-list">
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<main id="content">
<div class="container tags-list">
<h2 class="list-title">Tags</h2> <h2 class="list-title">Tags</h2>
<ul class="post-tags"> <ul class="post-tags">
@@ -20,10 +13,5 @@
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
{{ end }}
</main>
{{- partial "footer.html" . -}}
</body>
</html>

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

@@ -2,11 +2,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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 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==" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous" referrerpolicy="no-referrer" /> crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="/css/main.css"> <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> <script src="/js/main.js"></script>
{{ $title := print .Site.Title " | " .Title }} {{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ 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"> <nav class="header-nav">
<div class="avatar"> <div class="avatar">
@@ -33,7 +33,7 @@
</div> </div>
--> -->
<span class="nav-icons-divider"></span> <span class="nav-icons-divider"></span>
<div class="nav-link" id="dark-light-theme-toggle"> <div class="nav-link" id="dark-theme-toggle">
<a> <a>
<span class="fa fa-moon-o"></span> <span class="fa fa-moon-o"></span>
</a> </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 { html {
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
}
html.gokarna-dark {
background: #252525;
color: white;
}
html.gokarna-light {
background: white; background: white;
color: black; color: black;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
} }
/* HEADER */ /* HEADER */
.header { .header {
background-color: #bbb;
color: black;
height: 70px; height: 70px;
left: 0; left: 0;
position: fixed; position: fixed;
top: 0; top: 0;
-ms-transition: all 0.5s ease-out; -ms-transition: height 0.5s ease-out;
-moz-transition: all 0.5s ease-out; -moz-transition: height 0.5s ease-out;
-webkit-transition: all 0.5s ease-out; -webkit-transition: height 0.5s ease-out;
-o-transition: all 0.5s ease-out; -o-transition: height 0.5s ease-out;
transition: all 0.5s ease-out; transition: height 0.5s ease-out;
width: 100%; width: 100%;
} }
.header.gokarna-dark {
background-color: #1b1c1d;
color: white;
}
.header.gokarna-light {
background-color: #bbb;
color: black;
}
.header.small { .header.small {
height: 50px; height: 50px;
} }
@@ -41,11 +29,11 @@ html.gokarna-light {
.header .header-nav { .header .header-nav {
height: 50px; height: 50px;
margin-top: 10px; margin-top: 10px;
-ms-transition: all 0.5s ease-out; -ms-transition: margin 0.5s ease-out;
-moz-transition: all 0.5s ease-out; -moz-transition: margin 0.5s ease-out;
-webkit-transition: all 0.5s ease-out; -webkit-transition: margin 0.5s ease-out;
-o-transition: all 0.5s ease-out; -o-transition: margin 0.5s ease-out;
transition: all 0.5s ease-out; transition: margin 0.5s ease-out;
} }
.header .header-nav.small { .header .header-nav.small {
margin-top: 0; margin-top: 0;

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

@@ -1,21 +1,25 @@
window.onload = () => { document.addEventListener('DOMContentLoaded', ready, false);
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.getElementById('dark-light-theme-toggle').addEventListener('click', () => { const THEME_PREF_STORAGE_KEY = "theme-preference";
const currentTheme = document.querySelector('html').classList[0]; const GOKARNA_LIGHT_THEME = 'gokarna-light';
const themeToSwitchTo = themeClassSwitcherMap[currentTheme]; const GOKARNA_DARK_THEME = 'gokarna-dark';
document.querySelectorAll(`.${currentTheme}`).forEach((element) => { let toggleIcon = '';
element.classList.add(themeToSwitchTo);
element.classList.remove(currentTheme);
});
});
window.addEventListener('scroll', () => { 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) { if (window.scrollY > 100) {
document.querySelectorAll('.header, .header-nav').forEach(function(item) { document.querySelectorAll('.header, .header-nav').forEach(function(item) {
item.classList.add('small') item.classList.add('small')
@@ -25,5 +29,18 @@ window.onload = () => {
item.classList.remove('small') 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";
}
} }