Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: adding dark mode functionality to blog #101

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

feat: adding dark mode functionality to blog #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d9cb12b
added toggle switch as partial
AsherThomasBabu Aug 24, 2021
870ab7e
inline css styling added for toggle switch
AsherThomasBabu Aug 24, 2021
fe07668
inline js added for switch functionality
AsherThomasBabu Aug 24, 2021
9a30656
add toggle partial as nav element in header.html
AsherThomasBabu Aug 24, 2021
3592eb1
remove svg bg and adjust spacing
AsherThomasBabu Aug 24, 2021
a18f713
added css for dark-mode
AsherThomasBabu Aug 24, 2021
48860e9
change file directory
AsherThomasBabu Aug 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
137 changes: 137 additions & 0 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
{{ define "main" }}

<!-- banner -->
<br>
<section class="banner bg-cover" >
<img src="{{ .Site.Params.banner.image | relURL }}" class="img-fluid illustration" alt="">
<div class="container">
<div class="row">
<div class="col-lg-6 mb-5 mb-lg-0">
<h1>{{ .Site.Params.banner.title | markdownify }}</h1>
</div>
<div class="col-lg-6 illustration-mobile">
<img src="{{ .Site.Params.banner.image | relURL }}" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
<!-- /banner -->

<!-- blog -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto px-0">
<div class="bg-white shadow block">
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "post") }}
{{ range $paginator.Pages }}
{{ .Render "article" }}
{{ end }}
<!-- pagination -->
<div class="mt-5">
{{"<!-- pagination -->" | safeHTML }}
{{ $paginator := .Paginator }}
<!-- Number of links either side of the current page. -->
{{ $adjacent_links := 2 }}
<!-- $max_links = ($adjacent_links * 2) + 1 -->
{{ $max_links := (add (mul $adjacent_links 2) 1) }}
<!-- $lower_limit = $adjacent_links + 1 -->
{{ $lower_limit := (add $adjacent_links 1) }}
<!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
{{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
<!-- If there's more than one page. -->
{{ if gt $paginator.TotalPages 1 }}
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center align-items-center">
<!-- Previous page. -->
{{ if $paginator.HasPrev }}
<li class="page-item">
<a href="{{ $paginator.Prev.URL }}" class="page-link">
&laquo;
</a>
</li>
{{ end }}
<!-- Page numbers. -->
{{ range $paginator.Pagers }}
{{ $.Scratch.Set "page_number_flag" false }}
<!-- Advanced page numbers. -->
{{ if gt $paginator.TotalPages $max_links }}
<!-- Lower limit pages. -->
<!-- If the user is on a page which is in the lower limit. -->
{{ if le $paginator.PageNumber $lower_limit }}
<!-- If the current loop page is less than max_links. -->
{{ if le .PageNumber $max_links }}
{{ $.Scratch.Set "page_number_flag" true }}
{{ end }}
<!-- Upper limit pages. -->
<!-- If the user is on a page which is in the upper limit. -->
{{ else if ge $paginator.PageNumber $upper_limit }}
<!-- If the current loop page is greater than total pages minus $max_links -->
{{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
{{ $.Scratch.Set "page_number_flag" true }}
{{ end }}
<!-- Middle pages. -->
{{ else }}
{{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
{{ $.Scratch.Set "page_number_flag" true }}
{{ end }}
{{ end }}
<!-- Simple page numbers. -->
{{ else }}
{{ $.Scratch.Set "page_number_flag" true }}
{{ end }}
<!-- Output page numbers. -->
{{ if eq ($.Scratch.Get "page_number_flag") true }}
<li class="page-item{{ if eq . $paginator }} page-item active {{ end }}">
<a href="{{ .URL }}" class="page-link">
{{ .PageNumber }}
</a>
</li>
{{ end }}
{{ end }}
<!-- Next page. -->
{{ if $paginator.HasNext }}
<li class="page-item">
<a href="{{ $paginator.Next.URL }}" class="page-link">
&raquo;
</a>
</li>
{{ end }}
</ul>
</nav>
{{ end }}
{{"<!-- /pagination -->" | safeHTML }}
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /blog -->

<!-- cta -->
{{ if .Site.Params.cta.enable }}
<section class="section pt-0">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row shadow bg-white p-5">
<div class="col-md-4 text-center text-md-left mb-4 mb-lg-0">
<img src="{{ .Site.Params.cta.image | relURL }}" class="mr-4" alt="..."></div>
<div class="col-md-8 text-center text-md-left">
<h3 class="mt-0">{{ .Site.Params.cta.title | markdownify }}</h3>
<p>{{ .Site.Params.cta.description | markdownify }}</p>
{{ if .Site.Params.cta.button.enable }}
<a href="{{ .Site.Params.cta.button.link | absURL }}"
class="btn btn-primary">{{ .Site.Params.cta.button.label }}</a>
{{ end }}
</div>
</div>
</div>
</div>
</div>
</section>
{{ end }}
<!-- /cta -->

{{ end }}
55 changes: 55 additions & 0 deletions layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{{ "<!-- navigation -->" | safeHTML }}
<header class="fixed-top navigation">
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<a class="navbar-brand"href="{{ .Site.BaseURL }}"><img class="img-fluid" src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}"></a>
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation">
<i class="ti-menu h3"></i>
</button>

<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{{ .Site.BaseURL }}">{{ with .Site.Params.Home }} {{ . }} {{ end }}</a>
</li>
{{ range .Site.Menus.main }}
{{ if .HasChildren }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ .Name }}
</a>
<div class="dropdown-menu">
{{ range .Children }}
<a class="dropdown-item" href="{{ .URL | absURL }}">{{ .Name }}</a>
{{ end }}
</div>
</li>
{{ else }}
<li class="nav-item">
<a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
</li>
<li class="nav-link nav-text">
{{ partial "toggle.html" . }}
</li>
{{ end }}
{{ end }}
</ul>
{{ if .Site.Params.search.enable }}
{{ "<!-- search -->" | safeHTML }}
<div class="search">
<button id="searchOpen" class="search-btn"><i class="ti-search"></i></button>
<div class="search-wrapper">
<form action="{{ `search` | absURL }}" class="h-100">
<input class="search-box px-4" id="search-query" name="s" type="search" placeholder="Type & Hit Enter...">
</form>
<button id="searchClose" class="search-close"><i class="ti-close text-dark"></i></button>
</div>
</div>
{{ end }}
</div>
</nav>
</div>
</header>
{{ "<!-- /navigation -->" | safeHTML }}
201 changes: 201 additions & 0 deletions layouts/partials/toggle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<div class="js-toggle-wrapper">
<div class="js-toggle">
<div class="js-toggle-track">
<div class="js-toggle-track-check">
<img src="data:image/png;base64,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"
role="presentation" style="pointer-events: none" width="16" height="16" />
</div>
<div class="js-toggle-track-x">
<img src="data:image/png;base64,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"
role="presentation" style="pointer-events: none" width="16" height="16" />
</div>
</div>
<div class="js-toggle-thumb"></div>
<input class="js-toggle-screenreader-only" type="checkbox" aria-label="Switch between Dark and Light mode" />
</div>
</div>

<style>
.js-toggle-wrapper {
display: table;
margin: 0 auto;
padding-left: 20px;
}

.js-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
-webkit-touch-callout: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}

.js-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.js-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: hsl(222, 14%, 7%);
transition: all 0.2s ease;
}

.js-toggle-track-check {
position: absolute;
width: 17px;
height: 17px;
left: 5px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
transition: opacity 0.25s ease;
}

.js-toggle--checked .js-toggle-track-check {
opacity: 1;
transition: opacity 0.25s ease;
}

.js-toggle-track-x {
position: absolute;
width: 17px;
height: 17px;
right: 5px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 1;
transition: opacity 0.25s ease;
}

.js-toggle--checked .js-toggle-track-x {
opacity: 0;
}

.js-toggle-thumb {
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
transform: translateX(0);
}

.js-toggle--checked .js-toggle-thumb {
transform: translateX(26px);
border-color: #19ab27;
}

.js-toggle--focus .js-toggle-thumb {
box-shadow: 0px 0px 2px 3px rgb(255, 167, 196);
}

.js-toggle:active .js-toggle-thumb {
box-shadow: 0px 0px 5px 5px rgb(255, 167, 196);
}

body.dark-mode {
background: rgb(45, 45, 45);
color: #f5f5f5;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
color: #ef878f;
}

body.dark-mode li.nav-item a.nav-link,
html body.dark-mode header.fixed-top.navigation div.container {
background-color: rgb(45, 45, 45) !important;
color: #f5f5f5 !important;
}

body.dark-mode button#searchOpen.search-btn {
color: #f5f5f5;
}

body.dark-mode header.fixed-top.navigation.nav-bg {
background-color: rgb(45, 45, 45);
}

body.dark-mode div.bg-white {
background-color: rgb(45, 45, 45) !important;
}

body.dark-mode li.page-item a {
background-color: rgb(45, 45, 45);
}

body.dark-mode li.page-item a.page-item.active {
background-color: #ef878f !important;
}

body.dark-mode footer,
body.dark-mode footer a {
color: #f5f5f5 !important;
background-color: rgb(45, 45, 45) !important;
}

body.dark-mode blockquote,
body.dark-mode blockquote p {
background-color: rgb(45, 45, 45);
color: grey;
}
</style>

<script>
var body = document.body;
var switcher = document.getElementsByClassName("js-toggle")[0];

//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
switcher.addEventListener("click", function () {
this.classList.toggle("js-toggle--checked");
this.classList.add("js-toggle--focus");
//If dark mode is selected
if (this.classList.contains("js-toggle--checked")) {
body.classList.add("dark-mode");
//Save user preference in storage
localStorage.setItem("darkMode", "true");
} else {
body.classList.remove("dark-mode");
setTimeout(function () {
localStorage.removeItem("darkMode");
}, 100);
}
});

//Check Storage. Keep user preference on page reload
if (localStorage.getItem("darkMode")) {
//body.classList.add('dark-mode');
switcher.classList.add("js-toggle--checked");
body.classList.add("dark-mode");
}
</script>