新增博客页面

bujijam · Aug 31, 2024 · 6ca66f8 · 6ca66f8
1 parent c075ceb
commit 6ca66f8
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 1 deletion.
diff --git a/blog/blog.html b/blog/blog.html
@@ -3,10 +3,38 @@
 
 <head>
     <meta charset="UTF-8" />
-    <title>title</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+    <meta name="keywords" content="bujijam, bujijam的个人主页, bujijam.github.io, bujijam的博客">
+    <meta name="description" content="bujijam的博客">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.7.0/hint.min.css">
+    <link rel="icon" href="https://s1.ax1x.com/2023/04/16/p998LGQ.png">
+    <link rel="stylesheet" href="./style.css" type="text/css">
+    <title>bujijam的博客</title>
 </head>
 
 <body>
+    <h1 id="title">bujijam的博客</h1>
+    <p id="nav">
+        <a>首页</a> | <a>关于</a>
+    </p>
+    <article class="card">
+        <div>
+            <h1>这是标题</h1>
+            <p>这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p>
+            <p>yyyy-mm-dd</p>
+            <details>
+                <summary>阅读全文</summary>
+                <p>这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文
+                </p>
+                <p>是全文哦！</p>
+                <h2>是二级标题哦！</h2>
+                <p>文字！</p>
+            </details>
+            <hr>
+        </div>
+
+    </article>
 
 </body>
 

diff --git a/blog/style.css b/blog/style.css
@@ -0,0 +1,74 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+    /* overflow-y: hidden;
+    overflow-x: hidden */
+}
+
+body {
+    font-family: Consolas, 'Courier New', 'Microsoft YaHei', monospace;
+    background: radial-gradient(circle at 22% 11%, rgb(57 143 112 / 20%), hsla(0, 0%, 100%, 0) 35%), radial-gradient(circle at 82% 25%, rgb(35 114 177 / 18%), hsla(0, 0%, 100%, 0) 50%), radial-gradient(circle at 25% 61%, rgb(216 122 112 / 28%), hsla(0, 0%, 100%, 0) 71%);
+    max-width: 50em;
+    margin: auto;
+    height: auto;
+    font-family: Consolas, 'Courier New', 'Microsoft YaHei', monospace;
+}
+
+#title {
+    text-align: center;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    color: rgb(105, 142, 173);
+    border-bottom: 0px;
+}
+
+#nav {
+    text-align: center;
+}
+
+h2, h3, h4, h5, h6 {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid #b4cfd7;
+}
+
+p {
+    margin: 1em;
+    word-break: break-all;
+}
+
+a {
+    text-decoration: none;
+    color: #2f4f4f;
+    cursor: pointer;
+}
+
+.card {
+    height: auto;
+    background-color: aliceblue;
+    transition: box-shadow 0.2s;
+    margin: 1em;
+    border-radius: 1em 1em 1em 1em;
+    padding: 1.5em;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 3px 10px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    height: 100%;
+    border: 1em;
+    padding-top: 2em;
+    padding-left: 1em;
+    padding-right: 1em;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+/* .card:hover {
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 3px 10px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+img {
+    height: 8em;
+    border-radius: 100%;
+} */