diff --git a/exampleSite/config.toml b/exampleSite/config.toml index e9def91..0fc1c02 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -33,12 +33,12 @@ pygmentsCodeFencesGuessSyntax = true [[menu.main]] identifier = "linkedin" - pre = "" + pre = "" url = "/a/" weight = 5 [[menu.main]] identifier = "github" - pre = "" + pre = "" url = "/b/" weight = 6 diff --git a/themes/gokarna/layouts/_default/baseof.html b/themes/gokarna/layouts/_default/baseof.html index 5f8e2ec..d863ec6 100644 --- a/themes/gokarna/layouts/_default/baseof.html +++ b/themes/gokarna/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{- partial "head.html" . -}} {{- partial "header.html" . -}} diff --git a/themes/gokarna/layouts/partials/header.html b/themes/gokarna/layouts/partials/header.html index 3739fb1..f39154e 100644 --- a/themes/gokarna/layouts/partials/header.html +++ b/themes/gokarna/layouts/partials/header.html @@ -1,4 +1,4 @@ -
+
diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css index 4881d9c..183bdbe 100644 --- a/themes/gokarna/static/css/main.css +++ b/themes/gokarna/static/css/main.css @@ -1,17 +1,16 @@ html { font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif; } - -.header-light { - background-color: #bbb; +html.gokarna-dark { + background: #252525; + color: white; +} +html.gokarna-light { + background: white; color: black; } -.header-dark { - background-color: #1b1c1d; - color: white; -} - +/* HEADER */ .header { position: fixed; height: 70px; @@ -24,16 +23,21 @@ html { -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } - +.header.gokarna-dark { + background-color: #1b1c1d; + color: white; +} +.header.gokarna-light { + background-color: #bbb; + color: black; +} .header.small { height: 50px; } - .header a { text-decoration: none; color: inherit; } - .header .header-nav { height: 50px; margin-top: 10px; @@ -43,11 +47,9 @@ html { -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } - .header .header-nav.small { margin-top: 0; } - .header-nav .avatar { float: left; margin-left: 15px; @@ -55,7 +57,6 @@ html { border: 0.5px solid white; border-radius: 18px; } - .header-nav .avatar img { display: block; width: 50px; @@ -63,56 +64,42 @@ html { overflow: hidden; border-radius: 100%; } - .header-nav .nav-title { display: inline-block; padding-left: 10px; height: 100%; line-height: 50px; } - .nav-title a { height: 50px; font-size: 20px; } - .header-nav .nav-links { line-height: 50px; float: right; margin-right: 15px; } - .nav-links .nav-link { display: inline-block; } - .nav-links .nav-link a { display: block; padding: 0 10px; } - .nav-links .nav-link.icon a { padding: 0 8px; } - -.fab { - font-family: FontAwesome !important; -} - -#content { - width: 810px; - margin: 180px auto 0; -} - -.post .post-date { - color: gray; +.nav-links .nav-icons-divider { + border-color: inherit; + border-left: 1px solid; + margin-right: 4.5px; } +/* TAGS */ .post-tags { padding: 0; list-style-type: none; } - .post-tags .post-tag { display: inline-block; background-color: #00b5ad; @@ -123,51 +110,51 @@ html { font-size: 14px; font-weight: 700; } - .post-tag a { text-decoration: none; color: inherit; } +/* SINGLE */ +#content { + width: 810px; + margin: 180px auto 0; +} +.post .post-date { + color: gray; +} .post .post-content { margin-top: 50px; } +/* LIST */ .list-posts .list-title { text-align: center; } - .list-posts .posts-year { margin-top: 40px; } - .list-posts .post-title { margin: 10px 0; } - .post-title .post-date { float: right; } - .tags-list .post-tags { margin-top: 50px; } - .tags-list .post-tags .post-tag { padding: 0; margin: 0 5px; } - .tags-list .post-tags .post-tag:hover { background-color: #009c95; border: 1px solid #00b5ad; } - .tags-list .post-tags .post-tag a div { display: inline-block; padding: 5px 8px; } - .tags-list .post-tags .post-tag a .tag-posts-count { background: rgba(0, 0, 0, 0.1); opacity: 0.8; diff --git a/themes/gokarna/static/js/main.js b/themes/gokarna/static/js/main.js index 86786c4..887fb73 100644 --- a/themes/gokarna/static/js/main.js +++ b/themes/gokarna/static/js/main.js @@ -1,11 +1,29 @@ -window.addEventListener('scroll', function() { - 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') - }) - } -}); +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.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); + }); + }); + + 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') + }) + } + }); +}