max/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style toc simpler

Browse Source
This commit is contained in:
max_richter 2024-04-07 02:56:29 +02:00
parent 7c331406a5
commit ff1188b4b2
3 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app.css
View File

@ -11,7 +11,6 @@ h3 {
article>h1 {
font-size: 28px;
margin-top: 24px;
}
article>h2 {

18
src/components/ImageSlider.svelte
View File

@ -62,10 +62,12 @@
style={`--height:${height}px`}
>
{#if title}
<div class="flex items-center p-x-4 bg justify-between">
<div class="flex items-center p-x-4 p-y-6 bg justify-between">
<h3>{title}</h3>
<div class="overflow-hidden rounded-md bg-light gap-2 flex p-1">
<div
class="overflow-hidden rounded-md bg-light gap-2 flex p-2 border border-light"
>
<button
class="flex-1 i-tabler-arrow-left"
aria-label="previous image"
@ -80,10 +82,10 @@
</div>
{/if}
<div class="images" bind:this={slot}>
<div class="images border-t-1 border-b-1 border-neutral" bind:this={slot}>
<slot />
</div>
<div class="p-2 flex place-content-between bg">
<div class="px-4 flex items-center place-content-between bg">
<p>
{#if images?.length}
{index + 1}/{images?.length}
@ -97,7 +99,7 @@
<style>
.wrapper {
grid-template-rows: 1fr 40px;
grid-template-rows: 1fr 50px;
transition: height 0.3s;
}
@ -106,11 +108,11 @@
}
.wrapper.title {
grid-template-rows: 40px 1fr 40px;
grid-template-rows: 50px 1fr 50px;
}
.loaded {
height: calc(var(--height) + 40px);
height: calc(var(--height) + 50px);
}
.not-loaded .images :global(picture):first-child {
@ -118,7 +120,7 @@
}
.wrapper.title.loaded {
height: calc(var(--height) + 80px);
height: calc(var(--height) + 100px);
}
.images :global(picture) {

2
src/components/TOC.astro
View File

@ -12,7 +12,7 @@ const { headings } = Astro.props;
<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
<details
class="py-2 px-4 rounded-xl border border-neutral flex flex-col bg gap-2"
class="py-2 lg:px-4 rounded-xl lg:border lg:border-neutral flex flex-col lg:bg gap-2"
>
<summary class="text-lg cursor-pointer select-none"
>{t("toc.title")}</summary