floor-refactored

src/components/Article/FullArticle.tsx

@@ -36,7 +36,7 @@ import { CommentsTree } from './CommentsTree'
 import { SharePopup, getShareUrl } from './SharePopup'
 import { ShoutRatingControl } from './ShoutRatingControl'
 
-import stylesFeed from '../Feed/Feed.module.scss'
+import stylesFeed from '~/styles/views/Feed.module.scss'
 import stylesHeader from '../HeaderNav/Header.module.scss'
 import styles from './Article.module.scss'
 

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -685,34 +685,6 @@
   }
 }
 
-.floor--9 {
-  /* TODO: refactor these styles */
-  .shoutCardTitle,
-  .shoutCardSubtitle {
-    // display: inline;
-    font-size: 2.2rem;
-  }
-
-  .shoutCardTitle {
-    padding-right: 0.25em;
-  }
-
-  .shoutAuthor,
-  .shoutDate {
-    margin-top: 0.8rem;
-  }
-
-  .beside-column .shoutCardTitlesContainer {
-    position: relative;
-
-    a:hover {
-      .shoutCardLinkContainer {
-        color: var(--default-color-invert);
-      }
-    }
-  }
-}
-
 .shoutCardBigTitle {
   .shoutCardTitle {
     font-size:3.2rem;

src/components/Feed/Beside.tsx

@@ -9,8 +9,8 @@ import { TopicCard } from '../Topic/Card'
 import { Icon } from '../_shared/Icon'
 import { ArticleCard } from './ArticleCard'
 
+import stylesFeed from '~/styles/views/Feed.module.scss'
 import styles from './Beside.module.scss'
-import stylesFeed from './Feed.module.scss'
 
 type Props = {
   title?: string

src/components/Feed/Group.tsx

@@ -5,7 +5,7 @@ import type { Shout } from '~/graphql/schema/core.gen'
 
 import { ArticleCard } from './ArticleCard'
 
-import stylesFeed from './Feed.module.scss'
+import stylesFeed from '~/styles/views/Feed.module.scss'
 import styles from './Group.module.scss'
 
 interface GroupProps {

src/components/Feed/Row1.tsx

@@ -2,7 +2,8 @@ import clsx from 'clsx'
 import { Show } from 'solid-js'
 import type { Shout } from '~/graphql/schema/core.gen'
 import { ArticleCard } from './ArticleCard'
-import stylesFeed from './Feed.module.scss'
+
+import stylesFeed from '~/styles/views/Feed.module.scss'
 
 export const Row1 = (props: {
   article: Shout
@@ -11,7 +12,7 @@ export const Row1 = (props: {
   noauthor?: boolean
 }) => (
   <Show when={!!props.article}>
-    <div class={clsx(stylesFeed.floor, stylesFeed['floor--1'])}>
+    <div class={clsx(stylesFeed.floor)}>
       <div class="wide-container">
         <div class="row">
           <div class="col-24">

src/components/Feed/Row2.tsx

@@ -3,7 +3,8 @@ import type { Shout } from '~/graphql/schema/core.gen'
 import { For, Show, createEffect, createSignal } from 'solid-js'
 
 import { ArticleCard } from './ArticleCard'
-import stylesFeed from './Feed.module.scss'
+
+import stylesFeed from '~/styles/views/Feed.module.scss'
 
 const columnSizes = ['col-md-12', 'col-md-8', 'col-md-16']
 

src/components/Feed/Row3.tsx

@@ -4,7 +4,8 @@ import type { Shout } from '~/graphql/schema/core.gen'
 import { For, Show } from 'solid-js'
 
 import { ArticleCard } from './ArticleCard'
-import stylesFeed from './Feed.module.scss'
+
+import stylesFeed from '~/styles/views/Feed.module.scss'
 
 export const Row3 = (props: {
   articles: Shout[]

src/components/Feed/Row5.tsx

@@ -1,11 +1,12 @@
 import clsx from 'clsx'
 import type { Shout } from '~/graphql/schema/core.gen'
 import { ArticleCard } from './ArticleCard'
-import stylesFeed from './Feed.module.scss'
+
+import stylesFeed from '~/styles/views/Feed.module.scss'
 
 export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
   return (
-    <div class={clsx(stylesFeed.floor, stylesFeed['floor--1'])}>
+    <div class={clsx(stylesFeed.floor)}>
       <div class="wide-container">
         <div class="row">
           <div class="col-md-6">

src/components/Views/SearchView.tsx

@@ -8,8 +8,8 @@ import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { ArticleCard } from '../Feed/ArticleCard'
 import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper'
 
+import stylesFeed from '~/styles/views/Feed.module.scss'
 import styles from '~/styles/views/Search.module.scss'
-import stylesFeed from '../Feed/Feed.module.scss'
 
 type Props = {
   query: string

src/styles/views/Feed.module.scss

@@ -318,3 +318,30 @@
   }
 }
 
+.floor--9 {
+  /* TODO: refactor these styles */
+  .shoutCardTitle,
+  .shoutCardSubtitle {
+    // display: inline;
+    font-size: 2.2rem;
+  }
+
+  .shoutCardTitle {
+    padding-right: 0.25em;
+  }
+
+  .shoutAuthor,
+  .shoutDate {
+    margin-top: 0.8rem;
+  }
+
+  .beside-column .shoutCardTitlesContainer {
+    position: relative;
+
+    a:hover {
+      .shoutCardLinkContainer {
+        color: var(--default-color-invert);
+      }
+    }
+  }
+}