Skip to content

Commit

Permalink
layout detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
Sebastian Flick committed May 17, 2024
1 parent 23eb71d commit 1cba9ba
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 19 deletions.
8 changes: 5 additions & 3 deletions src/lib/SidebarLayout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@
</script>

<div class="max-w-full lg:grid lg:grid-cols-[320px_1fr]">
<aside class="px-4 @container h-screen shadow-[0_.5rem_1rem_rgba(0,0,0,.5)] flex flex-col">
<aside class="px-4 @container lg:h-screen shadow-[0_.5rem_1rem_rgba(0,0,0,.5)] flex flex-col">
<h1 class="flex-none text-3xl"><a href="{base}/">The Beach Atlas</a></h1>
<div class="flex @[320px]:grid flex-col @[320px]:grid-cols-2 flex-1 overflow-auto">
<div
class="flex flex-col justify-between @[600px]:grid @[600px]:grid-cols-[1fr_auto] @[600px]:grid-rows-[auto_1fr] @[600px]:gap-4 flex-1 overflow-auto"
>
<slot name="sidebar"></slot>
</div>
</aside>
<main>
<main class="h-screen">
<slot></slot>
</main>
</div>
22 changes: 11 additions & 11 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,8 @@ and morbid.</p>`
>
<i class="fa-solid fa-info"></i>
</button>
<section class="mt-6">
<h2 class="h2 my-4">explore by region</h2>
<section class="mt-2 lg:mt-6">
<h2 class="h2 my-2 lg:my-4">explore by region</h2>
<ul>
<li class="my-2">
<a
Expand All @@ -179,8 +179,8 @@ and morbid.</p>`
</li>
</ul>
</section>
<section class="mt-6">
<h2 class="h2 my-4">explore by topic</h2>
<section class="mt-2 lg:mt-6">
<h2 class="h2 my-2 lg:my-4">explore by topic</h2>
<ul>
<li class="my-2"><a href="{base}/topic/death" class="btn variant-ringed">death</a></li>
<li class="my-2"><a href="{base}/topic/leisure" class="btn variant-ringed">leisure</a></li>
Expand All @@ -193,7 +193,7 @@ and morbid.</p>`
</li>
</ul>
</section>
<Accordion class="mt-6 fill-primary-500 @[320px]:col-span-2 overflow-scroll">
<Accordion class="mt-2 lg:mt-6 fill-primary-500 @[320px]:col-span-2 overflow-scroll">
<AccordionItem>
<svelte:fragment slot="summary">About this project</svelte:fragment>
<svelte:fragment slot="content">
Expand Down Expand Up @@ -247,10 +247,10 @@ and morbid.</p>`
points="962,1957 1096,2075 1356,2173 1596,2248 2399,2465 2482,2343,2415,2197,2332,2110,2151,2099,2100,2004,2155,1886,2163,1819,2139,1772,2147,1713,2171,1669,2226,1650,2234,1595,2210,1579,1545,1654,1340,1642,1269,1646,1194,1756,1037,1788,989,1862"
></polygon>
</a>
<foreignObject x="1600" y="1900" width="450" height="300">
<foreignObject x="1600" y="1900" width="660" height="250" class="pointer-events-none">
{#if svg?.clientWidth}<button
on:click={() => modalStore.trigger(atlanticInfo)}
class="btn border bg-secondary-500 text-surface-900 hover:bg-surface-900 hover:text-secondary-500 hover:filter-none origin-top-left"
class="pointer-events-auto btn border bg-secondary-500 text-surface-900 hover:bg-surface-900 hover:text-secondary-500 hover:filter-none origin-top-left"
style="transform: scale(calc(1 / var(--scaling)));"
>
Black Atlantic
Expand All @@ -262,10 +262,10 @@ and morbid.</p>`
points="2159,1819,2277,1807,2442,1874,2549,1874,2734,1819,2734,1717,2647,1669,2568,1610,2521,1614,2482,1539,2332,1536,2230,1591,2230,1646,2171,1669,2143,1713,2135,1768"
></polygon>
</a>
<foreignObject x="2300" y="1650" width="450" height="300">
<foreignObject x="2300" y="1650" width="700" height="250" class="pointer-events-none">
{#if svg?.clientWidth}<button
on:click={() => modalStore.trigger(mediterraneanInfo)}
class="btn border bg-tertiary-500 text-surface-900 hover:bg-surface-900 hover:text-tertiary-500 hover:filter-none origin-top-left"
class="pointer-events-auto btn border bg-tertiary-500 text-surface-900 hover:bg-surface-900 hover:text-tertiary-500 hover:filter-none origin-top-left"
style="transform: scale(calc(1 / var(--scaling)));"
>
Mediterranean
Expand All @@ -277,10 +277,10 @@ and morbid.</p>`
points="1269,1646,1541,1658,2206,1579,2332,1536,2403,1484,2553,1433,2639,1307,2631,1252,2702,1260,2927,1075,2895,984,2655,425,2356,461,1911,528,1860,843,1828,980,1694,1110,1659,1181,1615,1063,1548,1075,1450,1410,1320,1469"
></polygon>
</a>
<foreignObject x="1800" y="1400" width="450" height="300">
<foreignObject x="1800" y="1400" width="660" height="250" class="pointer-events-none">
{#if svg?.clientWidth}<button
on:click={() => modalStore.trigger(northernInfo)}
class="btn border bg-quarternary-500 text-surface-900 hover:bg-surface-900 hover:text-quarternary-500 hover:filter-none origin-top-left"
class="pointer-events-auto btn border bg-quarternary-500 text-surface-900 hover:bg-surface-900 hover:text-quarternary-500 hover:filter-none origin-top-left"
style="transform: scale(calc(1 / var(--scaling)));"
>
Northern Sea
Expand Down
10 changes: 5 additions & 5 deletions src/routes/region/black-atlantic/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
<SidebarLayout>
<svelte:fragment slot="sidebar">
<a
class="btn btn-sm w-fit mt-2 border bg-primary-500 text-surface-900 hover:bg-surface-900 hover:text-primary-500 hover:filter-none"
class="btn btn-sm w-fit mt-2 border bg-primary-500 text-surface-900 hover:bg-surface-900 hover:text-primary-500 hover:filter-none @[600px]:col-start-2 @[600px]:justify-self-end @[600px]:h-fit"
href="{base}/"><span><i class="fa-solid fa-arrow-left"></i></span><span>main map</span></a
>
<section class="overflow-scroll">
<section class="overflow-scroll @[600px]:row-span-2 @[600px]:row-start-1 @[600px]:pb-4">
<h2 class="h3 mt-4 mb-2">Black Atlantic</h2>
<p>
These literary representations reflect the importance of the beach in everyday culture, as a
Expand Down Expand Up @@ -40,17 +40,17 @@
become most dramatically visible.
</p>
</section>
<section class="my-4">
<section class="my-4 @[600px]:my-0 @[600px]:col-start-2 @[600px]:justify-self-end">
<h2 class="h3">explore more regions</h2>
<ul>
<li class="mt-2">
<li class="mt-2 text-right">
<a
href="{base}/region/mediterranean"
class="btn border bg-tertiary-500 text-surface-900 hover:bg-surface-900 hover:text-tertiary-500 hover:filter-none"
>Mediterranean</a
>
</li>
<li class="mt-2">
<li class="mt-2 text-right">
<a
href="{base}/region/northern-sea"
class="btn border bg-quarternary-500 text-surface-900 hover:bg-surface-900 hover:text-quarternary-500"
Expand Down

0 comments on commit 1cba9ba

Please sign in to comment.