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

Replace fa by feather icons

Browse Source
This commit is contained in:
Avijit 🚀
2021-06-15 18:43:33 +02:00
parent 25cbb36078
commit a252f2fd38
5 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
exampleSite/config.toml
View File

@@ -36,12 +36,12 @@ pygmentsCodeFencesGuessSyntax = true
[[menu.main]] [[menu.main]]
identifier = "linkedin" identifier = "linkedin"
pre = "<span class='fa fa-linkedin'></span>" pre = "<span data-feather='linkedin'></span>"
url = "/a/" url = "/a/"
weight = 5 weight = 5
[[menu.main]] [[menu.main]]
identifier = "github" identifier = "github"
pre = "<span class='fa fa-github'></span>" pre = "<span data-feather='github'></span>"
url = "/b/" url = "/b/"
weight = 6 weight = 6

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

@@ -1,15 +1,14 @@
<head> <head>
<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 rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ubuntu|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" <link 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">
<link disabled id="dark-theme" rel="stylesheet" href="/css/dark.css"> <link disabled id="dark-theme" rel="stylesheet" href="/css/dark.css">
<script src="https://unpkg.com/feather-icons"></script>
<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 }}

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

@@ -35,7 +35,7 @@
<span class="nav-icons-divider"></span> <span class="nav-icons-divider"></span>
<div class="nav-link" id="dark-theme-toggle"> <div class="nav-link" id="dark-theme-toggle">
<a> <a>
<span class="fa fa-moon-o"></span> <span id="theme-toggle-icon" data-feather="moon"></span>
</a> </a>
</div> </div>

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

@@ -86,9 +86,16 @@ html {
border-left: 1px solid; border-left: 1px solid;
margin-right: 4.5px; margin-right: 4.5px;
} }
.nav-links #dark-light-theme-toggle:hover { .nav-links #dark-theme-toggle:hover {
cursor: pointer; cursor: pointer;
} }
#dark-theme-toggle .feather {
fill: #b8c2cc;
height: 24px;
stroke-linecap: round;
stroke-linejoin: round;
width: 24px;
}
/* FOOTER */ /* FOOTER */
.footer { .footer {
@@ -101,6 +108,14 @@ html {
} }
/** COMMON **/ /** COMMON **/
/* ICONS */
.feather {
height: 20px;
stroke-width: 1.5;
width: 20px;
}
/* TAGS */ /* TAGS */
.post-tags { .post-tags {
list-style-type: none; list-style-type: none;

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

@@ -2,23 +2,24 @@ document.addEventListener('DOMContentLoaded', ready, false);
const THEME_PREF_STORAGE_KEY = "theme-preference"; const THEME_PREF_STORAGE_KEY = "theme-preference";
const THEME_TO_ICON_CLASS = { const THEME_TO_ICON_CLASS = {
'dark': 'fa fa-sun-o', 'dark': 'feather-moon',
'light':'fa fa-moon-o' 'light':'feather-sun'
}; };
let toggleIcon = ''; let toggleIcon = '';
let darkThemeCss = ''; let darkThemeCss = '';
function ready() { function ready() {
toggleIcon = document.querySelector('#dark-theme-toggle span'); feather.replace({ 'stroke-width': 1, width: 20, height: 20 });
darkThemeCss = document.getElementById("dark-theme"); darkThemeCss = document.getElementById("dark-theme");
const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light'); (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
setTheme(savedTheme); setTheme(savedTheme);
document.getElementById('dark-theme-toggle').addEventListener('click', () => { document.getElementById('dark-theme-toggle').addEventListener('click', () => {
if (toggleIcon.className === THEME_TO_ICON_CLASS.dark) { toggleIcon = document.querySelector("#dark-theme-toggle a svg.feather");
if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) {
setTheme('light'); setTheme('light');
} else if (toggleIcon.className === THEME_TO_ICON_CLASS.light) { } else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
setTheme('dark'); setTheme('dark');
} }
}); });
@@ -39,6 +40,6 @@ window.addEventListener('scroll', () => {
function setTheme(themeToSet) { function setTheme(themeToSet) {
localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet); localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
darkThemeCss.disabled = themeToSet === 'light'; darkThemeCss.disabled = themeToSet === 'light';
toggleIcon.className = THEME_TO_ICON_CLASS[themeToSet]; document.querySelector('#dark-theme-toggle a').innerHTML = feather.icons[THEME_TO_ICON_CLASS[themeToSet].split('-')[1]].toSvg();
} }