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

fix/layout-width #19

Merged
GauthierWebDev merged 3 commits from fix/layout-width into main 2025-04-22 12:19:44 +00:00
Conversation 0 Commits 3 Files Changed 6 +26 -24
6 changed files with 26 additions and 24 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 ( return (
<div <div
class={clsx( 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, styles[props.type || "note"].container,
{ "cursor-pointer": props.collapsible }, { "cursor-pointer": props.collapsible },
)} )}

2
app/components/PrevNextLinks.tsx
View File

@ -111,7 +111,7 @@ export function PrevNextLinks() {
if (getNeighboringLinks().length === 0) return null; if (getNeighboringLinks().length === 0) return null;
return ( 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] && ( {getNeighboringLinks()[0] && (
<PageLink <PageLink
dir="previous" dir="previous"

2
app/components/SmoothScroll.tsx
View File

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

38
app/components/Snippet.tsx
View File

@ -131,25 +131,25 @@ export function Snippet(props: SnippetProps) {
</div> </div>
</nav> </nav>
{selectedTab() && ( <For each={props.snippets}>
<div class="mt-6"> {(tab) => (
{selectedTab().code && ( <div class={clsx("mt-6", isActive(tab) ? "block" : "hidden")}>
<Highlight {tab.code && (
class={clsx( <Highlight
"!pt-0 !px-1 max-h-96 overflow-auto mb-2", class={clsx(
props.dark && "dark text-white", "!pt-0 !px-1 max-h-96 overflow-auto mb-2",
)} props.dark && "dark text-white",
language={(selectedTab() as SnippetTab).codeLanguage} )}
withLineNumbers={(selectedTab() as SnippetTab).withLineNumbers} language={tab.codeLanguage}
> withLineNumbers={tab.withLineNumbers}
{(selectedTab() as SnippetTab).code} >
</Highlight> {tab.code}
)} </Highlight>
{!selectedTab().code && ( )}
<div class="pb-1">{(selectedTab() as CommonTab).children}</div> {!tab.code && <div class="pb-1">{tab.children}</div>}
)} </div>
</div> )}
)} </For>
</div> </div>
</div> </div>
); );

4
app/layouts/DocsLayout.tsx
View File

@ -25,7 +25,7 @@ export function DocsLayout(props: DocsLayoutProps) {
<div class="flex"> <div class="flex">
<main <main
id="article-content" 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> <article>
<DocsHeader <DocsHeader
@ -34,12 +34,12 @@ export function DocsLayout(props: DocsLayoutProps) {
/> />
<Prose>{props.children}</Prose> <Prose>{props.children}</Prose>
</article> </article>
<PrevNextLinks />
</main> </main>
<TableOfContents /> <TableOfContents />
</div> </div>
<PrevNextLinks />
<LatestDocs /> <LatestDocs />
</> </>
); );

2
app/partials/LatestDocs.tsx
View File

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