Skip to content

Commit c12c97f

Browse files
author
adam morse
committed
New homepage stuff
1 parent abf4201 commit c12c97f

File tree

3 files changed

+166
-46
lines changed

3 files changed

+166
-46
lines changed

‎index.html

+83-23
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,27 @@
2727
</head>
2828
<body class="w-100 sans-serif">
2929
<header class="w-100 pa3 ph5-ns bg-white">
30-
<div class="db dt-ns mw9 center w-100">
31-
<div class="db dtc-ns v-mid tl w-50">
32-
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70" title="Home">
30+
<div class="flex flex-wrap flex-nowrap-ns items-center mw9 center w-100">
31+
<div class="flex items-center w-100 w-50-ns mb2 mb0-ns">
32+
<a href="/" class="nowrap dib f5 f4-ns fw6 mt0 mb1 link black-90" title="Home">
3333
Tachyons
3434
<div class="dib">
35-
<small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.12.0</small>
35+
<small class="nowrap f7 mt2 mt3-ns pr2 black-70">v4.12.0</small>
3636
</div>
3737
</a>
38+
39+
<div class='ml-auto dn inline-flex-l' style='height:20px'>
40+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="24px"></iframe>
41+
</div>
42+
43+
<a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter nowrap bg-white-50 dim link flex-nowrap dn inline-flex-l items-center br2 ph2 pv1 lh-solid" style="background-color: #55acee;">
44+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="12" height="12" fill="#fff">
45+
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
46+
</svg>
47+
<span class="white fw6" style="font-size: 12px;">Tweet</span>
48+
</a>
3849
</div>
39-
<nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
50+
<nav class="flex w-100 w-50-ns justify-start justify-end-ns">
4051
<a title="Documentation" href="/docs/"
4152
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
4253
Docs
@@ -64,7 +75,7 @@
6475
<main class="w-100 bt b--black-10 bg-white">
6576
<section class="bg-black-0125 w-100">
6677
<article class="pb4">
67-
<header class="ph3 ph5-ns w-100 bg-transparent pv3 mb4 mb5-ns bb b--black-10 overflow-auto">
78+
<header class="ph3 ph5-ns w-100 bg-transparent pv3 bb b--black-10 overflow-auto">
6879
<div class="nowrap mw9 center">
6980
<a title="Getting Started" href="#getting-started"
7081
class="pv1-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
@@ -88,23 +99,23 @@
8899
</a>
89100
</div>
90101
</header>
91-
<div class="ph3 ph5-ns">
92-
<div class="cf mw9 center tc-m">
93-
<div class="fl w-100 overflow-auto v-top">
94-
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="32px"></iframe>
102+
<div class="ph3 ph5-ns pt4">
103+
<div class='dn dn-l flex-m mb3'>
104+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20"></iframe>
95105

96-
<a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 dim link dib mb2 br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
97-
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
106+
<a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 dim link inline-flex items-center br2 ph2 lh-solid" style="background-color: #55acee;">
107+
<svg class="geomicon mr1 v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="12" height="12" fill="#fff">
98108
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
99109
</svg>
100110
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
101111
</a>
102112
</div>
103-
<div class="pb3 pb4-ns pt4 pt5-ns mt4 black-70 fl-l w-50-l">
104-
<h1 class="f4 fw6 f1-ns lh-title measure mt0">
113+
<section class='mw9 pv4-l center flex flex-wrap items-center-ns'>
114+
<div class="black-70 w-100 w-50-l">
115+
<h1 class="f4 fw6 f1-ns lh-title measure mt0 mb2">
105116
Built for designing.
106117
</h1>
107-
<p class="f5 f4-ns fw4 b measure dib-m lh-copy">
118+
<p class="f5 f4-ns measure dib-m lh-copy mt0">
108119
Create fast loading, highly readable, and
109120
100% responsive interfaces with as little css as possible.
110121
</p>
@@ -115,28 +126,48 @@ <h1 class="f4 fw6 f1-ns lh-title measure mt0">
115126
can quickly start to build out interfaces while writing little to no css.
116127
</p>
117128
</div>
118-
<div class="fl-l w-50-l tl tc-ns pt3 pt4-m pt6-l">
129+
<div class="w-100 w-50-l tl">
130+
<h4 class="tl">Downloads</h4>
131+
<p class="mt0 mb1 black-60 monospace f6">Css</p>
132+
<a
133+
class="f6 fw6 dib ba mb3 b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline"
134+
href="https://raw.githubusercontent.com/tachyons-css/tachyons/master/css/tachyons.min.css">
135+
<span class='dib pr2'>Minified</span> <code class="f7 fw4 di">v4.12.0</code>
136+
</a>
119137
<a
120-
class="f6 f5-ns fw6 dib ba b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline"
138+
class="f6 fw6 dib ba mb3 b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline"
121139
href="https://raw.githubusercontent.com/tachyons-css/tachyons/master/css/tachyons.min.css">
122-
Download <code class="f6 fw4 di">v4.12.0</code>
140+
<span class='dib pr2'>Build</span> <code class="f7 fw4 di">v4.12.0</code>
141+
</a>
142+
<br />
143+
<p class="mt0 mb1 black-60 monospace f6">Css in Js</p>
144+
<a
145+
class="f6 fw6 dib ba b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline"
146+
href="https://github.com/tachyons-css/tachyons-styled-react/archive/master.zip">
147+
<span class='dib pr2'>Styled System</span> <code class="f7 fw4 di">v0.2.0</code>
148+
</a>
149+
<a
150+
class="f6 fw6 dib ba b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline"
151+
href="https://github.com/tachyons-css/tachyons-theme-ui/archive/master.zip">
152+
<span class='dib pr2'>Theme UI</span> <code class="f7 fw4 di">v0.1.0</code>
123153
</a>
124154
</div>
125-
</div>
155+
</section>
126156
</div>
127157
</article>
128-
<article class="bt b--black-10 bg-washed-blue black-70 ph3 ph5-ns pv4 pv5-ns" id="getting-started">
158+
<article class=" bg-black white ph3 ph5-ns pv4 pv5-ns" id="getting-started">
129159
<div class="mw9 center">
130160
<h1 class="mt0 f5 f3-ns">Getting Started</h1>
131161
<p class="f5 measure lh-copy">
132162
Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
133163
</p>
134-
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">&lt;link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/&gt;</code></pre>
164+
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-white-20 washed-green" style="font-size: 14px;">&lt;link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/&gt;</code></pre>
135165
<p class="mt4"><b>or</b> install via npm</p>
136-
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">npm install tachyons@4.12.0</code></pre>
166+
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-white-20 washed-green" style="font-size: 14px;">npm install tachyons@4.12.0</code></pre>
137167
<p class="mt4"><b>or</b> grab all the source files and build+develop locally</p>
138-
<pre class="pre" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">git clone git@github.com:tachyons-css/tachyons.git
168+
<pre class="pre" style="overflow: auto"><code class="code f6 dib pa2 bg-white-20 washed-green" style="font-size: 14px;">git clone git@github.com:tachyons-css/tachyons.git
139169
cd tachyons
170+
rm -rf .git &amp;&amp; git init
140171
npm install &amp;&amp; npm start
141172
</code></pre>
142173
<h3 class="f5 f3-ns mt4 fw6">Prototyping template</h3>
@@ -177,6 +208,35 @@ <h3 class="f5 f3-ns mt0">Start a New Project</h3>
177208
</section>
178209
</div>
179210
</article>
211+
212+
<article class=" bg-white black ph3 ph5-ns pv4 pv5-ns">
213+
<div class="mw9 center flex flex-wrap flex-nowrap-l">
214+
<div class='w-100 w-50-l'>
215+
<h1 class="mt0 f5 f3-ns">Customizing</h1>
216+
<p class="f5 measure lh-copy">
217+
Tachyons has several methods and workflows for customization:
218+
<br />
219+
<br />
220+
<a href='https://github.com/tachyons-css/generator'>We offer an API </a>you can post a config to get a custom css build with generated documentation.
221+
<br />
222+
<br />
223+
224+
If you prefer Css Variables check out
225+
<a href='https://github.com/tachyons-css/tachyons-custom'>
226+
Tachyons-custom.
227+
</a>
228+
<br />
229+
<br />
230+
Both <a href='https://github.com/tachyons-css/tachyons-theme-ui'>Theme-ui</a> and <a href='https://github.com/tachyons-css/tachyons-styled-react'>Styled-system implementations are easy to customize in theme.js</a>
231+
232+
We've built a GUI for generating and customizing Tachyons builds over at <a href='https://components.ai/tachyons-theme'>Components AI</a> that will output css-in-js and css variable configs you can copy paste into your projects.
233+
</p>
234+
</div>
235+
<div class='w-100 w-50-l'>
236+
<img class='db w-100' src="https://github.com/mrmrs/photos/blob/gh-pages/tachyons/tachyons-theme.jpg?raw=true" />
237+
</div>
238+
</div>
239+
</article>
180240
<div class="tl bt b--black-10 pa3 pa5-ns bg-lightest-blue navy" id="principles">
181241
<div class="mw9 center">
182242
<h1 class="f5 ttu tracked fw6">Principles</h1>

‎src/templates/header.html

+16-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
<header class="w-100 pa3 ph5-ns bg-white">
2-
<div class="db dt-ns mw9 center w-100">
3-
<div class="db dtc-ns v-mid tl w-50">
4-
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70" title="Home">
2+
<div class="flex flex-wrap flex-nowrap-ns items-center mw9 center w-100">
3+
<div class="flex items-center w-100 w-50-ns mb2 mb0-ns">
4+
<a href="/" class="nowrap dib f5 f4-ns fw6 mt0 mb1 link black-90" title="Home">
55
Tachyons
66
<div class="dib">
7-
<small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.12.0</small>
7+
<small class="nowrap f7 mt2 mt3-ns pr2 black-70">v4.12.0</small>
88
</div>
99
</a>
10+
11+
<div class='ml-auto dn inline-flex-l' style='height:20px'>
12+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="24px"></iframe>
13+
</div>
14+
15+
<a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter nowrap bg-white-50 dim link flex-nowrap dn inline-flex-l items-center br2 ph2 pv1 lh-solid" style="background-color: #55acee;">
16+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="12" height="12" fill="#fff">
17+
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
18+
</svg>
19+
<span class="white fw6" style="font-size: 12px;">Tweet</span>
20+
</a>
1021
</div>
11-
<nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
22+
<nav class="flex w-100 w-50-ns justify-start justify-end-ns">
1223
<a title="Documentation" href="/docs/"
1324
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
1425
Docs

0 commit comments

Comments
 (0)