add blog and archive

style.css

@@ -33,12 +33,17 @@ a {
     color: light-dark(black, white);
 }
 
-:not(p) > a {
-    text-decoration: none;
+a {
+  text-decoration: none;
+  font-weight: bold;
 }
 
-:not(p) > a:hover {
-    text-decoration: underline;
+a:hover {
+  text-decoration: underline;
+}
+
+:not(h2) > a {
+    color: light-dark(darkslategrey, beige)
 }
 
 p {
@@ -55,14 +60,13 @@ p {
 }
 
 #contact-info-container {
-    min-height: 57px;
-    max-width: 256px;
+    min-height: 55px;
 }
 
 .cover {
     cursor: pointer;
-    background: light-dark(white, #181825);
-    color: light-dark(white, #181825);
+    color: light-dark(whitesmoke, black);
+    border: solid 1px light-dark(black, whitesmoke);
     user-select: none;
 }
 
@@ -99,6 +103,20 @@ p {
     background: light-dark(black, whitesmoke);
 }
 
+#index {
+  list-style-type: none;
+  margin: 8px 0 0 0;
+  padding: 0;
+}
+
+#index > li {
+  display: inline;
+  border: solid light-dark(black, whitesmoke);
+  border-width: 0 1px;
+  margin: 0;
+  padding: 0 8px;
+}
+
 #title-1 > .h1-container {
     padding: 16px;
     background: light-dark(black, whitesmoke);
@@ -149,3 +167,33 @@ section {
 .margin-8px-top {
     margin-top: 8px;
 }
+
+.blog-item {
+  width: calc(100% - 18px);
+  overflow: hidden;
+  cursor: pointer;
+  border: solid 1px grey;
+  position: relative;
+  z-index: 1;
+  padding: 8px;
+}
+
+.blog-item > img {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  max-width: calc(50% - 16px);
+  max-height: calc(100% - 16px);
+  z-index: -1;
+}
+
+.blog-item > h3, .blog-item > p {
+  max-width: 70%;
+  background: light-dark(#ffffff88, #00000088);
+  box-shadow: 8px 0 8px light-dark(#ffffff88, #00000088);
+  margin: 0;
+}
+
+.blog-item > p {
+  font-weight: normal;
+}