quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

fix footer padding

Browse source
This commit is contained in:
outfoxxed 2024-11-09 04:30:27 -08:00
parent f1d3b5e162
commit f62d148b4e
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
5 changed files with 25 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Footer.astro
View file

@ -1,8 +1,14 @@
--- ---
import matrixLogo from "@icons/matrix-logo.svg?raw"; import matrixLogo from "@icons/matrix-logo.svg?raw";
import gitLogo from "@icons/git-logo.svg?raw"; import gitLogo from "@icons/git-logo.svg?raw";
interface Props {
class?: string;
}
const props = Astro.props;
--- ---
<footer> <footer class=`${props.class ?? ""}`>
<section class="credits"> <section class="credits">
<p class="hint">Brought to you by:</p> <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://outfoxxed.me" target="_blank">outfoxxed - <span class="hint">Lead Developer</span></a>
@ -15,7 +21,7 @@ import gitLogo from "@icons/git-logo.svg?raw";
<a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" aria-label="Join our matrix space"> <a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" aria-label="Join our matrix space">
<Fragment set:html={matrixLogo}/> <Fragment set:html={matrixLogo}/>
</a> </a>
<a href="https://git.outfoxxed.me/outfoxxed/quickshell" target="_blank" aria-label="Visit our git server"> <a href="https://git.outfoxxed.me/quickshell/quickshell" target="_blank" aria-label="Visit our git server">
<Fragment set:html={gitLogo}/> <Fragment set:html={gitLogo}/>
</a> </a>
</section> </section>

2
src/layouts/BaseLayout.astro
View file

@ -1,6 +1,5 @@
--- ---
//import Header from "@components/Header.astro"; //import Header from "@components/Header.astro";
import Footer from "@src/components/Footer.astro";
import Head from "@config/Head.astro"; import Head from "@config/Head.astro";
import PreTheme from "@config/PreTheme.astro"; import PreTheme from "@config/PreTheme.astro";
@ -20,6 +19,5 @@ const { title, description } = Astro.props;
<body class="baselayout"> <body class="baselayout">
<!--<Header />--> <!--<Header />-->
<slot /> <slot />
<Footer />
</body> </body>
</html> </html>

2
src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
import Footer from "@src/components/Footer.astro";
import BaseLayout from "@layouts/BaseLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
import Marquee from "@components/marquee/Marquee.astro"; import Marquee from "@components/marquee/Marquee.astro";
import FeatureList from "@src/components/featurelist/FeatureList.astro"; import FeatureList from "@src/components/featurelist/FeatureList.astro";
@ -34,4 +35,5 @@ const title = "Quickshell";
<FeatureList/> <FeatureList/>
</section> </section>
</div> </div>
<Footer class="frontpage-footer"/>
</BaseLayout> </BaseLayout>

10
src/styles/global.css
View file

@ -148,7 +148,7 @@ footer {
font-size: 0.9rem; font-size: 0.9rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 1rem; padding: 1rem 2rem;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
background: hsl(var(--footer-bkg)); background: hsl(var(--footer-bkg));
@ -231,8 +231,12 @@ footer {
} }
@media not (min-width: 40rem) { @media not (min-width: 40rem) {
footer .credits > a { footer {
padding: 0.2rem; padding-inline: 0.75rem;
& .credits > a {
padding: 0.2rem 0;
}
} }
} }

8
src/styles/main-page.css
View file

@ -191,6 +191,10 @@ html.dark .main-page_link-card {
bottom: 0; bottom: 0;
} }
.frontpage-footer {
padding-inline: 0.75rem;
}
@media (min-width: 40rem) { @media (min-width: 40rem) {
.main-page_links_set { .main-page_links_set {
flex-wrap: nowrap; flex-wrap: nowrap;
@ -198,6 +202,10 @@ html.dark .main-page_link-card {
} }
@media (min-width: 63rem) { @media (min-width: 63rem) {
.frontpage-footer {
padding-inline: 1.5rem;
}
.main-page_links { .main-page_links {
flex-wrap: nowrap; flex-wrap: nowrap;
max-width: 78rem; max-width: 78rem;