From 4201ebd1a1d966ce33fbfe61140d3ae123553bcc Mon Sep 17 00:00:00 2001
From: Nicolas Froidure <nicolas.froidure@gmail.com>
Date: Wed, 23 Aug 2023 15:12:20 +0200
Subject: [PATCH] fix(layou): fix tops display

---
 src/pages/index.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a76d124f..05ad583c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,15 +8,16 @@ import Heading3 from "../components/h3";
 import Paragraph from "../components/p";
 import { readGlobalStats } from "../utils/globalStats";
 import Strong from "../components/strong";
+import UnorderedList from "../components/ul";
+import ListItem from "../components/li";
+import Anchor from "../components/a";
+import { CSS_BREAKPOINT_START_M } from "../utils/constants";
 import {
   getStaticProps as baseGetStaticProps,
   type Props as BaseProps,
 } from "./[...slug]";
 import type { GetStaticProps } from "next";
 import type { StatsSummary } from "../utils/writters";
-import UnorderedList from "../components/ul";
-import ListItem from "../components/li";
-import Anchor from "../components/a";
 
 type Props = BaseProps & {
   globalStats: StatsSummary;
@@ -147,11 +148,14 @@ const Page = ({ entry, globalStats }: Props) => (
       .clear {
         clear: both;
       }
-      .top {
-        display: flex;
-      }
-      .top .column {
-        flex: 1;
+
+      @media screen and (min-width: ${CSS_BREAKPOINT_START_M}) {
+        .top {
+          display: flex;
+        }
+        .top .column {
+          flex: 1;
+        }
       }
     `}</style>
   </Layout>