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 { article>h1 {
font-size: 28px; font-size: 28px;
margin-top: 24px;
} }
article>h2 { article>h2 {

18
src/components/ImageSlider.svelte
View File

@ -62,10 +62,12 @@
style={`--height:${height}px`} style={`--height:${height}px`}
> >
{#if title} {#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> <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 <button
class="flex-1 i-tabler-arrow-left" class="flex-1 i-tabler-arrow-left"
aria-label="previous image" aria-label="previous image"
@ -80,10 +82,10 @@
</div> </div>
{/if} {/if}
<div class="images" bind:this={slot}> <div class="images border-t-1 border-b-1 border-neutral" bind:this={slot}>
<slot /> <slot />
</div> </div>
<div class="p-2 flex place-content-between bg"> <div class="px-4 flex items-center place-content-between bg">
<p> <p>
{#if images?.length} {#if images?.length}
{index + 1}/{images?.length} {index + 1}/{images?.length}
@ -97,7 +99,7 @@
<style> <style>
.wrapper { .wrapper {
grid-template-rows: 1fr 40px; grid-template-rows: 1fr 50px;
transition: height 0.3s; transition: height 0.3s;
} }
@ -106,11 +108,11 @@
} }
.wrapper.title { .wrapper.title {
grid-template-rows: 40px 1fr 40px; grid-template-rows: 50px 1fr 50px;
} }
.loaded { .loaded {
height: calc(var(--height) + 40px); height: calc(var(--height) + 50px);
} }
.not-loaded .images :global(picture):first-child { .not-loaded .images :global(picture):first-child {
@ -118,7 +120,7 @@
} }
.wrapper.title.loaded { .wrapper.title.loaded {
height: calc(var(--height) + 80px); height: calc(var(--height) + 100px);
} }
.images :global(picture) { .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"> <div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
<details <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" <summary class="text-lg cursor-pointer select-none"
>{t("toc.title")}</summary >{t("toc.title")}</summary