Update docs to make use of updated utilities

This commit is contained in:
Adam Wathan 2017-08-24 09:25:58 -04:00
parent 6fa259b142
commit b661c0e526
4 changed files with 8 additions and 8 deletions

View File

@ -11,9 +11,9 @@
<body class="pb-12">
<div class="bg-gradient-brand h-3"></div>
<header class="container">
<div class="py-6 flex-y-center flex-spaced">
<div class="flex-y-center">
<div class="pill h-12 w-12 bg-light p-2 flex-center flex-inline shadow-2 mr-4">
<div class="py-6 flex items-center justify-between">
<div class="flex items-center">
<div class="pill h-12 w-12 bg-light p-2 inline-flex items-center justify-center shadow-2 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>
</div>
<svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS">

View File

@ -17,7 +17,7 @@ title: "Borders"
Construct border size utilities using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element. By default, borders are `solid`, and use the `@default-border-color`.
<div class="flex flex-top mt-8 text-sm leading-none">
<div class="flex items-start mt-8 text-sm leading-none">
<div class="pr-12">
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>

View File

@ -93,9 +93,9 @@
<div class="rounded-l w-128 text-center overflow-hidden">
<img class="h-64" src="/img/card-left.jpg" alt="">
</div>
<div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex-col flex-spaced">
<div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex flex-col justify-between">
<div>
<p class="text-sm text-dark-softer flex-y-center">
<p class="text-sm text-dark-softer flex items-center">
<svg class="text-dark-softest w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
Members only
</p>
@ -104,7 +104,7 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="flex-y-center">
<div class="flex items-center">
<img class="w-10 h-10 pill mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
<div class="text-sm">
<p class="text-dark leading-none">Jonathan Reinink</p>

View File

@ -15,7 +15,7 @@ title: "Spacing"
The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
<div class="flex flex-top mt-8 text-sm">
<div class="flex items-start mt-8 text-sm">
<div class="pr-12">
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>