rewrite footer
This commit is contained in:
parent
c516c950a8
commit
a0727c05e5
GPG key ID:
4C88A185FB89301E
|
|
@ -1,34 +1,22 @@
|
|||
---
|
||||
import { getHTMLIcon } from "./iconsModule";
|
||||
|
||||
const gitString = getHTMLIcon("git");
|
||||
const matrixString = getHTMLIcon("matrix");
|
||||
import matrixLogo from "@icons/matrix-logo.svg?raw";
|
||||
import gitLogo from "@icons/git-logo.svg?raw";
|
||||
---
|
||||
<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 class="credits">
|
||||
<p class="hint">Brought to you by:</p>
|
||||
<a href="https://outfoxxed.me" target="_blank">outfoxxed <span class="hint">- Lead Developer</span></a>
|
||||
<a href="https://github.com/Xanazf" target="_blank">Xanazf <span class="hint">- Website Developer / Designer</span></a>
|
||||
<a href="https://github.com/quickshell-mirror/quickshell/graphs/contributors" target="_blank">
|
||||
and our contributors
|
||||
</a>
|
||||
</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 class="socials">
|
||||
<a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank">
|
||||
<Fragment set:html={matrixLogo}/>
|
||||
</a>
|
||||
<a href="https://git.outfoxxed.me/outfoxxed/quickshell" target="_blank">
|
||||
<Fragment set:html={gitLogo}/>
|
||||
</a>
|
||||
</section>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
1
src/icons/git-logo.svg
Normal file
1
src/icons/git-logo.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 833 B |
1
src/icons/matrix-logo.svg
Normal file
1
src/icons/matrix-logo.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 493 B |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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: min(1.112rem, max(1svw, 0.8rem));
|
||||
font-size: 0.9rem;
|
||||
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%);
|
||||
padding: 1rem;
|
||||
background-color: hsl(var(--overlay-bkg));
|
||||
border-top: solid hsl(var(--overlay-bkg-border)) 1px;
|
||||
|
||||
& ._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 {
|
||||
all: unset;
|
||||
& > p { margin-bottom: 0.2rem }
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > a { text-decoration: none }
|
||||
|
||||
& em {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
& span:first-child {
|
||||
& em {
|
||||
color: hsl(var(--green) 44 60);
|
||||
}
|
||||
}
|
||||
|
||||
& span:last-child {
|
||||
& em {
|
||||
color: hsl(var(--blue) 44 60);
|
||||
}
|
||||
& .hint {
|
||||
color: hsl(var(--text-darker));
|
||||
}
|
||||
}
|
||||
|
||||
& ._socials {
|
||||
height: 100%;
|
||||
width: max-content;
|
||||
& .links { justify-self: flex-end }
|
||||
|
||||
& .socials {
|
||||
display: flex;
|
||||
gap: 0.373rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
font-size: 2.5rem;
|
||||
|
||||
& span {
|
||||
font-size: 2rem;
|
||||
|
||||
& a {
|
||||
all: unset;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
& a { display: flex }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@
|
|||
"@icons": [
|
||||
"./src/components/icons.tsx"
|
||||
],
|
||||
"@icons/*": [
|
||||
"./src/icons/*"
|
||||
],
|
||||
"@components/*": [
|
||||
"./src/components/*"
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in a new issue