Merge pull request #265 from Vandivier/width-fix

style: more width on mobile
Vandivier · Jun 13, 2024 · 8712344 · 8712344
2 parents ec9e29f + 42369bb
commit 8712344
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/src/pages/blog/Blog.module.css b/src/pages/blog/Blog.module.css
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
@@ -16,7 +16,6 @@ import { Root, Element } from "hast"
 import { LadderlyPageWrapper } from "src/core/components/page-wrapper/LadderlyPageWrapper"
 
 import "highlight.js/styles/github-dark.css"
-import styles from "src/app/styles/Home.module.css"
 
 const tipUrl =
   "https://checkout.stripe.com/c/pay/cs_live_a10YyjvS4xEbZJ9Th74ZTitGd2NZoHBILwU0K8AdL1P5INh5a9ry7h1Bj9#fidkdWxOYHwnPyd1blppbHNgWlIzUk5qNVddT2AyYGM8PURQN01fTUFSYjU1bX9nPX1KZ1InKSd1aWxrbkB9dWp2YGFMYSc%2FJ2BTZDxAMjdgYmBpQ2NWYmNcXycpJ3dgY2B3d2B3SndsYmxrJz8nbXFxdXY%2FKipycnIraWRhYWB3aXwrbGoqJ3gl"
@@ -34,7 +33,7 @@ const sBlogCallToAction = `<p class="call-to-action"
 const BlogPost = ({ title, content }: { title: string; content: string }) => {
   return (
     <LadderlyPageWrapper title={title}>
-      <main className="m-auto w-1/2">
+      <main className="m-auto w-full md:w-1/2">
         <h1 className="p-4 text-3xl font-bold text-ladderly-violet-600">
           {title}
         </h1>

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
@@ -12,9 +12,12 @@ const BlogIndex = ({
 }) => {
   return (
     <LadderlyPageWrapper title="Blog">
-      <main>
+      <main className="m-auto w-full md:w-1/2">
         {posts.map((post) => (
-          <div key={post.slug} className="border-ladderly-light-purple border-b p-4">
+          <div
+            key={post.slug}
+            className="border-ladderly-light-purple border-b p-4"
+          >
             <Link
               className="text-2xl text-ladderly-violet-600 hover:underline"
               href={`/blog/${post.slug}`}
@@ -37,7 +40,9 @@ export const getStaticProps = async () => {
     .filter((filename) => path.extname(filename) === ".md")
     .map((filename) => {
       const slug = filename.replace(".md", "")
-      const markdownWithMetadata = fs.readFileSync(path.join("src/pages/blog", filename)).toString()
+      const markdownWithMetadata = fs
+        .readFileSync(path.join("src/pages/blog", filename))
+        .toString()
       const { data } = matter(markdownWithMetadata)
       return {
         slug,