feat: work on style

public/css/index.css

@@ -9,14 +9,16 @@
   --color-gray-20: #e0e0e0;
   --color-gray-50: #C0C0C0;
   --color-gray-90: #333;
+  --color-green-1: #004953;
+  --color-green-2: #57c183;
 
   --background-color: #fff;
 
   --text-color: rgba(0,0,10,.8);
-  --text-color-secondary: #004953;
-  --text-color-tertiary: #57c183;
-  --text-color-link: #004953;
-  --text-color-link-active: #004953;
+  --text-color-secondary: var(--color-green-1);
+  --text-color-tertiary: var(--color-green-2);
+  --text-color-link: var(--color-green-1);
+  --text-color-link-active: var(--color-green-1);
 }
 
 /*@media (prefers-color-scheme: dark) {*/
@@ -48,12 +50,48 @@ body {
   color: var(--text-color);
   background-color: var(--background-color);
 }
-html {
-  overflow-y: scroll;
-}
+
 main {
-  max-width: 40em;
+  max-width: 1200px;
   margin: 0 auto;
+
+  display: flex;
+}
+.main-content {
+  margin: auto;
+  width: 1200px;
+}
+
+.right-side {
+  position: -webkit-sticky; /* for Safari */
+  position: sticky;
+  top: 5rem;
+  align-self: flex-start;
+  width: 300px;
+  padding-left: 60px;
+}
+
+.right-side .title {
+  color: var(--text-color-secondary);
+  font-weight: 700;
+}
+
+.right-side .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.right-side .links {
+  padding: 0;
+  list-style: none;
+}
+
+.right-side .tags,
+.right-side .links {
+  padding: 0;
+  margin: 12px 0 23px 0;
+  list-style: none;
 }
 
 h1 {
@@ -73,9 +111,6 @@ h2 {
   margin-top: 0;
 }
 
-p:last-child {
-  margin-bottom: 0;
-}
 p {
   line-height: 1.5;
   margin: 1.5em 0;
@@ -93,7 +128,7 @@ a:hover {
 }
 
 main {
-  padding: 8rem 1rem 1rem;
+  padding: 8rem 1rem 4rem 1rem;
 }
 main :first-child {
   margin-top: 0;
@@ -131,11 +166,14 @@ code {
   word-break: break-all;
 }
 
+hr {
+  margin: 4rem 15vw;
+}
+
 /* Header */
 .main-header {
   background: #fff;
   box-shadow: 0 2px 8px rgba(0,0,0,.25);
-  position: fixed;
   width: 100%;
   z-index: 1000;
   height: 60px;
@@ -157,36 +195,20 @@ code {
   flex-grow: 1;
 }
 
-.nav {
-  display: flex;
-  flex-grow: 1;
-  align-items: baseline;
-  justify-content: space-around;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-/* Nav */
-.nav-item {
-  display: inline-block;
-  font-weight: 900;
-  letter-spacing: .02em;
-  margin: 0;
-  padding: 0;
-}
-.nav-item a[href]:not(:hover) {
-  text-decoration: none;
-}
-.nav-item-active {
-  text-decoration: underline;
-}
-
 /*!* Posts list *!*/
-/*.postlist {*/
-/*  list-style: none;*/
-/*  padding: 0;*/
-/*  padding-left: 1.5rem;*/
-/*}*/
+.post-list {
+  list-style: none;
+  padding: 5rem 0;
+}
+.post-list li {
+  display: flex;
+  padding: 15px 0;
+  margin: 2px;
+  border-bottom: 2px solid var(--text-color-secondary);
+}
+.post-list li a {
+  flex-grow: 1;
+}
 .postlist-item {
   margin-bottom: 5rem;
 }
@@ -211,7 +233,6 @@ code {
   background: var(--text-color-tertiary);
   padding: 4px;
   font-size: 0.8125em; /* 13px /16 */
-  /*font-weight: 600;*/
   border-radius: 5px;
   text-decoration: none;
 }
@@ -224,6 +245,7 @@ code {
   padding: 0;
   margin: 0;
 }
+.post-list time,
 .post-metadata time {
   margin-right: 1em;
   font-size: 0.8125em; /* 13px /16 */
@@ -232,8 +254,21 @@ code {
 .post-metadata li:first-child {
   flex-grow: 1;
 }
+.post-nav ul {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+  padding: 0;
+  margin: 2rem 1rem 0 0;
+}
+/*.post-nav ul li.previous {*/
+/*  list-style: '<';*/
+/*}*/
+/*.post-nav ul li.next {*/
+/*  list-style: '>';*/
+/*}*/
 
-  /* Direct Links / Markdown Headers */
+/* Direct Links / Markdown Headers */
 .direct-link {
   font-family: sans-serif;
   text-decoration: none;
@@ -247,3 +282,81 @@ a[href].direct-link:focus,
 :hover > a[href].direct-link {
   color: #aaa;
 }
+
+.main-footer {
+  align-items: center;
+  background: var(--color-green-1);
+  display: flex;
+  height: 300px;
+  padding: 0 103px;
+}
+
+.main-footer,
+.main-footer a {
+  color: #fff;
+}
+
+.footer-contact {
+  display: flex;
+  flex: 0 20%;
+  flex-direction: column;
+  font-size: 1em;
+  line-height: 1.5em;
+}
+
+.footer-contact p {
+  margin: 0;
+  padding: 0;
+}
+
+.footer-contact-title {
+  color: #fff;
+  font-size: 1.2em;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: .04em;
+  line-height: 1.7em;
+  text-transform: uppercase;
+}
+
+.footer-contact div:last-child {
+  padding-top: 23px;
+}
+
+.footer-center {
+  flex: 0 60%;
+  text-align: center;
+}
+
+@media only screen and (max-width: 1200px) {
+  main {
+    max-width: 100%;
+    flex-direction: column;
+    padding-top: 1rem;
+  }
+  .main-content{
+    max-width: 100%;
+  }
+  .right-side {
+    width: 100%;
+    padding-left: 0;
+    padding-top: 5rem;
+  }
+  .main-footer {
+    flex-direction: column-reverse;
+    height: auto;
+    padding: 23px 0;
+  }
+  .post-nav ul {
+    flex-direction: column;
+  }
+  .footer-contact {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 23px;
+    width: 100%;
+  }
+  .footer-center {
+    padding: 0 23px 23px;
+  }
+}