feat(style): update spacing/shadow/color

1 files changed, 25 insertions, 21 deletions

diff --git a/static/style.css b/static/style.css
index 8967805..8d7120a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -10,7 +10,7 @@ body {
   font-family: 'Yu Gothic', 'Meiryo', 'Noto Sans JP', sans-serif;
   color: #000;
   background-color: #fff;
-  line-height: 1.6;
+  line-height: 1.8;
   height: 100vh;
   margin: 0;
   padding: 0;
@@ -24,19 +24,21 @@ header.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 20%;
+  padding: 1rem 15%;
+  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
 }
 
 main {
-  max-width: 900px;
+  max-width: 800px;
   margin: 2rem auto;
   flex-grow: 1;
 }
 
-footer {
+body > footer {
   background-color: #f5f5f5;
   padding: 1rem 20%;
   text-align: center;
+  box-shadow: 0px -1px 5px rgba(0,0,0,0.1);
 }
 
 nav {
@@ -55,7 +57,7 @@ nav ul {
 }
 
 nav ul li {
-  margin: 0 1rem;
+  margin: 0 1.2rem;
 }
 
 nav ul li:first-child {
@@ -74,8 +76,8 @@ h1, h2, h3, h4, h5, h6 {
 
 p {
   font-size: 1rem;
-  line-height: 1.6;
-  margin-bottom: 1rem;
+  line-height: 1.8;
+  margin-bottom: 1.2rem;
 }
 
 a {
@@ -98,7 +100,7 @@ pre {
 
 blockquote {
   background-color: #f5f5f5;
-  border-left: 5px solid #000;
+  border-left: 5px solid #555;
   padding: 1rem;
   margin: 1rem 0;
 }
@@ -106,8 +108,8 @@ blockquote {
 .tag {
   display: inline-block;
   background-color: #f5f5f5;
-  padding: 2px 6px;
-  border-radius: 3px;
+  padding: 3px 8px;
+  border-radius: 5px;
   font-size: 0.9rem;
   margin-right: 5px;
   margin-bottom: 5px;
@@ -119,10 +121,10 @@ blockquote {
 
 code {
   background-color: #f5f5f5;
-  padding: 1px 4px;
+  padding: 2px 5px;
   font-family: 'Courier New', Courier, monospace;
   font-size: 0.9rem;
-  border-radius: 2px;
+  border-radius: 3px;
 }
 
 pre code {
@@ -134,7 +136,7 @@ li.revision {
 }
 
 h1 {
-  font-size: 2.0rem;
+  font-size: 2.2rem;
 }
 
 .post-content h2,
@@ -142,8 +144,8 @@ h1 {
 .post-content h4,
 .post-content h5,
 .post-content h6 {
-  border-bottom: 1px solid #000;
-  margin-bottom: 1rem;
+  border-bottom: 1px solid #555;
+  margin-bottom: 1.2rem;
 }
 
 .post-content h2 a,
@@ -157,44 +159,45 @@ h1 {
 .post-content h2:before {
   content: "#";
   padding-right: 0.3rem;
-  color: #333;
+  color: #555;
   font-weight: bold;
 }
 
 .post-content h3:before {
   content: "##";
   padding-right: 0.3rem;
-  color: #333;
+  color: #555;
   font-weight: bold;
 }
 
 .post-content h4:before {
   content: "###";
   padding-right: 0.3rem;
-  color: #333;
+  color: #555;
   font-weight: bold;
 }
 
 .post-content h5:before {
   content: "####";
   padding-right: 0.3rem;
-  color: #333;
+  color: #555;
   font-weight: bold;
 }
 
 .post-content h6:before {
   content: "#####";
   padding-right: 0.3rem;
-  color: #333;
+  color: #555;
   font-weight: bold;
 }
 
 .post-entry {
-  min-width: calc(min(900px, 100vw - 2rem));
+  min-width: calc(min(800px, 100vw - 2rem));
   background-color: #f5f5f5;
   border-radius: 10px;
   padding: 1.5rem;
   margin: 2rem 0;
+  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
 }
 
 .post-entry header {
@@ -225,6 +228,7 @@ h1 {
   border-radius: 5px;
   padding: 1rem;
   margin: 1rem 0;
+  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
 }
 
 .admonition-label {