♻️ Bedre CSS-navn

navikt · Jan 5, 2024 · ce03bcf · ce03bcf
1 parent 787273d
commit ce03bcf
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx
@@ -46,8 +46,8 @@ export const ArticleCard = ({
       className={cl(
         "flex-shrink w-full focus:outline-none focus-visible:shadow-focus overflow-hidden text-ellipsis transition-shadow ease-out hover:shadow-large p-5 rounded-large bg-surface-default shadow-small",
         {
-          [styles.articleGrid]: group === "initial",
-          [styles.articleGridLazy]: group === "lazy",
+          [styles.animatedFade]: group === "initial",
+          [styles.animatedFadeLazy]: group === "lazy",
         }
       )}
       style={tDelay}

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleGrid.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleGrid.tsx
@@ -29,13 +29,13 @@ function ArticleGrid({ data, initialData, loaded }: ArticleGridT) {
   }
 
   return (
-    <div className={styles.articleFade}>
+    <div className={styles.animatedFade}>
       <Heading level="2" size="medium" className="text-aksel-heading">
         Siste
       </Heading>
 
       <div className="grid gap-6">
-        <div className={cl("pt-5", styles.initialGrid)}>
+        <div className={cl("pt-5", styles.cardGrid)}>
           {initialData.map((article, idx) => (
             <ArticleCard key={article._id + idx} group="initial" {...article} />
           ))}

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleList.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleList.tsx
@@ -89,7 +89,7 @@ function ArticleList({ initialArticles }: ArticleListT) {
         loaded={router.isReady}
       />
       {!atEndOfLazy && initialArticles.length === 9 && router.isReady && (
-        <div className={cl("pt-8 flex justify-center", styles.articleGrid)}>
+        <div className={cl("pt-8 flex justify-center", styles.animatedFade)}>
           <Button
             variant="tertiary-neutral"
             onClick={() => setSize(size + 1)}

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/articles.module.css b/aksel.nav.no/website/components/layout/god-praksis-page/articles/articles.module.css
@@ -1,64 +1,60 @@
-.articleFade {
-  animation: articleGridFadeUp 600ms forwards;
+.animatedFade {
+  animation: fadeUpKeyFrames 600ms forwards;
 }
 
-.articleGrid {
-  animation: articleGridFadeUp 600ms forwards;
-}
-
-.articleGridLazy {
-  animation: articleGridFadeUpLazy 600ms forwards;
+.animatedFadeLazy {
+  animation: fadeUpKeyFramesLazy 600ms forwards;
   transition: none;
 }
 
-@keyframes articleGridFadeUp {
+@keyframes fadeUpKeyFrames {
   0% {
     opacity: 0;
     transform: translate3d(0, 1rem, 0);
   }
 }
 
-@keyframes articleGridFadeUpLazy {
+@keyframes fadeUpKeyFramesLazy {
   0% {
     opacity: 0;
     transform: translateY(2rem);
   }
 }
 
-.initialGrid {
+.cardGrid {
   display: grid;
 }
 
 @media (max-width: 767px) {
-  .initialGrid {
+  .cardGrid {
     gap: var(--a-spacing-4);
   }
 }
 
 @media (min-width: 768px) and (max-width: 1279px) {
-  .initialGrid {
+  .cardGrid {
     gap: var(--a-spacing-4);
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .initialGrid > :is(:nth-child(5n + 1)) {
+  .cardGrid > :is(:nth-child(5n + 1)) {
     grid-column: span 2 / span 2;
   }
 }
 
 @media (min-width: 1280px) {
-  .initialGrid {
+  .cardGrid {
     gap: var(--a-spacing-6);
     grid-template-columns: repeat(3, 1fr);
 
     --text-clamp-lines: 2;
   }
 
-  .initialGrid > :is(:nth-child(6n + 4), :nth-child(6n + 6)) {
+  .cardGrid > :is(:nth-child(6n + 4), :nth-child(6n + 6)) {
     grid-column: span 2 / span 2;
   }
 
-  .initialGrid > :is(:nth-child(6n + 5)) {
+  .cardGrid > :is(:nth-child(6n + 5)) {
     grid-row: span 2 / span 2;
 
     --text-clamp-lines: 10;