fix(layout): codeblock responsiveness on mobile
This commit is contained in:
parent
d815370ad1
commit
95398d70dd
|
@ -1,5 +1,5 @@
|
||||||
<div
|
<div
|
||||||
class="bg-gray-900 font-code px-4 md:px-8 py-6 rounded-lg text-white overflow-ellipsis whitespace-nowrap overflow-x-scroll md:overflow-auto shadow-xl bg-gradient-to-br from-transparent to-gray-800"
|
class="bg-gray-900 font-code px-4 md:px-8 py-6 rounded-lg text-white whitespace-nowrap overflow-x-scroll md:overflow-auto shadow-xl bg-gradient-to-br from-transparent to-gray-800"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -13,6 +13,6 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.navigation-item {
|
.navigation-item {
|
||||||
@apply flex-1 duration-300 transition ease-in-out py-2 'md:py-0' 'md:opacity-50' 'hover:cursor-pointer' 'hover:scale-110' 'hover:opacity-100';
|
@apply flex-auto 'md:flex-1' duration-300 transition ease-in-out py-2 'md:py-0' 'md:opacity-50' 'hover:cursor-pointer' 'hover:scale-110' 'hover:opacity-100';
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
<div
|
<div
|
||||||
class="bg-gradient-to-br from-transparent to-lavender-300 dark:(bg-gray-900 to-lavender-900 text-white) min-h-screen h-full w-full"
|
class="bg-gradient-to-br from-transparent to-lavender-300 dark:(bg-gray-900 to-lavender-900 text-white) min-h-screen h-full w-full"
|
||||||
>
|
>
|
||||||
<div class="container mx-auto lg:px-40 md:20 sm:px-12 px-8">
|
<div class="container mx-auto lg:px-40 md:px-20 sm:px-12 px-8 w-full">
|
||||||
<header>
|
<header>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -19,16 +19,16 @@
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="flex flex-col md:flex-row items-center py-8">
|
<div class="flex flex-col lg:flex-row items-center py-8">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<h1 class="text-6xl font-bold py-2">{$_('meta.tagline')}</h1>
|
<h1 class="text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline')}</h1>
|
||||||
<p class="text-base py-4 w-2/3">{$_('meta.explanation')}</p>
|
<p class="text-base py-4 md:w-2/3">{$_('meta.explanation')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 px-6">
|
<div class="flex-1 md:px-6 w-full">
|
||||||
<div class="max-w-xs mx-auto">
|
<div class="max-w-xs mx-auto">
|
||||||
<img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
|
<img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
|
||||||
</div>
|
</div>
|
||||||
<Codeblock class="px-4 md:px-0 mx-auto">$ curl -XGET 'https://jokesbapak2.herokuapp.com/v1/'</Codeblock>
|
<Codeblock>$ curl -XGET 'https://jokesbapak2.herokuapp.com/v1/'</Codeblock>
|
||||||
<p class="text-sm text-center py-4 opacity-70 hover:opacity-100 transition duration-300 ease-in-out">
|
<p class="text-sm text-center py-4 opacity-70 hover:opacity-100 transition duration-300 ease-in-out">
|
||||||
{$_('home.more.1')} <span on:click={() => goto('/guide')}>{$_('navigation.guide')}</span>
|
{$_('home.more.1')} <span on:click={() => goto('/guide')}>{$_('navigation.guide')}</span>
|
||||||
{$_('home.more.2')} <span on:click={() => goto('/api')}>{$_('navigation.api')}</span>
|
{$_('home.more.2')} <span on:click={() => goto('/api')}>{$_('navigation.api')}</span>
|
||||||
|
|
|
@ -40,10 +40,10 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
p {
|
p {
|
||||||
@apply text-base py-2 'md:w-2/3';
|
@apply text-base py-2 'lg:w-2/3';
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-4xl font-bold py-4;
|
@apply text-3xl 'md:text-4xl' font-bold py-4;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
/* This would probably be an error if you installed WindiCSS extension on VSCode */
|
/* This would probably be an error if you installed WindiCSS extension on VSCode */
|
||||||
|
|
Loading…
Reference in New Issue