archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #189 from nothingworksinc/new-docs-design

Browse Source 
New docs design
This commit is contained in:
Adam Wathan 2017-10-23 11:02:18 -04:00 committed by GitHub
commit 9dbdfb5615
11 changed files with 579 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
__tests__/fixtures/tailwind.css
View File

@ -540,7 +540,11 @@ svg {
fill: currentColor;
}
input {
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
}

2
css/preflight.css
View File

@ -87,7 +87,7 @@ img { max-width: 100%; }
svg { fill: currentColor; }
input { font-family: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; }
input::placeholder {
color: inherit;

38
docs/source/_assets/less/base.less
View File

@ -1,54 +1,16 @@
@tailwind reset;
html {
@apply .bg-brand-soft;
font-size: 12px;
// Changes the default tap highlight to be completely transparent in iOS.
-webkit-tap-highlight-color: rgba(0,0,0,0);
// -webkit-font-smoothing: antialiased;
@media (min-width: 420px) {
font-size: 16px;
}
}
*,
*::before,
*::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
@apply .font-sans;
@apply .text-base;
@apply .font-normal;
@apply .text-slate-darker;
line-height: 1.5;
}
pre, code {
@apply .font-mono;
}
img {
vertical-align: middle;
}
a {
color: inherit;
text-decoration: none;
&:hover {
@apply .underline;
}
}
svg {
fill: currentColor;
}
ol, ul {

15
docs/source/_assets/less/markdown.less
View File

@ -8,7 +8,7 @@
.subnav-link, .subnav-link& {
@apply .mr-6;
@apply .leading-none;
@apply .text-slate;
@apply .text-slate-dark;
@apply .text-sm;
}
}
@ -38,11 +38,12 @@
> pre, pre& {
@apply .font-mono;
@apply .font-normal;
}
> blockquote, blockquote& {
@apply .italic;
@apply .text-slate;
@apply .text-slate-dark;
@apply .text-sm;
}
@ -50,7 +51,7 @@
@apply .mb-4;
@apply .leading-none;
@apply .text-slate-darker;
@apply .font-bold;
@apply .font-semibold;
@apply .text-3xl;
}
@ -59,7 +60,7 @@
@apply .mb-8;
@apply .text-slate-darker;
@apply .leading-none;
@apply .font-bold;
@apply .font-semibold;
@apply .text-xl;
}
@ -73,14 +74,14 @@
}
> p, p&, > blockquote > p {
@apply .text-slate;
@apply .text-slate-dark;
@apply .mt-4;
@apply .mb-4;
line-height: 1.75;
}
> ul, > ol {
@apply .text-slate;
@apply .text-slate-dark;
margin: 0 0 2em;
}
@ -94,7 +95,7 @@
> li {
@apply .my-2;
@apply .text-slate;
@apply .text-slate-dark;
}
> :not(pre) > code[class*="language-"], > pre[class*="language-"], pre[class*="language-"]& {

29
docs/source/_assets/less/prism.less
View File

@ -7,10 +7,12 @@
code[class*="language-"],
pre[class*="language-"] {
@apply .font-mono;
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
// font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
@ -74,7 +76,8 @@ pre[class*="language-"] {
}
.token.punctuation {
color: #999;
@apply .text-blue-dark;
// color: #999;
}
.namespace {
@ -88,17 +91,18 @@ pre[class*="language-"] {
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
@apply .text-blue-dark;
// color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
// .token.selector,
// .token.attr-name,
// .token.string,
// .token.char,
// .token.builtin,
// .token.inserted {
// color: #690;
// }
.token.operator,
.token.entity,
@ -112,7 +116,8 @@ pre[class*="language-"] {
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
@apply .text-purple-dark;
// color: #07a;
}
.token.function {

301
docs/source/_layouts/master.blade.php
View File

@ -1,165 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="bg-brand-soft antialiased">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS' }}</title>
<style>
@import url("https://use.typekit.net/iqy1okj.css");
</style>
{{-- <link rel="stylesheet" href="https://use.typekit.net/iqy1okj.css"> --}}
<link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="/js/prism.js" defer=""></script>
</head>
<body class="pb-12">
<div class="bg-gradient-brand h-3"></div>
<header class="container">
<div class="py-6 flex items-center justify-between">
<div class="flex items-center">
<div class="rounded-pill h-12 w-12 bg-white p-2 inline-flex items-center justify-center shadow-md mr-4">
<svg class="fit w-full" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
<body class="font-sans font-normal text-slate-darker leading-normal">
<div class="h-screen flex">
<div class="bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
<div class="flex items-center mb-8">
<svg class="h-8 w-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
<span class='text-xl font-bold'>Tailwind CSS</span>
{{-- <svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS"> --}}
{{-- <title>Tailwind CSS</title> --}}
{{-- <path d="M8.638 18h-3.01V3.645H.563V1.09H13.69v2.555H8.637V18zm8.456-2.004c1.652 0 2.976-1.1 2.976-2.6v-.95l-2.87.175c-1.407.095-2.216.728-2.216 1.712 0 1.02.844 1.664 2.11 1.664zm-.88 2.203c-2.4 0-4.148-1.512-4.148-3.75 0-2.204 1.7-3.528 4.723-3.716l3.28-.187v-.89c0-1.302-.88-2.052-2.32-2.052-1.383 0-2.262.668-2.45 1.7h-2.706c.13-2.32 2.11-3.985 5.273-3.985 3.082 0 5.086 1.63 5.086 4.125V18H20.14v-1.98h-.058c-.715 1.347-2.273 2.18-3.867 2.18zm9.153-.2h2.918V5.578h-2.918V18zM26.82 3.95c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM30.816 18h2.918V1.09h-2.918V18zM53.07 5.578h-2.883l-2.097 9.54h-.07l-2.426-9.54h-2.8l-2.427 9.54h-.058l-2.1-9.54h-2.93L38.646 18h3.046l2.44-9.082h.057L46.638 18h3.07L53.07 5.578zM54.594 18h2.918V5.578h-2.918V18zm1.453-14.05c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM59.96 18h2.92v-7.195c0-1.782 1.065-2.99 2.74-2.99 1.665 0 2.485.986 2.485 2.744V18h2.918V9.973c0-2.87-1.558-4.63-4.3-4.63-1.91 0-3.235.89-3.903 2.368h-.058V5.58h-2.8V18zm18.036.2c-3.13 0-5.156-2.473-5.156-6.423 0-3.925 2.027-6.41 5.156-6.41 1.78 0 3.188.926 3.844 2.297h.07V1.09h2.918V18h-2.86v-2.12h-.046c-.68 1.393-2.11 2.32-3.926 2.32zm.88-10.43c-1.876 0-3.048 1.558-3.048 4.02 0 2.472 1.16 4.02 3.047 4.02 1.84 0 3.047-1.56 3.047-4.02 0-2.438-1.207-4.02-3.047-4.02zm20.788 10.51c3.996 0 6.762-2.19 7.29-5.81h-2.966c-.468 2.038-2.074 3.245-4.312 3.245-2.93 0-4.78-2.38-4.78-6.176 0-3.774 1.862-6.165 4.768-6.165 2.19 0 3.914 1.395 4.313 3.516h2.976c-.375-3.632-3.363-6.08-7.29-6.08-4.804 0-7.862 3.338-7.862 8.73 0 5.425 3.036 8.74 7.864 8.74zm8.283-5.038c.13 3.117 2.683 5.04 6.574 5.04 4.09 0 6.67-2.016 6.67-5.227 0-2.52-1.454-3.938-4.888-4.723l-1.945-.445c-2.074-.492-2.93-1.15-2.93-2.274 0-1.406 1.29-2.343 3.2-2.343 1.933 0 3.257.95 3.398 2.53h2.883c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.477 3.914 4.594 4.63l2.192.514c2.133.504 3 1.207 3 2.426 0 1.406-1.418 2.414-3.457 2.414-2.062 0-3.62-1.02-3.808-2.578h-2.93zm14.424 0c.13 3.117 2.685 5.04 6.575 5.04 4.09 0 6.668-2.016 6.668-5.227 0-2.52-1.453-3.938-4.886-4.723l-1.946-.445c-2.073-.492-2.928-1.15-2.928-2.274 0-1.406 1.29-2.343 3.2-2.343 1.932 0 3.257.95 3.397 2.53h2.882c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.478 3.914 4.595 4.63l2.19.514c2.134.504 3 1.207 3 2.426 0 1.406-1.417 2.414-3.456 2.414-2.063 0-3.622-1.02-3.81-2.578h-2.93z" fill="#3A3F46" fill-rule="evenodd"></path> --}}
{{-- </svg> --}}
</div>
<div class="mb-8">
<div class="relative">
<input class="rounded bg-smoke-light border-0 py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search">
<div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
<svg class="pointer-events-none text-slate h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
</div>
</div>
<svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS">
<title>Tailwind CSS</title>
<path d="M8.638 18h-3.01V3.645H.563V1.09H13.69v2.555H8.637V18zm8.456-2.004c1.652 0 2.976-1.1 2.976-2.6v-.95l-2.87.175c-1.407.095-2.216.728-2.216 1.712 0 1.02.844 1.664 2.11 1.664zm-.88 2.203c-2.4 0-4.148-1.512-4.148-3.75 0-2.204 1.7-3.528 4.723-3.716l3.28-.187v-.89c0-1.302-.88-2.052-2.32-2.052-1.383 0-2.262.668-2.45 1.7h-2.706c.13-2.32 2.11-3.985 5.273-3.985 3.082 0 5.086 1.63 5.086 4.125V18H20.14v-1.98h-.058c-.715 1.347-2.273 2.18-3.867 2.18zm9.153-.2h2.918V5.578h-2.918V18zM26.82 3.95c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM30.816 18h2.918V1.09h-2.918V18zM53.07 5.578h-2.883l-2.097 9.54h-.07l-2.426-9.54h-2.8l-2.427 9.54h-.058l-2.1-9.54h-2.93L38.646 18h3.046l2.44-9.082h.057L46.638 18h3.07L53.07 5.578zM54.594 18h2.918V5.578h-2.918V18zm1.453-14.05c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM59.96 18h2.92v-7.195c0-1.782 1.065-2.99 2.74-2.99 1.665 0 2.485.986 2.485 2.744V18h2.918V9.973c0-2.87-1.558-4.63-4.3-4.63-1.91 0-3.235.89-3.903 2.368h-.058V5.58h-2.8V18zm18.036.2c-3.13 0-5.156-2.473-5.156-6.423 0-3.925 2.027-6.41 5.156-6.41 1.78 0 3.188.926 3.844 2.297h.07V1.09h2.918V18h-2.86v-2.12h-.046c-.68 1.393-2.11 2.32-3.926 2.32zm.88-10.43c-1.876 0-3.048 1.558-3.048 4.02 0 2.472 1.16 4.02 3.047 4.02 1.84 0 3.047-1.56 3.047-4.02 0-2.438-1.207-4.02-3.047-4.02zm20.788 10.51c3.996 0 6.762-2.19 7.29-5.81h-2.966c-.468 2.038-2.074 3.245-4.312 3.245-2.93 0-4.78-2.38-4.78-6.176 0-3.774 1.862-6.165 4.768-6.165 2.19 0 3.914 1.395 4.313 3.516h2.976c-.375-3.632-3.363-6.08-7.29-6.08-4.804 0-7.862 3.338-7.862 8.73 0 5.425 3.036 8.74 7.864 8.74zm8.283-5.038c.13 3.117 2.683 5.04 6.574 5.04 4.09 0 6.67-2.016 6.67-5.227 0-2.52-1.454-3.938-4.888-4.723l-1.945-.445c-2.074-.492-2.93-1.15-2.93-2.274 0-1.406 1.29-2.343 3.2-2.343 1.933 0 3.257.95 3.398 2.53h2.883c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.477 3.914 4.594 4.63l2.192.514c2.133.504 3 1.207 3 2.426 0 1.406-1.418 2.414-3.457 2.414-2.062 0-3.62-1.02-3.808-2.578h-2.93zm14.424 0c.13 3.117 2.685 5.04 6.575 5.04 4.09 0 6.668-2.016 6.668-5.227 0-2.52-1.453-3.938-4.886-4.723l-1.946-.445c-2.073-.492-2.928-1.15-2.928-2.274 0-1.406 1.29-2.343 3.2-2.343 1.932 0 3.257.95 3.397 2.53h2.882c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.478 3.914 4.595 4.63l2.19.514c2.134.504 3 1.207 3 2.426 0 1.406-1.417 2.414-3.456 2.414-2.063 0-3.622-1.02-3.81-2.578h-2.93z" fill="#3A3F46" fill-rule="evenodd"></path>
</svg>
</div>
<div>
<a class="font-semibold text-slate-light" href="https://github.com/adamwathan/tailwindcss">GitHub</a>
</div>
<nav class="py-4 text-base">
<div class="mb-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
<ul>
<li class="mb-3"><a class="text-slate" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
</ul>
</div>
<div class="mb-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Getting Started</p>
<ul>
<li class="mb-3"><a class="text-slate" href="{{ $page->baseUrl }}/installation">Installation</a></li>
<li class="mb-3">
<a class="{{ $page->active('/configuration') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/configuration">
Configuration
</a>
</li>
<li class="mb-3">
<a class="{{ $page->active('/color-palette') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
Color Palette
</a>
</li>
<li class="mb-3">
<a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
Responsive Design
</a>
</li>
<li class="mb-3">
<a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
Adding New Utilities
</a>
</li>
<li class="mb-3">
<a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
Extracting Components
</a>
</li>
</ul>
</div>
<div class="mt-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
<ul class="mb-8">
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Base</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Alignment</a></li>
<li class="mb-3">
<a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Backgrounds</a>
<ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Position</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Size</a></li>
</ul>
</li>
<li class="mb-3">
<a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Borders</a>
<ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Base</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Style</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Radius</a></li>
</ul>
</li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Buttons</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Container</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Display</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Flexbox</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Floats</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Forms</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Grid</a></li>
<li class="mb-3">
<a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Interactivity</a>
<ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Cursor</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Resize</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Pointer Events</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">User Select</a></li>
</ul>
</li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Lists</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Opacity</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Overflow</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Positioning</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Shadows</a></li>
<li class="mb-3">
<a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Sizing</a>
<ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Width</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Min-Width</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Max-Width</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Height</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Min-Height</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Max-Height</a></li>
</ul>
</li>
<li class="mb-3">
<a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Spacing</a>
<ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Padding</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Margin</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Negative Margin</a></li>
</ul>
</li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">SVG</a></li>
<li class="mb-3">
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Typography</a>
<ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Fonts</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Sizing</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Weight</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Line Height</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Letter Spacing</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Wrapping</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>
</ul>
</li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Visibility</a></li>
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Z-Index</a></li>
</ul>
</div>
<div class="mb-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Examples</p>
<ul>
<li class="mb-3"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
<li class="mb-3"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="flex flex-wrap">
<div class="w-full lg:w-1/4">
<nav class="py-4 text-base">
<div class="mb-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Introduction</p>
<ul>
<li class="mb-2"><a class="text-slate" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
</ul>
</div>
<div class="mb-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Getting Started</p>
<ul>
<li class="mb-2"><a class="text-slate" href="{{ $page->baseUrl }}/installation">Installation</a></li>
<li class="mb-2">
<a class="{{ $page->active('/configuration') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/configuration">
Configuration
</a>
</li>
<li class="mb-2">
<a class="{{ $page->active('/color-palette') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
Color Palette
</a>
</li>
<li class="mb-2">
<a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
Responsive Design
</a>
</li>
<li class="mb-2">
<a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
Adding New Utilities
</a>
</li>
<li class="mb-2">
<a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
Extracting Components
</a>
</li>
</ul>
</div>
<div class="mt-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Styles</p>
<ul class="mb-8">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Base</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Alignment</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Backgrounds</a>
<ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Position</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Size</a></li>
</ul>
</li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Borders</a>
<ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Base</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Style</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Radius</a></li>
</ul>
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Buttons</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Container</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Display</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Flexbox</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Floats</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Forms</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Grid</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Interactivity</a>
<ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Cursor</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Resize</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Pointer Events</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-semibold' : 'text-slate' }}">User Select</a></li>
</ul>
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Lists</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Opacity</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Overflow</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Positioning</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Shadows</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Sizing</a>
<ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Width</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Min-Width</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Max-Width</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Height</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Min-Height</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Max-Height</a></li>
</ul>
</li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Spacing</a>
<ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Padding</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Margin</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Negative Margin</a></li>
</ul>
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-semibold' : 'text-slate' }}">SVG</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Typography</a>
<ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Fonts</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Sizing</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Weight</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Line Height</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Letter Spacing</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Wrapping</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Style &amp; Decoration</a></li>
</ul>
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Visibility</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Z-Index</a></li>
</ul>
</div>
<div class="mb-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Examples</p>
<ul>
<li class="mb-2"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
</ul>
</div>
</nav>
</div>
<div class="w-full lg:w-3/4">
<div class="p-12 rounded-lg bg-white shadow-md">
@yield('body')
</div>
<div class="bg-smoke-light flex-grow overflow-scroll-y">
<div class="px-6 py-8 w-full max-w-xl mx-auto">
@yield('body')
</div>
</div>
</div>

4
docs/source/_partials/code-sample.blade.php
View File

@ -1,5 +1,5 @@
<div class="border border-smoke rounded mask mb-4">
<div class="p-6 border-b border-smoke {{ $class ?? '' }}">
<div class="rounded mask shadow mb-4">
<div class="bg-white border-b-2 border-smoke p-6 {{ $class ?? '' }}">
{{ $slot }}
</div>
<div>

4
docs/source/examples/alerts.blade.md
View File

@ -13,7 +13,7 @@ Here's a bunch of examples:
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-red-lighter border border-red-light text-red px-4 py-3 rounded relative">
<strong>Holy smokes!</strong> Something seriously bad happened.
<strong class="font-bold">Holy smokes!</strong> Something seriously bad happened.
<span class="absolute pin-t pin-b pin-r px-4 py-3">
<svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
@ -68,7 +68,7 @@ Here's a bunch of examples:
<div class="flex">
<svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
<div>
<p class="font-semibold">Our privacy policy has changed</p>
<p class="font-bold">Our privacy policy has changed</p>
<p class="text-sm">Make sure you know how these changes affect you.</p>
</div>
</div>

220
docs/source/styles/backgrounds/color.md
View File

@ -17,39 +17,39 @@ title: "Backgrounds"
<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-slate-darker px-6 py-4 text-sm">
.bg-slate-darker
</div>
<div class="text-white bg-slate-dark px-6 py-4 text-sm">
.bg-slate-dark
</div>
<div class="text-white bg-slate px-6 py-4 text-sm">
.bg-slate
<div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
.bg-slate-lighter
</div>
<div class="text-white bg-slate-light px-6 py-4 text-sm">
.bg-slate-light
</div>
<div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
.bg-slate-lighter
<div class="text-white bg-slate px-6 py-4 text-sm">
.bg-slate
</div>
<div class="text-white bg-slate-dark px-6 py-4 text-sm">
.bg-slate-dark
</div>
<div class="text-white bg-slate-darker px-6 py-4 text-sm">
.bg-slate-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-smoke-darker px-6 py-4 text-sm">
.bg-smoke-darker
</div>
<div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
.bg-smoke-dark
</div>
<div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
.bg-smoke
<div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
.bg-smoke-lighter
</div>
<div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
.bg-smoke-light
</div>
<div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
.bg-smoke-lighter
<div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
.bg-smoke
</div>
<div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
.bg-smoke-dark
</div>
<div class="text-white bg-smoke-darker px-6 py-4 text-sm">
.bg-smoke-darker
</div>
</div>
</div>
@ -58,58 +58,58 @@ title: "Backgrounds"
<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-red-darker px-6 py-4 text-sm">
.bg-red-darker
</div>
<div class="text-white bg-red-dark px-6 py-4 text-sm">
.bg-red-dark
</div>
<div class="text-white bg-red px-6 py-4 text-sm">
.bg-red
<div class="text-red bg-red-lighter px-6 py-4 text-sm">
.bg-red-lighter
</div>
<div class="text-white bg-red-light px-6 py-4 text-sm">
.bg-red-light
</div>
<div class="text-red bg-red-lighter px-6 py-4 text-sm">
.bg-red-lighter
<div class="text-white bg-red px-6 py-4 text-sm">
.bg-red
</div>
<div class="text-white bg-red-dark px-6 py-4 text-sm">
.bg-red-dark
</div>
<div class="text-white bg-red-darker px-6 py-4 text-sm">
.bg-red-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-orange-darker px-6 py-4 text-sm">
.bg-orange-darker
</div>
<div class="text-white bg-orange-dark px-6 py-4 text-sm">
.bg-orange-dark
</div>
<div class="text-orange-darker bg-orange px-6 py-4 text-sm">
.bg-orange
<div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
.bg-orange-lighter
</div>
<div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
.bg-orange-light
</div>
<div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
.bg-orange-lighter
<div class="text-orange-darker bg-orange px-6 py-4 text-sm">
.bg-orange
</div>
<div class="text-white bg-orange-dark px-6 py-4 text-sm">
.bg-orange-dark
</div>
<div class="text-white bg-orange-darker px-6 py-4 text-sm">
.bg-orange-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-yellow-darker px-6 py-4 text-sm">
.bg-yellow-darker
</div>
<div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
.bg-yellow-dark
</div>
<div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
.bg-yellow
<div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
.bg-yellow-lighter
</div>
<div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
.bg-yellow-light
</div>
<div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
.bg-yellow-lighter
<div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
.bg-yellow
</div>
<div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
.bg-yellow-dark
</div>
<div class="text-white bg-yellow-darker px-6 py-4 text-sm">
.bg-yellow-darker
</div>
</div>
</div>
@ -118,58 +118,58 @@ title: "Backgrounds"
<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-green-darker px-6 py-4 text-sm">
.bg-green-darker
</div>
<div class="text-white bg-green-dark px-6 py-4 text-sm">
.bg-green-dark
</div>
<div class="text-white bg-green px-6 py-4 text-sm">
.bg-green
<div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
.bg-green-lighter
</div>
<div class="text-green-darker bg-green-light px-6 py-4 text-sm">
.bg-green-light
</div>
<div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
.bg-green-lighter
<div class="text-white bg-green px-6 py-4 text-sm">
.bg-green
</div>
<div class="text-white bg-green-dark px-6 py-4 text-sm">
.bg-green-dark
</div>
<div class="text-white bg-green-darker px-6 py-4 text-sm">
.bg-green-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-teal-darker px-6 py-4 text-sm">
.bg-teal-darker
</div>
<div class="text-white bg-teal-dark px-6 py-4 text-sm">
.bg-teal-dark
</div>
<div class="text-white bg-teal px-6 py-4 text-sm">
.bg-teal
<div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
.bg-teal-lighter
</div>
<div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
.bg-teal-light
</div>
<div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
.bg-teal-lighter
<div class="text-white bg-teal px-6 py-4 text-sm">
.bg-teal
</div>
<div class="text-white bg-teal-dark px-6 py-4 text-sm">
.bg-teal-dark
</div>
<div class="text-white bg-teal-darker px-6 py-4 text-sm">
.bg-teal-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-blue-darker px-6 py-4 text-sm">
.bg-blue-darker
</div>
<div class="text-white bg-blue-dark px-6 py-4 text-sm">
.bg-blue-dark
</div>
<div class="text-white bg-blue px-6 py-4 text-sm">
.bg-blue
<div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
.bg-blue-lighter
</div>
<div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
.bg-blue-light
</div>
<div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
.bg-blue-lighter
<div class="text-white bg-blue px-6 py-4 text-sm">
.bg-blue
</div>
<div class="text-white bg-blue-dark px-6 py-4 text-sm">
.bg-blue-dark
</div>
<div class="text-white bg-blue-darker px-6 py-4 text-sm">
.bg-blue-darker
</div>
</div>
</div>
@ -178,58 +178,58 @@ title: "Backgrounds"
<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-indigo-darker px-6 py-4 text-sm">
.bg-indigo-darker
</div>
<div class="text-white bg-indigo-dark px-6 py-4 text-sm">
.bg-indigo-dark
</div>
<div class="text-white bg-indigo px-6 py-4 text-sm">
.bg-indigo
<div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
.bg-indigo-lighter
</div>
<div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
.bg-indigo-light
</div>
<div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
.bg-indigo-lighter
<div class="text-white bg-indigo px-6 py-4 text-sm">
.bg-indigo
</div>
<div class="text-white bg-indigo-dark px-6 py-4 text-sm">
.bg-indigo-dark
</div>
<div class="text-white bg-indigo-darker px-6 py-4 text-sm">
.bg-indigo-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-purple-darker px-6 py-4 text-sm">
.bg-purple-darker
</div>
<div class="text-white bg-purple-dark px-6 py-4 text-sm">
.bg-purple-dark
</div>
<div class="text-white bg-purple px-6 py-4 text-sm">
.bg-purple
<div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
.bg-purple-lighter
</div>
<div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
.bg-purple-light
</div>
<div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
.bg-purple-lighter
<div class="text-white bg-purple px-6 py-4 text-sm">
.bg-purple
</div>
<div class="text-white bg-purple-dark px-6 py-4 text-sm">
.bg-purple-dark
</div>
<div class="text-white bg-purple-darker px-6 py-4 text-sm">
.bg-purple-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-pink-darker px-6 py-4 text-sm">
.bg-pink-darker
</div>
<div class="text-white bg-pink-dark px-6 py-4 text-sm">
.bg-pink-dark
</div>
<div class="text-white bg-pink px-6 py-4 text-sm">
.bg-pink
<div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
.bg-pink-lighter
</div>
<div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
.bg-pink-light
</div>
<div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
.bg-pink-lighter
<div class="text-white bg-pink px-6 py-4 text-sm">
.bg-pink
</div>
<div class="text-white bg-pink-dark px-6 py-4 text-sm">
.bg-pink-dark
</div>
<div class="text-white bg-pink-darker px-6 py-4 text-sm">
.bg-pink-darker
</div>
</div>
</div>

304
docs/tailwind.js
View File

@ -1,23 +1,283 @@
module.exports = {
"extend": {
"sizing": {
"width": {
"128": "32rem",
}
},
"spacing": {
"padding": {
"12": "3rem",
"16": "4rem"
},
"margin": {
"12": "3rem",
"16": "4rem"
},
"negativeMargin": {
"12": "3rem",
"16": "4rem"
},
}
}
var colors = {
'black': '#000000',
'white': '#ffffff',
'transparent': 'transparent',
'slate-darker': '#212b35',
'slate-dark': '#404e5c',
'slate': '#647382',
'slate-light': '#919eab',
'slate-lighter': '#c5ced6',
'smoke-darker': '#919eab',
'smoke-dark': '#c5ced6',
'smoke': '#dfe3e8',
'smoke-light': 'hsl(200, 33%, 96%)',
'smoke-lighter': 'hsl(200, 25%, 98%)',
'red-darker': '#960f0d',
'red-dark': '#d43633',
'red': '#f25451',
'red-light': '#fa8785',
'red-lighter': '#fff1f0',
'orange-darker': '#875200',
'orange-dark': '#f29500',
'orange': '#ffb82b',
'orange-light': '#ffd685',
'orange-lighter': '#fff8eb',
'yellow-darker': '#966100',
'yellow-dark': '#ffc400',
'yellow': '#ffe14a',
'yellow-light': '#ffea83',
'yellow-lighter': '#fffbe5',
'green-darker': '#056619',
'green-dark': '#34ae4c',
'green': '#57d06f',
'green-light': '#b1f3be',
'green-lighter': '#eefff1',
'teal-darker': '#025654',
'teal-dark': '#249e9a',
'teal': '#4dc0b5',
'teal-light': '#9eebe4',
'teal-lighter': '#e8fdfa',
'blue-darker': '#154267',
'blue-dark': '#317af6',
'blue': '#4aa2ea',
'blue-light': '#acdaff',
'blue-lighter': '#f1f9ff',
'indigo-darker': '#242b54',
'indigo-dark': '#4957a5',
'indigo': '#6574cd',
'indigo-light': '#bcc5fb',
'indigo-lighter': '#f4f5ff',
'purple-darker': '#331f56',
'purple-dark': '#714cb4',
'purple': '#976ae6',
'purple-light': '#ceb3ff',
'purple-lighter': '#f7f3ff',
'pink-darker': '#6b2052',
'pink-dark': '#d84f7d',
'pink': '#f66d9b',
'pink-light': '#ffa5c3',
'pink-lighter': '#fdf2f5',
}
module.exports = {
colors: colors,
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
text: {
fonts: {
'sans': 'museo-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
sizes: {
'base': '1rem', // 16px
'xs': '.75rem', // 12px
'sm': '.875rem', // 14px
'md': '1rem', // 16px
'lg': '1.125rem', // 18px
'xl': '1.25rem', // 20px
'2xl': '1.75rem', // 28px
'3xl': '2.375rem', // 38px
'4xl': '2.875rem', // 46px
},
weights: {
'normal': 300,
'semibold': 500,
'bold': 700,
},
leading: {
'none': 1,
'tight': 1.25,
'normal': 1.5,
'loose': 2,
},
tracking: {
'tight': '-0.05em',
'normal': '0',
'wide': '0.1em',
},
colors: {
...colors
},
},
backgrounds: {
colors: {
...colors
},
},
borders: {
widths: {
default: '1px',
'0': '0',
'2': '2px',
'4': '4px',
'8': '8px',
},
colors: {
default: colors['slate-lighter'],
...colors
},
},
radiuses: {
default: '.25rem',
sm: '.125rem',
lg: '.5rem',
pill: '9999px',
},
sizing: {
width: {
'auto': 'auto',
'px': '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'24': '6rem',
'32': '8rem',
'48': '12rem',
'64': '16rem',
'128': '32rem',
'1/2': '50%',
'1/3': '33.33333%',
'2/3': '66.66667%',
'1/4': '25%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.66667%',
'5/6': '83.33333%',
'full': '100%',
'screen': '100vw'
},
height: {
'auto': 'auto',
'px': '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'24': '6rem',
'32': '8rem',
'48': '12rem',
'64': '16rem',
'full': '100%',
'screen': '100vh'
},
minHeight: {
'0': '0',
'full': '100%',
'screen': '100vh'
},
maxHeight: {
'full': '100%',
'screen': '100vh'
},
minWidth: {
'0': '0',
'full': '100%',
},
maxWidth: {
'xs': '20rem',
'sm': '30rem',
'md': '40rem',
'lg': '50rem',
'xl': '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
'full': '100%',
},
},
spacing: {
padding: {
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem'
},
margin: {
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem'
},
negativeMargin: {
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem'
},
},
shadows: {
default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
md: '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
lg: '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
inner: 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
none: 'none',
},
zIndex: {
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
'auto': 'auto',
},
opacity: {
'0': '0',
'25': '.25',
'50': '.5',
'75': '.75',
'100': '1',
},
}

21
yarn.lock
View File

@ -1056,7 +1056,7 @@ circular-json@^0.3.1:
version "0.3.3"
resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
clean-css@^4.1.9, clean-css@^4.x:
clean-css@^4.1.9:
version "4.1.9"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
dependencies:
@ -3071,13 +3071,6 @@ plur@^2.0.0, plur@^2.1.2:
dependencies:
irregular-plurals "^1.0.0"
postcss-clean@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/postcss-clean/-/postcss-clean-1.1.0.tgz#c2d61d5d8caf19a585adba16897726c2674c4207"
dependencies:
clean-css "^4.x"
postcss "^6.x"
postcss-functions@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
@ -3176,14 +3169,6 @@ postcss@^6.0.1, postcss@^6.0.3, postcss@^6.0.9:
source-map "^0.5.7"
supports-color "^4.4.0"
postcss@^6.x:
version "6.0.13"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.13.tgz#b9ecab4ee00c89db3ec931145bd9590bbf3f125f"
dependencies:
chalk "^2.1.0"
source-map "^0.6.1"
supports-color "^4.4.0"
prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@ -3558,10 +3543,6 @@ source-map@^0.4.2, source-map@^0.4.4:
dependencies:
amdefine ">=0.0.4"
source-map@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
spdx-correct@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"