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

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>

View file

@ -14,19 +14,23 @@
</svg>
</a>
<ul class="links">
<!-- <li><a href="/about.html">About</a></li> -->
<li><a href="/about.html">About</a></li>
</li>
</nav>
<main>
<h1 class="slogan">Software Made Simple</h1>
<p>We serve neat software.</p>
<p>We serve neat software</p>
<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>
<p>There are more for us to do…</p>
</main>
<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>
</footer>
</body>

View file

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