diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 4f33688bd..5059ee5f3 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -44,7 +44,7 @@ export const Navigation = ({ theme, onUpdateTheme }) => {
             <a
               href={item.url}
               key={item.label}
-              className={`item ${slugify(item.label)}`}
+              className={`desktop-only item ${slugify(item.label)}`}
               target="_blank"
               rel="noreferrer"
             >
diff --git a/src/styles/base.css b/src/styles/base.css
index bbaa2d00e..43daefcef 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -227,16 +227,28 @@ img {
 }
 
 .segment {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .segment.small {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .segment.large {
   margin-top: 4rem;
   margin-bottom: 4rem;
 }
+
+@media screen and (min-width: 700px) {
+  .segment {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .segment.small {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+}
diff --git a/src/styles/layout.css b/src/styles/layout.css
index e636856ae..d8d7f3313 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -22,21 +22,32 @@ main {
 }
 
 .hero {
-  padding: 2.5rem 0 0.5rem;
+  padding: 1.5rem 0 0;
   position: relative;
   overflow: hidden;
   width: 100%;
 }
 
 .hero h1 {
-  font-size: 3rem;
+  font-size: 2rem;
   line-height: 1.1;
   font-weight: 700;
-  letter-spacing: -0.08rem;
+  letter-spacing: -0.06rem;
   color: var(--font-color-heading);
   margin: 0;
 }
 
+@media screen and (min-width: 700px) {
+  .hero {
+    padding: 2.5rem 0 0.5rem;
+  }
+
+  .hero h1 {
+    font-size: 3rem;
+    letter-spacing: -0.08rem;
+  }
+}
+
 p.hero-description {
   -webkit-font-smoothing: antialiased;
   margin-top: 1.5rem;
@@ -182,6 +193,7 @@ a.post h3 {
   color: var(--font-color-heading);
   font-weight: 600;
   font-family: var(--font-family-base);
+  line-height: 1.3;
 }
 
 a.post time {
@@ -397,12 +409,18 @@ a.category.active .count {
 .post-header h1 {
   margin-top: 0.25rem !important;
   margin-bottom: 0.75rem;
-  font-size: 2.6rem;
+  font-size: 2rem;
   letter-spacing: -0.07rem;
   font-weight: 700;
   line-height: 1.05;
 }
 
+@media screen and (min-width: 700px) {
+  .post-header h1 {
+    font-size: 2.6rem;
+  }
+}
+
 .post-header time {
   display: block;
   font-family: var(--font-family-monospace);
diff --git a/src/styles/navigation.css b/src/styles/navigation.css
index ae74b1389..e82c5127f 100644
--- a/src/styles/navigation.css
+++ b/src/styles/navigation.css
@@ -50,7 +50,7 @@
   border-radius: 0;
   border-top: 2px solid transparent;
   border-bottom: 2px solid transparent;
-  margin: 0 0.5rem;
+  margin: 0 0.4rem;
 }
 
 .navigation a.brand {
@@ -101,6 +101,11 @@ button.theme-toggle:hover {
 }
 
 @media screen and (min-width: 550px) {
+  .navigation a.item,
+  .navigation button.item {
+    margin: 0 0.5rem;
+  }
+
   .navigation a.brand {
     display: flex;
     align-items: center;