Style corrections

_includes/assets/css/inline.css

@@ -70,7 +70,7 @@ main.new-main {
   max-width: var(--section-max-width);
   margin-top: 110px;
   padding: 50px var(--section-side-padding);
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
   border-radius: var(--radius-large);
 }
 
@@ -87,7 +87,7 @@ main.new-main {
 }
 
 .new-main a {
-  color: #F16C12;
+  color: #f16c12;
   font-weight: 700;
 }
 
@@ -131,7 +131,7 @@ main.new-main {
   width: 100%;
   margin-bottom: 40px;
   background: transparent;
-  border-bottom: 1px solid #A5A5A5;
+  border-bottom: 1px solid #a5a5a5;
   padding-left: 0;
 }
 
@@ -157,20 +157,20 @@ main.new-main {
   font-weight: 600;
   font-size: 16px;
   width: 100%;
-  background-color: #2C2C2C;
+  background-color: #2c2c2c;
   color: white;
   padding: 16px 0;
   border-radius: 8px;
 }
 
 @media (hover: hover) {
   .new-main .contact-link-icon:hover svg {
-    color: #F16C12;
+    color: #f16c12;
   }
 
   .new-main .contact-form-btn:hover {
-    background-color: #F16C12;
-    color: #2C2C2C;
+    background-color: #f16c12;
+    color: #2c2c2c;
   }
 }
 
@@ -206,7 +206,7 @@ main.new-main {
   .new-main .contact-wrap {
     padding: 60px 36px;
   }
-  
+
   .new-main p {
     font-size: 19px;
   }
@@ -581,43 +581,59 @@ li.selected {
   display: none;
 }
 
-/* blog page */
-section.blog {
+/* blog pages */
+section.blog,
+section.authors .author {
   font-family: "Geist", sans-serif;
   font-style: normal;
   color: #2c2c2c;
 }
 
+section.authors {
+  margin-top: 60px;
+}
+
 .blog .page-title {
   font-size: 52px;
   line-height: 57px;
   font-weight: 650;
-  letter-spacing: -0.04em;
+  letter-spacing: -0.02em;
   margin: 50px 0;
 }
 
 .blog-post {
   margin-top: 40px;
   padding-bottom: 40px;
-  border-bottom: 1px solid #E0DEDE;
+  border-bottom: 1px solid #e0dede;
 }
 
 .blog-post:last-of-type {
   border-bottom: unset;
 }
 
-.blog .blog-post-title {
+.blog .blog-post-title,
+.authors .blog-authors {
   font-size: 34px;
   line-height: 44px;
   font-weight: 650;
-  letter-spacing: -0.04em;
+  letter-spacing: -0.02em;
   margin-bottom: 12px;
 }
 
-.blog .blog-post-title a {
+.blog-authors {
+  margin: 50px 0 50px 0;
+}
+
+.blog .blog-post-title a,
+.authors .blog-authors .author {
   color: #2c2c2c;
 }
 
+.blog .blog-post-title a:hover,
+.authors .blog-authors:hover .author {
+  color: #f16c12 !important;
+}
+
 .blog .blog-post-text {
   font-size: 21px;
   line-height: 29px;
@@ -650,18 +666,18 @@ section.blog {
 }
 
 .blog .tags .tag {
-  color: #F16C12;
+  color: #f16c12;
 }
 
 .blog .tags .tag:hover {
-  color: #2C2C2C;
+  color: #2c2c2c;
   text-decoration: underline;
 }
 
 .blog .tags .tag:before {
-  content: '#';
+  content: "#";
 }
-/* blog page ends */
+/* blog pages ends */
 
 /* blog post page */
 [data-current="post"] article.post {
@@ -806,9 +822,9 @@ article.post pre {
   background: #2d2d2d;
 }
 
-article.post p > code, 
+article.post p > code,
 article.post a > code,
-article.post li > code  {
+article.post li > code {
   background-color: #f0f0f0;
   padding: 2px 8px;
   border-radius: 4px;
@@ -860,20 +876,109 @@ article.post nav {
   padding-top: unset;
   padding-left: unset;
 }
+
+@media (max-width: 770px) {
+  article.post h1 {
+    font-size: 8vw;
+    line-height: 1.2;
+  }
+}
 /* blog post page ends */
 
-/* new footer */
-footer {
+/* blog back navigation */
+.back-nav {
+  margin-top: 20px;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.authors-nav {
+  margin-top: 60px;
+}
+
+/* header */
+header nav {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 30px;
   width: 100%;
-  margin-top: auto;
-  padding-left: var(--section-side-padding);
-  padding-right: var(--section-side-padding);
+  height: 70px;
+  padding:0 38px;
+  color: #2c2c2c;
+}
+
+header nav .text-buttons:hover {
+  opacity: 0.5;
 }
 
-[data-current="post"] footer {
+.header-logo {
+  display: inline-block;
+  width: 110px;
+  height: 30px;
+  background-image: url('/images/fp-logo.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-right: auto;
+}
+
+.header-link-icons {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.header-discord,
+.header-github {
+  width: 30px;
+  height: 30px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.header-discord {
+  background-image: url('/images/discord-icon.svg');
+}
+
+.header-github {
+  background-image: url('/images/github-icon.svg');
+}
+
+.text-buttons {
+  font-family: 'Geist', sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+@media (max-width: 770px) {
+  header nav {
+    padding: 0 20px;
+  }
+}
+
+@media (max-width: 550px) {
+  header nav {
+    gap: 20px;
+  }
+
+  .header-logo {
+    width: 100px;
+    height: 27px;
+    transform: translateY(-4px);
+  }
+}
+
+/* new footer */
+footer {
+  width: 100%;
   max-width: 1000px;
+  margin-top: 60px;
   margin-left: auto;
   margin-right: auto;
+  padding-left: var(--section-side-padding);
+  padding-right: var(--section-side-padding);
+  color: #2c2c2c;
 }
 
 .footer-links {
@@ -882,14 +987,14 @@ footer {
   display: -ms-flexbox;
   display: flex;
   -webkit-column-gap: 56px;
-     -moz-column-gap: 56px;
-          column-gap: 56px;
+  -moz-column-gap: 56px;
+  column-gap: 56px;
   row-gap: 20px;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .footer-links .text-buttons:hover {

_includes/components/new-nav.njk

@@ -0,0 +1,20 @@
+<!-- Menu -->
+<nav>
+  <a class="header-logo" href="/" rel="history"></a>
+  <a class="text-buttons" href="https://use-fireproof.com/docs/welcome/" rel="noopener noreferrer">Docs</a>
+  <a class="text-buttons" href="/blog/" rel="history">Blog</a>
+  <div class="header-link-icons">
+    <a
+      class="header-discord"
+      href="https://discord.gg/DbSXGqvxFc"
+      rel="noopener noreferrer"
+      target="_blank"
+    ></a>
+    <a
+      class="header-github"
+      href="https://github.com/fireproof-storage/fireproof"
+      rel="noopener noreferrer"
+      target="_blank"
+    ></a>
+  </div>
+</nav>

_includes/layouts/base.njk

@@ -3,8 +3,8 @@
 
 	{% include "components/head.njk" %}
 	<body class="">
-		<header class="pt-3 pb-1 px-5 flex items-center justify-between">
-			{% include "components/nav.njk" %}
+		<header class="">
+			{% include "components/new-nav.njk" %}
 		</header>
 		<main class="container mx-auto px-4 sm:px-6 md:px-8">
 			<div class="w-full lg:w-3/4 xl:w-2/3 mx-auto">

_includes/layouts/documentation.njk

@@ -19,6 +19,6 @@ section: documentation
 
 
 <nav class="px-12 pt-4 pb-10">
-  <a href="{{ '/developer/' | url }}">← more documentation</a>
+  <a href="{{ '/developer/' | url }}" class="back-nav">← more documentation</a>
 </nav>
 

_includes/layouts/new-base.njk

@@ -3,8 +3,8 @@
 
 	{% include "components/head.njk" %}
 	<body class="base-body">
-		<header class="pt-3 pb-1 px-5 flex items-center justify-between">
-			{% include "components/nav.njk" %}
+		<header>
+			{% include "components/new-nav.njk" %}
 		</header>
 		<main class="new-main">
 				{{ layoutContent | safe }}

_includes/layouts/new-default.njk

@@ -0,0 +1,11 @@
+---
+layout: layouts/new-base.njk
+---
+{# {% include "components/npm.njk" %} #}
+
+<article class="post {{ newpost }} feature-grid pt-10 px-4 text-xl">
+  <h1 class="text-4xl font-bold my-12">{{ title }}</h1>
+{{ layoutContent | safe }}
+</article>
+
+{# {% include "components/cta.njk" %} #}

_includes/layouts/post.njk

@@ -23,6 +23,6 @@ section: post
 
 
 <nav class="px-12 pt-4 pb-10">
-  <a href="{{ '/blog/' | url }}">← more posts</a>
+  <a href="{{ '/blog/' | url }}" class="back-nav">← more posts</a>
 </nav>