front tweaks

config.js

@@ -19,7 +19,7 @@ module.exports = {
   rss: '/feed.xml',
   jsonfeed: '/feed.json',
   typekitID: 'msu4qap',
-  itemsPerPage: 26,
+  itemsPerPage: 24,
   repoContentPath: 'https://github.com/kremalicious/blog/tree/main/content',
   menu: [
     {

src/components/molecules/PostTeaser.module.scss

@@ -4,10 +4,11 @@
 .title {
   padding-left: 0.2rem;
   padding-right: 0.2rem;
-  margin-top: $spacer / 3;
+  margin-top: $spacer / 2;
   margin-bottom: 0;
   font-size: $font-size-base;
   transition: color 0.2s ease-out;
+  color: $text-color-light;
 }
 
 .post {

src/pages/index.module.scss

@@ -45,14 +45,3 @@
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   }
 }
-
-.title {
-  composes: pagetitle from '../components/templates/Page.module.scss';
-  margin-left: 0;
-  margin-right: 0;
-
-  a {
-    margin: 0;
-    color: $text-color-light;
-  }
-}

src/pages/index.tsx

@@ -12,36 +12,32 @@ export default function Home({ data }: PageProps): ReactElement {
     <>
       <SEO />
       <section className={styles.section}>
-        <h2 className={styles.title}>
-          Latest Articles <PostMore to="/archive">All Articles</PostMore>
-        </h2>
-
         <div className={styles.articles}>
           {(data as any).latestArticles.edges
-            .slice(0, 2)
+            .slice(0, 4)
             .map(({ node }: { node: Post }) => (
               <PostTeaser key={node.id} post={node} hideDate />
             ))}
         </div>
         <div className={`${styles.articles} ${styles.articlesLast}`}>
           {(data as any).latestArticles.edges
-            .slice(2, 8)
+            .slice(4, 7)
             .map(({ node }: { node: Post }) => (
               <PostTeaser key={node.id} post={node} hideDate />
             ))}
         </div>
+
+        <PostMore to="/archive">All Articles</PostMore>
       </section>
 
       <section className={styles.section}>
-        <h2 className={styles.title}>
-          Latest Photos <PostMore to="/photos">All Photos</PostMore>
-        </h2>
-
         <div className={styles.photos}>
           {(data as any).latestPhotos.edges.map(({ node }: { node: Post }) => (
             <PhotoThumb key={node.id} photo={node} />
           ))}
         </div>
+
+        <PostMore to="/photos">All Photos</PostMore>
       </section>
     </>
   )