Extract reset to separate file, inline SUIT CSS Base, rename @tailwind at-rules

This commit is contained in:
Adam Wathan 2017-10-11 09:35:04 -04:00
parent 57cb4159a4
commit cd41069cba
17 changed files with 170 additions and 114 deletions

View file

@ -1,11 +1,4 @@
@import (less) "../../../node_modules/normalize.css/normalize.css";
@import (less) "../../../node_modules/suitcss-base/lib/base.css";
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@viewport { width: device-width; }
@tailwind reset;
html {
@apply .bg-brand-soft;
@ -37,18 +30,6 @@ body {
line-height: 1.5;
}
textarea {
resize: vertical;
}
button, [role=button] {
cursor: pointer;
}
small {
@apply .text-sm;
}
pre, code {
@apply .mono;
}

View file

@ -4,7 +4,7 @@
@import "markdown";
@import "container";
@tailwind-utilities all;
@tailwind utilities;
@import "utilities";

View file

@ -26,9 +26,14 @@
@apply .leading-none;
@apply .wrap-none;
@apply .text-pink-dark;
@apply .mono;
vertical-align: middle;
}
> pre, pre& {
@apply .mono;
}
> blockquote, blockquote& {
@apply .text-em;
@apply .text-dark-soft;

View file

@ -69,6 +69,7 @@
<div class="mt-8">
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Styles</p>
<ul class="mb-8">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/appearance" class="{{ $page->active('/appearance') ? 'text-dark text-medium' : 'text-dark-soft' }}">Appearance</a></li>
<li class="mb-2">
@ -79,7 +80,6 @@
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-dark text-medium' : 'text-dark-soft' }}">Size</a></li>
</ul>
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Borders</a>
<ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
@ -130,7 +130,7 @@
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-dark text-medium' : 'text-dark-soft' }}">SVG</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Text</a>
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">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-dark text-medium' : 'text-dark-soft' }}">Fonts</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
@ -138,7 +138,6 @@
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-dark text-medium' : 'text-dark-soft' }}">Weight</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Line Height</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Letter Spacing</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/alignment" class="{{ $page->active('/text/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-dark text-medium' : 'text-dark-soft' }}">Wrapping</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style &amp; Decoration</a></li>
</ul>

View file

@ -5,7 +5,6 @@ title: "Borders"
# Borders
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>

View file

@ -1,12 +0,0 @@
---
extends: _layouts.markdown
title: "Text Alignment"
---
# Text Alignment
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
</div>