更换字体，重构整个项目
This commit is contained in:
parent
79cd26cf44
commit
ba994a6e9f
101
index.css
101
index.css
|
|
@ -1,12 +1,95 @@
|
|||
*{
|
||||
padding:0;
|
||||
margin:0;
|
||||
color:#fff;
|
||||
@import url("https://chinese-fonts-cdn.deno.dev/packages/jhlst/dist/京華老宋体v1_007/result.css");
|
||||
@import url("https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css");
|
||||
|
||||
:root {
|
||||
--font: "Source Han Serif CN VF";
|
||||
--title-font: "KingHwa_OldSong";
|
||||
--font-scale: 1em;
|
||||
}
|
||||
|
||||
#naviBar{
|
||||
height:55px;
|
||||
width:100%;
|
||||
background-color: #3f3f5f;
|
||||
display: flex;
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
/* 背景颜色 */
|
||||
--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>
|
||||
<html lang="zh-CN" class="mdui-theme-auto" style="height: 100%;">
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
|
||||
<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>
|
||||
<link rel="stylesheet" href="./index.css" />
|
||||
<title>Hmtsai的小站</title>
|
||||
</head>
|
||||
|
||||
<body style="height: 100%;">
|
||||
<mdui-top-app-bar style="position: relative;">
|
||||
<mdui-top-app-bar-title>Hmtsai's Website</mdui-top-app-bar-title>
|
||||
<div style="flex-grow: 1"></div>
|
||||
<mdui-button variant="text" href="http://blog.hmtsai.cn">Blog</mdui-button>
|
||||
<mdui-button variant="text" href="http://git.hmtsai.cn">Gitea</mdui-button>
|
||||
</mdui-top-app-bar>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Hmtsai的小站</h1>
|
||||
<span class="desc">Always think yourself.<span>
|
||||
</div>
|
||||
|
||||
<h2>Websites</h2>
|
||||
<div class="wcol"></div>
|
||||
<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>
|
||||
<div class="context">
|
||||
<h2>一些链接</h2>
|
||||
|
||||
<h2>Projects</h2>
|
||||
<mdui-divider></mdui-divider>
|
||||
<div class="wcol"></div>
|
||||
<p style="text-align: center;">Nothing...</p>
|
||||
<div class="card">
|
||||
<span class="card-title">博客</span>
|
||||
<span class="desc">让文思流于笔尖，写于纸上。</span>
|
||||
<span class="link-span"><a href="https://blog.hmtsai.cn">前往 ></a></span>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<p style="text-align:auto;">This Page's Source Code in <a
|
||||
href="http://git.hmtsai.cn/hmtsai/hmtsai-cn-index-page">Here</a>
|
||||
</p>
|
||||
<div class="card">
|
||||
<span class="card-title">Github 主页</span>
|
||||
<span class="desc">让代码表述你思维的逻辑。</span>
|
||||
<span class="link-span"><a href="https://github.com/hemingtsai/">前往 ></a></span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue