mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Update docs design to match landing page branding better
This commit is contained in:
Adam Wathan
parent
cd91831f55
commit
2df7b8d457
23
docs/source/_assets/less/base.less
Normal file
23
docs/source/_assets/less/base.less
Normal file
@ -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;
|
||||
}
|
||||
19
docs/source/_assets/less/container.less
Normal file
19
docs/source/_assets/less/container.less
Normal file
@ -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();
|
||||
@ -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";
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
6
docs/source/_assets/less/utilities.less
Normal file
6
docs/source/_assets/less/utilities.less
Normal file
@ -0,0 +1,6 @@
|
||||
.bg-brand-soft {
|
||||
background-color: #e3ebed;
|
||||
}
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(to right, #2383ae, #6dd7b9);
|
||||
}
|
||||
18
docs/source/_assets/less/variables.less
Normal file
18
docs/source/_assets/less/variables.less
Normal file
@ -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,
|
||||
;
|
||||
@ -8,59 +8,77 @@
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<script type="text/javascript" src="/js/prism.js" defer=""></script>
|
||||
</head>
|
||||
<body class="full-height flex-col">
|
||||
<header class="px-8 py-6 bg-blue">
|
||||
<div class="flex-y-center">
|
||||
<svg class="mr-2" style="height: 34px; width: auto;" xmlns="http://www.w3.org/2000/svg" viewBox="173.345 95.819 442.976 281.173">
|
||||
<path fill="#ffffff" d="M173.345 188.574l100.745 78.263-.216 110.155 80.33-53.23-28.388-26.996 111.5 80.226L616.32 95.82l-442.975 92.754zM576.58 122.36L331.837 278.67l-39.912 67.82.622-86.155 284.03-137.974z"/>
|
||||
</svg>
|
||||
<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">
|
||||
<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">
|
||||
<title>Tailwind CSS</title>
|
||||
<path d="M8.638 18h-3.01V3.645H.563V1.09H13.69v2.555H8.637V18zm8.456-2.004c1.652 0 2.976-1.1 2.976-2.6v-.95l-2.87.175c-1.407.095-2.216.728-2.216 1.712 0 1.02.844 1.664 2.11 1.664zm-.88 2.203c-2.4 0-4.148-1.512-4.148-3.75 0-2.204 1.7-3.528 4.723-3.716l3.28-.187v-.89c0-1.302-.88-2.052-2.32-2.052-1.383 0-2.262.668-2.45 1.7h-2.706c.13-2.32 2.11-3.985 5.273-3.985 3.082 0 5.086 1.63 5.086 4.125V18H20.14v-1.98h-.058c-.715 1.347-2.273 2.18-3.867 2.18zm9.153-.2h2.918V5.578h-2.918V18zM26.82 3.95c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM30.816 18h2.918V1.09h-2.918V18zM53.07 5.578h-2.883l-2.097 9.54h-.07l-2.426-9.54h-2.8l-2.427 9.54h-.058l-2.1-9.54h-2.93L38.646 18h3.046l2.44-9.082h.057L46.638 18h3.07L53.07 5.578zM54.594 18h2.918V5.578h-2.918V18zm1.453-14.05c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM59.96 18h2.92v-7.195c0-1.782 1.065-2.99 2.74-2.99 1.665 0 2.485.986 2.485 2.744V18h2.918V9.973c0-2.87-1.558-4.63-4.3-4.63-1.91 0-3.235.89-3.903 2.368h-.058V5.58h-2.8V18zm18.036.2c-3.13 0-5.156-2.473-5.156-6.423 0-3.925 2.027-6.41 5.156-6.41 1.78 0 3.188.926 3.844 2.297h.07V1.09h2.918V18h-2.86v-2.12h-.046c-.68 1.393-2.11 2.32-3.926 2.32zm.88-10.43c-1.876 0-3.048 1.558-3.048 4.02 0 2.472 1.16 4.02 3.047 4.02 1.84 0 3.047-1.56 3.047-4.02 0-2.438-1.207-4.02-3.047-4.02zm20.788 10.51c3.996 0 6.762-2.19 7.29-5.81h-2.966c-.468 2.038-2.074 3.245-4.312 3.245-2.93 0-4.78-2.38-4.78-6.176 0-3.774 1.862-6.165 4.768-6.165 2.19 0 3.914 1.395 4.313 3.516h2.976c-.375-3.632-3.363-6.08-7.29-6.08-4.804 0-7.862 3.338-7.862 8.73 0 5.425 3.036 8.74 7.864 8.74zm8.283-5.038c.13 3.117 2.683 5.04 6.574 5.04 4.09 0 6.67-2.016 6.67-5.227 0-2.52-1.454-3.938-4.888-4.723l-1.945-.445c-2.074-.492-2.93-1.15-2.93-2.274 0-1.406 1.29-2.343 3.2-2.343 1.933 0 3.257.95 3.398 2.53h2.883c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.477 3.914 4.594 4.63l2.192.514c2.133.504 3 1.207 3 2.426 0 1.406-1.418 2.414-3.457 2.414-2.062 0-3.62-1.02-3.808-2.578h-2.93zm14.424 0c.13 3.117 2.685 5.04 6.575 5.04 4.09 0 6.668-2.016 6.668-5.227 0-2.52-1.453-3.938-4.886-4.723l-1.946-.445c-2.073-.492-2.928-1.15-2.928-2.274 0-1.406 1.29-2.343 3.2-2.343 1.932 0 3.257.95 3.397 2.53h2.882c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.478 3.914 4.595 4.63l2.19.514c2.134.504 3 1.207 3 2.426 0 1.406-1.417 2.414-3.456 2.414-2.063 0-3.622-1.02-3.81-2.578h-2.93z" fill="#3A3F46" fill-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<a class="text-light text-lg" href="/">Tailwind CSS</a>
|
||||
<div class="text-blue-light text-xs">A utility-first CSS framework for rapid UI development</div>
|
||||
Some other info
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex flex-fill">
|
||||
<nav class="px-8 py-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
|
||||
<div class="mb-8">
|
||||
<a class="{{ $page->getUrl() === '/examples' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples">Examples</a>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 sm:col-3">
|
||||
<nav class="py-4 text-light text-lg">
|
||||
<div>
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Introduction</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/installation' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/changelog' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Concepts</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/principles' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/customization' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/customization">Customization</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/responsive' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/responsive">Responsive</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/colors' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/colors">Colors</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Utilities</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/borders' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/constrain' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/display' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/flexbox' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/grid' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/images' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/position' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/shadows' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/spacing' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/text' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/z-index' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Components</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/buttons' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/forms' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/examples' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples">Examples</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-12 sm:col-9">
|
||||
<div class="p-12 rounded-lg bg-light shadow-2">
|
||||
@yield('body')
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/installation' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/changelog' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Concepts</div>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/principles' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/customization' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/customization">Customization</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/responsive' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/responsive">Responsive</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/colors' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/colors">Colors</a></li>
|
||||
</ul>
|
||||
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/borders' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/constrain' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/display' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/flexbox' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/grid' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/images' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/position' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/shadows' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/spacing' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/text' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/z-index' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
</ul>
|
||||
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Components</div>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/buttons' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/forms' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="p-12 constrain-lg">
|
||||
@yield('body')
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user