kopia lustrzana https://github.com/learn-awesome/learndb
sidebar for mobile view
cssbubble
rodzic
94f61d253f
commit
c54237c59d
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
function resetQuery(){
|
||||
query = '';
|
||||
showSearch =false;
|
||||
}
|
||||
|
||||
$: query && fetch(`/learn/items.json?_shape=array&name__contains=${query}&_size=6`)
|
||||
|
|
|
|||
|
|
@ -93,7 +93,11 @@
|
|||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="nav">
|
||||
<NavButtonWithLabel isActive={currentView === "/topics"} target="#/topics" label="Topics">
|
||||
<NavButtonWithLabel
|
||||
isActive={currentView === "/topics"}
|
||||
target="#/topics"
|
||||
label="Topics"
|
||||
>
|
||||
<LibraryIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
</NavButtonWithLabel>
|
||||
|
||||
|
|
@ -101,17 +105,17 @@
|
|||
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
</NavButtonWithLabel>
|
||||
|
||||
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
|
||||
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
|
||||
<GiftIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
<h3 class="text-center">Random Topic</h3>
|
||||
</a>
|
||||
|
||||
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
|
||||
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
|
||||
<GiftIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
<h3 class="text-center">Random Item</h3>
|
||||
</a>
|
||||
|
||||
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
|
||||
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
|
||||
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
<h3 class="text-center"> Search</h3>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
{#if format.id == 'book'}
|
||||
<sl-tab-panel name={format.id} active={i == 0}>
|
||||
<div class="grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-items-center">
|
||||
<div class="grid gap-5 grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 justify-items-center">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<BookCard {item}/>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,13 @@
|
|||
export let label;
|
||||
export let target;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<a href={target} class={(isActive ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg hover:text-lightSecondary2 group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
|
||||
<a
|
||||
href={target}
|
||||
class={(isActive ? 'sm:bg-lightPrimCont sm:text-lightPrimary sm:dark:bg-darkPrimCont sm:dark:text-darkPrimary' : '') + " w-full hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
|
||||
<slot></slot>
|
||||
|
||||
<h3 class="text-center"> {label}</h3>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</script>
|
||||
|
||||
<form class="w-full p-2 inline-flex flex-wrap" on:submit|preventDefault>
|
||||
<form class="w-full p-2 gap-3 mt-12 inline-flex flex-wrap" on:submit|preventDefault>
|
||||
<sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
|
||||
<sl-icon name="search" slot="prefix"></sl-icon>
|
||||
</sl-input>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</fluent-combobox>
|
||||
{/if}
|
||||
|
||||
<sl-select class="ml-2 w-52" on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
|
||||
<sl-select class="w-52" on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
|
||||
<sl-menu-item value="">Any tag</sl-menu-item>
|
||||
<sl-menu-item value="inspirational">Inspirational</sl-menu-item>
|
||||
<sl-menu-item value="educational">Educational</sl-menu-item>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
|
||||
</sl-select>
|
||||
|
||||
<sl-select class="ml-2 w-44" on:sl-change="{e => query.level = e.target.value}" value={query.level}>
|
||||
<sl-select class="w-44" on:sl-change="{e => query.level = e.target.value}" value={query.level}>
|
||||
<sl-menu-item value="">Any level</sl-menu-item>
|
||||
<sl-menu-item value="childlike">Childlike</sl-menu-item>
|
||||
<sl-menu-item value="beginner">Beginner</sl-menu-item>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<sl-menu-item value="research">Research</sl-menu-item>
|
||||
</sl-select>
|
||||
|
||||
<sl-select class="ml-2 w-52" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
|
||||
<sl-select class="w-52" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
|
||||
<sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
|
||||
<sl-menu-item value="rating">Sort by Rating</sl-menu-item>
|
||||
<sl-menu-item value="year">Sort by Year</sl-menu-item>
|
||||
|
|
|
|||
|
|
@ -8,113 +8,100 @@
|
|||
</script>
|
||||
|
||||
<div >
|
||||
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
|
||||
{#if isNavDrawerOpen}
|
||||
<div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
|
||||
<!--
|
||||
Off-canvas menu backdrop, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-0"
|
||||
To: "opacity-100"
|
||||
Leaving: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
|
||||
|
||||
<div class="fixed inset-0 flex z-40">
|
||||
<!--
|
||||
Off-canvas menu, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition ease-in-out duration-300 transform"
|
||||
From: "-translate-x-full"
|
||||
To: "translate-x-0"
|
||||
Leaving: "transition ease-in-out duration-300 transform"
|
||||
From: "translate-x-0"
|
||||
To: "-translate-x-full"
|
||||
-->
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1">
|
||||
<!--
|
||||
Close button, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "ease-in-out duration-300"
|
||||
From: "opacity-0"
|
||||
To: "opacity-100"
|
||||
Leaving: "ease-in-out duration-300"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div class="absolute top-0 right-0 -mr-12 pt-2">
|
||||
<button on:click={e => isNavDrawerOpen = false} type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0 flex items-center px-4">
|
||||
<a href="#/" class="">LearnAwesome</a>
|
||||
</div>
|
||||
<div class="mt-5 flex-1 h-0 overflow-y-auto">
|
||||
<nav class="px-2 space-y-1">
|
||||
<slot name="sidebar"></slot>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0 w-14" aria-hidden="true">
|
||||
<!-- Dummy element to force sidebar to shrink to fit close icon -->
|
||||
<div class="md:pl-64 flex flex-col flex-1">
|
||||
<div class=" sticky top-0 z-10 flex-shrink-0 flex bg-lightPrimary text-lightPrimCont shadow">
|
||||
{#if isNavDrawerOpen == false}
|
||||
<button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Icon kind="menu"/>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if isNavDrawerOpen}
|
||||
<button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<Icon kind="close"/>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div class="md:hidden py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightPrimCont group">
|
||||
<a href="/" class="">LearnAwesome</a>
|
||||
<div class="w-1/5 mt-0.25 h-0.5 bg-white group-hover:w-full ease-in-out duration-300"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex justify-between">
|
||||
|
||||
{#if showNotificationBell || showProfileMenu}
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
{#if showNotificationBell}
|
||||
<button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<Icon kind="bell"/>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if showProfileMenu}<MenuButton />{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex flex-col flex-grow pt-5 border-r overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightTertiary">
|
||||
<a href="/" class="">LearnAwesome</a>
|
||||
|
||||
<!-- content -->
|
||||
<main class="">
|
||||
<div class="py-6">
|
||||
<div class="max-w-none mx-auto px-4 sm:px-6 md:px-8">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
<div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
|
||||
<nav class="flex-1 pb-4 space-y-1">
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
|
||||
{#if isNavDrawerOpen}
|
||||
<div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
|
||||
<div class="fixed inset-0 bg-lightSecondary bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
|
||||
|
||||
<div class="fixed inset-y-0 left-0 flex z-50 mt-12">
|
||||
<div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-lightPrimary text-lightBg dark:bg-darkSecondary dark:text-darkBg">
|
||||
<!-- <div class="absolute top-0 right-0 -mr-12 pt-2"> -->
|
||||
|
||||
<!-- <button on:click={e => isNavDrawerOpen = false} type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<span class="sr-only">Close sidebar</span> -->
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<!-- <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div class="flex-shrink-0 flex items-center tracking-wider font-bold text-lightPrimCont">
|
||||
<a href="#/" class="">LearnAwesome</a>
|
||||
</div> -->
|
||||
<div class="ml-6 flex-1 h-0 overflow-y-auto">
|
||||
<nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
|
||||
<slot name="nav"></slot>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:pl-64 flex flex-col flex-1">
|
||||
<div class="sticky top-0 z-10 flex-shrink-0 flex bg-cyan-900 text-white shadow">
|
||||
<button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Icon kind="menu"/>
|
||||
</button>
|
||||
<div class="flex-1 flex justify-between">
|
||||
|
||||
{#if showNotificationBell || showProfileMenu}
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
{#if showNotificationBell}
|
||||
<button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<Icon kind="bell"/>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if showProfileMenu}<MenuButton />{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="">
|
||||
<div class="py-6">
|
||||
<div class="max-w-none mx-auto px-4 sm:px-6 md:px-8">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- <div class="flex-shrink-0 w-14" aria-hidden="true"> -->
|
||||
<!-- Dummy element to force sidebar to shrink to fit close icon -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex flex-col flex-grow pt-5 border-r overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightTertiary">
|
||||
<a href="/" class="">LearnAwesome</a>
|
||||
</div>
|
||||
<div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
|
||||
<nav class="flex-1 pb-4 space-y-1">
|
||||
<slot name="nav"></slot>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -13,6 +13,11 @@
|
|||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
|
||||
</svg>
|
||||
{:else if kind === "close"}
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
{:else if kind === "bell"}
|
||||
<!-- Heroicon name: outline/bell -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
||||
|
|
@ -24,12 +29,12 @@
|
|||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{:else if kind === "dots"}
|
||||
<!-- Heroicon name: solid/dots-vertical -->
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
<!-- Heroicon name: solid/dots-vertical -->
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
{:else if kind === "link"}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{/if}
|
||||
|
|
@ -15,7 +15,9 @@
|
|||
lightBg: '#fafafa', //zinc-50
|
||||
lightPrimCont: '#dbeafe', // blue-200
|
||||
lightButtonBg: 'rgb(20 83 45)', //green-900
|
||||
light: '#ffffff', //white
|
||||
|
||||
dark: '#0F172A', //slate-900
|
||||
darkPrimary: 'rgb(147 197 253)', //blue-300
|
||||
darkSecondary: 'rgb(203 213 225)', //slate-300
|
||||
darkTertiary: 'rgb(216 180 254)', //purple-300
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="max-w-none mx-auto h-full bg-lightBg dark:bg-darkBg text-lightPrimary dark:text-darkPrimary font-serif">
|
||||
<body class="max-w-none mx-auto h-full bg-light dark:bg-dark text-lightPrimary dark:text-darkPrimary font-serif">
|
||||
<div class="h-full" id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue