From 2df7b8d457bc0cdd653e854fd31a8cc6ff4048b9 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 19 Aug 2017 10:21:31 -0400 Subject: [PATCH] Update docs design to match landing page branding better --- docs/source/_assets/less/base.less | 23 +++++ docs/source/_assets/less/container.less | 19 ++++ docs/source/_assets/less/main.less | 38 ++------ docs/source/_assets/less/markdown.less | 24 ++--- docs/source/_assets/less/utilities.less | 6 ++ docs/source/_assets/less/variables.less | 18 ++++ docs/source/_layouts/master.blade.php | 114 ++++++++++++++---------- 7 files changed, 152 insertions(+), 90 deletions(-) create mode 100644 docs/source/_assets/less/base.less create mode 100644 docs/source/_assets/less/container.less create mode 100644 docs/source/_assets/less/utilities.less create mode 100644 docs/source/_assets/less/variables.less diff --git a/docs/source/_assets/less/base.less b/docs/source/_assets/less/base.less new file mode 100644 index 000000000..0df43921f --- /dev/null +++ b/docs/source/_assets/less/base.less @@ -0,0 +1,23 @@ +html { + .bg-brand-soft; +} + +*, +*::before, +*::after { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + color: inherit; + text-decoration: none; + + &:hover { + .text-underline; + } +} + +svg { + fill: currentColor; +} diff --git a/docs/source/_assets/less/container.less b/docs/source/_assets/less/container.less new file mode 100644 index 000000000..55e26d81d --- /dev/null +++ b/docs/source/_assets/less/container.less @@ -0,0 +1,19 @@ +.container { + .px-4; + .mx-auto; + width: 100%; +} + +.generate-containers(@i: 1) when (@i <= length(@screens)) { + @screen: extract(@screens, @i); + @screen-width: extract(@screen, 2); + @container-width: extract(@screen, 3); + + @media (min-width: @screen-width) { + .container { max-width: @container-width; } + } + + .generate-containers(@i + 1); +} + +.generate-containers(); diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less index 10b2dd35b..70fe04bd4 100644 --- a/docs/source/_assets/less/main.less +++ b/docs/source/_assets/less/main.less @@ -1,37 +1,11 @@ @import "../../../../src/reset"; -@import "../../../../src/utilities"; +@import "base"; + @import "prism"; @import "markdown"; +@import "container"; -*, -*::before, -*::after { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} +@import "../../../../src/utilities"; +@import "utilities"; -a { - color: inherit; - text-decoration: none; - - &:hover { - .text-underline; - } -} - -svg { - fill: currentColor; -} - -@spacing-scale: - 'px' 1px, - '0' 0, - '1' 0.25rem, - '2' 0.5rem, - '3' 0.75rem, - '4' 1rem, - '6' 1.5rem, - '8' 2rem, - '12' 3rem, - '16' 4rem, -; +@import "variables"; diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index cd8097b81..c7a558b2c 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -18,12 +18,15 @@ } p code, p& code& { - .border; - .rounded; + .inline-block; + .bg-light-soft; + .rounded-sm; .text-sm; - .px-1; + .p-1; + .leading-none; .text-no-wrap; - color: #DD4A68; + .text-pink-dark; + vertical-align: middle; } blockquote, blockquote& { @@ -35,18 +38,17 @@ h1, h1& { .mb-4; .leading-none; - .text-dark-softer; - .text-thin; - .text-2xl; - .text-blue; + .text-dark; + .text-bold; + .text-3xl; } h2, h2& { .mt-16; .mb-8; - .text-blue; + .text-dark; .leading-none; - .text-thin; + .text-bold; .text-xl; } @@ -60,7 +62,9 @@ } p, p& { + .text-dark-soft; .mt-8; .mb-3; + line-height: 1.75; } } diff --git a/docs/source/_assets/less/utilities.less b/docs/source/_assets/less/utilities.less new file mode 100644 index 000000000..dbe68377d --- /dev/null +++ b/docs/source/_assets/less/utilities.less @@ -0,0 +1,6 @@ +.bg-brand-soft { + background-color: #e3ebed; +} +.bg-gradient-brand { + background-image: linear-gradient(to right, #2383ae, #6dd7b9); +} diff --git a/docs/source/_assets/less/variables.less b/docs/source/_assets/less/variables.less new file mode 100644 index 000000000..00ebf877b --- /dev/null +++ b/docs/source/_assets/less/variables.less @@ -0,0 +1,18 @@ +@screens: + sm 576px 540px, + md 768px 720px, + lg 992px 960px, + xl 1200px 1140px; + +@spacing-scale: + 'px' 1px, + '0' 0, + '1' 0.25rem, + '2' 0.5rem, + '3' 0.75rem, + '4' 1rem, + '6' 1.5rem, + '8' 2rem, + '12' 3rem, + '16' 4rem, +; diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 6c8724a53..010858c69 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -8,59 +8,77 @@ - -
-
- - - + +
+
+
+
+
+ +
+ + Tailwind CSS + + +
- Tailwind CSS -
A utility-first CSS framework for rapid UI development
+ Some other info
-
- -
- @yield('body')