Fix Theme
This commit is contained in:
parent
f99119ba60
commit
5631c6f140
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html color-mode="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<meta name="title" content="{{ with .Title }}{{ . }}{{ else }}{{ .Site.Title }}{{ end }}" />
|
||||
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
|
||||
<meta name="keywords" content="{{ if .IsPage}}{{ range $index, $tag := .Params.tags }}{{ $tag }},{{ end }}{{ else }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}{{ end }}" />
|
||||
<meta name="keywords" content='{{ if .IsPage}}{{ range $index, $tag := .Params.tags }}{{ $tag }},{{ end }}{{ else }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}{{ end }}' />
|
||||
|
||||
{{- partial "style.html" . -}}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<body>
|
||||
{{ if .IsHome }}
|
||||
<header>
|
||||
<a href="{{ "" | relURL }}" class="title">
|
||||
<a href='{{ "" | relURL }}' class="title">
|
||||
<h2>{{ .Site.Title }}</h2>
|
||||
</a>
|
||||
</header>
|
||||
|
|
@ -42,6 +42,10 @@
|
|||
<main>
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
<div class="utils">
|
||||
<div id="copy">©morgan.kr</div>
|
||||
<div id="toggleColor">Toggle Darkmode</div>
|
||||
</div>
|
||||
<script>
|
||||
console.log("Sending statistics to server. Personal info is redacted afterwards.");
|
||||
console.log(fetch(`https://log.blog.morgan.kr/?url=${encodeURIComponent(document.location)}&referer=${encodeURIComponent(document.referrer)}`));
|
||||
|
|
|
|||
|
|
@ -1,26 +1,58 @@
|
|||
<!-- <link rel="stylesheet" href="/css/syntax.css"> -->
|
||||
|
||||
<style>
|
||||
@import "/css/syntax.css" not (prefers-color-scheme: dark);
|
||||
@import "/css/syntax-dark.css" (prefers-color-scheme: dark);
|
||||
@font-face {
|
||||
font-family: SUSE;
|
||||
src: url("/suse.woff2");
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
:root[color-mode="light"] {
|
||||
--primary-bg-color: white;
|
||||
--primary-text-color: black;
|
||||
--link-color: #3273dc;
|
||||
--blockquote-border-color: #999;
|
||||
--blockquote-text-color: #222;
|
||||
--code-bg-color: #EDEDED;
|
||||
--title-color: black;
|
||||
--post-author-color: #BB0;
|
||||
--post-date-color: #444;
|
||||
--post-divider-color: black;
|
||||
--textarea-bg-color: white;
|
||||
--textarea-text-color: black;
|
||||
}
|
||||
|
||||
:root[color-mode="dark"] {
|
||||
--primary-bg-color: #242424;
|
||||
--primary-text-color: white;
|
||||
--link-color: #8cc2dd;
|
||||
--blockquote-text-color: #ccc;
|
||||
--code-bg-color: #555;
|
||||
--title-color: #FFF;
|
||||
--post-date-color: #AAA;
|
||||
--post-divider-color: white;
|
||||
--textarea-bg-color: #252525;
|
||||
--textarea-text-color: #ddd;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", "Pretendard", sans-serif;
|
||||
font-size: 16px;
|
||||
font-family: "SUSE", "Inter", "Pretendard", sans-serif;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.28px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
max-width: 720px;
|
||||
max-width: 780px;
|
||||
text-align: left;
|
||||
background-color: white;
|
||||
background-color: var(--primary-bg-color);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.8;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
/* h1, h2, h3, h4, h5, h6, b, strong {
|
||||
font-weight: 400;
|
||||
} */
|
||||
|
||||
h1 { font-size: 26px; }
|
||||
h2 { font-size: 24px; }
|
||||
h3 { font-size: 22px; }
|
||||
|
|
@ -28,7 +60,7 @@
|
|||
h5 { font-size: 18px; }
|
||||
|
||||
a {
|
||||
color: #3273dc;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.katex {
|
||||
|
|
@ -42,7 +74,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
color: black;
|
||||
color: var(--title-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -70,17 +102,18 @@
|
|||
|
||||
.post-header .post-author {
|
||||
font-size: 14px;
|
||||
color: #BB0;
|
||||
color: var(--post-author-color);
|
||||
}
|
||||
|
||||
.post-header .post-date {
|
||||
font-family: monospace;
|
||||
color: #444;
|
||||
font-size: 14px;
|
||||
color: var(--post-date-color);
|
||||
font-size: 12px;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.post-divider {
|
||||
background-color: black;
|
||||
background-color: var(--post-divider-color);
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
|
|
@ -97,7 +130,7 @@
|
|||
code {
|
||||
padding: 1px 4px;
|
||||
margin: auto 2px;
|
||||
background-color: #EDEDED;
|
||||
background-color: var(--code-bg-color);
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -120,46 +153,61 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 1px solid #999;
|
||||
color: #222;
|
||||
border-left: 1px solid var(--blockquote-border-color);
|
||||
color: var(--blockquote-text-color);
|
||||
padding-left: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #222;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #8cc2dd;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input {
|
||||
background-color: #252525;
|
||||
color: #ddd;
|
||||
background-color: var(--textarea-bg-color);
|
||||
color: var(--textarea-text-color);
|
||||
}
|
||||
.utils {
|
||||
border-top: 1px solid;
|
||||
border-top-color: var(--border-color);
|
||||
margin-top: 32px;
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #FFF;
|
||||
.utils #copy {
|
||||
font-size: 10px;
|
||||
|
||||
align-self: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.post-header .post-date {
|
||||
color: #AAA;
|
||||
}
|
||||
.utils #toggleColor {
|
||||
font-size: 8px;
|
||||
|
||||
.post-divider {
|
||||
background-color: white;
|
||||
align-self: flex-start;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const toggleButton = document.getElementById("toggleColor")
|
||||
const userPref = localStorage.getItem("theme");
|
||||
|
||||
if (userPref === "dark") {
|
||||
document.documentElement.setAttribute("color-mode", "dark");
|
||||
} else if (userPref === "light") {
|
||||
document.documentElement.setAttribute("color-mode", "light");
|
||||
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
document.documentElement.setAttribute("color-mode", "dark");
|
||||
}
|
||||
|
||||
toggleButton.addEventListener("click", function() {
|
||||
if (document.documentElement.getAttribute("color-mode") === "dark") {
|
||||
document.documentElement.setAttribute("color-mode", "light");
|
||||
localStorage.setItem("theme", "light");
|
||||
} else {
|
||||
document.documentElement.setAttribute("color-mode", "dark");
|
||||
localStorage.setItem("theme", "dark");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Binary file not shown.
Loading…
Reference in New Issue