Setup theme to create global CSS vars and improve blockquote styling on mobile

Chris D. Macrae · Chris D. Macrae · commit 262b435dfeff · 2021-06-20T23:13:45.000-03:00
diff --git a/packages/cdm-content/content.ts b/packages/cdm-content/content.ts
@@ -117,6 +117,6 @@ export async function getAllContent<ContentShape extends BaseModel>(directory: s
   return content
     .filter(c => c !== null)
     .sort((post1, post2) => post1?.updated ?
-      (post1?.updated > post2?.updated ? 1 : -1) :
-      (post1?.created > post2?.created ? 1 : -1)) as ContentShape[]
+      (post1?.updated > post2?.updated ? -1 : 1) :
+      (post1?.created > post2?.created ? -1 : 1)) as ContentShape[]
 }
diff --git a/packages/cdm-ui/LongFormText/LongFormText.module.css b/packages/cdm-ui/LongFormText/LongFormText.module.css
@@ -10,9 +10,15 @@
 
 .LongFormText blockquote {
   border-left: 0.2rem solid rgb(255, 225, 0);
-  margin-left: -2rem;
-  padding-left: 1.8rem;
   font-style: italic;
+  margin-left: -1rem;
+  padding-left: 1.8rem;
+}
+
+@media screen and (min-width: 960px) {
+  .LongFormText blockquote {
+    margin-left: -2rem;
+  }
 }
 
 .LongFormText ol,
diff --git a/packages/cdm-ui/Theme/Theme.tsx b/packages/cdm-ui/Theme/Theme.tsx
@@ -1,3 +1,4 @@
+import Head from "next/head";
 import React, { createContext, useEffect, useState } from "react";
 import { BuiltInBreakpoints } from "./useBreakpoint";
 
@@ -39,6 +40,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ breakpoints = {},
       rootFontSize, 
       breakpoints: allBreakpoints 
     }}>
+      <Head>
+        <style id="cdm-theme">
+        {`
+        :root {${Object.keys(allBreakpoints).map(name => `
+            --cdm-breakpoint-${name}: ${allBreakpoints[name]};
+          `).join('')}}
+        `}
+        </style>
+      </Head>
       {children}
     </ThemeContext.Provider>
   );
diff --git a/src/views/Homepage/Homepage.tsx b/src/views/Homepage/Homepage.tsx
@@ -26,7 +26,7 @@ export const Homepage: React.FC<HomepageProps> = ({ posts }) => {
           <Box padding="sm">
             <Heading as="h3">My thoughts</Heading>
           </Box>
-          {posts?.map((post, i) => <Article {...post} i={i} key={post.slug} />)}
+          {posts?.map((post, i) => <Article {...post} i={posts.length - 1 - i} key={post.slug} />)}
         </Stack>
       </Layout.Item>
     </BasicLayout>

Original file line number	Diff line number	Diff line change
`@@ -117,6 +117,6 @@ export async function getAllContent<ContentShape extends BaseModel>(directory: s`
`117`	`117`	`return content`
`118`	`118`	`.filter(c => c !== null)`
`119`	`119`	`.sort((post1, post2) => post1?.updated ?`
`120`		`- (post1?.updated > post2?.updated ? 1 : -1) :`
`121`		`- (post1?.created > post2?.created ? 1 : -1)) as ContentShape[]`
	`120`	`+ (post1?.updated > post2?.updated ? -1 : 1) :`
	`121`	`+ (post1?.created > post2?.created ? -1 : 1)) as ContentShape[]`
`122`	`122`	`}`