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

Merge pull request #17 from 526avijitgupta/replace-icons-feather

Browse Source 
Replace fa by feather icons
This commit is contained in:
Yash Mehrotra
2021-06-15 22:23:38 +05:30
committed by GitHub
parent 25cbb36078 dec51108d2
commit 8ae358c2bd
5 changed files with 28 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]]
identifier = "linkedin"
pre = "<span class='fa fa-linkedin'></span>"
pre = "<span data-feather='linkedin'></span>"
url = "/a/"
weight = 5
[[menu.main]]
identifier = "github"
pre = "<span class='fa fa-github'></span>"
pre = "<span data-feather='github'></span>"
url = "/b/"
weight = 6

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

@@ -1,15 +1,14 @@
<head>
<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="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/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu|Roboto" rel="stylesheet">
<link 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">
<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>
{{ $title := print .Site.Title " | " .Title }}
{{ 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>
<div class="nav-link" id="dark-theme-toggle">
<a>
<span class="fa fa-moon-o"></span>
<span id="theme-toggle-icon" data-feather="moon"></span>
</a>
</div>

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

@@ -86,9 +86,15 @@ html {
border-left: 1px solid;
margin-right: 4.5px;
}
.nav-links #dark-light-theme-toggle:hover {
.nav-links #dark-theme-toggle:hover {
cursor: pointer;
}
#dark-theme-toggle .feather {
height: 24px;
stroke-linecap: round;
stroke-linejoin: round;
width: 24px;
}
/* FOOTER */
.footer {
@@ -101,6 +107,14 @@ html {
}
/** COMMON **/
/* ICONS */
.feather {
height: 20px;
stroke-width: 1.75;
width: 20px;
}
/* TAGS */
.post-tags {
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_TO_ICON_CLASS = {
'dark': 'fa fa-sun-o',
'light':'fa fa-moon-o'
'dark': 'feather-moon',
'light':'feather-sun'
};
let toggleIcon = '';
let darkThemeCss = '';
function ready() {
toggleIcon = document.querySelector('#dark-theme-toggle span');
feather.replace({ 'stroke-width': 1, width: 20, height: 20 });
darkThemeCss = document.getElementById("dark-theme");
const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
setTheme(savedTheme);
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');
} else if (toggleIcon.className === THEME_TO_ICON_CLASS.light) {
} else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
setTheme('dark');
}
});
@@ -39,6 +40,6 @@ window.addEventListener('scroll', () => {
function setTheme(themeToSet) {
localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
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();
}