feat: add christmas theme

src/views/board/board.module.css

@@ -37,4 +37,14 @@
   .footer {
     padding-left: 5px;
   }
+}
+
+.garland {
+  border-image-slice: 50 0 50 0;
+  border-image-width: 40px 0px 0px 0px;
+  border-image-outset: 0px 0px 0px 0px;
+  border-image-repeat: repeat repeat;
+  border-image-source: url('/public/assets/garland.png');
+  border-style: solid;
+  padding-top: 50px;
 }

src/views/board/board.tsx

@@ -19,6 +19,7 @@ import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
 import useInterfaceSettingsStore from '../../stores/use-interface-settings-store';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { shouldShowSnow } from '../../lib/snow';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
@@ -262,48 +263,51 @@ const Board = () => {
   }, [title, shortAddress, subplebbitAddress]);
 
   return (
-    <div className={styles.content}>
-      {location.pathname.endsWith('/settings') && <SettingsModal />}
-      {activeCid && threadCid && postSubplebbitAddress && (
-        <ReplyModal
-          closeModal={closeModal}
-          parentCid={activeCid}
-          postCid={threadCid}
-          scrollY={scrollY}
-          showReplyModal={showReplyModal}
-          subplebbitAddress={postSubplebbitAddress}
-        />
-      )}
-      {((description && description.length > 0) || isInAllView) && (
-        <SubplebbitDescription
-          avatarUrl={suggested?.avatarUrl}
-          subplebbitAddress={subplebbitAddress}
-          createdAt={createdAt}
-          description={description}
-          replyCount={isInAllView ? 0 : rules?.length > 0 ? 1 : 0}
-          shortAddress={shortAddress}
-          title={title}
-        />
-      )}
-      {rules && !description && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
-      <Virtuoso
-        increaseViewportBy={{ bottom: 1200, top: 1200 }}
-        totalCount={combinedFeed.length}
-        data={combinedFeed}
-        itemContent={(index, post) => {
-          const { deleted, locked, removed } = post || {};
-          const isThreadClosed = deleted || locked || removed;
+    <>
+      {shouldShowSnow() && <hr />}
+      <div className={`${styles.content} ${shouldShowSnow() ? styles.garland : ''}`}>
+        {location.pathname.endsWith('/settings') && <SettingsModal />}
+        {activeCid && threadCid && postSubplebbitAddress && (
+          <ReplyModal
+            closeModal={closeModal}
+            parentCid={activeCid}
+            postCid={threadCid}
+            scrollY={scrollY}
+            showReplyModal={showReplyModal}
+            subplebbitAddress={postSubplebbitAddress}
+          />
+        )}
+        {((description && description.length > 0) || isInAllView) && (
+          <SubplebbitDescription
+            avatarUrl={suggested?.avatarUrl}
+            subplebbitAddress={subplebbitAddress}
+            createdAt={createdAt}
+            description={description}
+            replyCount={isInAllView ? 0 : rules?.length > 0 ? 1 : 0}
+            shortAddress={shortAddress}
+            title={title}
+          />
+        )}
+        {rules && !description && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
+        <Virtuoso
+          increaseViewportBy={{ bottom: 1200, top: 1200 }}
+          totalCount={combinedFeed.length}
+          data={combinedFeed}
+          itemContent={(index, post) => {
+            const { deleted, locked, removed } = post || {};
+            const isThreadClosed = deleted || locked || removed;
 
-          return <Post index={index} post={post} openReplyModal={isThreadClosed ? () => alert(t('thread_closed_alert')) : openReplyModal} />;
-        }}
-        useWindowScroll={true}
-        components={{ Footer }}
-        endReached={loadMore}
-        ref={virtuosoRef}
-        restoreStateFrom={lastVirtuosoState}
-        initialScrollTop={lastVirtuosoState?.scrollTop}
-      />
-    </div>
+            return <Post index={index} post={post} openReplyModal={isThreadClosed ? () => alert(t('thread_closed_alert')) : openReplyModal} />;
+          }}
+          useWindowScroll={true}
+          components={{ Footer }}
+          endReached={loadMore}
+          ref={virtuosoRef}
+          restoreStateFrom={lastVirtuosoState}
+          initialScrollTop={lastVirtuosoState?.scrollTop}
+        />
+      </div>
+    </>
   );
 };
 

src/views/post/post.module.css

@@ -43,6 +43,30 @@
   opacity: 0.5;
 }
 
+.xmasHatWrapper {
+  position: relative;
+}
+
+.xmasHat {
+  position: absolute;
+  pointer-events: none;
+  top: -80px;
+  left: 0;
+  z-index: 9999;
+}
+
+@media (max-width: 640px) {
+  .xmasHat {
+    width: 100px;
+    top: -20px;
+    left: -15px;
+  }
+}
+
+.xmasHat img {
+  border: none;
+}
+
 /* clearfix to contain float elements */
 .postDesktop::after {
   content: "";

src/views/post/post.tsx

@@ -16,6 +16,7 @@ import styles from './post.module.css';
 export interface PostProps {
   index?: number;
   isHidden?: boolean;
+  hasThumbnail?: boolean;
   post?: any;
   postReplyCount?: number;
   reply?: any;