mirror of
https://github.com/zadam/trilium.git
synced 2025-10-19 22:58:52 +02:00
feat(website): add footer social buttons
This commit is contained in:
Elian Doran
parent
d71d1ce8b4
commit
5e07231d78
1
apps/website/src/assets/boxicons/bx-discussion.svg
Normal file
1
apps/website/src/assets/boxicons/bx-discussion.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M20 8h-3V4c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h1v2c0 .38.21.72.55.89.14.07.29.11.45.11.21 0 .42-.07.6-.2L9 15v2c0 1.1.9 2 2 2h3.67l3.73 2.8c.18.13.39.2.6.2.15 0 .31-.04.45-.11A1 1 0 0 0 20 21v-2c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2M6 12H4V4h11v8h-5c-.12 0-.24.03-.35.07-.04.02-.07.04-.11.06-.05.02-.09.04-.14.07L7 14v-1c0-.55-.45-1-1-1m14 5h-1c-.55 0-1 .45-1 1v1l-2.4-1.8a1 1 0 0 0-.6-.2h-4v-3h4c1.1 0 2-.9 2-2v-2h3z"/></svg>
|
||||
|
After Width: | Height: | Size: 589 B |
1
apps/website/src/assets/boxicons/bx-message-dots.svg
Normal file
1
apps/website/src/assets/boxicons/bx-message-dots.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M4 19h3v2c0 .36.19.69.51.87a1 1 0 0 0 1-.01L13.27 19h6.72c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2M4 5h16v12h-7c-.18 0-.36.05-.51.14L9 19.23V18c0-.55-.45-1-1-1H4z"/><path d="M8 10a1 1 0 1 0 0 2 1 1 0 1 0 0-2m4 0a1 1 0 1 0 0 2 1 1 0 1 0 0-2m4 0a1 1 0 1 0 0 2 1 1 0 1 0 0-2"/></svg>
|
||||
|
After Width: | Height: | Size: 461 B |
1
apps/website/src/assets/boxicons/bx-reddit.svg
Normal file
1
apps/website/src/assets/boxicons/bx-reddit.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M15.09 11.65c-.65 0-1.15.69-1.11 1.53.04.85.53 1.15 1.18 1.15s1.23-.34 1.19-1.19-.6-1.5-1.26-1.5Zm-.78 3.45c-.72-.07-1.5-.11-2.31-.11s-1.59.04-2.31.11c-.12.01-.2.14-.15.25a2.666 2.666 0 0 0 4.92 0c.05-.11-.03-.24-.15-.25m-4.28-1.92c.04-.85-.46-1.53-1.11-1.53s-1.22.65-1.26 1.5.53 1.19 1.19 1.19 1.14-.31 1.18-1.15Z"/><path d="M12 2C6.48 2 2 6.48 2 12c0 2.76 1.12 5.26 2.93 7.07l-1.9 1.9a.596.596 0 0 0 .42 1.02H12c5.52 0 10-4.48 10-10S17.52 2 12 2m6.67 11.77c-.07 2.71-3.03 4.9-6.66 4.9s-6.59-2.18-6.66-4.89a2.33 2.33 0 0 1-1.34-2.11c0-1.29 1.05-2.34 2.34-2.34.54 0 1.03.18 1.43.49 1.06-.66 2.4-1.08 3.87-1.14A2.69 2.69 0 0 1 14.05 6c.16-.76.83-1.33 1.63-1.33.92 0 1.67.75 1.67 1.67s-.75 1.67-1.67 1.67c-.79 0-1.45-.55-1.62-1.28-.96.14-1.69.96-1.69 1.95 1.48.06 2.83.48 3.91 1.14a2.343 2.343 0 0 1 3.76 1.86c0 .93-.55 1.73-1.33 2.11Z"/></svg>
|
||||
|
After Width: | Height: | Size: 997 B |
@ -1,8 +1,29 @@
|
||||
footer {
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
color: var(--muted-color);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
footer .content-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .social-buttons {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
footer a.social-button {
|
||||
color: var(--muted-color);
|
||||
transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
footer a.social-button:hover {
|
||||
color: var(--brand-1);
|
||||
opacity: 1;
|
||||
}
|
||||
@ -1,14 +1,53 @@
|
||||
import "./Footer.css";
|
||||
import Icon from "./Icon";
|
||||
import githubIcon from "../assets/boxicons/bx-github.svg?raw";
|
||||
import githubDiscussionsIcon from "../assets/boxicons/bx-discussion.svg?raw";
|
||||
import matrixIcon from "../assets/boxicons/bx-message-dots.svg?raw";
|
||||
import redditIcon from "../assets/boxicons/bx-reddit.svg?raw";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<div class="content-wrapper">
|
||||
<p>
|
||||
<div class="footer-text">
|
||||
© 2024-2025 <a href="https://github.com/eliandoran">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors">team</a>.<br />
|
||||
© 2017-2024 <a href="https://github.com/zadam">zadam</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="social-buttons">
|
||||
<SocialButton
|
||||
name="GitHub"
|
||||
iconSvg={githubIcon}
|
||||
url="https://github.com/TriliumNext/Trilium"
|
||||
/>
|
||||
|
||||
<SocialButton
|
||||
name="GitHub Discussions"
|
||||
iconSvg={githubDiscussionsIcon}
|
||||
url="https://github.com/orgs/TriliumNext/discussions"
|
||||
/>
|
||||
|
||||
<SocialButton
|
||||
name="Matrix"
|
||||
iconSvg={matrixIcon}
|
||||
url="https://matrix.to/#/#triliumnext:matrix.org"
|
||||
/>
|
||||
|
||||
<SocialButton
|
||||
name="Reddit"
|
||||
iconSvg={redditIcon}
|
||||
url="https://www.reddit.com/r/Trilium/"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
function SocialButton({ name, iconSvg, url }: { name: string, iconSvg: string, url: string }) {
|
||||
return (
|
||||
<a className="social-button" href={url} target="_blank" title={name}>
|
||||
<Icon svg={iconSvg} />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ import Card from "../../components/Card";
|
||||
export default function Donate() {
|
||||
return (
|
||||
<>
|
||||
<Section title="Support us" className="donate">
|
||||
<Section title="Support us" className="donate fill">
|
||||
<div class="grid-2-cols">
|
||||
<Card title="Financial donations">
|
||||
<p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user