commit 1980f08a078d6fc8c96877cdb2909461bd801b12
parent d8f8f70dd4813ec999203b1b8531c6a8a2e883a8
Author: erai <erai@omiltem.net>
Date: Sat, 13 Apr 2024 14:42:07 -0400
dark mode
Diffstat:
4 files changed, 83 insertions(+), 45 deletions(-)
diff --git a/about/index.html b/about/index.html
@@ -14,16 +14,18 @@
<link rel="me" href="https://t.me/erai271">
</head>
<body>
- <main>
- <header>
- <h1>Omiltem</h1>
+ <header>
+ <p>Omiltem</p>
+ <nav>
<ul class="links">
<li><a href="/">HOME</a></li>
<li><a href="/blog">BLOG</a></li>
- <li><a href="/code">CODE</a></li>
+ <li><a href="https://github.com/erai271">CODE</a></li>
<li><a href="/about">ABOUT</a></li>
</ul>
- </header>
+ </nav>
+ </header>
+ <main>
<article>
<h1>About</h1>
<div class="row">
@@ -42,10 +44,10 @@
</ul>
</div>
</div>
- <footer>
- © 2024 <a href="/about">erai</a>
- </footer>
</article>
</main>
+ <footer>
+ © 2024 <a href="/about">erai</a>
+ </footer>
</body>
</html>
diff --git a/blog/index.html b/blog/index.html
@@ -9,23 +9,23 @@
<link rel="icon" href="/favicon.png">
</head>
<body>
+ <header>
+ <p>Omiltem</p>
+ <ul class="links">
+ <li><a href="/">HOME</a></li>
+ <li><a href="/blog">BLOG</a></li>
+ <li><a href="/code">CODE</a></li>
+ <li><a href="/about">ABOUT</a></li>
+ </ul>
+ </header>
<main>
- <header>
- <h1>Omiltem</h1>
- <ul class="links">
- <li><a href="/">HOME</a></li>
- <li><a href="/blog">BLOG</a></li>
- <li><a href="/code">CODE</a></li>
- <li><a href="/about">ABOUT</a></li>
- </ul>
- </header>
<article>
<h1>Blog</h1>
Here is where I will put various writings.
- <footer>
- © 2024 <a href="/about">erai</a>
- </footer>
</article>
</main>
+ <footer>
+ © 2024 <a href="/about">erai</a>
+ </footer>
</body>
</html>
diff --git a/css/style.css b/css/style.css
@@ -1,19 +1,26 @@
body {
- display: flex;
justify-content: center;
line-height: 1.4;
color: #252525;
font-family: sans-serif;
margin: 0 auto;
+ max-width: 45em;
}
-h1, h2 {
+h1, h2, header p {
border-bottom: 1pt solid #888888;
}
+header p {
+ margin-top: 0.7em;
+ margin-bottom: 0.7em;
+ font-size: 2em;
+ font-family: serif;
+}
+
footer {
border-top: 1pt solid #888888;
- margin-top: 1em;
+ margin: 1em;
padding-top: 1em;
}
@@ -23,12 +30,9 @@ h1, h2, h3, h4, h5, h6 {
}
main {
- flex: 1;
- max-width: 45em;
}
header {
- background-color: #ffffff;
margin: 1em;
text-align: left;
}
@@ -52,41 +56,45 @@ header ul.links>li a {
}
article {
- background-color: #ffffff;
margin: 1em;
text-align: left;
}
-footer {
- clear: both;
- text-align: center;
-}
-
a {
color: #4070c0;
text-decoration: none;
}
-a:visited{
+a:visited {
color:#4007c0;
}
-a:hover{
+a:hover {
color:#cc0f50;
text-decoration: underline;
}
+footer {
+ clear: both;
+ text-align: center;
+}
+
+footer a, footer a:visited {
+ color: #000000;
+ text-decoration: none;
+}
+
code, pre {
white-space: pre-wrap;
font-family: monospace;
background-color: #f4f4ff;
+ color: #000000;
}
pre {
padding: 1em;
margin-left: 0em;
overflow: auto;
- font-size: 11pt;
border-radius: 4pt;
}
@@ -95,12 +103,10 @@ code {
padding: 2pt 3pt 1pt;
border: 1pt solid #ccc;
border-radius: 4pt;
- font-size: 12pt;
}
pre .prompt, code .prompt {
user-select: none;
- color: #888;
}
blockquote {
@@ -143,3 +149,31 @@ blockquote {
.nogrow {
flex-grow: 0;
}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #202020;
+ color: #eeeeee;
+ }
+
+ code, pre {
+ background-color: #1e1e33;
+ color: #eeeeee;
+ }
+
+ header ul.links>li a {
+ color: #eeeeee;
+ }
+
+ footer a, footer a:visited {
+ color: #eeeeee;
+ }
+
+ a {
+ color: #8ea5cc;
+ }
+
+ a:visited {
+ color: #8466cc;
+ }
+}
diff --git a/index.html b/index.html
@@ -9,23 +9,25 @@
<link rel="icon" href="/favicon.png">
</head>
<body>
- <main>
- <header>
- <h1>Omiltem</h1>
+ <header>
+ <p>Omiltem</p>
+ <nav>
<ul class="links">
<li><a href="/">HOME</a></li>
<li><a href="/blog">BLOG</a></li>
- <li><a href="/code">CODE</a></li>
+ <li><a href="https://github.com/erai271">CODE</a></li>
<li><a href="/about">ABOUT</a></li>
</ul>
- </header>
+ </nav>
+ </header>
+ <main>
<article>
<h1>Home</h1>
Hello, this is my personal website!
- <footer>
- © 2024 <a href="/about">erai</a>
- </footer>
</article>
</main>
+ <footer>
+ © 2024 <a href="/about">erai</a>
+ </footer>
</body>
</html>
