Fixing up

taniarascia · Jul 3, 2022 · 4d2128e · 4d2128e
1 parent 2284bcb
commit 4d2128e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;