update website look and add a new blogpost

style.css

@@ -1,7 +1,5 @@
 /* root */
 :root {
-  --lr-width: 45%;
-
   /* mellow theme colors */
   --bg: #161617;
   --fg: #c9c7cd;
@@ -29,73 +27,33 @@
   --gray05: #757581;
   --gray06: #9998a8;
   --gray07: #c1c0d4;
+
+  /* site background color */
+  --site-bg: var(--bg-dark);
 }
 
 html, body {
   max-height: 100%;
-}
-
-/* desktop mode */
-@media only screen and (min-width: 100ch) {
-  #master {
-    width: 95ch;
-  }
-  div#master #left {
-    float: left;
-    text-align: left;
-    width: var(--lr-width);
-  }
-  div#master #right {
-    float: right;
-    text-align: right;
-    width: var(--lr-width);
-    ul {
-      text-align: left !important;
-    }
-  }
-  p#blogpreview a {
-    max-width: 30ch;
-  }
-}
-/* mobile mode */
-@media only screen and (max-width: 100ch) {
-  #master {
-    width: 85%;
-  }
-  p#blogpreview a {
-    max-width: 50vw;
-  }
-}
-
-html, body {
- display: flex;
- justify-content: center;
-}
-body[id=blog] {
-  background-color: var(--bg);
-  display: unset !important;
+  background-color: var(--site-bg);
   max-width: 80ch;
   margin: auto;
 }
-div#master header {
-  text-align: center;
-  font-size: 30px;
-}
-div#group hgroup {
-  text-align: center;
-}
-#font, p, ul, ol, h1, h2, h3, h4, h5 {
+#font, p, ul, ol, h1, h2, h3, h4, h5, table {
   font-family: sans-serif;
   color: white;
 }
-p#blogpreview a {
-  float: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+h1 {
+  font-size: 3em;
 }
-p#blogpreview span {
-  float: right;
+iframe[src="/blog"] {
+  width: 100%;
+  border: none;
+}
+table#bloglist {
+  width: 100%;
+  td.date {
+    text-align: right;
+  }
 }
 a {
   font-family: sans-serif;