elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-27 13:38:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

responsiveness

Browse Source
This commit is contained in:
Felix Roos 2022-12-22 23:07:14 +01:00
parent f18a2a11fa
commit 6a9e9ebc4c
3 changed files with 8 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
website/src/components/PageContent/PageContent.astro
View File

@ -16,9 +16,11 @@ const title = frontmatter.title;
<article id="article" class="content"> <article id="article" class="content">
<section class="main-section"> <section class="main-section">
<nav class="block sm:hidden"> <!-- TODO: add dropdown toc on mobile -->
<!-- <nav class="block sm:hidden mb-8">
<span>On this Page:</span>
<TableOfContents client:media="(max-width: 50em)" headings={headings} /> <TableOfContents client:media="(max-width: 50em)" headings={headings} />
</nav> </nav> -->
<div class="prose prose-invert max-w-full"> <div class="prose prose-invert max-w-full">
<slot /> <slot />
</div> </div>
@ -27,7 +29,6 @@ const title = frontmatter.title;
<MoreMenu editHref={githubEditUrl} /> <MoreMenu editHref={githubEditUrl} />
</nav> </nav>
</article> </article>
<style> <style>
.content { .content {
padding: 0; padding: 0;
@ -37,18 +38,4 @@ const title = frontmatter.title;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content > section {
margin-bottom: 4rem;
}
.block {
display: block;
}
@media (min-width: 50em) {
.sm\:hidden {
display: none;
}
}
</style> </style>

6
website/src/layouts/MainLayout.astro
View File

@ -30,14 +30,14 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
</title> </title>
</head> </head>
<body class="h-screen text-gray-50 "> <body class="h-screen text-gray-50">
<div class="w-full h-full space-y-4 flex flex-col"> <div class="w-full h-full space-y-4 flex flex-col">
<header class="max-w-full fixed top-0 w-full z-[100]"> <header class="max-w-full fixed top-0 w-full z-[100]">
<Header currentPage={currentPage} /> <Header currentPage={currentPage} />
</header> </header>
<main class="relative pt-16"> <main class="relative pt-16">
<div class="h-full top-0 overflow-auto px-2 min-w-[300px] flex xl:justify-center pl-[300px] xl:pl-0"> <div class="h-full top-0 overflow-auto min-w-[300px] flex xl:justify-center pr-4 pl-4 md:pl-[300px] xl:pl-0">
<aside title="Site Navigation" class="fixed w-[300px] px-6 left-0"> <aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed">
<LeftSidebar currentPage={currentPage} /> <LeftSidebar currentPage={currentPage} />
</aside> </aside>
<PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}> <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>

2
website/src/repl/Footer.jsx
View File

@ -104,7 +104,7 @@ export function Footer({ context }) {
</p> </p>
<p> <p>
To learn more about what this all means, check out the{' '} To learn more about what this all means, check out the{' '}
<a href="https://strudel.tidalcycles.org/tutorial" target="_blank"> <a href="./tutorial" target="_blank">
interactive tutorial interactive tutorial
</a> </a>
. Also feel free to join the{' '} . Also feel free to join the{' '}