half-responsive design
This commit is contained in:
parent
a2afd8737d
commit
0e05c15555
3 changed files with 11 additions and 5 deletions
|
@ -1,5 +1,5 @@
|
|||
<main class="px-4 py-20 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-6xl">
|
||||
<div class="mx-auto max-w-5xl">
|
||||
<.flash_group flash={@flash} />
|
||||
{@inner_content}
|
||||
</div>
|
||||
|
|
|
@ -12,7 +12,13 @@
|
|||
</head>
|
||||
<body class="bg-white">
|
||||
<nav class="py-2">
|
||||
<ul class="relative flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end font-semibold text-sm text-zinc-900">
|
||||
<ul class="w-full flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end font-semibold text-sm text-zinc-900">
|
||||
<li class="">
|
||||
<.link href={~p"/"} class="hover:text-zinc-600">
|
||||
Home
|
||||
</.link>
|
||||
</li>
|
||||
<li class="grow"></li>
|
||||
<%= if @current_user do %>
|
||||
<li class="">
|
||||
{@current_user.email}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<h1>Hello World</h1>
|
||||
<div class="flex gap-10">
|
||||
<div class="flex gap-10 flex-col sm:flex-row">
|
||||
<div class="flex-1">
|
||||
<div class="shadow-md rounded-xl pt-4 bg-pink-100">
|
||||
<h2 class="text-center font-bold pb-2">BOOKS</h2>
|
||||
<.link patch={~p"/books"}>
|
||||
<img src={~p"/images/book-card-homepage.jpg"} class="rounded-xl" />
|
||||
<.link patch={~p"/books"} class="flex flex-col items-center">
|
||||
<img src={~p"/images/book-card-homepage.jpg"} class="rounded-xl w-1/2 sm:w-auto" />
|
||||
</.link>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue