Implement new layout setup

thunderstore-io · Jan 26, 2025 · 63dde61 · 63dde61
1 parent 0c7d2de
commit 63dde61
Show file tree

Hide file tree

Showing 28 changed files with 1,428 additions and 1,217 deletions.
diff --git a/apps/cyberstorm-remix/app/Markdown.module.css b/apps/cyberstorm-remix/app/Markdown.module.css
@@ -6,6 +6,7 @@
   font: var(--font-body);
   font-weight: var(--font-weight-medium);
   line-height: 1.6rem;
+  word-break: break-word;
 }
 
 .root > :first-child {

diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css
@@ -1,21 +1,69 @@
 @layer nimbus-layout {
-  .nimbus-community__metaitem {
-    display: flex;
-    gap: var(--gap-xs);
-    align-items: center;
-    color: var(--Meta-item-text-color--default, #c6c3ff);
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-md);
-    line-height: var(--line-height-lg);
-
-    & > svg {
-      inline-size: var(--space-16);
-    }
-  }
+  .nimbus-community {
+    > .nimbus-community__heading {
+      display: flex;
+      gap: 1.5rem;
+      align-items: center;
+      align-self: stretch;
+      padding: 0.5rem 0 1.25rem;
+
+      > .nimbus-community__heading__communitySmallImage {
+        width: 3.5rem;
+        height: 3.5rem;
+
+        --aspect-ratio: 1;
+
+        > svg {
+          width: 50%;
+        }
+      }
+
+      > .nimbus-community__heading__content {
+        flex-wrap: wrap;
+
+        > .nimbus-community__heading__content__info {
+          flex-shrink: 0;
+          min-width: 8ch;
+          overflow-wrap: anywhere;
+        }
+
+        > .nimbus-community__heading__content__meta {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 2rem;
+          align-items: center;
+
+          > .nimbus-community__heading__content__meta__item {
+            display: flex;
+            gap: var(--gap-xs);
+            align-items: center;
+            font-weight: var(--font-weight-bold);
+            font-size: var(--font-size-body-md);
+            line-height: var(--line-height-md);
+
+            & > svg {
+              inline-size: var(--space-16);
+            }
+          }
+        }
+
+        @media (width <= 48rem) {
+          .nimbus-community__heading__content__meta {
+            gap: 0.25rem;
+
+            .nimbus-community__heading__content__meta__item {
+              font-size: var(--font-size-body-sm);
+            }
+          }
+        }
 
-  @media (width <= 48rem) {
-    .nimbus-community__metaitem {
-      font-size: var(--font-size-body-sm);
+        @media (width <= 24rem) {
+          > .nimbus-community__heading__content__info {
+            font-size: 2rem;
+            line-height: 120%;
+          }
+        }
+      }
     }
   }
 }
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -1,6 +1,7 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import {
+  Heading,
   Image,
   NewBreadCrumbs,
   NewIcon,
@@ -14,7 +15,6 @@ import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { ApiError } from "@thunderstore/thunderstore-api";
 import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder";
 import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
-import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 import { DapperTs } from "@thunderstore/dapper-ts";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -138,91 +138,78 @@ export default function Community() {
 
   return (
     <>
-      {community.hero_image_url ? (
-        <div
-          className="nimbus-root__outlet__heroimg"
-          style={{
-            backgroundImage: `url(${community.hero_image_url})`,
-          }}
-        />
-      ) : null}
-      <NewBreadCrumbs rootClasses="nimbus-root__breadcrumbs">
-        <NewLink
-          primitiveType="cyberstormLink"
-          linkId="Communities"
-          csVariant="cyber"
-        >
-          Communities
-        </NewLink>
-        {community.name}
-      </NewBreadCrumbs>
-      <PageHeader
-        image={
-          <Image
-            src={community.cover_image_url}
-            cardType="community"
-            intrinsicWidth={360}
-            intrinsicHeight={480}
-          />
-        }
-        heading={community.name}
-        headingLevel="1"
-        headingSize="3"
-        description={community.short_description}
-        meta={
-          <>
-            {community.wiki_url ? (
-              <NewLink
-                primitiveType="link"
-                href={community.wiki_url}
-                csVariant="cyber"
-                rootClasses="nimbus-commoncomponents-page-header__meta__item"
-              >
-                <NewIcon csMode="inline" noWrapper>
-                  <FontAwesomeIcon icon={faBook} />
-                </NewIcon>
-                <span className="nimbus-community__metaitem__text">
-                  <span className="nimbus-community__metaitem__text__prefix nimbus-hide-m">
-                    {community.name} modding{" "}
-                  </span>
-                  Wiki
-                </span>
-                <NewIcon csMode="inline" noWrapper>
-                  <FontAwesomeIcon icon={faArrowUpRight} />
-                </NewIcon>
-              </NewLink>
-            ) : null}
-            {community.discord_url ? (
-              <NewLink
-                primitiveType="link"
-                href={community.discord_url}
-                csVariant="cyber"
-                rootClasses="nimbus-commoncomponents-page-header__meta__item"
+      <div className="ts-container ts-container--y ts-container--full nimbus-root__content">
+        <NewBreadCrumbs rootClasses="nimbus-root__breadcrumbs">
+          <NewLink
+            primitiveType="cyberstormLink"
+            linkId="Communities"
+            csVariant="cyber"
+          >
+            Communities
+          </NewLink>
+          {community.name}
+        </NewBreadCrumbs>
+        <section className="ts-container ts-container--y ts-container--full nimbus-community">
+          <span className="ts-container ts-container--x nimbus-community__heading">
+            <Image
+              src={community.cover_image_url}
+              cardType="community"
+              intrinsicWidth={56}
+              intrinsicHeight={56}
+              rootClasses="nimbus-community__heading__communitySmallImage"
+            />
+            <span className="ts-container ts-container--full nimbus-community__heading__content">
+              <Heading
+                csLevel="1"
+                csSize="3"
+                mode="display"
+                rootClasses="ts-container ts-container--full nimbus-community__heading__content__info"
               >
-                <NewIcon csMode="inline" noWrapper>
-                  <FontAwesomeIcon icon={faDiscord} />
-                </NewIcon>
-                <span className="nimbus-community__metaitem__text">
-                  <span className="nimbus-community__metaitem__text__prefix nimbus-hide-m">
-                    {community.name} modding{" "}
-                  </span>
-                  Discord
-                </span>
-                <NewIcon csMode="inline" noWrapper>
-                  <FontAwesomeIcon icon={faArrowUpRight} />
-                </NewIcon>
-              </NewLink>
-            ) : null}
-          </>
-        }
-      />
-      <main className="nimbus-root__main">
-        <PackageSearch
-          listings={listings}
-          packageCategories={filters.package_categories}
-          sections={filters.sections}
-        />
-      </main>
+                {community.name}
+              </Heading>
+              <span className="ts-container ts-container--x nimbus-community__heading__content__meta">
+                {community.wiki_url ? (
+                  <NewLink
+                    primitiveType="link"
+                    href={community.wiki_url}
+                    csVariant="cyber"
+                    rootClasses="nimbus-community__heading__content__meta__item"
+                  >
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faBook} />
+                    </NewIcon>
+                    <span>Modding Wiki</span>
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faArrowUpRight} />
+                    </NewIcon>
+                  </NewLink>
+                ) : null}
+                {community.discord_url ? (
+                  <NewLink
+                    primitiveType="link"
+                    href={community.discord_url}
+                    csVariant="cyber"
+                    rootClasses="nimbus-community__heading__content__meta__item"
+                  >
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faDiscord} />
+                    </NewIcon>
+                    <span>Modding Discord</span>
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faArrowUpRight} />
+                    </NewIcon>
+                  </NewLink>
+                ) : null}
+              </span>
+            </span>
+          </span>
+          <PackageSearch
+            listings={listings}
+            packageCategories={filters.package_categories}
+            sections={filters.sections}
+          />
+        </section>
+      </div>
     </>
   );
 }