kova/hugo-profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
gurusabarish
2021-06-21 15:34:43 +05:30
parent fd2b79bc98
commit 60767edc93
10 changed files with 83 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/baseof.html
+35 -6
View File
@@ -23,28 +23,57 @@
</head> </head>
<body>
{{ if eq .Site.Params.version 1 }} {{ if eq .Site.Params.version 1 }}
<body>
{{- partial "sections/v1/scripts.html" . -}} {{- partial "sections/v1/scripts.html" . -}}
{{- partial "sections/v1/header1.html" . -}} {{- partial "sections/v1/header1.html" . -}}
{{- block "main" . -}}{{- end }} {{- block "main" . -}}{{- end }}
{{- partial "sections/v1/footer.html" . -}} {{- partial "sections/v1/footer.html" . -}}
</body>
{{ else if eq .Site.Params.version 2 }} {{ else if eq .Site.Params.version 2 }}
<body>
{{- partial "sections/v2/scripts.html" . -}} {{- partial "sections/v2/scripts.html" . -}}
{{- partial "sections/v2/header.html" . -}} {{- partial "sections/v2/header.html" . -}}
{{- block "main" . -}}{{- end }} {{- block "main" . -}}{{- end }}
{{- partial "sections/v2/footer.html" . -}} {{- partial "sections/v2/footer.html" . -}}
</body>
{{ else if eq .Site.Params.version 3 }} {{ else if eq .Site.Params.version 3 }}
<body class="text-dark">
{{- partial "sections/v3/scripts.html" . -}} {{- partial "sections/v3/scripts.html" . -}}
{{- partial "sections/v3/navbar.html" . -}} {{- partial "sections/v3/navbar.html" . -}}
{{- block "main" . -}}{{- end }} {{- block "main" . -}}{{- end }}
{{- partial "sections/v3/footer.html" . -}} {{- partial "sections/v3/footer.html" . -}}
<script>
$('.darkmode-label').click(function () {
$("body").toggleClass("darkmode");
$(".fa-moon").toggleClass("d-none");
$(".fa-sun").toggleClass("d-none");
$("nav").toggleClass("navbar-dark");
$("nav").toggleClass("navbar-light");
$('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark');
$('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted');
if ($('input.custom-control-input').is(':checked')) {
$('.darkmode-text-dark').addClass('text-dark').removeClass('darkmode-text-dark');
$('.darkmode-text-muted').addClass('text-muted').removeClass('darkmode-text-muted');
};
});
if ($('input.custom-control-input').is(':checked')) {
$("body").toggleClass("darkmode");
$(".fa-moon").addClass("d-none");
$(".fa-sun").removeClass("d-none");
$("nav").toggleClass("navbar-dark");
$("nav").toggleClass("navbar-light");
$('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark');
$('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted');
};
</script>
</body>
{{ else }} {{ else }}
<body></body>
{{ end }} {{ end }}
</body>
</html> </html>
layouts/_default/single.html
+1 -1
View File
@@ -21,7 +21,7 @@
{{ if eq .Site.Params.version 3 }} {{ if eq .Site.Params.version 3 }}
<section style="font-family: 'Roboto', sans-serif;"> <section style="font-family: 'Roboto', sans-serif;">
<div class="container"> <div class="container">
<div class="row"> <div class="row blog-page-color">
<div class="col-md-9 py-4 px-0"> <div class="col-md-9 py-4 px-0">
<div class="rounded shadow bg-light p-3 px-md-5 bg-light"> <div class="rounded shadow bg-light p-3 px-md-5 bg-light">
<h1 class="pb-2 text-center">{{ .Title }}</h1> <h1 class="pb-2 text-center">{{ .Title }}</h1>
layouts/partials/sections/v3/achievements.html
+1 -1
View File
@@ -13,7 +13,7 @@
data-aos-duration="600" data-aos-once="true"> data-aos-duration="600" data-aos-once="true">
<div class="achiv-card d-flex align-items-end shadow-lg rounded" style="background-image: url({{ .img }});"> <div class="achiv-card d-flex align-items-end shadow-lg rounded" style="background-image: url({{ .img }});">
<div class="p-3 w-100 achiv overflow-hidden"> <div class="p-3 w-100 achiv overflow-hidden">
<h4 class="text-center"> <h4 class="text-center achiv-head">
{{ .title }} {{ .title }}
</h4> </h4>
<div class="text-secondary"> <div class="text-secondary">
layouts/partials/sections/v3/footer.html
+2 -2
View File
@@ -1,6 +1,6 @@
<footer data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true"> <footer>
<!-- recent posts --> <!-- recent posts -->
<div class="news container py-3"> <div class="news container py-3" data-aos="fade-up" data-aos-easing="linear" data-aos-once="true">
{{ if .Site.Params.recentposts }} {{ if .Site.Params.recentposts }}
<div class="h3 text-center text-dark py-3 font-weight-bold">Recent posts</div> <div class="h3 text-center text-dark py-3 font-weight-bold">Recent posts</div>
<div class="row justify-content-center"> <div class="row justify-content-center">
layouts/partials/sections/v3/head.html
+19
View File
@@ -8,3 +8,22 @@
<link rel="stylesheet" href="/css/all.min.css" media="all"> <link rel="stylesheet" href="/css/all.min.css" media="all">
<link rel="stylesheet" href="/css/fontawesome.min.css" media="all"> <link rel="stylesheet" href="/css/fontawesome.min.css" media="all">
<link rel="stylesheet" href="/css/v3/darkmode.css" media="all"> <link rel="stylesheet" href="/css/v3/darkmode.css" media="all">
<style>
html {
scrollbar-width: thin;
scrollbar-color: #6c757d transparent;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #6c757d;
}
</style>
layouts/partials/sections/v3/navbar.html
+10 -8
View File
@@ -9,13 +9,7 @@
{{ .Site.Title }} {{ .Site.Title }}
{{ end }} {{ end }}
</a> </a>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" autocomplete="on">
<label class="pt-2 darkmode-label" for="customSwitch1">
<i class="fas fa-lg fa-moon"></i>
<i class="fas fa-lg fa-sun d-none text-warning"></i>
</label>
</div>
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -75,7 +69,15 @@
<a class="nav-link text-dark" href="{{.Url}}" aria-label="{{ .name }}">{{ .name }}</a> <a class="nav-link text-dark" href="{{.Url}}" aria-label="{{ .name }}">{{ .name }}</a>
</li> </li>
{{ end }} {{ end }}
<li class="nav-item navbar-text">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" autocomplete="on">
<label class="pt-2 darkmode-label" for="customSwitch1" style="cursor: pointer;">
<i class="fas fa-lg fa-moon"></i>
<i class="fas fa-lg fa-sun d-none text-warning"></i>
</label>
</div>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>
layouts/partials/sections/v3/projects.html
+2 -2
View File
@@ -24,7 +24,7 @@
{{ end }} {{ end }}
{{ if .Params.github }} {{ if .Params.github }}
<a href="{{ .Params.github }}" class="px-1 pr-2"> <a href="{{ .Params.github }}" class="px-1 pr-2">
<i class="fab text-dark fa-lg fa-github"></i> <i class="fab text-dark fa-lg fa-github pro-github"></i>
</a> </a>
{{ end }} {{ end }}
<a class="btn btn-sm pro-btn btn-outline-info" target="_blank" href="{{ .Permalink }}"> <a class="btn btn-sm pro-btn btn-outline-info" target="_blank" href="{{ .Permalink }}">
@@ -56,7 +56,7 @@
{{ end }} {{ end }}
{{ if .githublink }} {{ if .githublink }}
<a href="{{ .githublink }}" class="px-1 pr-2"> <a href="{{ .githublink }}" class="px-1 pr-2">
<i class="fab text-dark fa-lg fa-github"></i> <i class="fab text-dark fa-lg fa-github pro-github"></i>
</a> </a>
{{ end }} {{ end }}
static/css/v3/darkmode.css
-20
View File
@@ -10,25 +10,5 @@
color: #b0b3b8 !important; color: #b0b3b8 !important;
} }
.nav-pills .active {
color: #e4e6eb !important;
}
.darkmode-content-pro {
background-color: #3a3b3c !important;
}
.bg-pro {
opacity: 0.8;
}
.achiv {
background: #3a3b3c;
}
.achiv .text-secondary {
color: #e4e6eb;
}
.card {
}
static/css/v3/post.css
+3 -1
View File
@@ -5,7 +5,9 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background-color: #eaedf0; background-color: #eaedf0;
} }
.blog-page-color{
color: #3a3b3c !important;
}
#TableOfContents { #TableOfContents {
padding: 3%; padding: 3%;
} }
static/css/v3/v3.css
+8 -1
View File
@@ -148,9 +148,13 @@ a:hover {
border-bottom-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important;
} }
.content-pro-top { .content-pro-top {
color: #3a3b3c !important;
height: 80%; height: 80%;
} }
.pro-github{
color: #3a3b3c !important;
}
.pro:hover .pro-btn { .pro:hover .pro-btn {
background-color: #3498db !important; background-color: #3498db !important;
color: #f9fafc; color: #f9fafc;
@@ -201,7 +205,7 @@ a:hover {
} }
.nav-pills .active { .nav-pills .active {
padding-left: 20%; padding-left: 20%;
color: #343a40 !important; color: #818181 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.nav-pills .active::before { .nav-pills .active::before {
@@ -342,6 +346,9 @@ a:hover {
.achiv-out { .achiv-out {
max-width: 35% !important; max-width: 35% !important;
} }
.achiv-head {
color: #3a3b3c !important;
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.achiv-out { .achiv-out {
max-width: 100% !important; max-width: 100% !important;