Redesign

.gitignore

@@ -0,0 +1 @@
+.DS_STORE

index.html

@@ -24,37 +24,76 @@ div#outer {
 }
 div#inner {
     display: table-cell;
-    text-align: center;
     vertical-align: middle;
 }
 div#container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-    min-width: 800px;
-    min-height: 580px;
-}
-img {
-    width: 500px;
-    height: 500px;
-    margin: 30px 0;
-}
-p#header {
-    font-family: sans-serif;
-    font-size: 28px;
-    color: #323C46;
-    text-align: center;
-    line-height: 36px;
-    margin-top: 0;
-    margin-bottom: 12px;
-}
-p#paragraph {
-    font-family: sans-serif;
-    font-size: 13px;
-    color: #323C46;
-    text-align: center;
-    line-height: 20px;
+	width: 28rem;
     margin: 0 auto;
+    
+}
+
+.dot {
+    display: table-cell;
+    width: 1.4rem;
+    height: 1.4rem;
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding-bottom: 1rem;
+    padding-left: 4rem;
+    background-size: 1.4rem;
+    background-position-x: right;
+}
+
+.dot.internal {
+    /*background-image: url("/web_images/g4.png");*/
+    background-image: url("file:///Users/yehor/src/default-www/web_images/g4.png");
+}
+
+.dot.m {
+    /*background-image: url("/web_images/m.png");*/
+    background-image: url("file:///Users/yehor/src/default-www/web_images/m.png");
+}
+
+p#header1 {
+    font-family: sans-serif;
+    font-size: 2.5rem;
+    color: #323C46;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+p#header2 {
+    font-family: sans-serif;
+    font-size: 1.2rem;
+    color: #a0a0a0ff;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+}
+.line {
+    display: table-row;
+    font-family: sans-serif;
+    font-size: 1.5rem;
+    color: #323C46;
+    padding-bottom: 0.3rem;
+}
+
+.link {
+    display: table-cell;
+    padding-left: 0.4rem;
+    color: #a0a0a0ff;
+    text-decoration: none;
+}
+
+.link:visited {
+    color: #a0a0a0ff;
+    text-decoration: none;
+}
+
+.link:hover {
+    color: #323C46;
+    text-decoration: none;
 }
 
 </style>
@@ -63,11 +102,11 @@ p#paragraph {
     <div id="outer">
         <div id="inner">
             <div id="container">
-				<div>
-                <img src="web_images/logo_500x500.png"/>
-                <p id="header">Nothing here, but there is <a href="https://blog.randomplace.online">a BLOG!</a>. And <a href="https://git.randomplace.online">a git</a>.</p>
-                <p id="paragraph">Thanks for visiting.</p>
-				</div>
+                <p id="header1">Random Place Online</p>
+                <p id="header2">by Yehor Vialov</p>
+                <div class="line"><div class="dot internal"></div><a class="link" href="https://blog.randomplace.online">Blog</a></div>
+                <div class="line"><div class="dot internal"></div><a class="link" href="https://git.randomplace.online">Git</a></div>
+                <div class="line"><div class="dot m"></div><a rel="me" class="link" href="https://techhub.social/@estevez">Mastodon</a></div>
 			</div>
         </div>
     </div>