added index

2025-08-12 03:06:52 +08:00
parent 246abb2d54
commit 20e8de1b70
25 changed files with 699 additions and 0 deletions
--- a/blog/css/blog.css
+++ b/blog/css/blog.css
@@ -0,0 +1,168 @@
+body {
+  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
+  margin: 0;
+  color: white;
+  background-color: #111;
+  text-align: left;
+}
+
+.mid {
+  width: 650px;
+  margin: auto;
+  position: relative;
+}
+
+@media screen and (max-width: 650px) {
+  .mid {
+    width: 100%;
+  }
+}
+
+h1 {
+  text-align: left;
+  font-size: 3.5rem;
+}
+
+h2 {
+  text-align: left;
+  font-size: 2.8rem;
+}
+
+hr {
+  width: 650px;
+  color: white;
+}
+
+@media screen and (max-width: 650px) {
+  hr {   
+    width: 100%;
+  }
+}
+
+p {
+  font-size: 1.2rem;
+}
+
+a {
+  text-decoration: none;
+  font-size: 1.2rem;
+}
+
+ /* unvisited link */
+a:link {
+  color: white;
+}
+
+/* visited link */
+a:visited {
+  color: white;
+}
+
+/* mouse over link */
+a:hover {
+  color: #62bd69;
+}
+
+/* selected link */
+a:active {
+  color: #62bd69;
+}
+
+ul {
+  font-size: 1.2rem;
+  text-align: left;
+  list-style-position: outside;
+}
+
+.movie-container {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 10px;
+  width: 674px;
+  margin:20px auto 20px auto;
+  position: relative;
+  background-color: #222;
+}
+
+@media screen and (max-width: 650px) {
+  .movie-container {
+    width: 100%;
+  }
+}
+
+.poster {
+  flex: 0 0 auto;
+  margin-right: 20px;
+}
+
+.poster img {
+  width: 200px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.review {
+  flex: 1 1 auto;
+}
+
+.review h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.review p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.footer {
+  margin: auto;
+  width: 650px;
+  background: #222;
+  padding: 2rem;
+}
+
+@media screen and (max-width: 650px) {
+  .footer {   
+    width: 100%;
+  }
+}
+
+.social-links {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  font-size: 1.2rem;
+}
+
+.social-links a {
+  color: white;
+  margin: 0px 5px 0px 5px;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.social-links p {
+  margin: 0px 5px 0px 5px;
+}
+
+.social-links a:nth-child(2):hover {
+  color:#d1479e;
+}
+
+.social-links a:nth-child(3):hover {
+  color:#4ba2c4;
+}
+
+.social-links a:nth-child(4):hover {
+  color:#1DB954;
+}
+
+.social-links a:nth-child(5):hover {
+  color:#d1c649;
+}