design: Increase text density and reduce font size on mobile

awendland · Dec 23, 2022 · 70035db · 70035db
1 parent f26981b
commit 70035db
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 36 deletions.
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -57,7 +57,7 @@ class Layout extends React.Component {
         style={{
           marginLeft: 'auto',
           marginRight: 'auto',
-          maxWidth: rhythm(24),
+          maxWidth: rhythm(28),
           padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
         }}
       >

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -6,6 +6,7 @@ import LongTermNotesSnippet from '../components/long-term-notes-snippet'
 import Layout from '../components/layout'
 import SEO from '../components/seo'
 import { rhythm } from '../utils/typography'
+import * as styles from './index.module.css'
 
 const TimelineLinkEntry = ({
   isoDate,
@@ -16,25 +17,11 @@ const TimelineLinkEntry = ({
   emoji = '',
 }) => {
   return (
-    <div
-      key={String(isoDate) + title}
-      style={{
-        marginBottom: rhythm(0.25),
-        display: 'flex',
-        alignItems: 'flex-end',
-      }}
-    >
+    <div key={String(isoDate) + title} className={styles.timelineLinkEntry}>
       <time
         datetime={isoDate}
         title={isoDate}
-        style={{
-          display: `inline-block`,
-          width: rhythm(3.25),
-          flexShrink: '0',
-          opacity: `0.6`,
-          fontSize: rhythm(0.45),
-          lineHeight: rhythm(1),
-        }}
+        className={styles.timelineLinkEntry_time}
       >
         {humanDate}
       </time>
@@ -49,27 +36,11 @@ const TimelineLinkEntry = ({
         {emoji}
       </span>
       {slug ? (
-        <Link
-          to={slug}
-          style={{
-            boxShadow: 'none',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-          }}
-        >
+        <Link to={slug} className={styles.timelineLinkEntry_title}>
           {title}
         </Link>
       ) : (
-        <a
-          href={url}
-          style={{
-            boxShadow: 'none',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-          }}
-        >
+        <a href={url} className={styles.timelineLinkEntry_title}>
           {title}
         </a>
       )}

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -0,0 +1,39 @@
+@media screen and not (min-width: 768px) {
+  .timelineLinkEntry {
+    margin-bottom: calc(0.25 * var(--rhythm));
+  }
+
+  .timelineLinkEntry_time {
+    margin-right: 1em;
+    opacity: 0.6;
+    font-size: 0.8em;
+    line-height: calc(1 * var(--rhythm));
+  }
+
+  .timelineLinkEntry_title {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .timelineLinkEntry {
+    margin-bottom: calc(0.35 * var(--rhythm));
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .timelineLinkEntry_time {
+    display: inline-block;
+    width: calc(3.8 * var(--rhythm));
+    flex-shrink: 0;
+    opacity: 0.6;
+    font-size: 0.8em;
+    line-height: calc(1 * var(--rhythm));
+  }
+
+  .timelineLinkEntry_title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
diff --git a/src/utils/typography.js b/src/utils/typography.js
@@ -12,14 +12,27 @@ Wordpress2016.overrideThemeStyles = (
   'a.gatsby-resp-image-link': {
     boxShadow: 'none',
   },
-  'a.anchor': {
+  a: {
     // Cancel out noticeable <a> styling
     boxShadow: `none`,
   },
+  'h1,h2,h3,h4,h5,h6': {
+    marginTop: rhythm(1.3333333),
+  },
+  ':root': {
+    '--rhythm': rhythm(1),
+  },
+  '@media only screen and (max-width:768px)': {
+    html: {
+      fontSize: '15px',
+    },
+  },
 })
 
 delete Wordpress2016.googleFonts
 
+Wordpress2016.baseLineHeight = 1.5
+
 const typography = new Typography(Wordpress2016)
 
 // Hot reload typography in development.