/community page refactor

.pre-commit-config.yaml

@@ -9,7 +9,7 @@ repos:
       - id: mixed-line-ending
         args: [--fix=lf]
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v2.7.1"
+    rev: "v3.1.0"
     hooks:
       - id: prettier
         exclude_types: [markdown, yaml]

apps/cyberstorm-remix/app/Error.module.css

@@ -10,7 +10,7 @@
 }
 
 .description {
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-semibold);
   line-height: 1;
 }

apps/cyberstorm-remix/app/c/Community.css

@@ -0,0 +1,38 @@
+@layer project-layout {
+  .project-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);
+    }
+  }
+
+  .project-community__metalink {
+    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-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+
+  @media (width <= 30rem) {
+    .project-community__metaitem {
+      font-size: var(--font-size-body-sm);
+    }
+
+    .project-community__metaitem__text {
+      display: none;
+    }
+  }
+}

apps/cyberstorm-remix/app/c/CommunityCard.module.css → apps/cyberstorm-remix/app/c/CommunityCard.css

@@ -1,52 +1,46 @@
-.root {
+.project-communitycard {
   display: flex;
   flex-direction: row;
   gap: var(--space-32);
 }
 
-.image {
+.project-communitycard__image {
   flex: 0 0 9rem;
 }
 
-.info {
+.project-communitycard__info {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   min-width: 0;
 }
 
 @media (width <= 30rem) {
-  .root {
+  .project-communitycard {
     gap: var(--space-16);
+    padding: var(--space-8) 0;
+  }
+
+  .project-communitycard__info > h1 {
+    --display-font-size: 21px;
+  }
+
+  .project-communitycard__image {
+    flex: 0 0 5rem;
   }
 }
 
-.meta {
+.project-communitycard__meta {
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   gap: var(--space-16);
   padding-top: var(--space-16);
 }
 
-.skeletonImage {
-  height: 12rem;
-  aspect-ratio: 3/4;
-}
-
-.skeletonTitle {
-  width: 22rem;
-  height: 2.875rem;
-}
-
-.skeletonMetas {
-  width: 6.5rem;
-  height: 1rem;
-}
-
-.backgroundImg {
+.project-communitycard__backgroundimg {
   --w: 56vw;
 
-  position: absolute;
+  position: fixed;
   top: calc(-1 * (var(--header-height) + var(--content-padding-top-desktop)));
   right: 0;