Siphalor/siphalor.de
1
0
Fork 0
Code Releases Activity

Merge branch 'master' of github.com:piharpi/jekyll-klise

Browse Source
This commit is contained in:
Mahendrata Harpi
2020-11-21 09:35:16 +07:00
parent a2f43bc865 50166dee4d
commit 02202f51a2
9 changed files with 115 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -34,10 +34,10 @@ For demo <a href="https://klise.now.sh" target="_blank" rel="noopener">klise.now
Run local server: Run local server:
```bash ```bash
git clone https://github.com/piharpi/jekyll-klise.git $ git clone https://github.com/piharpi/jekyll-klise.git
cd jekyll-klise $ cd jekyll-klise
bundle install $ bundle install
bundle exec jekyll serve $ bundle exec jekyll serve
``` ```
Navigate to `localhost:4000`. You're Welcome, Fork and be Stargazer. Navigate to `localhost:4000`. You're Welcome, Fork and be Stargazer.

22
_layouts/404.html
View File

@@ -6,7 +6,27 @@ layout: compress
<html lang="{{ page.lang | default: site.lang | default: " en " }}"> <html lang="{{ page.lang | default: site.lang | default: " en " }}">
{% include header.html %} {% include header.html %}
<body> <body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %} {% include navbar.html %}
<div class="wrapper"> <div class="wrapper">
<main aria-label="Content"> <main aria-label="Content">

22
_layouts/default.html
View File

@@ -5,7 +5,27 @@ layout: compress
<html lang="{{ page.lang | default: site.lang | default: " en " }}"> <html lang="{{ page.lang | default: site.lang | default: " en " }}">
{% include header.html %} {% include header.html %}
<body data-theme="{{ site.mode }}"> <body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %} {% include navbar.html %}
<div class="wrapper"> <div class="wrapper">
{% include author.html %} {% include author.html %}

22
_layouts/page.html
View File

@@ -7,7 +7,27 @@ layout: compress
{% include header.html %} {% include header.html %}
<body data-theme="{{ site.mode }}"> <body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %} {% include navbar.html %}
<div class="wrapper"> <div class="wrapper">
<header class="header"> <header class="header">

24
_layouts/post.html
View File

@@ -7,7 +7,27 @@ layout: compress
{% include header.html %} {% include header.html %}
<body data-theme="{{ site.mode }}"> <body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %} {% include navbar.html %}
<div class="wrapper post"> <div class="wrapper post">
<main class="page-content" aria-label="Content"> <main class="page-content" aria-label="Content">
@@ -55,7 +75,7 @@ layout: compress
</article> </article>
{% if page.comments %} {% if page.comments %}
{% include comments.html%} {% include comments.html %}
{% endif %} {% endif %}
</main> </main>

8
_sass/klise/_base.scss
View File

@@ -7,6 +7,14 @@
transition: background-color 75ms ease-in, border-color 75ms ease-in; transition: background-color 75ms ease-in, border-color 75ms ease-in;
} }
.notransition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
html { html {
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;

4
_sass/klise/_dark.scss
View File

@@ -239,7 +239,9 @@ body[data-theme="dark"] {
.search-article { .search-article {
input[type="search"] { input[type="search"] {
color: $dark-text-base-color; color: $dark-text-base-color;
&::-webkit-input-placeholder {
color: rgba(128,128,128,0.8);
}
} }
} }
} }

17
_sass/klise/_layout.scss
View File

@@ -338,18 +338,27 @@
} }
input[type="search"] { input[type="search"] {
border: 0;
top: 0; top: 0;
left: 0; left: 0;
position: absolute; border: 0;
width: 100%; width: 100%;
height: 40px;
outline: none;
position: absolute;
border-radius: 5px; border-radius: 5px;
padding: 10px 10px 10px 35px; padding: 10px 10px 10px 35px;
font-size: $base-font-size;
color: $text-base-color; color: $text-base-color;
-webkit-appearance: none;
font-size: $base-font-size;
background-color: rgba(128, 128, 128, 0.1); background-color: rgba(128, 128, 128, 0.1);
border: 1px solid rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.1);
outline: none; &::-webkit-input-placeholder {
color: #808080;
}
&::-webkit-search-decoration,
&::-webkit-search-results-decoration {
display: none;
}
} }
} }

13
assets/js/main.js
View File

@@ -2,17 +2,6 @@
// Theme switch // Theme switch
const body = document.body; const body = document.body;
const lamp = document.getElementById("mode"); const lamp = document.getElementById("mode");
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
const toggleTheme = (state) => { const toggleTheme = (state) => {
if (state === "dark") { if (state === "dark") {
@@ -26,8 +15,6 @@
} }
}; };
initTheme(localStorage.getItem("theme"));
lamp.addEventListener("click", () => lamp.addEventListener("click", () =>
toggleTheme(localStorage.getItem("theme")) toggleTheme(localStorage.getItem("theme"))
); );