maki/yozora.tech
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add link to junk, add about, better css

Browse source
This commit is contained in:
NaitLee 2025-06-02 22:04:27 +08:00
parent 25d42c745a
commit 30e523a698
3 changed files with 87 additions and 30 deletions

30
about.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Yozora.Tech</title>
<link rel="stylesheet" href="/res/main.css" />
</head>
<body>
<nav>
<a class="logo" href="//yozora.tech/">
<svg width="192" height="48" aria-label="Yozora.Tech">
<use xlink:href="/res/yozora.tech.svg#logo" />
</svg>
</a>
<ul class="links">
<li><a href="/about.html">About</a></li>
</li>
</nav>
<main>
<h1>About</h1>
<p><a href="https://unseen-site.fun/about">Nait</a> wants a company.</p>
<p>Wish he will have a happy time.</p>
</main>
<footer>
<p>Copyright © 2025, Yozora Tech LTD.</p>
<p>Site content available under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.</p>
</footer>
</body>
</html>

12
index.html
View file

@ -14,19 +14,23 @@
</svg> </svg>
</a> </a>
<ul class="links"> <ul class="links">
<!-- <li><a href="/about.html">About</a></li> --> <li><a href="/about.html">About</a></li>
</li> </li>
</nav> </nav>
<main> <main>
<h1 class="slogan">Software Made Simple</h1> <h1 class="slogan">Software Made Simple</h1>
<p>We serve neat software.</p> <p>We serve neat software</p>
<ul class="showcase"> <ul class="showcase">
<li><a href="//git.yozora.tech/">Git Repositories & Mirrors</a></li> <li><a href="//git.yozora.tech/explore/repos">Git Repositories</a></li>
</ul>
<p>And some personal stuff</p>
<ul class="showcase">
<li><a href="//junk.yozora.tech/">Historical Interests</a></li>
</ul> </ul>
<p>There are more for us to do…</p> <p>There are more for us to do…</p>
</main> </main>
<footer> <footer>
<p>Copyright © 2024, Yozora Tech LTD.</p> <p>Copyright © 2025, Yozora Tech LTD.</p>
<p>Site content available under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.</p> <p>Site content available under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.</p>
</footer> </footer>
</body> </body>

75
res/main.css
View file

@ -1,8 +1,8 @@
:root { :root {
--fore: #202020; --fore: #101010;
--back: #f8f8f8; --bottom: #f0f0f0;
--back2: #f4f4f4; --back: #e8e8e8;
--shade: #a0a0a0; --shade: #a0a0a0;
} }
@ -12,7 +12,7 @@
body { body {
color: var(--fore); color: var(--fore);
background-color: var(--back); background-color: var(--bottom);
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
@ -22,8 +22,8 @@ body {
nav { nav {
position: sticky; position: sticky;
margin: 1em 0; margin: 1em 0;
padding: 4px 0 2px 0; padding: 0;
background-color: var(--back2); background-color: var(--back);
border-top: 1px solid var(--shade); border-top: 1px solid var(--shade);
border-bottom: 1px solid var(--shade); border-bottom: 1px solid var(--shade);
top: 0; top: 0;
@ -33,29 +33,40 @@ nav {
nav > .logo { nav > .logo {
display: block; display: block;
margin: 0 2em; margin: 2px 1em;
height: 52px;
color: var(--fore); color: var(--fore);
} }
nav > .links { nav > .links {
list-style: none; list-style: none;
padding: 0;
display: flex; display: flex;
margin: 0 8px; margin: 0;
padding: 0 1em;
justify-content: center; justify-content: center;
line-height: 54px; line-height: 54px;
} }
nav > .links > * { nav > .links > * {
margin: 0 2em; margin: 0;
padding: 0;
}
nav > .links a {
display: inline-block;
transition: border 0.32s 0s ease-out;
padding: 0 1em;
line-height: 54px;
border-bottom: 2px solid transparent;
} }
nav > .links a:any-link { nav > .links a:any-link {
color: var(--fore);
text-decoration: none; text-decoration: none;
} }
nav > .links a:hover {
border-bottom: 2px solid var(--fore);
}
h1.slogan { h1.slogan {
font-size: 2.4em; font-size: 2.5em;
font-weight: 200; font-weight: 200;
margin: 4rem 0; margin: 1.5em 0;
} }
a:any-link { a:any-link {
@ -63,6 +74,15 @@ a:any-link {
text-decoration: underline; text-decoration: underline;
} }
main {
margin: 4em auto;
max-width: 21cm;
}
p {
line-height: 1.8;
}
.frontpage { .frontpage {
text-align: center; text-align: center;
} }
@ -70,36 +90,39 @@ a:any-link {
.showcase { .showcase {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 4rem auto; margin: 2em auto 5em auto;
padding: 1rem; padding: 1em;
width: 28rem; width: 28em;
max-width: calc(100% - 2rem); max-width: calc(100% - 2em);
border: 1px solid var(--fore); border: 1px solid var(--fore);
border-radius: 4px; border-radius: 4px;
} }
.showcase > * { .showcase > * {
margin: 2rem 0; margin: 1.5em 0;
} }
p { p {
margin: 1rem 0; margin: 1em 0;
} }
footer { footer {
text-align: center;
font-size: 0.8em; font-size: 0.8em;
margin-top: 6rem; margin: 2em 0;
margin-bottom: 2rem; padding: 0.5em 0;
padding: 0.5rem 0;
border-top: 1px solid var(--shade); border-top: 1px solid var(--shade);
border-bottom: 1px solid var(--shade); border-bottom: 1px solid var(--shade);
background-color: var(--back2); background-color: var(--back);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--fore: #a0a0a0; --fore: #d0d0d0;
--back: #202020; --bottom: #181818;
--back2: #242424; --back: #242424;
--shade: #808080; --shade: #808080;
} }
img.dim {
filter: brightness(0.8);
}
} }