footer, root module nav, and main page done

src/components/Footer.astro

@@ -0,0 +1,34 @@
+---
+import { getHTMLIcon } from "./iconsModule";
+
+const gitString = getHTMLIcon("git");
+const matrixString = getHTMLIcon("matrix");
+---
+<footer>
+  <section class="_credits">
+    <span>
+      <a target="_blank" rel="noreferrer" href="https://git.outfoxxed.me/outfoxxed">outfoxxed</a>
+      <em>[Main Developer]</em>
+    </span>
+    <span>
+      <a target="_blank" rel="noreferrer" href="https://github.com/Xanazf">Xanazf</a>
+      <em>[Web Designer & Developer]</em>
+    </span>
+  </section>
+  <section class="_socials">
+    <span class="matrix">
+      <a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" rel="noreferrer">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
+          <path fill="currentColor" d={matrixString}/>
+        </svg>
+      </a>
+    </span>
+    <span class="git">
+      <a href="https://git.outfoxxed.me/outfoxxed/quickshell" target="_blank" rel="noreferrer">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 92 92">
+          <path fill="currentColor" d={gitString}/>
+        </svg>
+      </a>
+    </span>
+  </section>
+</footer>

src/components/Header.astro

@@ -56,6 +56,7 @@ const { headings } = Astro.props;
   </div>
   <div class="header-item header-right">
     <Search/>
+    <div class="spacer-mobile">|</div>
     <div class="spacer-desktop">|</div>
     <ThemeSelect client:load />
     <div class="spacer-mobile">|</div>

src/components/icons.tsx

@@ -475,3 +475,23 @@ export const LoadingSpinner: VoidComponent<{
     </svg>
   );
 };
+
+export const LinkSimple: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Go to</title>
+      <path
+        fill="currentColor"
+        d="M165.66 90.34a8 8 0 0 1 0 11.32l-64 64a8 8 0 0 1-11.32-11.32l64-64a8 8 0 0 1 11.32 0M215.6 40.4a56 56 0 0 0-79.2 0l-30.06 30.05a8 8 0 0 0 11.32 11.32l30.06-30a40 40 0 0 1 56.57 56.56l-30.07 30.06a8 8 0 0 0 11.31 11.32l30.07-30.11a56 56 0 0 0 0-79.2m-77.26 133.82l-30.06 30.06a40 40 0 1 1-56.56-56.57l30.05-30.05a8 8 0 0 0-11.32-11.32L40.4 136.4a56 56 0 0 0 79.2 79.2l30.06-30.07a8 8 0 0 0-11.32-11.31"
+      />
+    </svg>
+  );
+};

src/components/iconsModule.ts

@@ -1,9 +1,17 @@
 const magnifier =
   "M232.49 215.51L185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68a68.07 68.07 0 0 1-68-68";
 
+const git =
+  "M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371";
+
+const matrix =
+  "M72 216a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h24a8 8 0 0 1 0 16H48v160h16a8 8 0 0 1 8 8M216 32h-24a8 8 0 0 0 0 16h16v160h-16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-32 88a32 32 0 0 0-56-21.13a31.93 31.93 0 0 0-40.71-6.15A8 8 0 0 0 72 96v64a8 8 0 0 0 16 0v-40a16 16 0 0 1 32 0v40a8 8 0 0 0 16 0v-40a16 16 0 0 1 32 0v40a8 8 0 0 0 16 0Z";
+
 function getHTMLIcon(name: string): string {
   const hashmap = {
     magnifier: () => magnifier,
+    git: () => git,
+    matrix: () => matrix,
   };
 
   return hashmap[name as keyof typeof hashmap]();

src/components/navigation/sidebars/nav/Tree.tsx

@@ -1,7 +1,7 @@
 import { type Component, Index, For } from "solid-js";
 import { Accordion } from "@ark-ui/solid";
 
-import { ShevronSmallDown } from "@icons";
+import { LinkSimple, ShevronSmallDown } from "@icons";
 import type { TreeProps } from "../types";
 
 export const Tree: Component<TreeProps> = props => {
@@ -118,6 +118,44 @@ export const Tree: Component<TreeProps> = props => {
             </Index>
           </Accordion.ItemContent>
         </Accordion.Item>
+        <Accordion.Item
+          value="QtQuick Type Reference"
+          id="qtquick-reference"
+        >
+          <Accordion.ItemTrigger>
+            <Accordion.ItemIndicator>
+              <LinkSimple />
+            </Accordion.ItemIndicator>
+            <span>
+              <a
+                href="https://doc.qt.io/qt-6/qtquick-qmlmodule.html"
+                target="_blank"
+                rel="noreferrer"
+              >
+                QtQuick Type Reference
+              </a>
+            </span>
+          </Accordion.ItemTrigger>
+        </Accordion.Item>
+        <Accordion.Item
+          value="Quickshell Examples"
+          id="quickshell-examples"
+        >
+          <Accordion.ItemTrigger>
+            <Accordion.ItemIndicator>
+              <LinkSimple />
+            </Accordion.ItemIndicator>
+            <span>
+              <a
+                href="https://git.outfoxxed.me/outfoxxed/quickshell-examples"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Quickshell Examples
+              </a>
+            </span>
+          </Accordion.ItemTrigger>
+        </Accordion.Item>
       </Accordion.Root>
     </nav>
   );

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import Header from "@components/Header.astro";
+import Footer from "@src/components/Footer.astro";
 import Head from "@config/Head.astro";
 import PreTheme from "@config/PreTheme.astro";
 import "@styles/global.css";
@@ -25,5 +26,6 @@ const { title, description } = Astro.props;
     <Header />
     <h1>{title}</h1>
     <slot />
+    <Footer />
   </body>
 </html>

src/layouts/DocsLayout.astro

@@ -10,6 +10,7 @@ import Nav from "@components/navigation/sidebars/Nav.astro";
 import CreateQMLCodeButtons from "@components/hooks/CreateQMLCodeButtons.astro";
 import "@styles/global.css";
 import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
+import Footer from "@src/components/Footer.astro";
 
 interface Props {
   title: string;
@@ -98,6 +99,7 @@ if (url[2]) {
         <slot />
       </div>
     </div>
+    <Footer />
   </body>
 </html>
 

src/pages/docs/types/[type]/index.astro

@@ -5,12 +5,25 @@ import { generateTypeData } from "@config/io/generateTypeData";
 export async function getStaticPaths() {
   const routes = await generateTypeData();
 
-  return routes.map(route => ({
-    params: { type: route.type, name: route.type },
-    props: { route },
-  }));
+  return routes
+    .filter(route => route.name === "index")
+    .map(route => {
+      const children: { [key: string]: string } = {};
+      route.data.contains?.map(childName =>
+        routes
+          .filter(route => route.name !== "index")
+          .filter(childData => childData.name === childName)
+          .map(childData => {
+            children[childName] = childData.data.description;
+          })
+      );
+      return {
+        params: { type: route.type, name: route.type },
+        props: { route, children },
+      };
+    });
 }
-const { route } = Astro.props;
+const { route, children } = Astro.props;
 ---
 
 <DocsLayout
@@ -18,10 +31,19 @@ const { route } = Astro.props;
   description="Quickshell Type Documentation"
 >
   <hr />
-  <h2>{route.type[0].toUpperCase() + route.type.slice(1)} Definitions</h2>
+  <h2 class="typedocs-title">{route.type[0].toUpperCase() + route.type.slice(1)} Definitions</h2>
   <div class="root-nav">
-    {route.data.contains!.map((item:string) => {
-    return (<div><a class="root-nav-entry" href={`/docs/types/${route.data.module === "index"? route.data.name : route.data.module}/${item}`}>{item}</a></div>)
-    })}
+    {route.data.contains!.map((childName:string) => 
+      (
+      <div class="root-nav-entry">
+        <a class="root-nav-link" href={`/docs/types/${route.data.module === "index"
+        ? route.data.name
+        : route.data.module}/${childName}`}>
+        {childName}
+        </a>
+        <span class="root-nav-desc">{children[childName] || "See Configuration"}</span>
+      </div>
+      )
+    )}
   </div>
 </DocsLayout>

src/pages/index.astro

@@ -1,13 +1,29 @@
 ---
 import BaseLayout from "@layouts/BaseLayout.astro";
+
+function handleCardClick(target: string): void {
+  window.location.href = target;
+}
 ---
 <BaseLayout title="Quickshell" description="A fully user customizable desktop shell" image="/quickshell.png">
-  <h2>A fully user customizable desktop shell</h2>
-  <h3>Based on QtQuick</h3>
-  <div class="root-nav">
-    <h3><a href="/docs/configuration">Configuration</a></h3>
-    <h3><a href="/docs/types">Type Definitions</a></h3>
-    <h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples">Examples</a></h3>
-    <h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell">Source</a></h3>
+  <div class="main-page_hero">
+    <section class="main-page_hero-text">
+      <h2>A fully <em>user-customizable</em> desktop <em>shell</em></h2>
+      <h3>Based on QtQuick</h3>
+    </section>
+    <section class="main-page_links">
+      <button type="button" class="main-page_link-card" onclick={() => handleCardClick("/docs/configuration")}>
+        <h3><a href="/docs/configuration">Configuration</a></h3>
+      </button>
+      <button class="main-page_link-card">
+        <h3><a href="/docs/types">Type Definitions</a></h3>
+      </button>
+      <button class="main-page_link-card">
+        <h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples">Examples</a></h3>
+      </button>
+      <button class="main-page_link-card">
+        <h3><a href="https://git.outfoxxed.me/outfoxxed/quickshell">Source</a></h3>
+      </button>
+    </section>
   </div>
 </BaseLayout>

src/styles/css-config/animations.css

@@ -1,9 +1,21 @@
 @property --percent {
-  syntax: '<percentage>';
+  syntax: "<percentage>";
   initial-value: 0%;
   inherits: false;
 }
 
+@property --percent-nav-root_transparent {
+  syntax: "<percentage>";
+  initial-value: 35%;
+  inherits: false;
+}
+
+@property --percent-nav-root_filled {
+  syntax: "<percentage>";
+  initial-value: 65%;
+  inherits: false;
+}
+
 @keyframes pulseGreen {
   0% {
     background-color: hsl(var(--blue) 85 35 / 0.1);
@@ -85,7 +97,6 @@
   }
 }
 
-
 @keyframes percentToFifty {
   from {
     --percent: 0%;
@@ -105,3 +116,43 @@
     --percent: 0%;
   }
 }
+
+@keyframes percent35To25 {
+  from {
+    --percent-nav-root_transparent: 35%;
+  }
+
+  to {
+    --percent-nav-root_transparent: 25%;
+  }
+}
+
+@keyframes percent25To35 {
+  from {
+    --percent-nav-root_transparent: 25%;
+  }
+
+  to {
+    --percent-nav-root_transparent: 35%;
+  }
+}
+
+@keyframes percent65To75 {
+  from {
+    --percent-nav-root_filled: 65%;
+  }
+
+  to {
+    --percent-nav-root_filled: 75%;
+  }
+}
+
+@keyframes percent75To65 {
+  from {
+    --percent-nav-root_filled: 75%;
+  }
+
+  to {
+    --percent-nav-root_filled: 65%;
+  }
+}

src/styles/css-config/base.css

@@ -1,9 +1,13 @@
 html {
-  font-family: 'Rubik', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Rubik", Inter, system-ui, Avenir, Helvetica, Arial,
+    sans-serif;
   font-size: 14px;
   line-height: 1.272;
   font-weight: 400;
 
+  height: 100svh;
+  width: 100svw;
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -77,3 +81,9 @@ html.dark {
   margin: 0;
   padding: 0;
 }
+
+body {
+  min-height: 100svh;
+  height: max-content;
+  width: 100%;
+}

src/styles/docs/docs-types.css

@@ -1,10 +1,44 @@
 .root-nav {
-  margin-left: 1em;
+  position: relative;
   display: flex;
   flex-direction: column;
+  border-radius: 6px;
+  border: 1px solid hsla(var(--blue) 10 15 / 0.6);
+  margin-top: 1rem;
 
   & .root-nav-entry {
-    margin-block: 1em;
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 42px;
+    text-wrap: pretty;
+    padding: 0.5rem 1rem;
+    padding-top: 1.5rem;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
+    }
+
+    & .root-nav-link {
+      font-size: 1.137rem;
+      max-height: 2rem;
+      position: relative;
+      text-decoration: none;
+      text-align: center;
+
+      &::before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: linear-gradient(90deg,
+            transparent 25%,
+            hsla(var(--accent-500) / 0.88) 50%,
+            transparent 75%);
+      }
+    }
   }
 }
 
@@ -13,6 +47,8 @@
 }
 
 .typedocs-title {
+  letter-spacing: 0.012rem;
+
   & a {
     opacity: 0.6;
     transition: opacity 0.5s;
@@ -299,6 +335,43 @@
 }
 
 @media (min-width: 768px) {
+  .root-nav {
+    & .root-nav-entry {
+      display: grid;
+      grid-template-columns: 0.70fr 1.30fr;
+
+      & .root-nav-link {
+        justify-self: start;
+        height: max-content;
+
+        &::before {
+          width: 0;
+          background: linear-gradient(to right,
+              hsla(var(--accent-400) / 0.5) var(--percent),
+              hsla(var(--accent-400) / 0) 100%);
+          animation: percentToZero 250ms ease-in-out forwards;
+          transition: width 0.25s ease-in-out;
+        }
+
+        &:hover::before {
+          animation: percentToFifty 250ms ease-in-out forwards;
+          width: 100%;
+        }
+      }
+
+      & .root-nav-desc {
+        padding-left: 1rem;
+
+        &::before {
+          content: "";
+          position: absolute;
+          inset: -1rem 0 0 0;
+          border-left: 1px solid hsla(var(--blue) 10 15 / 0.6);
+        }
+      }
+    }
+  }
+
   .typedocs-content {
     margin-inline: 1.272rem;
 

src/styles/docs/docs.css

@@ -2,7 +2,7 @@
 @import "./docs-types.css";
 
 .docslayout-root {
-  margin: 0.618rem;
+  margin-inline: 0.618rem;
   margin-top: 3.5rem;
 }
 
@@ -88,6 +88,7 @@ ul {
 
   .docslayout-root {
     margin-left: calc(1.618rem + 260px);
+    padding-bottom: 3rem;
   }
 
   .docs-content {

src/styles/docs/nav/nav.css

@@ -105,6 +105,7 @@
     width: 250px;
     position: fixed;
     top: 5rem;
+    bottom: 3rem;
     left: 1.618rem;
     flex-shrink: 0;
     overflow: scroll;

src/styles/docs/nav/search.css

@@ -213,10 +213,15 @@ button[data-open-modal] {
   gap: 0.5rem;
   border: 0;
   background-color: transparent;
-  color: hsl(0 0 65);
+  color: hsl(var(--blue) 40 65);
   cursor: pointer;
   height: 2.5rem;
   font-size: 1.10rem;
+
+  & svg {
+    width: 21px;
+    height: 21px;
+  }
 }
 
 button>kbd {
@@ -224,13 +229,13 @@ button>kbd {
   font-size: 0.75rem;
   gap: 0.25em;
   padding-inline: 0.375rem;
-  background-color: hsl(0 0 15);
+  background-color: hsla(var(--blue) 5 20 / 0.5);
 }
 
 dialog {
   margin: 0;
-  background-color: hsl(var(--blue) 15 12);
-  border: 1px solid hsl(0 0 25);
+  background-color: hsl(var(--blue) 10 15);
+  border: 1px solid hsl(var(--blue) 15 25);
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -272,8 +277,8 @@ button[data-close-modal] {
   --pagefind-ui-primary: hsla(var(--accent-400));
   --pagefind-ui-text: hsla(0 0 60);
   --pagefind-ui-font: Rubik;
-  --pagefind-ui-background: hsl(0 0 10);
-  --pagefind-ui-border: hsl(0 0 15);
+  --pagefind-ui-background: hsl(var(--blue) 10 15);
+  --pagefind-ui-border: hsl(var(--blue) 30 25);
   --pagefind-ui-border-width: 1px;
   --search-cancel-space: 5rem;
 }
@@ -297,12 +302,11 @@ button[data-close-modal] {
 
   /* --- */
   button[data-open-modal] {
-    border: 1px solid hsl(0 0 25);
     border-radius: 6px;
     padding-inline-start: 0.75rem;
     padding-inline-end: 0.5rem;
-    background-color: hsla(0 0 10 / 0.5);
-    color: hsl(0 0 50);
+    background-color: hsla(var(--blue) 15 15 / 0.5);
+    color: hsl(var(--blue) 40 65);
     font-size: 0.875rem;
     width: 100%;
     max-width: 15rem;
@@ -310,7 +314,7 @@ button[data-close-modal] {
 
     &:hover {
       border-color: hsl(0 0 50);
-      color: hsl(0 0 85);
+      color: hsl(var(--blue) 60 85);
     }
 
     &> :last-child {

src/styles/global.css

@@ -3,6 +3,9 @@
 @import "./css-config/animations.css";
 @import "./css-config/code.css";
 @import "./css-config/colors.css";
+
+@import "./main-page.css";
+
 @import "./docs/nav/nav.css";
 @import "./docs/toc/toc.css";
 @import "./docs/docs.css";
@@ -109,6 +112,78 @@ html.dark {
   }
 }
 
+footer {
+  position: absolute;
+  bottom: 0;
+  z-index: 10;
+  width: 100%;
+  height: 3rem;
+  font-size: min(1.112rem, max(1svw, 0.8rem));
+  display: flex;
+  justify-content: space-between;
+  padding-inline: 1rem;
+  background: linear-gradient(150deg,
+      hsla(var(--blue) 60 5 / 1) 10%,
+      hsla(var(--blue) 75 6 / 1) 25%,
+      hsla(var(--blue) 80 8 / 1) 55%,
+      hsla(var(--blue) 77 7 / 1) 80%);
+
+  & ._credits {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.127rem;
+    color: hsl(var(--blue) 10 55);
+
+    & a {
+      all: unset;
+
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+
+    & em {
+      all: unset;
+    }
+
+    & span:first-child {
+      & em {
+        color: hsl(var(--green) 44 60);
+      }
+    }
+
+    & span:last-child {
+      & em {
+        color: hsl(var(--blue) 44 60);
+      }
+    }
+  }
+
+  & ._socials {
+    height: 100%;
+    width: max-content;
+    display: flex;
+    gap: 0.373rem;
+    justify-content: center;
+    align-items: center;
+
+    & span {
+      font-size: 2rem;
+
+      & a {
+        all: unset;
+        display: flex;
+        height: 100%;
+        width: 100%;
+        justify-self: center;
+        align-self: center;
+      }
+    }
+  }
+}
+
 @media (min-width: 768px) {
   html {
     font-size: 16px;
@@ -138,4 +213,4 @@ html.dark {
   }
 }
 
-@media (min-width: 1280px) {}
+/* @media (min-width: 1280px) {} */

src/styles/main-page.css

@@ -0,0 +1,127 @@
+.main-page_hero {
+  position: relative;
+  margin-block: 9rem 4rem;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.main-page_hero-text {
+  color: hsl(var(--secondary-400));
+
+  & h2 {
+    font-size: 2rem;
+    letter-spacing: 0.018rem;
+    margin-bottom: 1.117rem;
+    text-wrap: pretty;
+
+    & em {
+      all: unset;
+
+      &:first-child {
+        color: hsl(var(--blue) 66 60);
+      }
+
+      &:last-child {
+        color: hsl(var(--accent-400));
+      }
+    }
+  }
+
+  & h3 {
+    font-size: 1.5rem;
+    letter-spacing: 0.015rem;
+    color: hsla(var(--secondary-400) / 0.8);
+    margin-bottom: 1.5rem;
+  }
+}
+
+.main-page_links {
+  position: relative;
+  display: flex;
+  width: 75%;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+.main-page_link-card {
+  all: unset;
+  position: relative;
+  width: 100%;
+  height: 9.67rem;
+  border-radius: 9px;
+  text-align: center;
+  overflow: hidden;
+  border: 1px solid transparent;
+  transition: border-color 0.3s;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    filter: blur(1.5rem) saturate(150%);
+    transition: filter 0.3s;
+    z-index: 1;
+  }
+
+  &:nth-child(1),
+  &:nth-child(2) {
+    &::before {
+      background: linear-gradient(115deg,
+          hsla(var(--green) 20 15 / 0.7) 25%,
+          hsla(var(--green) 25 25 / 0.8) 50%,
+          hsla(var(--green) 60 60 / 0.6) 80%);
+    }
+
+    &:hover {
+      border-color: hsl(var(--accent-600));
+
+      &::before {
+        filter: blur(0.9rem) saturate(200%);
+      }
+    }
+  }
+
+  &:nth-child(3),
+  &:nth-child(4) {
+    &::before {
+      background: linear-gradient(115deg,
+          hsla(var(--blue) 10 15 / 0.7) 25%,
+          hsla(var(--blue) 15 25 / 0.8) 50%,
+          hsla(var(--blue) 60 60 / 0.6) 80%);
+    }
+
+    &:hover {
+      border-color: hsl(var(--blue) 90 40);
+
+      &::before {
+        filter: blur(0.9rem) saturate(200%);
+      }
+    }
+  }
+
+  & h3 {
+    z-index: 2;
+  }
+}
+
+@media (min-width: 768px) {
+  .main-page_hero-text {
+    text-align: end;
+  }
+
+  .main-page_links {
+    justify-content: center;
+  }
+
+  .main-page_link-card {
+    max-width: 21.33rem;
+  }
+}