Skip to content

Commit 44cb5c0

Browse files
author
mrmrs
committed
Redesign titles and spacing for homepage.
1 parent 3b8ee72 commit 44cb5c0

File tree

2 files changed

+74
-61
lines changed

2 files changed

+74
-61
lines changed

‎index.html

+37-30
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ <h1>Getting Started</h1>
6060
npm install &amp;&amp; npm build
6161
</code></pre>
6262
</article>
63-
<div class="ph3 ph5-ns tl tl-ns">
64-
<h1 class="f4 ttu tracked fw4">Principles</h1>
63+
<div class="ph3 ph5-ns tl tl-ns bt b--light-gray pv3 pv5-ns">
64+
<h1>Principles</h1>
6565
<section class="list pln lh-copy mt0">
6666
<div class="cf">
6767
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
@@ -89,23 +89,6 @@ <h2 class="f4 f3-ns fw6 mb0">Performant</h2>
8989
Code should be optimized for performance.
9090
</p>
9191
</article>
92-
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
93-
<h2 class="f4 f3-ns fw6 mb0">Easy</h2>
94-
<p class="f5 measure lh-copy mt0">
95-
Designing in the browser should be easy.
96-
If a computer can do it, you shouldn't have to.
97-
</p>
98-
</article>
99-
</div>
100-
<div class="cf">
101-
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
102-
<h2 class="f4 f3-ns fw6 mb0">
103-
Reusable
104-
</h2>
105-
<p class="f5 measure lh-copy mt0">
106-
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
107-
</p>
108-
</article>
10992
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
11093
<h2 class="f4 f3-ns fw6 mb0">
11194
Modular
@@ -118,11 +101,28 @@ <h2 class="f4 f3-ns fw6 mb0">
118101
</article>
119102
</div>
120103
<div class="cf">
104+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
105+
<h2 class="f4 f3-ns fw6 mb0">
106+
Reusable
107+
</h2>
108+
<p class="f5 measure lh-copy mt0">
109+
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
110+
</p>
111+
</article>
112+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
113+
<h2 class="f4 f3-ns fw6 mb0">Easy</h2>
114+
<p class="f5 measure lh-copy mt0">
115+
Designing in the browser should be easy.
116+
If a computer can do it, you shouldn't have to.
117+
</p>
118+
</article>
119+
</div>
121120
</section>
122-
<h1 class="f4 ttu fw4 mtx tracked">Features</h1>
123-
<section class="list pl0 lh-copy mt0 cf">
121+
<section class="cf">
122+
<h1 class="fl w-100 mt5">Features</h1>
123+
<div class="cf">
124124
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
125-
<h2 class="f4 f3-ns fw6 mb0 mv0">
125+
<h2 class="f4 f3-ns fw6 mb0">
126126
Runs on <a href="https://github.com/postcss/postcss" class="link dim near-black">Postcss</a>
127127
</h2>
128128
<p class="mv0 f5 lh-copy measure">
@@ -132,14 +132,16 @@ <h2 class="f4 f3-ns fw6 mb0 mv0">
132132
</p>
133133
</article>
134134
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
135-
<h2 class="f4 f3-ns fw6 mv0">Mobile-first architecture </h2>
135+
<h2 class="f4 f3-ns fw6 mb0">Mobile-first architecture </h2>
136136
<p class="f5 measure lh-copy mt0">
137137
Base classes are mobile by default. Can be overridden by
138138
namespaced classes targeting larger breakpoints.
139139
</p>
140140
</article>
141+
</div>
142+
<div class="cf">
141143
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
142-
<h2 class="f4 f3-ns fw6 mv0">
144+
<h2 class="f4 f3-ns fw6 mb0">
143145
Layout debugging
144146
</h2>
145147
<p class="f5 measure lh-copy mt0">
@@ -148,28 +150,32 @@ <h2 class="f4 f3-ns fw6 mv0">
148150
</p>
149151
</article>
150152
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
151-
<h2 class="f4 f3-ns fw6 mv0">
153+
<h2 class="f4 f3-ns fw6 mb0">
152154
Composable classes
153155
</h2>
154156
<p class="f5 measure lh-copy mt0">
155157
Construct anything from complex layouts to responsive components with a series of
156158
single purpose classes.
157159
</p>
158160
</article>
161+
</div>
162+
<div class="cf">
159163
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
160-
<h2 class="f4 f3-ns fw6 mv0">Cohesive design system</h2>
164+
<h2 class="f4 f3-ns fw6 mb0">Cohesive design system</h2>
161165
<p class="f5 measure lh-copy mt0">
162166
Scale based on the powers of two. Starting at .25
163167
</p>
164168
</article>
165169
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
166-
<h2 class="f4 f3-ns fw6 mv0">Responsive Grid</h2>
170+
<h2 class="f4 f3-ns fw6 mb0">Responsive Grid</h2>
167171
<p class="f5 measure lh-copy mt0">
168172
Infinitely nestable. Fully fluid. Extremely light-weight.
169173
</p>
170174
</article>
175+
</div>
176+
<div class="cf">
171177
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
172-
<h2 class="f4 f3-ns fw6 mv0">
178+
<h2 class="f4 f3-ns fw6 mb0">
173179
Customize, or extend
174180
</h2>
175181
<p class="f5 measure lh-copy mt0">
@@ -179,13 +185,14 @@ <h2 class="f4 f3-ns fw6 mv0">
179185
breakpoints, or values.
180186
</p>
181187
</article>
188+
</div>
182189
</section>
183190
</div>
184191
</div>
185192
</section>
186193
<section class="bg-white pv5 pv6-ns bb bt b--light-gray" id="testimonials">
187194
<div class="ph3 ph5-ns">
188-
<h1 class="f5 fw6 ttu tracked">Testimonials</h1>
195+
<h1>Testimonials</h1>
189196
<div class="cf w-100">
190197
<blockquote class="fl w-100 w-50-ns mh0 pr0 pr3-ns border-box">
191198
<p class="f6 f5-ns measure lh-copy pr1 pr0-l i">
@@ -292,7 +299,7 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
292299
<section class="ph3 ph5-ns bg-white cf pv5 pv6-ns" id="npm">
293300
<div class="fl w-100">
294301
<div class="">
295-
<h3 class="f5 fw6 ttu tracked"><a href="#npm" class="link mid-gray">Tachyons on NPM</a></h3>
302+
<h1><a href="#npm" class="link near-black">NPM</a></h1>
296303
<p class="f5 f3-ns lh-copy mt0 mb4 measure">
297304
The main tachyons repo is just a group of of encapsulated css modules available on npm and github.
298305
You can grab the entire toolkit, or just a few selected modules.

‎src/templates/index.html

+37-31
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ <h1>Getting Started</h1>
3333
npm install &amp;&amp; npm build
3434
</code></pre>
3535
</article>
36-
<div class="ph3 ph5-ns tl tl-ns">
37-
<h1 class="f4 ttu tracked fw4">Principles</h1>
36+
<div class="ph3 ph5-ns tl tl-ns bt b--light-gray pv3 pv5-ns">
37+
<h1>Principles</h1>
3838
<section class="list pln lh-copy mt0">
3939
<div class="cf">
4040
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
@@ -62,23 +62,6 @@ <h2 class="f4 f3-ns fw6 mb0">Performant</h2>
6262
Code should be optimized for performance.
6363
</p>
6464
</article>
65-
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
66-
<h2 class="f4 f3-ns fw6 mb0">Easy</h2>
67-
<p class="f5 measure lh-copy mt0">
68-
Designing in the browser should be easy.
69-
If a computer can do it, you shouldn't have to.
70-
</p>
71-
</article>
72-
</div>
73-
<div class="cf">
74-
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
75-
<h2 class="f4 f3-ns fw6 mb0">
76-
Reusable
77-
</h2>
78-
<p class="f5 measure lh-copy mt0">
79-
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
80-
</p>
81-
</article>
8265
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
8366
<h2 class="f4 f3-ns fw6 mb0">
8467
Modular
@@ -91,11 +74,28 @@ <h2 class="f4 f3-ns fw6 mb0">
9174
</article>
9275
</div>
9376
<div class="cf">
77+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
78+
<h2 class="f4 f3-ns fw6 mb0">
79+
Reusable
80+
</h2>
81+
<p class="f5 measure lh-copy mt0">
82+
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
83+
</p>
84+
</article>
85+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
86+
<h2 class="f4 f3-ns fw6 mb0">Easy</h2>
87+
<p class="f5 measure lh-copy mt0">
88+
Designing in the browser should be easy.
89+
If a computer can do it, you shouldn't have to.
90+
</p>
91+
</article>
92+
</div>
9493
</section>
95-
<h1 class="f4 ttu fw4 mtx tracked">Features</h1>
96-
<section class="list pl0 lh-copy mt0 cf">
94+
<section class="cf">
95+
<h1 class="fl w-100 mt5">Features</h1>
96+
<div class="cf">
9797
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
98-
<h2 class="f4 f3-ns fw6 mb0 mv0">
98+
<h2 class="f4 f3-ns fw6 mb0">
9999
Runs on <a href="https://github.com/postcss/postcss" class="link dim near-black">Postcss</a>
100100
</h2>
101101
<p class="mv0 f5 lh-copy measure">
@@ -105,14 +105,16 @@ <h2 class="f4 f3-ns fw6 mb0 mv0">
105105
</p>
106106
</article>
107107
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
108-
<h2 class="f4 f3-ns fw6 mv0">Mobile-first architecture </h2>
108+
<h2 class="f4 f3-ns fw6 mb0">Mobile-first architecture </h2>
109109
<p class="f5 measure lh-copy mt0">
110110
Base classes are mobile by default. Can be overridden by
111111
namespaced classes targeting larger breakpoints.
112112
</p>
113113
</article>
114+
</div>
115+
<div class="cf">
114116
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
115-
<h2 class="f4 f3-ns fw6 mv0">
117+
<h2 class="f4 f3-ns fw6 mb0">
116118
Layout debugging
117119
</h2>
118120
<p class="f5 measure lh-copy mt0">
@@ -121,28 +123,32 @@ <h2 class="f4 f3-ns fw6 mv0">
121123
</p>
122124
</article>
123125
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
124-
<h2 class="f4 f3-ns fw6 mv0">
126+
<h2 class="f4 f3-ns fw6 mb0">
125127
Composable classes
126128
</h2>
127129
<p class="f5 measure lh-copy mt0">
128130
Construct anything from complex layouts to responsive components with a series of
129131
single purpose classes.
130132
</p>
131133
</article>
134+
</div>
135+
<div class="cf">
132136
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
133-
<h2 class="f4 f3-ns fw6 mv0">Cohesive design system</h2>
137+
<h2 class="f4 f3-ns fw6 mb0">Cohesive design system</h2>
134138
<p class="f5 measure lh-copy mt0">
135139
Scale based on the powers of two. Starting at .25
136140
</p>
137141
</article>
138142
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
139-
<h2 class="f4 f3-ns fw6 mv0">Responsive Grid</h2>
143+
<h2 class="f4 f3-ns fw6 mb0">Responsive Grid</h2>
140144
<p class="f5 measure lh-copy mt0">
141145
Infinitely nestable. Fully fluid. Extremely light-weight.
142146
</p>
143147
</article>
148+
</div>
149+
<div class="cf">
144150
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
145-
<h2 class="f4 f3-ns fw6 mv0">
151+
<h2 class="f4 f3-ns fw6 mb0">
146152
Customize, or extend
147153
</h2>
148154
<p class="f5 measure lh-copy mt0">
@@ -152,13 +158,14 @@ <h2 class="f4 f3-ns fw6 mv0">
152158
breakpoints, or values.
153159
</p>
154160
</article>
161+
</div>
155162
</section>
156163
</div>
157164
</div>
158165
</section>
159166
<section class="bg-white pv5 pv6-ns bb bt b--light-gray" id="testimonials">
160167
<div class="ph3 ph5-ns">
161-
<h1 class="f5 fw6 ttu tracked">Testimonials</h1>
168+
<h1>Testimonials</h1>
162169
<div class="cf w-100">
163170
<blockquote class="fl w-100 w-50-ns mh0 pr0 pr3-ns border-box">
164171
<p class="f6 f5-ns measure lh-copy pr1 pr0-l i">
@@ -265,9 +272,8 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
265272
<section class="ph3 ph5-ns bg-white cf pv5 pv6-ns" id="npm">
266273
<div class="fl w-100">
267274
<div class="">
268-
<h3 class="f5 fw6 ttu tracked"><a href="#npm" class="link mid-gray">Tachyons on NPM</a></h3>
275+
<h1><a href="#npm" class="link near-black">NPM</a></h1>
269276
<p class="f5 f3-ns lh-copy mt0 mb4 measure">
270-
271277
The main tachyons repo is just a group of of encapsulated css modules available on npm and github.
272278
You can grab the entire toolkit, or just a few selected modules.
273279
Mix and match them to suit your project's specific needs. Since tachyons modules are very focused on doing one thing well,

0 commit comments

Comments
 (0)