更换字体，重构整个项目
This commit is contained in:
parent
79cd26cf44
commit
ba994a6e9f
101
index.css
101
index.css
|
|
@ -1,12 +1,95 @@
|
||||||
*{
|
@import url("https://chinese-fonts-cdn.deno.dev/packages/jhlst/dist/京華老宋体v1_007/result.css");
|
||||||
padding:0;
|
@import url("https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css");
|
||||||
margin:0;
|
|
||||||
color:#fff;
|
:root {
|
||||||
|
--font: "Source Han Serif CN VF";
|
||||||
|
--title-font: "KingHwa_OldSong";
|
||||||
|
--font-scale: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#naviBar{
|
@media (prefers-color-scheme: light) {
|
||||||
height:55px;
|
:root {
|
||||||
width:100%;
|
--background-color: #fff;
|
||||||
background-color: #3f3f5f;
|
/* 背景颜色 */
|
||||||
display: flex;
|
--heading-color: #222;
|
||||||
|
--nav-color: #222;
|
||||||
|
--text-color: #333;
|
||||||
|
/* 主要字体颜色 */
|
||||||
|
--sub-color: #666;
|
||||||
|
--gray-color: #999;
|
||||||
|
--link-color: #444;
|
||||||
|
--code-color: #222;
|
||||||
|
--border-color: #ddd;
|
||||||
|
--line-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background-color: #0f0f0f;
|
||||||
|
/* 背景颜色 */
|
||||||
|
--heading-color: #f2f2f2;
|
||||||
|
--nav-color: #f2f2f2;
|
||||||
|
--text-color: #f3f5fd;
|
||||||
|
/* 主要字体颜色 */
|
||||||
|
--sub-color: #999;
|
||||||
|
--gray-color: #bbb;
|
||||||
|
--link-color: #bbb;
|
||||||
|
--code-color: #999;
|
||||||
|
--border-color: #ddd;
|
||||||
|
--line-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: var(--heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: auto;
|
||||||
|
height: 100%;
|
||||||
|
width: 500px;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: var(--title-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
margin: 0.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .desc {
|
||||||
|
font-family: var(--font);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-title {
|
||||||
|
font-family: var(--title-font);
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .desc {
|
||||||
|
font-family: var(--font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .link-span {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a {
|
||||||
|
font-family: var(--font);
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 0.5em 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
89
index.html
89
index.html
|
|
@ -1,58 +1,53 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="zh-CN" class="mdui-theme-auto" style="height: 100%;">
|
|
||||||
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<link rel="stylesheet" href="./index.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
|
<title>Hmtsai的小站</title>
|
||||||
<meta name="renderer" content="webkit" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
|
|
||||||
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
|
|
||||||
<!-- 如果使用了组件的 icon 属性，还需要引入图标的 CSS 文件 -->
|
|
||||||
|
|
||||||
<title>Hmtsai's Website</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.wcol {
|
|
||||||
height: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="height: 100%;">
|
<body>
|
||||||
<mdui-top-app-bar style="position: relative;">
|
<div class="header">
|
||||||
<mdui-top-app-bar-title>Hmtsai's Website</mdui-top-app-bar-title>
|
<h1>Hmtsai的小站</h1>
|
||||||
<div style="flex-grow: 1"></div>
|
<span class="desc">Always think yourself.<span>
|
||||||
<mdui-button variant="text" href="http://blog.hmtsai.cn">Blog</mdui-button>
|
</div>
|
||||||
<mdui-button variant="text" href="http://git.hmtsai.cn">Gitea</mdui-button>
|
|
||||||
</mdui-top-app-bar>
|
|
||||||
|
|
||||||
<h2>Websites</h2>
|
<div class="context">
|
||||||
<div class="wcol"></div>
|
<h2>一些链接</h2>
|
||||||
<mdui-divider> </mdui-divider>
|
|
||||||
<mdui-card clickable variant="elevated" style="width: 100%;height: 20%" href="http://blog.hmtsai.cn">
|
|
||||||
<h3 style="text-align:center;">Hmtsai's Blog</h3>
|
|
||||||
<mdui-divider></mdui-divider>
|
|
||||||
<p style="text-align: center;">Read more.</p>
|
|
||||||
</mdui-card>
|
|
||||||
<mdui-card clickable variant="elevated" style="width: 100%;height: 20%" href="http://git.hmtsai.cn">
|
|
||||||
<h3 style="text-align:center;">Hmtsai Gitea</h3>
|
|
||||||
<mdui-divider></mdui-divider>
|
|
||||||
<p style="text-align: center;">Read more</p>
|
|
||||||
</mdui-card>
|
|
||||||
|
|
||||||
<h2>Projects</h2>
|
<div class="card">
|
||||||
<mdui-divider></mdui-divider>
|
<span class="card-title">博客</span>
|
||||||
<div class="wcol"></div>
|
<span class="desc">让文思流于笔尖，写于纸上。</span>
|
||||||
<p style="text-align: center;">Nothing...</p>
|
<span class="link-span"><a href="https://blog.hmtsai.cn">前往 ></a></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br />
|
<div class="card">
|
||||||
<br />
|
<span class="card-title">Github 主页</span>
|
||||||
<br />
|
<span class="desc">让代码表述你思维的逻辑。</span>
|
||||||
<br />
|
<span class="link-span"><a href="https://github.com/hemingtsai/">前往 ></a></span>
|
||||||
<p style="text-align:auto;">This Page's Source Code in <a
|
</div>
|
||||||
href="http://git.hmtsai.cn/hmtsai/hmtsai-cn-index-page">Here</a>
|
|
||||||
</p>
|
<h2>个人项目</h2>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="card-title">Study Area CN</span>
|
||||||
|
<span class="desc">知识应该被共享。</span>
|
||||||
|
<span class="link-span"><a href="https://study-area.org.cn">前往 ></a></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="card-title">Single Text</span>
|
||||||
|
<span class="desc">一个 Typecho 主题。</span>
|
||||||
|
<span class="link-span"><a href="https://github.com/hemingtsai/single-text/">前往 ></a></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="card-title">Hmtsai主页</span>
|
||||||
|
<span class="desc">我即我。</span>
|
||||||
|
<span class="link-span"><a href="https://git.hmtsai.com/hmtsai/hmtsai-cn-homepage">前往 ></a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue