wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Make color swatches less squishy wishy on medium-ish screens

Browse source
This commit is contained in:
Adam Wathan 2017-10-31 14:26:56 -04:00
parent 0414ea41db
commit a06460e7ac
1 changed files with 12 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

31
docs/source/docs/colors.blade.md
View file

@ -11,8 +11,8 @@ Developing an organized, consistent and beautiful color palette is critical to t
To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project.
<div class="flex flex-wrap -mx-4 my-8">
<div class="w-full md:w-1/3 px-4">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Grey</div>
@ -61,9 +61,8 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
<div class="flex flex-wrap -mx-4 mb-8">
<div class="w-full md:w-1/3 px-4">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Red</div>
@ -102,7 +101,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Orange</div>
@ -141,7 +140,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Yellow</div>
@ -180,10 +179,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-4 mb-8">
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Green</div>
@ -222,7 +218,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Teal</div>
@ -261,7 +257,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Blue</div>
@ -300,10 +296,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-4 mb-8">
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Indigo</div>
@ -342,7 +335,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Purple</div>
@ -381,7 +374,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Pink</div>