morgan
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Theme

This commit is contained in:
Morgan 2024-09-10 04:16:17 +09:00
parent f99119ba60
commit 5631c6f140
No known key found for this signature in database
3 changed files with 148 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
themes/plain/layouts/_default/baseof.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html color-mode="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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="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="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" . -}} {{- partial "style.html" . -}}
@ -34,7 +34,7 @@
<body> <body>
{{ if .IsHome }} {{ if .IsHome }}
<header> <header>
<a href="{{ "" | relURL }}" class="title"> <a href='{{ "" | relURL }}' class="title">
<h2>{{ .Site.Title }}</h2> <h2>{{ .Site.Title }}</h2>
</a> </a>
</header> </header>
@ -42,6 +42,10 @@
<main> <main>
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</main> </main>
<div class="utils">
<div id="copy">&copy;morgan.kr</div>
<div id="toggleColor">Toggle Darkmode</div>
</div>
<script> <script>
console.log("Sending statistics to server. Personal info is redacted afterwards."); 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)}`)); console.log(fetch(`https://log.blog.morgan.kr/?url=${encodeURIComponent(document.location)}&referer=${encodeURIComponent(document.referrer)}`));

138
themes/plain/layouts/partials/style.html
View File

@ -1,26 +1,58 @@
<!-- <link rel="stylesheet" href="/css/syntax.css"> --> <!-- <link rel="stylesheet" href="/css/syntax.css"> -->
<style> <style>
@import "/css/syntax.css" not (prefers-color-scheme: dark); @import "/css/syntax.css" not (prefers-color-scheme: dark);
@import "/css/syntax-dark.css" (prefers-color-scheme: dark); @import "/css/syntax-dark.css" (prefers-color-scheme: dark);
@font-face {
font-family: SUSE;
src: url("/suse.woff2");
}
</style> </style>
<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 { body {
font-family: "Inter", "Pretendard", sans-serif; font-family: "SUSE", "Inter", "Pretendard", sans-serif;
font-size: 16px; font-size: 1.1rem;
letter-spacing: 0.28px;
margin: auto; margin: auto;
padding: 20px; padding: 20px;
max-width: 720px; max-width: 780px;
text-align: left; text-align: left;
background-color: white; background-color: var(--primary-bg-color);
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
line-height: 1.8; line-height: 1.8;
color: var(--primary-text-color);
} }
/* h1, h2, h3, h4, h5, h6, b, strong {
font-weight: 400;
} */
h1 { font-size: 26px; } h1 { font-size: 26px; }
h2 { font-size: 24px; } h2 { font-size: 24px; }
h3 { font-size: 22px; } h3 { font-size: 22px; }
@ -28,7 +60,7 @@
h5 { font-size: 18px; } h5 { font-size: 18px; }
a { a {
color: #3273dc; color: var(--link-color);
} }
.katex { .katex {
@ -42,7 +74,7 @@
} }
.title { .title {
color: black; color: var(--title-color);
text-decoration: none; text-decoration: none;
} }
@ -70,17 +102,18 @@
.post-header .post-author { .post-header .post-author {
font-size: 14px; font-size: 14px;
color: #BB0; color: var(--post-author-color);
} }
.post-header .post-date { .post-header .post-date {
font-family: monospace; font-family: monospace;
color: #444; color: var(--post-date-color);
font-size: 14px; font-size: 12px;
font-weight: 450;
} }
.post-divider { .post-divider {
background-color: black; background-color: var(--post-divider-color);
height: 1px; height: 1px;
width: 100%; width: 100%;
margin-bottom: 40px; margin-bottom: 40px;
@ -97,7 +130,7 @@
code { code {
padding: 1px 4px; padding: 1px 4px;
margin: auto 2px; margin: auto 2px;
background-color: #EDEDED; background-color: var(--code-bg-color);
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
} }
@ -120,46 +153,61 @@
} }
blockquote { blockquote {
border-left: 1px solid #999; border-left: 1px solid var(--blockquote-border-color);
color: #222; color: var(--blockquote-text-color);
padding-left: 20px; padding-left: 20px;
font-style: italic; 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, textarea,
input { input {
background-color: #252525; background-color: var(--textarea-bg-color);
color: #ddd; 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 { .utils #copy {
color: #FFF; font-size: 10px;
align-self: flex-start;
margin-right: auto;
} }
.post-header .post-date { .utils #toggleColor {
color: #AAA; font-size: 8px;
}
.post-divider { align-self: flex-start;
background-color: white; margin-left: auto;
} }
</style> </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>

BIN
themes/plain/static/suse.woff2 Normal file
View File

Binary file not shown.