rewrite footer

src/components/Footer.astro

@@ -1,34 +1,22 @@
 ---
-import { getHTMLIcon } from "./iconsModule";
+import matrixLogo from "@icons/matrix-logo.svg?raw";
-
+import gitLogo from "@icons/git-logo.svg?raw";
-const gitString = getHTMLIcon("git");
-const matrixString = getHTMLIcon("matrix");
 ---
 <footer>
-  <section class="_credits">
+  <section class="credits">
-    <span>
+    <p class="hint">Brought to you by:</p>
-      <a target="_blank" rel="noreferrer" href="https://git.outfoxxed.me/outfoxxed">outfoxxed</a>
+    <a href="https://outfoxxed.me" target="_blank">outfoxxed <span class="hint">- Lead Developer</span></a>
-      <em>[Main Developer]</em>
+    <a href="https://github.com/Xanazf" target="_blank">Xanazf <span class="hint">- Website Developer / Designer</span></a>
-    </span>
+    <a href="https://github.com/quickshell-mirror/quickshell/graphs/contributors" target="_blank">
-    <span>
+      and our contributors
-      <a target="_blank" rel="noreferrer" href="https://github.com/Xanazf">Xanazf</a>
+    </a>
-      <em>[Web Designer & Developer]</em>
-    </span>
   </section>
-  <section class="_socials">
+  <section class="socials">
-    <span class="matrix">
+    <a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank">
-      <a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" rel="noreferrer">
+      <Fragment set:html={matrixLogo}/>
-        <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>
+    <a href="https://git.outfoxxed.me/outfoxxed/quickshell" target="_blank">
-    <span class="git">
+      <Fragment set:html={gitLogo}/>
-      <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

@@ -55,8 +55,8 @@ const { headings } = Astro.props;
     <Search/>
     <div class="header-spacer"/>
     <ThemeSelect client:load />
-    <div class="toc-collapsed-spacer header-spacer"/>
     {url.length > 2 ?
+			<div class="toc-collapsed-spacer header-spacer"/>
       <TOC headings={headings} types={sidebarData} mobile={true}/>
     : null}
   </div>

src/icons/git-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-11.5 -11.5 115 115"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:currentColor;fill-opacity:1" d="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"/></g></svg>

src/icons/matrix-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M72,216a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8H64a8,8,0,0,1,0,16H48V208H64A8,8,0,0,1,72,216ZM216,32H192a8,8,0,0,0,0,16h16V208H192a8,8,0,0,0,0,16h24a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Zm-32,88a32,32,0,0,0-56-21.13,31.93,31.93,0,0,0-40.71-6.15A8,8,0,0,0,72,96v64a8,8,0,0,0,16,0V120a16,16,0,0,1,32,0v40a8,8,0,0,0,16,0V120a16,16,0,0,1,32,0v40a8,8,0,0,0,16,0Z"></path></svg>

src/styles/css-config/base.css

@@ -39,6 +39,10 @@ html {
   --bg-900: var(--white) 12 16;
 
   /* docs */
+  --text: var(--white) 0 0;
+  --text-dark: var(--white) 0 18;
+  --text-darker: var(--white) 0 30;
+  --link: var(--accent-600);
   --prop-color: 350 78 70;
   --prop-link-color: 350 78 60;
   --func-color: 50 68 50;
@@ -82,6 +86,10 @@ html.dark {
   --bg-900: var(--blue) 82 3;
 
   /* docs */
+  --text: var(--white) 0 100;
+  --text-dark: var(--white) 0 70;
+  --text-darker: var(--white) 0 40;
+  --link: var(--accent-500);
   --prop-color: 350 78 70;
   --prop-link-color: 350 78 60;
   --func-color: 50 78 70;

src/styles/global.css

@@ -24,7 +24,7 @@
 }
 
 a {
-  color: hsla(var(--accent-600));
+  color: hsl(var(--link));
   text-decoration: none;
 
   &:hover {
@@ -44,10 +44,6 @@ html.dark {
     background-color: hsl(var(--bg-900));
     color: hsl(var(--secondary-400));
   }
-
-  & a {
-    color: hsl(var(--accent-500));
-  }
 }
 
 /* layout and positioning */
@@ -115,73 +111,48 @@ html.dark {
 }
 
 footer {
-  position: sticky;
-  bottom: -3.5rem;
   width: 100%;
-  height: 3.5rem;
+  font-size: 0.9rem;
-  font-size: min(1.112rem, max(1svw, 0.8rem));
   display: flex;
   justify-content: space-between;
-  padding-inline: 1rem;
+  padding: 1rem;
-  background: linear-gradient(150deg,
+  background-color: hsl(var(--overlay-bkg));
-      hsla(var(--blue) 60 5 / 1) 10%,
+  border-top: solid hsl(var(--overlay-bkg-border)) 1px;
-      hsla(var(--blue) 75 6 / 1) 25%,
-      hsla(var(--blue) 80 8 / 1) 55%,
-      hsla(var(--blue) 77 7 / 1) 80%);
 
-  & ._credits {
+  & a {
+    color: hsl(var(--text-dark));
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: hsl(var(--text));
+    }
+  }
+
+  & .credits {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 0.127rem;
-    color: hsl(var(--blue) 10 55);
+    color: hsl(var(--text-dark));
 
-    & a {
+    & > p { margin-bottom: 0.2rem }
-      all: unset;
 
-      &:hover {
+    & > a { text-decoration: none }
-        text-decoration: underline;
+
-        cursor: pointer;
+    & .hint {
+      color: hsl(var(--text-darker));
     }
   }
 
-    & em {
+  & .links { justify-self: flex-end }
-      all: unset;
-    }
 
-    & span:first-child {
+  & .socials {
-      & 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: flex-start;
-    align-items: center;
+    font-size: 2.5rem;
 
-    & span {
+    & a { display: flex }
-      font-size: 2rem;
-
-      & a {
-        all: unset;
-        display: flex;
-        height: 100%;
-        width: 100%;
-        justify-self: center;
-        align-self: center;
-      }
-    }
   }
 }
 

tsconfig.json

@@ -23,6 +23,9 @@
       "@icons": [
         "./src/components/icons.tsx"
       ],
+      "@icons/*": [
+        "./src/icons/*"
+      ],
       "@components/*": [
         "./src/components/*"
       ],