GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Update styles in various components

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-22 14:12:48 +02:00
parent 96ab48361f
commit 51771c4871
6 changed files with 8 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Callout.tsx
View File

@ -42,7 +42,7 @@ export default function Callout(props: {
return (
<div
class={clsx(
"my-8 flex flex-col rounded-3xl p-6",
"my-8 flex flex-col w-full rounded-3xl p-6",
styles[props.type || "note"].container,
{ "cursor-pointer": props.collapsible },
)}

2
app/components/PrevNextLinks.tsx
View File

@ -111,7 +111,7 @@ export function PrevNextLinks() {
if (getNeighboringLinks().length === 0) return null;
return (
<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6">
<dl class="mt-12 mx-4 lg:mr-0 flex gap-4 border-t border-slate-200 pt-6">
{getNeighboringLinks()[0] && (
<PageLink
dir="previous"

2
app/components/SmoothScroll.tsx
View File

@ -72,6 +72,8 @@ export function SmoothScroll(props: SmoothScrollProps) {
const handleWheel = (event: WheelEvent) => {
if (isMobile()) return;
if (event.ctrlKey) return;
if (event.metaKey) return;
const hoveredElement = document.elementFromPoint(
event.clientX,

5
app/layouts/DocsLayout.tsx
View File

@ -25,7 +25,7 @@ export function DocsLayout(props: DocsLayoutProps) {
<div class="flex">
<main
id="article-content"
class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow"
class="max-w-2xl lg:max-w-none w-10 min-w-0 flex-auto px-4 py-16 lg:pr-0 lg:pl-8 xl:px-16 grow"
>
<article>
<DocsHeader
@ -34,13 +34,12 @@ export function DocsLayout(props: DocsLayoutProps) {
/>
<Prose>{props.children}</Prose>
</article>
<PrevNextLinks />
</main>
<TableOfContents />
</div>
<PrevNextLinks />
<LatestDocs />
</>
);

18
app/layouts/LayoutDefault.tsx
View File

@ -31,22 +31,6 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
{pageContext.urlPathname === "/" && <HeroSection />}
{/* Backup */}
{/* <div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
<div class="hidden lg:relative lg:block lg:flex-none">
<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" />
<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" />
<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
<Navigation />
</div>
</div>
<div class="flex flex-col max-w-[calc(100vw-20rem)]">
<DocsLayout>{props.children}</DocsLayout>
</div>
</div> */}
<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
<div class="hidden lg:relative lg:block lg:flex-none">
<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
@ -57,7 +41,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
</div>
</div>
<div class="flex flex-col max-w-[calc(100vw-20rem)]">
<div class="flex flex-col">
<DocsLayout>{props.children}</DocsLayout>
</div>
</div>

2
app/partials/LatestDocs.tsx
View File

@ -8,7 +8,7 @@ export function LatestDocs() {
const data = useData<Data>();
return (
<section class="bg-violet-200 rounded-md p-4 my-4 ml-4 lg:mr-2">
<section class="bg-violet-200 rounded-md p-4 m-4 lg:mr-0">
<h2 class="font-display text-3xl tracking-tight text-slate-900 text-center">
Dernières documentations
</h2>