switched to component ring

This commit is contained in:
Heli-o 2024-04-20 17:01:20 +02:00
parent d2bb4222ee
commit 89a499d231
4 changed files with 59 additions and 30 deletions

View file

@ -8,11 +8,14 @@ export const sharedPageComponents: SharedLayout = {
Component.DesktopOnly(Component.PageImage()),
Component.Homebar(),
],
footer: Component.Footer({
links: {
"Main social profile": "https://derg.social/@ulysia",
},
}),
footer: [
Component.Footer({
links: {
"Main social profile": "https://derg.social/@ulysia",
},
}),
Component.Rings()
],
}
// components for pages that display a single page (e.g. a single note)

View file

@ -0,0 +1,49 @@
import { pathToRoot } from "../util/path"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { classNames } from "../util/lang"
import { i18n } from "../i18n"
const Homebar: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
const baseDir = pathToRoot(fileData.slug!)
return (
<div class="homebar">
<div class="ring">
<a href ="https://fediring.net"><h2>Fediring:</h2></a>
<a class="ringbtn" href="https://fediring.net/previous?host=nexie.net"></a>
<a class="ringbtn" href="https://fediring.net/random">Random</a>
<a class="ringbtn" href="https://fediring.net/next?host=nexie.net"></a>
</div>
</div>
)
}
Homebar.css = `
.ring {
display:flex;
flex-flow: row wrap;
}
.ringbtn {
font-size: 0.9rem !important;
border-radius: 16px !important;
border:none !important;
background-color: rgba(100,100,100, 0.3) !important;
padding: 0.4rem 0.8rem !important;
margin: 0.2rem 0.4rem !important;
text-decoration: none !important;
width: fit-content !important;
height: fit-content !important;
cursor:pointer !important;
}
.ringbtn:hover{
background-color: rgba(100,100,100, 0.5) !important;
}
.ring svg {
display:none !important;
}
`
export default (() => Homebar) satisfies QuartzComponentConstructor

View file

@ -21,6 +21,7 @@ import RecentNotes from "./RecentNotes"
import Breadcrumbs from "./Breadcrumbs"
import PageImage from "./PageImage"
import Homebar from "./Homebar"
import Rings from "./Rings"
export {
ArticleTitle,
@ -46,4 +47,5 @@ export {
Breadcrumbs,
PageImage,
Homebar,
Rings,
}

View file

@ -1,28 +1,3 @@
@use "./base.scss";
// put your custom CSS here!
.ring {
display:flex;
flex-flow: row wrap;
}
.ringbtn {
font-size: 0.9rem !important;
border-radius: 16px !important;
border:none !important;
background-color: rgba(100,100,100, 0.3) !important;
padding: 0.4rem 0.8rem !important;
margin: 0.2rem 0.4rem !important;
text-decoration: none !important;
width: fit-content !important;
height: fit-content !important;
cursor:pointer !important;
}
.ringbtn:hover{
background-color: rgba(100,100,100, 0.5) !important;
}
.ring svg {
display:none !important;
}