mythic-insight/legendary-doc-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Standardize vertical and horizontal spacing

Browse source
This commit is contained in:
Robert Prehn 2020-09-15 16:19:40 -05:00
parent a5cdecfabb
commit 1e726cbf57
9 changed files with 59 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/app/priv/templates/phx.gen.html/index.html.eex
View file

@ -1,9 +1,9 @@
<div class="p-6"> <div class="p-6">
<div class="flex pb-6"> <div class="flex pb-6">
<div class="w-/12 flex-1 text-4xl"> <div class="w-/12 flex-1 text-4xl">
<h1 class="px-5 -mb-2 mt-2"><%= schema.human_plural %></h1> <h1 class="px-4 -mb-2 mt-2"><%= schema.human_plural %></h1>
</div> </div>
<div class="w-/12 text-4xl text-right px-5"> <div class="w-/12 text-4xl text-right px-4">
<%%= styled_button_link "New <%= schema.human_singular %>", to: Routes.<%= schema.route_helper %>_path(@conn, :new) %> <%%= styled_button_link "New <%= schema.human_singular %>", to: Routes.<%= schema.route_helper %>_path(@conn, :new) %>
</div> </div>
</div> </div>
@ -12,16 +12,16 @@
<table class="min-w-full leading-normal"> <table class="min-w-full leading-normal">
<thead> <thead>
<tr> <tr>
<%= for {k, _} <- schema.attrs do %> <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"><%= Phoenix.Naming.humanize(Atom.to_string(k)) %></th> <%= for {k, _} <- schema.attrs do %> <th class="px-4 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"><%= Phoenix.Naming.humanize(Atom.to_string(k)) %></th>
<% end %> <% end %>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"></th> <th class="px-4 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<%%= case @<%= schema.plural %> do %> <%%= case @<%= schema.plural %> do %>
<%%= [] -> %> <%%= [] -> %>
<tr> <tr>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" colspan="<%= (schema.attrs |> Enum.count()) + 1 %>"> <td class="px-4 py-6 border-b border-gray-200 bg-white text-sm" colspan="<%= (schema.attrs |> Enum.count()) + 1 %>">
No results. No results.
</td> </td>
</tr> </tr>
@ -29,15 +29,15 @@
<%%= for <%= schema.singular %> <- @<%= schema.plural %> do %> <%%= for <%= schema.singular %> <- @<%= schema.plural %> do %>
<tr> <tr>
<%= for {k, _} <- schema.attrs do %> <%= for {k, _} <- schema.attrs do %>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <td class="px-4 py-6 border-b border-gray-200 bg-white text-sm">
<%%= link <%= schema.singular %>.<%= k %>, to: Routes.<%= schema.route_helper %>_path(@conn, :show, <%= schema.singular %>) %> <%%= link <%= schema.singular %>.<%= k %>, to: Routes.<%= schema.route_helper %>_path(@conn, :show, <%= schema.singular %>) %>
</td> </td>
<% end %> <% end %>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <td class="px-4 py-6 border-b border-gray-200 bg-white text-sm">
<label class="relative"> <label class="relative">
... ...
<input type="checkbox" class="hidden hidden-options-toggle"> <input type="checkbox" class="hidden hidden-options-toggle">
<div class="hidden absolute right-0 rounded bg-white border shadow-lg py-4 w-48"> <div class="hidden absolute right-0 rounded bg-white border shadow-lg py-6 w-48">
<%%= link "Edit", to: Routes.<%= schema.route_helper %>_path(@conn, :edit, <%= schema.singular %>), class: "block px-4 py-2 hover:bg-gray-100" %> <%%= link "Edit", to: Routes.<%= schema.route_helper %>_path(@conn, :edit, <%= schema.singular %>), class: "block px-4 py-2 hover:bg-gray-100" %>
<%%= link "Delete", to: Routes.<%= schema.route_helper %>_path(@conn, :delete, <%= schema.singular %>), method: :delete, data: [confirm: "Are you sure?"], class: "text-red-600 block px-4 py-2 hover:bg-gray-100" %> <%%= link "Delete", to: Routes.<%= schema.route_helper %>_path(@conn, :delete, <%= schema.singular %>), method: :delete, data: [confirm: "Are you sure?"], class: "text-red-600 block px-4 py-2 hover:bg-gray-100" %>
</div> </div>

2
apps/auth_web/lib/auth_web/templates/pow/registration/new.html.eex
View file

@ -9,7 +9,7 @@
<% end %> <% end %>
<div class="flex flex-wrap mt-6"> <div class="flex flex-wrap mt-6">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4"> <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
Already have an account? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span> Already have an account? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
</div> </div>
</div> </div>

4
apps/auth_web/lib/auth_web/templates/pow/session/new.html.eex
View file

@ -10,12 +10,12 @@
<% end %> <% end %>
<% end %> <% end %>
<div class="w-full flex flex-wrap mt-6"> <div class="w-full flex flex-wrap mt-6">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4"> <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span> New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
</div> </div>
<%= if pow_extension_enabled?(PowResetPassword) do %> <%= if pow_extension_enabled?(PowResetPassword) do %>
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4"> <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new), class: "text-blue-100") %></span> Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new), class: "text-blue-100") %></span>
</div> </div>
<% end %> <% end %>

4
apps/auth_web/lib/auth_web/templates/pow_reset_password/reset_password/new.html.eex
View file

@ -6,11 +6,11 @@
<% end %> <% end %>
<% end %> <% end %>
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4"> <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
Remembered your password? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span> Remembered your password? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
</div> </div>
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4"> <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span> New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
</div> </div>
<% end %> <% end %>

72
apps/content/lib/content_web/templates/posts/static_pages/index.html.eex
View file

@ -18,7 +18,7 @@
<h1 class="text-white font-semibold text-5xl"> <h1 class="text-white font-semibold text-5xl">
Your story starts with us. Your story starts with us.
</h1> </h1>
<p class="mt-4 text-lg text-gray-300"> <p class="mt-6 text-lg text-gray-300">
This is a simple example of a Landing Page you can build using This is a simple example of a Landing Page you can build using
Tailwind Starter Kit. It features multiple CSS components Tailwind Starter Kit. It features multiple CSS components
based on the Tailwindcss design system. based on the Tailwindcss design system.
@ -52,16 +52,16 @@
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center"> <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
<div <div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg" class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
> >
<div class="px-4 py-5 flex-auto"> <div class="px-4 py-6 flex-auto">
<div <div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-400" class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-red-400"
> >
<i class="fas fa-award"></i> <i class="fas fa-award"></i>
</div> </div>
<h6 class="text-xl font-semibold">Awarded Agency</h6> <h6 class="text-xl font-semibold">Awarded Agency</h6>
<p class="mt-2 mb-4 text-gray-600"> <p class="mt-2 mb-6 text-gray-600">
Divide details about your product or agency work into parts. Divide details about your product or agency work into parts.
A paragraph describing a feature will be enough. A paragraph describing a feature will be enough.
</p> </p>
@ -70,16 +70,16 @@
</div> </div>
<div class="w-full md:w-4/12 px-4 text-center"> <div class="w-full md:w-4/12 px-4 text-center">
<div <div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg" class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
> >
<div class="px-4 py-5 flex-auto"> <div class="px-4 py-6 flex-auto">
<div <div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-400" class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-blue-400"
> >
<i class="fas fa-retweet"></i> <i class="fas fa-retweet"></i>
</div> </div>
<h6 class="text-xl font-semibold">Free Revisions</h6> <h6 class="text-xl font-semibold">Free Revisions</h6>
<p class="mt-2 mb-4 text-gray-600"> <p class="mt-2 mb-6 text-gray-600">
Keep you user engaged by providing meaningful information. Keep you user engaged by providing meaningful information.
Remember that by this time, the user is curious. Remember that by this time, the user is curious.
</p> </p>
@ -88,16 +88,16 @@
</div> </div>
<div class="pt-6 w-full md:w-4/12 px-4 text-center"> <div class="pt-6 w-full md:w-4/12 px-4 text-center">
<div <div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg" class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
> >
<div class="px-4 py-5 flex-auto"> <div class="px-4 py-6 flex-auto">
<div <div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400" class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"
> >
<i class="fas fa-fingerprint"></i> <i class="fas fa-fingerprint"></i>
</div> </div>
<h6 class="text-xl font-semibold">Verified Company</h6> <h6 class="text-xl font-semibold">Verified Company</h6>
<p class="mt-2 mb-4 text-gray-600"> <p class="mt-2 mb-6 text-gray-600">
Write a few lines about each one. A paragraph describing a Write a few lines about each one. A paragraph describing a
feature will be enough. Keep you user engaged! feature will be enough. Keep you user engaged!
</p> </p>
@ -116,14 +116,14 @@
Working with us is a pleasure Working with us is a pleasure
</h3> </h3>
<p <p
class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700" class="text-lg font-light leading-relaxed mt-6 mb-6 text-gray-700"
> >
Don't let your uses guess by attaching tooltips and popoves to Don't let your uses guess by attaching tooltips and popoves to
any element. Just make sure you enable them first via any element. Just make sure you enable them first via
JavaScript. JavaScript.
</p> </p>
<p <p
class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-700" class="text-lg font-light leading-relaxed mt-0 mb-6 text-gray-700"
> >
The kit comes with three pre-built pages to help you get started The kit comes with three pre-built pages to help you get started
faster. You can change the text and images and you're good to faster. You can change the text and images and you're good to
@ -131,7 +131,7 @@
</p> </p>
<a <a
href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation" href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation"
class="font-bold text-gray-800 mt-8" class="font-bold text-gray-800 mt-6"
>Check Tailwind Starter Kit!</a >Check Tailwind Starter Kit!</a
> >
</div> </div>
@ -144,7 +144,7 @@
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80"
class="w-full align-middle rounded-t-lg" class="w-full align-middle rounded-t-lg"
/> />
<blockquote class="relative p-8 mb-4"> <blockquote class="relative p-8 mb-6">
<svg <svg
preserveAspectRatio="none" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -208,7 +208,7 @@
<i class="fas fa-rocket text-xl"></i> <i class="fas fa-rocket text-xl"></i>
</div> </div>
<h3 class="text-3xl font-semibold">A growing company</h3> <h3 class="text-3xl font-semibold">A growing company</h3>
<p class="mt-4 text-lg leading-relaxed text-gray-600"> <p class="mt-6 text-lg leading-relaxed text-gray-600">
The extension comes with three pre-built pages to help you get The extension comes with three pre-built pages to help you get
started faster. You can change the text and images and you're started faster. You can change the text and images and you're
good to go. good to go.
@ -266,7 +266,7 @@
<div class="flex flex-wrap justify-center text-center mb-24"> <div class="flex flex-wrap justify-center text-center mb-24">
<div class="w-full lg:w-6/12 px-4"> <div class="w-full lg:w-6/12 px-4">
<h2 class="text-4xl font-semibold">Here are our heroes</h2> <h2 class="text-4xl font-semibold">Here are our heroes</h2>
<p class="text-lg leading-relaxed m-4 text-gray-600"> <p class="text-lg leading-relaxed mx-4 my-6 text-gray-600">
According to the National Oceanic and Atmospheric According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum. potentially record maximum.
@ -275,7 +275,7 @@
</div> </div>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-4">
<img <img
alt="..." alt="..."
src="./assets/img/team-1-800x800.jpg" src="./assets/img/team-1-800x800.jpg"
@ -309,7 +309,7 @@
</div> </div>
</div> </div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-4">
<img <img
alt="..." alt="..."
src="./assets/img/team-2-800x800.jpg" src="./assets/img/team-2-800x800.jpg"
@ -338,7 +338,7 @@
</div> </div>
</div> </div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-4">
<img <img
alt="..." alt="..."
src="./assets/img/team-3-800x800.jpg" src="./assets/img/team-3-800x800.jpg"
@ -372,7 +372,7 @@
</div> </div>
</div> </div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4"> <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6"> <div class="px-4">
<img <img
alt="..." alt="..."
src="./assets/img/team-4-470x470.png" src="./assets/img/team-4-470x470.png"
@ -437,7 +437,7 @@
<div class="flex flex-wrap text-center justify-center"> <div class="flex flex-wrap text-center justify-center">
<div class="w-full lg:w-6/12 px-4"> <div class="w-full lg:w-6/12 px-4">
<h2 class="text-4xl font-semibold text-white">Build something</h2> <h2 class="text-4xl font-semibold text-white">Build something</h2>
<p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500"> <p class="text-lg leading-relaxed mt-6 mb-6 text-gray-500">
Put the potentially record low maximum sea ice extent tihs year Put the potentially record low maximum sea ice extent tihs year
down to low ice. According to the National Oceanic and down to low ice. According to the National Oceanic and
Atmospheric Administration, Ted, Scambos. Atmospheric Administration, Ted, Scambos.
@ -451,7 +451,7 @@
> >
<i class="fas fa-medal text-xl"></i> <i class="fas fa-medal text-xl"></i>
</div> </div>
<h6 class="text-xl mt-5 font-semibold text-white"> <h6 class="text-xl mt-6 font-semibold text-white">
Excelent Services Excelent Services
</h6> </h6>
<p class="mt-2 mb-4 text-gray-500"> <p class="mt-2 mb-4 text-gray-500">
@ -465,10 +465,10 @@
> >
<i class="fas fa-poll text-xl"></i> <i class="fas fa-poll text-xl"></i>
</div> </div>
<h5 class="text-xl mt-5 font-semibold text-white"> <h5 class="text-xl mt-6 font-semibold text-white">
Grow your market Grow your market
</h5> </h5>
<p class="mt-2 mb-4 text-gray-500"> <p class="mt-2 mb-6 text-gray-500">
Some quick example text to build on the card title and make up Some quick example text to build on the card title and make up
the bulk of the card's content. the bulk of the card's content.
</p> </p>
@ -479,8 +479,8 @@
> >
<i class="fas fa-lightbulb text-xl"></i> <i class="fas fa-lightbulb text-xl"></i>
</div> </div>
<h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5> <h5 class="text-xl mt-6 font-semibold text-white">Launch time</h5>
<p class="mt-2 mb-4 text-gray-500"> <p class="mt-2 mb-6 text-gray-500">
Some quick example text to build on the card title and make up Some quick example text to build on the card title and make up
the bulk of the card's content. the bulk of the card's content.
</p> </p>
@ -497,34 +497,34 @@
> >
<div class="flex-auto p-5 lg:p-10"> <div class="flex-auto p-5 lg:p-10">
<h4 class="text-2xl font-semibold">Want to work with us?</h4> <h4 class="text-2xl font-semibold">Want to work with us?</h4>
<p class="leading-relaxed mt-1 mb-4 text-gray-600"> <p class="leading-relaxed mt-1 mb-6 text-gray-600">
Complete this form and we will get back to you in 24 hours. Complete this form and we will get back to you in 24 hours.
</p> </p>
<div class="relative w-full mb-3 mt-8"> <div class="relative w-full mb-6 mt-6">
<label <label
class="block uppercase text-gray-700 text-xs font-bold mb-2" class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="full-name" for="full-name"
>Full Name</label >Full Name</label
><input ><input
type="text" type="text"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full" class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Full Name" placeholder="Full Name"
style="transition: all 0.15s ease 0s;" style="transition: all 0.15s ease 0s;"
/> />
</div> </div>
<div class="relative w-full mb-3"> <div class="relative w-full mb-6">
<label <label
class="block uppercase text-gray-700 text-xs font-bold mb-2" class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="email" for="email"
>Email</label >Email</label
><input ><input
type="email" type="email"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full" class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Email" placeholder="Email"
style="transition: all 0.15s ease 0s;" style="transition: all 0.15s ease 0s;"
/> />
</div> </div>
<div class="relative w-full mb-3"> <div class="relative w-full mb-6">
<label <label
class="block uppercase text-gray-700 text-xs font-bold mb-2" class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="message" for="message"
@ -532,13 +532,13 @@
><textarea ><textarea
rows="4" rows="4"
cols="80" cols="80"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full" class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Type a message..." placeholder="Type a message..."
></textarea> ></textarea>
</div> </div>
<div class="text-center mt-6"> <div class="text-center mt-6">
<button <button
class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1" class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
type="button" type="button"
style="transition: all 0.15s ease 0s;" style="transition: all 0.15s ease 0s;"
> >

1
apps/core/assets/.stylelintignore Normal file
View file

@ -0,0 +1 @@
node_modules

5
apps/core/assets/postcss.config.js
View file

@ -1,7 +1,10 @@
module.exports = { module.exports = {
plugins: [ plugins: [
require('postcss-import')(), require('postcss-import')({
plugins: [
require('stylelint')(), require('stylelint')(),
]
}),
require('tailwindcss'), require('tailwindcss'),
require('autoprefixer'), require('autoprefixer'),
require('csswring')(), require('csswring')(),

2
apps/core/lib/core_web/templates/layout/_menu.html.eex
View file

@ -6,7 +6,7 @@
</div> </div>
<div class="block lg:hidden"> <div class="block lg:hidden">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white"> <button id="nav-toggle" class="flex items-center px-4 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button> </button>
</div> </div>

6
apps/core/lib/core_web/views/helpers.ex
View file

@ -125,17 +125,17 @@ defmodule CoreWeb.Helpers do
"bg-white shadow rounded p-3" "bg-white shadow rounded p-3"
end end
defp default_classes_for_type(:checkbox), do: "appearance-none h-10 w-10 bg-white checked:bg-gray-500 rounded shadow focus:outline-none focus:shadow-outline text-white text-xl font-bold mb-2" defp default_classes_for_type(:checkbox), do: "appearance-none h-10 w-10 bg-white checked:bg-gray-500 rounded shadow focus:outline-none focus:shadow-outline text-white text-xl font-bold mb-2"
defp default_classes_for_type(_), do: "px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full" defp default_classes_for_type(_), do: "px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
def styled_button(text) do def styled_button(text) do
~E""" ~E"""
<%= submit text, class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %> <%= submit text, class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
""" """
end end
def styled_button_link(text, opts) do def styled_button_link(text, opts) do
~E""" ~E"""
<%= link text, opts ++ [class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"] %> <%= link text, opts ++ [class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"] %>
""" """
end end