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)}`));

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

@ -1,25 +1,57 @@
<!-- <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>
body { :root[color-mode="light"] {
font-family: "Inter", "Pretendard", sans-serif; --primary-bg-color: white;
font-size: 16px; --primary-text-color: black;
margin: auto; --link-color: #3273dc;
padding: 20px; --blockquote-border-color: #999;
max-width: 720px; --blockquote-text-color: #222;
text-align: left; --code-bg-color: #EDEDED;
background-color: white; --title-color: black;
word-wrap: break-word; --post-author-color: #BB0;
overflow-wrap: break-word; --post-date-color: #444;
line-height: 1.8; --post-divider-color: black;
--textarea-bg-color: white;
--textarea-text-color: black;
} }
/* h1, h2, h3, h4, h5, h6, b, strong { :root[color-mode="dark"] {
font-weight: 400; --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: "SUSE", "Inter", "Pretendard", sans-serif;
font-size: 1.1rem;
letter-spacing: 0.28px;
margin: auto;
padding: 20px;
max-width: 780px;
text-align: left;
background-color: var(--primary-bg-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.8;
color: var(--primary-text-color);
}
h1 { font-size: 26px; } h1 { font-size: 26px; }
h2 { font-size: 24px; } h2 { font-size: 24px; }
@ -28,138 +60,154 @@
h5 { font-size: 18px; } h5 { font-size: 18px; }
a { a {
color: #3273dc; color: var(--link-color);
} }
.katex { .katex {
font-size: 16px !important; font-size: 16px !important;
padding: 0 2px; padding: 0 2px;
} }
.date { .date {
font-family: monospace; font-family: monospace;
font-size: 14px; font-size: 14px;
} }
.title { .title {
color: black; color: var(--title-color);
text-decoration: none; text-decoration: none;
} }
ul.blog-posts { ul.blog-posts {
font-size: 16px; font-size: 16px;
color: #0; color: #0;
list-style-type: none; list-style-type: none;
padding: unset; padding: unset;
} }
ul.blog-posts li a:visited { ul.blog-posts li a:visited {
color: #8b6fcb; color: #8b6fcb;
} }
.post-header { .post-header {
margin: 10px 0; margin: 10px 0;
padding-bottom: 12px; padding-bottom: 12px;
padding-top: 18px; padding-top: 18px;
} }
.post-header .post-title { .post-header .post-title {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
} }
.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;
} }
table { table {
width: 100%; width: 100%;
} }
img { img {
max-width: 100%; max-width: 100%;
} }
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;
} }
pre code { pre code {
background-color: unset; background-color: unset;
display: block; display: block;
padding: 20px; padding: 20px;
white-space: pre-wrap; white-space: pre-wrap;
font-size: 14px; font-size: 14px;
overflow-x: auto; overflow-x: auto;
} }
div.highlight pre { div.highlight pre {
border-radius: 10px; border-radius: 10px;
} }
div.highlight code { div.highlight code {
color: unset; color: unset;
} }
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) { textarea,
body { input {
background-color: #222; background-color: var(--textarea-bg-color);
color: white; color: var(--textarea-text-color);
} }
.utils {
border-top: 1px solid;
border-top-color: var(--border-color);
margin-top: 32px;
padding-top: 12px;
display: flex;
}
a { .utils #copy {
color: #8cc2dd; font-size: 10px;
}
blockquote { align-self: flex-start;
color: #ccc; margin-right: auto;
} }
code { .utils #toggleColor {
background-color: #555; font-size: 8px;
}
textarea,
input {
background-color: #252525;
color: #ddd;
}
.title {
color: #FFF;
}
.post-header .post-date {
color: #AAA;
}
.post-divider {
background-color: white;
}
align-self: flex-start;
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.