Merge pull request #225 from nothingworksinc/remove-outdated-docs
Add mobile menu + Remove some outdated docs
This commit is contained in:
David Hemphill
GitHub
commit
96c61724a4
9 changed files with 77 additions and 238 deletions
|
|
@ -1,7 +1,7 @@
|
|||
@tailwind reset;
|
||||
|
||||
html {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
@media (min-width: 420px) {
|
||||
font-size: 16px;
|
||||
|
|
@ -13,6 +13,7 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
ol,
|
||||
ul {
|
||||
@apply .list-reset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,5 +2,9 @@
|
|||
background-color: #e3ebed;
|
||||
}
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(to right, #2383ae, #6dd7b9);
|
||||
background-image: linear-gradient(to right, #2383ae, #6dd7b9);
|
||||
}
|
||||
|
||||
.\!hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,15 +22,14 @@
|
|||
<link rel="stylesheet" href="{{ mix('/css/main.css') }}">
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script src="{{ mix('/js/nav.js') }}"></script>
|
||||
|
||||
</head>
|
||||
<body class="font-sans font-normal text-slate-darker leading-normal">
|
||||
<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
|
||||
<div class="min-h-screen">
|
||||
<div class="fixed pin-y pin-l bg-smoke-light w-full max-w-xs flex-none border-r-2 border-smoke flex flex-col">
|
||||
<div id="sidebar" class="z-50 fixed pin-y pin-l overflow-y-scroll bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
|
||||
<div class="border-b border-smoke flex-none p-8">
|
||||
<div class="text-center mb-8">
|
||||
<div class="hidden md:block text-center mb-8">
|
||||
<a href="/" class="inline-block">
|
||||
<svg class="h-8" 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>
|
||||
<svg class="h-8" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><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(#logoGradient)" fill-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative">
|
||||
|
|
@ -185,14 +184,64 @@
|
|||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-80">
|
||||
<div id="content" class="px-6 py-8 w-full max-w-xl mx-auto">
|
||||
<div class="md:ml-80">
|
||||
<div class="fixed w-full">
|
||||
<div class="pin-t bg-white md:hidden relative border-b border-dark h-12 flex items-center">
|
||||
<div class="js-open-sidebar absolute pin-l pin-y px-4 flex items-center">
|
||||
<svg class="h-4" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</div>
|
||||
<div class="mx-auto inline-flex items-center">
|
||||
<svg class="h-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<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(#logoGradient)" fill-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="js-close-sidebar">
|
||||
<div class="flex items-center absolute pin-r pin-y px-4">
|
||||
<svg class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content" class="px-6 py-16 md:py-8 w-full max-w-xl mx-auto">
|
||||
<div id="app">
|
||||
@yield('body')
|
||||
</div>
|
||||
<script src="{{ mix('/js/app.js') }}"></script>
|
||||
<script src="/js/app.js"></script>
|
||||
<script>
|
||||
anchors.options = { placement: 'left', class: 'text-slate-light' };
|
||||
anchors.add();
|
||||
|
||||
var closeSidebar = function () {
|
||||
$('#sidebar').addClass("hidden");
|
||||
$('.js-close-sidebar').addClass("hidden");
|
||||
}
|
||||
|
||||
$('.js-close-sidebar').on('click', function () {
|
||||
closeSidebar();
|
||||
});
|
||||
|
||||
$('.js-open-sidebar').on('click', function () {
|
||||
$('#sidebar').removeClass("hidden");
|
||||
$('.js-close-sidebar').removeClass("hidden");
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
if ($(window).width() <= 767) {
|
||||
closeSidebar();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="0%" y2="100%" id="logoGradient">
|
||||
<stop stop-color="#2383AE" offset="0%"></stop>
|
||||
<stop stop-color="#6DD7B9" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -248,20 +248,3 @@ Using the utilities in HTML:
|
|||
<div class="bg-slate"></div>
|
||||
<div class="bg-slate-light"></div>
|
||||
```
|
||||
|
||||
Using the utilities in Less:
|
||||
|
||||
```less
|
||||
div {
|
||||
.bg-white;
|
||||
.bg-smoke-lighter;
|
||||
.bg-smoke-light;
|
||||
.bg-smoke;
|
||||
|
||||
.bg-slate-darker;
|
||||
.bg-slate-dark;
|
||||
.bg-slate;
|
||||
.bg-slate-light;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -4,53 +4,3 @@ title: "Border Color"
|
|||
---
|
||||
|
||||
# Border Color
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#color">Color</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
By default, borders use the `@default-border-color`. To override a border color, add one of the border color utilities.
|
||||
|
||||
```html
|
||||
<div class="border border-smoke-darker"></div>
|
||||
<div class="border border-smoke-dark"></div>
|
||||
<div class="border border-smoke"></div>
|
||||
|
||||
<div class="border border-white"></div>
|
||||
<div class="border border-smoke-lighter"></div>
|
||||
<div class="border border-smoke-light"></div>
|
||||
|
||||
<div class="border border-invisible"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.border-smoke-darker;
|
||||
.border-smoke-dark;
|
||||
.border-smoke;
|
||||
|
||||
.border-white;
|
||||
.border-smoke-lighter;
|
||||
.border-smoke-light;
|
||||
|
||||
.border-invisible;
|
||||
}
|
||||
```
|
||||
|
||||
The default border colors can also be modified using the following variables.
|
||||
|
||||
```less
|
||||
// Variable: Default:
|
||||
@border-smoke-darker: hsl(0, 0%, 82%);
|
||||
@border-smoke-dark: hsl(0, 0%, 90%);
|
||||
@border-smoke: hsl(0, 0%, 96%);
|
||||
|
||||
@border-white: hsl(0, 0%, 100%);
|
||||
@border-smoke-lighter: hsl(0, 0%, 60%);
|
||||
@border-smoke-light: hsl(0, 0%, 35%);
|
||||
|
||||
@default-border-color: @border-smoke-dark;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,31 +4,3 @@ title: "Font Families"
|
|||
---
|
||||
|
||||
# Font Families
|
||||
|
||||
<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>
|
||||
|
||||
```html
|
||||
<div class="font-sans"></div>
|
||||
<div class="font-serif"></div>
|
||||
<div class="font-mono"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.font-sans;
|
||||
.font-serif;
|
||||
.font-mono;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// 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 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;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -47,43 +47,8 @@ The syntax below is combined to create a system for padding and margins. For exa
|
|||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
|
@ -96,10 +61,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
|
|||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
|
|
|
|||
|
|
@ -45,45 +45,8 @@ The syntax below is combined to create a system for padding and margins. For exa
|
|||
|
||||
<h2 id="customizing">Customizing the spacing scale</h2>
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
|
@ -96,11 +59,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
|
|||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -47,43 +47,9 @@ The syntax below is combined to create a system for padding and margins. For exa
|
|||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
|
@ -96,11 +62,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
|
|||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue