rework website view & remove unused images (all of them)

style.css

@@ -1,43 +1,65 @@
+:root {
+  --lr-width: 45%;
+}
+
+/* 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);
+  }
+  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 {
-  background-color: #141414;
-  display: flex;
-  justify-content: center;
+ display: flex;
+ justify-content: center;
 }
-.master {
-  position: absolute;
-  width: 50%;
-}
-header {
+div#master header {
   text-align: center;
-  font-size: 3.5vh;
+  font-size: 30px;
 }
-#profile {
-  vertical-align: middle;
-  margin: 10vw;
+div#group hgroup {
+  text-align: center;
 }
-#font, p {
+#font, p, ul, ol {
   font-family: sans-serif;
   color: white;
 }
-#left {
+p#blogpreview a {
   float: left;
-  text-align: left;
-  width: 50%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-#right {
+p#blogpreview span {
   float: right;
-  text-align: right;
-  width: 50%;
 }
 a {
   font-family: sans-serif;
   text-decoration: none;
-  color: #ED8182;
+  color: #ea83a5;
 }
 a:hover, a:active {
   font-style: italic;
 }
-#svg {
-  max-height: .8em;
-	max-width: 1em;
-}