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

Update doc classes for latest massive class renaming

Browse Source
This commit is contained in:
Adam Wathan 2017-10-19 12:06:17 -04:00
parent 8e1fcd7262
commit 2155ed4dd2
12 changed files with 179 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,15 +23,15 @@ html {
}
body {
@apply .sans;
@apply .font-sans;
@apply .text-base;
@apply .text-regular;
@apply .font-normal;
@apply .text-slate-darker;
line-height: 1.5;
}
pre, code {
@apply .mono;
@apply .font-mono;
}
img {
@ -43,7 +43,7 @@ a {
text-decoration: none;
&:hover {
@apply .text-underline;
@apply .underline;
}
}

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

@ -32,16 +32,16 @@
@apply .leading-none;
@apply .wrap-none;
@apply .text-pink;
@apply .mono;
@apply .font-mono;
vertical-align: middle;
}
> pre, pre& {
@apply .mono;
@apply .font-mono;
}
> blockquote, blockquote& {
@apply .text-em;
@apply .italic;
@apply .text-slate;
@apply .text-sm;
}
@ -50,7 +50,7 @@
@apply .mb-4;
@apply .leading-none;
@apply .text-slate-darker;
@apply .text-bold;
@apply .font-bold;
@apply .text-3xl;
}
@ -59,7 +59,7 @@
@apply .mb-8;
@apply .text-slate-darker;
@apply .leading-none;
@apply .text-bold;
@apply .font-bold;
@apply .text-xl;
}
@ -68,7 +68,7 @@
@apply .mb-8;
@apply .text-slate-darker;
@apply .leading-none;
@apply .text-medium;
@apply .font-semibold;
@apply .text-lg;
}

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

@ -22,7 +22,7 @@
</svg>
</div>
<div>
<a class="text-medium text-slate-light" href="https://github.com/adamwathan/tailwindcss">GitHub</a>
<a class="font-semibold text-slate-light" href="https://github.com/adamwathan/tailwindcss">GitHub</a>
</div>
</div>
</header>
@ -31,127 +31,127 @@
<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 text-uppercase tracking-wide text-medium text-sm">Introduction</p>
<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 text-uppercase tracking-wide text-medium text-sm">Getting Started</p>
<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 text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/configuration">
<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 text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
<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 text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
<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 text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
<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 text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
<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 text-uppercase tracking-wide text-medium text-sm">Styles</p>
<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 text-medium' : 'text-slate' }}">Base</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker text-medium' : 'text-slate' }}">Alignment</a></li>
<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 text-medium' : 'text-slate' }}">Backgrounds</a>
<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 text-medium' : 'text-slate' }}">Color</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker text-medium' : 'text-slate' }}">Position</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker text-medium' : 'text-slate' }}">Size</a></li>
<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 text-medium' : 'text-slate' }}">Borders</a>
<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 text-medium' : 'text-slate' }}">Base</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker text-medium' : 'text-slate' }}">Color</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker text-medium' : 'text-slate' }}">Style</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker text-medium' : 'text-slate' }}">Radius</a></li>
<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 text-medium' : 'text-slate' }}">Buttons</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker text-medium' : 'text-slate' }}">Container</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker text-medium' : 'text-slate' }}">Display</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker text-medium' : 'text-slate' }}">Flexbox</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker text-medium' : 'text-slate' }}">Floats</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker text-medium' : 'text-slate' }}">Forms</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker text-medium' : 'text-slate' }}">Grid</a></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 text-medium' : 'text-slate' }}">Interactivity</a>
<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 text-medium' : 'text-slate' }}">Cursor</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker text-medium' : '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 text-medium' : '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 text-medium' : 'text-slate' }}">User Select</a></li>
<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 text-medium' : 'text-slate' }}">Lists</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker text-medium' : 'text-slate' }}">Opacity</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker text-medium' : 'text-slate' }}">Overflow</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker text-medium' : 'text-slate' }}">Positioning</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker text-medium' : 'text-slate' }}">Shadows</a></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 text-medium' : 'text-slate' }}">Sizing</a>
<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 text-medium' : '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 text-medium' : '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 text-medium' : '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 text-medium' : '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 text-medium' : '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 text-medium' : 'text-slate' }}">Max-Height</a></li>
<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 text-medium' : 'text-slate' }}">Spacing</a>
<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 text-medium' : 'text-slate' }}">Padding</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker text-medium' : '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 text-medium' : 'text-slate' }}">Negative Margin</a></li>
<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 text-medium' : 'text-slate' }}">SVG</a></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 text-medium' : 'text-slate' }}">Typography</a>
<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 text-medium' : 'text-slate' }}">Fonts</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker text-medium' : 'text-slate' }}">Color</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker text-medium' : 'text-slate' }}">Sizing</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker text-medium' : '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 text-medium' : '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 text-medium' : '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 text-medium' : 'text-slate' }}">Wrapping</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker text-medium' : 'text-slate' }}">Style &amp; Decoration</a></li>
<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 text-medium' : 'text-slate' }}">Visibility</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker text-medium' : 'text-slate' }}">Z-Index</a></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 text-uppercase tracking-wide text-medium text-sm">Examples</p>
<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 text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
<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>

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

@ -26,7 +26,7 @@ Here's a bunch of examples:
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-orange-lighter border-l-4 border-orange text-orange-dark p-4">
<p class="text-bold">Be Warned</p>
<p class="font-bold">Be Warned</p>
<p>Something not ideal might be happening.</p>
</div>
@endcomponent
@ -37,7 +37,7 @@ Here's a bunch of examples:
@component('_partials.code-sample', ['lang' => 'html'])
<div>
<div class="bg-red text-white text-bold rounded-t px-4 py-2">
<div class="bg-red text-white font-bold rounded-t px-4 py-2">
Danger
</div>
<div class="border border-t-0 border-red-light rounded-b bg-red-lighter px-4 py-3 text-red">
@ -51,7 +51,7 @@ Here's a bunch of examples:
### Solid
@component('_partials.code-sample', ['lang' => 'html'])
<div class="flex items-center bg-blue text-white text-sm text-bold px-4 py-3">
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3">
<svg class="h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p>
Something happened that you should know about.
@ -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="text-medium">Our privacy policy has changed</p>
<p class="font-semibold">Our privacy policy has changed</p>
<p class="text-sm">Make sure you know how these changes affect you.</p>
</div>
</div>
@ -81,7 +81,7 @@ Here's a bunch of examples:
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-blue-lighter border-t border-b border-blue text-blue px-4 py-3">
<p class="text-bold">Informational message</p>
<p class="font-bold">Informational message</p>
<p class="text-sm">Some additional text to explain said message.</p>
</div>
@endcomponent

6
docs/source/examples/cards.blade.md
View File

@ -17,9 +17,9 @@ We don't ship alert components because every app has it's own visual style, but
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm text-medium text-slate mr-2">#photography</span>
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm text-medium text-slate mr-2">#travel</span>
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm text-medium text-slate">#winter</span>
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate">#winter</span>
</div>
</div>
</div>

28
docs/source/styles/borders/base.md
View File

@ -17,24 +17,24 @@ Add borders to any element using the `.border{-side?}{-width?}` syntax. For exam
<div class="flex items-start mt-8 text-sm leading-none">
<div class="pr-12">
<div class="mb-3 text-slate text-uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
<div class="mb-3 text-slate uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
</div>
<div class="pl-12 pr-12 border-l">
<div class="mb-3 text-slate"><span class="text-uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
<div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
</div>
<div class="pl-12 border-l">
<div class="mb-3 text-slate"><span class="text-uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 2px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 4px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 8px</div>
<div class="mb-3 text-slate"><span class="uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
</div>
</div>

24
docs/source/styles/buttons.blade.md
View File

@ -14,13 +14,13 @@ Here's a bunch of examples:
### Simple
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded">
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>
@slot('code')
<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded">
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>
@ -31,7 +31,7 @@ Here's a bunch of examples:
<style>
.btn {
@apply&nbsp;.text-bold .py-2 .px-4 .rounded;
@apply&nbsp;.font-bold .py-2 .px-4 .rounded;
}
.btn-blue {
@apply&nbsp;.bg-blue .text-white;
@ -48,7 +48,7 @@ Here's a bunch of examples:
### Pill
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded-pill">
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-pill">
Button
</button>
@endcomponent
@ -58,7 +58,7 @@ Here's a bunch of examples:
### Outline
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-transparent hover:bg-blue text-blue-dark text-medium hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
Button
</button>
@endcomponent
@ -68,7 +68,7 @@ Here's a bunch of examples:
### Bordered
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border border-blue-darker rounded">
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker rounded">
Button
</button>
@endcomponent
@ -78,7 +78,7 @@ Here's a bunch of examples:
### Disabled
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-blue text-white text-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
<button class="bg-blue text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
Button
</button>
@endcomponent
@ -88,7 +88,7 @@ Here's a bunch of examples:
### 3D
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue-darker rounded">
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue-darker rounded">
Button
</button>
@endcomponent
@ -98,7 +98,7 @@ Here's a bunch of examples:
### Elevated
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-white hover:bg-smoke-lighter text-slate-dark text-medium py-2 px-4 border border-slate-lighter rounded shadow">
<button class="bg-white hover:bg-smoke-lighter text-slate-dark font-semibold py-2 px-4 border border-slate-lighter rounded shadow">
Button
</button>
@endcomponent
@ -109,10 +109,10 @@ Here's a bunch of examples:
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<div class="inline-flex">
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded-l">
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-l">
Prev
</button>
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded-r">
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-r">
Next
</button>
</div>
@ -123,7 +123,7 @@ Here's a bunch of examples:
### w/Icon
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded inline-flex items-center">
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded inline-flex items-center">
<svg class="h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span>Download</span>
</button>

16
docs/source/styles/grid.md
View File

@ -20,7 +20,7 @@ Documentation around things like:
Basic grid example:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3">
@ -43,7 +43,7 @@ Basic grid example:
Columns don't need to fill a row:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
@ -67,7 +67,7 @@ Columns don't need to fill a row:
Columns can be different widths:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
@ -91,7 +91,7 @@ Columns can be different widths:
Rows can overflow and wrap:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3">
@ -124,7 +124,7 @@ Rows can overflow and wrap:
Columns can have gutters:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap.-mx-4</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/3 px-4">
@ -154,7 +154,7 @@ Columns can have gutters:
Column widths can be automatic:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-1/4 md:flex-1 md:w-auto">
@ -197,7 +197,7 @@ Column widths can be automatic:
Fixed width columns are still respected even if a smaller screen has auto column widths:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="flex-fill md:w-1/6 md:flex-none">
@ -241,7 +241,7 @@ Fixed width columns are still respected even if a smaller screen has auto column
Use margin auto utilities to accomplish offsets:
<div class="bg-smoke-light text-medium text-sm mb-6">
<div class="bg-smoke-light font-semibold text-sm mb-6">
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 md:ml-auto">

38
docs/source/styles/spacing/margin.md
View File

@ -17,29 +17,29 @@ The syntax below is combined to create a system for padding and margins. For exa
<div class="flex items-start mt-8 text-sm">
<div class="pr-12">
<div class="mb-3 text-slate text-uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
<div class="mb-3 text-slate uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
</div>
<div class="pl-12 pr-12 border-l">
<div class="mb-3 text-slate"><span class="text-uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
<div class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
</div>
<div class="pl-12 border-l">
<div class="mb-3 text-slate text-uppercase">Space</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
<div class="mb-3 text-slate uppercase">Space</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
</div>
</div>

38
docs/source/styles/spacing/negative-margin.md
View File

@ -17,29 +17,29 @@ The syntax below is combined to create a system for padding and margins. For exa
<div class="flex items-start mt-8 text-sm">
<div class="pr-12">
<div class="mb-3 text-slate text-uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
<div class="mb-3 text-slate uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
</div>
<div class="pl-12 pr-12 border-l">
<div class="mb-3 text-slate"><span class="text-uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
<div class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
</div>
<div class="pl-12 border-l">
<div class="mb-3 text-slate text-uppercase">Space</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
<div class="mb-3 text-slate uppercase">Space</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
</div>
</div>

38
docs/source/styles/spacing/padding.md
View File

@ -17,29 +17,29 @@ The syntax below is combined to create a system for padding and margins. For exa
<div class="flex items-start mt-8 text-sm">
<div class="pr-12">
<div class="mb-3 text-slate text-uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
<div class="mb-3 text-slate uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
</div>
<div class="pl-12 pr-12 border-l">
<div class="mb-3 text-slate"><span class="text-uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
<div class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
</div>
<div class="pl-12 border-l">
<div class="mb-3 text-slate text-uppercase">Space</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
<div class="mb-3 text-slate uppercase">Space</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
</div>
</div>

14
docs/source/styles/text/fonts.md
View File

@ -12,16 +12,16 @@ title: "Font Families"
</div>
```html
<div class="sans"></div>
<div class="serif"></div>
<div class="mono"></div>
<div class="font-sans"></div>
<div class="font-serif"></div>
<div class="font-mono"></div>
```
```less
div {
.sans;
.serif;
.mono;
.font-sans;
.font-serif;
.font-mono;
}
```
@ -29,6 +29,6 @@ div {
// Customize the font stack
@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
@font-family-mono: Consolas, "Andale font-mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus font-mono L", Monaco, "Courier New", Courier, monospace;
@font-family-base: @font-family-sans;
```