feat(blog/style): update site design

1 files changed, 19 insertions, 18 deletions

diff --git a/vhosts/blog/public/style.css b/vhosts/blog/public/style.css
index 1dc45a72..fe1b7d4f 100644
--- a/vhosts/blog/public/style.css
+++ b/vhosts/blog/public/style.css
@@ -20,12 +20,11 @@ body {
 }
 
 header.header {
-  background-color: #f5f5f5;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
   padding: 1rem 15%;
-  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
+  border-bottom: 2px solid #000;
 }
 
 main {
@@ -35,14 +34,21 @@ main {
 }
 
 body > footer {
-  background-color: #f5f5f5;
   padding: 1rem 20%;
   text-align: center;
-  box-shadow: 0px -1px 5px rgba(0,0,0,0.1);
+  border-top: 2px solid #000;
 }
 
-nav {
+.site-logo {
+  font-size: 1.5rem;
   font-weight: bold;
+}
+
+.site-logo a {
+  border: none;
+}
+
+nav {
   padding: 0;
   margin: 0;
   width: 100%;
@@ -54,20 +60,17 @@ nav ul {
   margin: 0;
   display: flex;
   flex-direction: row;
+  justify-content: center;
 }
 
 nav ul li {
-  font-size: 1.25rem;
+  text-transform: uppercase;
+  font-size: 1.1rem;
   margin: 0 1rem;
   display: flex;
   align-items: center;
 }
 
-nav ul li:first-child {
-  font-size: 1.5rem;
-  margin-right: auto;
-}
-
 nav ul li a {
   border: none;
   color: #000;
@@ -110,12 +113,12 @@ blockquote {
 
 .tag {
   display: inline-block;
-  background-color: #f5f5f5;
   padding: 3px 8px;
   border-radius: 5px;
   font-size: 0.9rem;
   margin-right: 5px;
   margin-bottom: 5px;
+  border: 1px solid #000;
 }
 
 .tag a {
@@ -196,11 +199,10 @@ h1 {
 
 .post-entry {
   min-width: calc(min(800px, 100vw - 4rem));
-  background-color: #f5f5f5;
   border-radius: 10px;
   padding: 1.5rem;
   margin: 2rem 0;
-  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
+  border: 2px solid #000;
 }
 
 .post-entry header {
@@ -216,7 +218,6 @@ h1 {
 }
 
 .post-entry footer {
-  background-color: #f5f5f5;
   padding: 0;
   text-align: left;
   color: #666;
@@ -256,12 +257,12 @@ h1 {
   }
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 768px) {
   header.header {
     padding: 1rem 0;
   }
 
-  nav ul li:not(:first-child) {
+  nav ul {
     display: none;
   }
 }