Skip to content

Commit 3969243

Browse files
author
mrmrs
committed
Update homepage notes
1 parent befd819 commit 3969243

File tree

2 files changed

+56
-58
lines changed

2 files changed

+56
-58
lines changed

‎index.html

+28-29
Original file line numberDiff line numberDiff line change
@@ -152,54 +152,53 @@ <h3 class="mtn f5 f3-ns mt0">Start a New Project</h3>
152152
<h1 class="f5 ttu tracked fw6">Principles</h1>
153153
<section class="lh-copy">
154154
<div class="cf">
155-
<article class="fl pv2 w-100 w-50-l pr3-l">
156-
<h2 class="f4 f1-l fw6 mb0">Responsive</h2>
157-
<p class="f5 f4-ns measure lh-copy mt0">
155+
<article class="fl pv2 w-100 w-third-l pr4-l">
156+
<h2 class="f5 f4-ns fw6 mb0">Responsive</h2>
157+
<p class="f6 f5-ns measure lh-copy mt0">
158158
Everything should be 100% responsive. Your website should work regardless of a users
159159
device or screensize.
160160
</p>
161161
</article>
162-
<article class="pv2 fl w-100 w-50-l pl3-l">
163-
<h2 class="f4 f1-l fw6 mb0">Readable</h2>
164-
<p class="f5 f4-ns measure lh-copy mt0">
162+
<article class="pv2 fl w-100 w-third-l ph3-l">
163+
<h2 class="f5 f4-ns fw6 mb0">Readable</h2>
164+
<p class="f6 f5-ns measure lh-copy mt0">
165165
No matter the lighting, or the device, font-sizes should be
166166
large enough and contrast should be high enough for your
167167
users to easily read your content.
168168
</p>
169169
</article>
170-
</div>
171-
<div class="cf">
172-
<article class="pv2 fl w-100 w-50-l pr3-l">
173-
<h2 class="f4 f1-l fw6 mb0">
170+
<article class="pv2 fl w-100 w-third-l pl4-l">
171+
<h2 class="f5 f4-ns fw6 mb0">
174172
Modular
175173
</h2>
176-
<p class="f5 f4-ns measure lh-copy mt0">
177-
Tachyons isn't a monolithic framework. It's a collection of small modules
174+
<p class="f6 f5-ns measure lh-copy mt0">
175+
Tachyons isn't just a monolithic framework. It's a collection of small modules
178176
that can be mixed and matched or used independently. Use what you need. Leave the rest.
179177
</p>
180178
</article>
181-
<article class="pv2 fl w-100 w-50-l pl3-l">
182-
<h2 class="f4 f1-l fw6 mb0">Performant</h2>
183-
<p class="f5 f4-ns measure lh-copy mt0">
179+
</div>
180+
<div class="cf w-100">
181+
<article class="pv2 fl w-100 w-third-l pl0 pr4-l">
182+
<h2 class="f5 f4-ns fw6 mb0">Accessible</h2>
183+
<p class="f6 f5-ns measure lh-copy mt0">
184+
Accessibility is important to us. Throughout both the css
185+
and the documentation we provide numerous tools and methods for making it
186+
easier to maximize the accessibility of your site.
187+
</p>
188+
</article>
189+
<article class="pv2 fl w-100 w-third-l ph3-l">
190+
<h2 class="f5 f4-ns fw6 mb0">Performant</h2>
191+
<p class="f6 f5-ns measure lh-copy mt0">
184192
Code should be optimized for performance.
185193
</p>
186194
</article>
187-
</div>
188-
<div class="cf">
189-
<article class="pv2 fl w-100 w-50-l pr3-l">
190-
<h2 class="f4 f1-l fw6 mb0">
195+
<article class="pv2 fl w-100 w-third-l pl4-l">
196+
<h2 class="f5 f4-ns fw6 mb0">
191197
Reusable
192198
</h2>
193-
<p class="f5 f4-ns measure lh-copy mt0">
194-
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
195-
</p>
196-
</article>
197-
<article class="pv2 fl w-100 w-50-l pl0 pl3-l">
198-
<h2 class="f4 f1-l fw6 mb0">Documented</h2>
199-
<p class="f5 f4-ns measure lh-copy mt0">
200-
Documenting your design system is the easiest way to creating a shared understanding with teammates. We
201-
aim to create a comprehensive set of docs that make it easy for both beginners
202-
&amp; experts to harness the power of Tachyons.
199+
<p class="f6 f5-ns measure lh-copy mt0">
200+
Clear documentation helps create a shared understanding of design patterns amongst your team.
201+
This helps promote reuse and reduces the amount of redundancy in a codebase.
203202
</p>
204203
</article>
205204
</div>

‎src/templates/index.html

+28-29
Original file line numberDiff line numberDiff line change
@@ -109,54 +109,53 @@ <h3 class="mtn f5 f3-ns mt0">Start a New Project</h3>
109109
<h1 class="f5 ttu tracked fw6">Principles</h1>
110110
<section class="lh-copy">
111111
<div class="cf">
112-
<article class="fl pv2 w-100 w-50-l pr3-l">
113-
<h2 class="f4 f1-l fw6 mb0">Responsive</h2>
114-
<p class="f5 f4-ns measure lh-copy mt0">
112+
<article class="fl pv2 w-100 w-third-l pr4-l">
113+
<h2 class="f5 f4-ns fw6 mb0">Responsive</h2>
114+
<p class="f6 f5-ns measure lh-copy mt0">
115115
Everything should be 100% responsive. Your website should work regardless of a users
116116
device or screensize.
117117
</p>
118118
</article>
119-
<article class="pv2 fl w-100 w-50-l pl3-l">
120-
<h2 class="f4 f1-l fw6 mb0">Readable</h2>
121-
<p class="f5 f4-ns measure lh-copy mt0">
119+
<article class="pv2 fl w-100 w-third-l ph3-l">
120+
<h2 class="f5 f4-ns fw6 mb0">Readable</h2>
121+
<p class="f6 f5-ns measure lh-copy mt0">
122122
No matter the lighting, or the device, font-sizes should be
123123
large enough and contrast should be high enough for your
124124
users to easily read your content.
125125
</p>
126126
</article>
127-
</div>
128-
<div class="cf">
129-
<article class="pv2 fl w-100 w-50-l pr3-l">
130-
<h2 class="f4 f1-l fw6 mb0">
127+
<article class="pv2 fl w-100 w-third-l pl4-l">
128+
<h2 class="f5 f4-ns fw6 mb0">
131129
Modular
132130
</h2>
133-
<p class="f5 f4-ns measure lh-copy mt0">
134-
Tachyons isn't a monolithic framework. It's a collection of small modules
131+
<p class="f6 f5-ns measure lh-copy mt0">
132+
Tachyons isn't just a monolithic framework. It's a collection of small modules
135133
that can be mixed and matched or used independently. Use what you need. Leave the rest.
136134
</p>
137135
</article>
138-
<article class="pv2 fl w-100 w-50-l pl3-l">
139-
<h2 class="f4 f1-l fw6 mb0">Performant</h2>
140-
<p class="f5 f4-ns measure lh-copy mt0">
136+
</div>
137+
<div class="cf w-100">
138+
<article class="pv2 fl w-100 w-third-l pl0 pr4-l">
139+
<h2 class="f5 f4-ns fw6 mb0">Accessible</h2>
140+
<p class="f6 f5-ns measure lh-copy mt0">
141+
Accessibility is important to us. Throughout both the css
142+
and the documentation we provide numerous tools and methods for making it
143+
easier to maximize the accessibility of your site.
144+
</p>
145+
</article>
146+
<article class="pv2 fl w-100 w-third-l ph3-l">
147+
<h2 class="f5 f4-ns fw6 mb0">Performant</h2>
148+
<p class="f6 f5-ns measure lh-copy mt0">
141149
Code should be optimized for performance.
142150
</p>
143151
</article>
144-
</div>
145-
<div class="cf">
146-
<article class="pv2 fl w-100 w-50-l pr3-l">
147-
<h2 class="f4 f1-l fw6 mb0">
152+
<article class="pv2 fl w-100 w-third-l pl4-l">
153+
<h2 class="f5 f4-ns fw6 mb0">
148154
Reusable
149155
</h2>
150-
<p class="f5 f4-ns measure lh-copy mt0">
151-
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
152-
</p>
153-
</article>
154-
<article class="pv2 fl w-100 w-50-l pl0 pl3-l">
155-
<h2 class="f4 f1-l fw6 mb0">Documented</h2>
156-
<p class="f5 f4-ns measure lh-copy mt0">
157-
Documenting your design system is the easiest way to creating a shared understanding with teammates. We
158-
aim to create a comprehensive set of docs that make it easy for both beginners
159-
&amp; experts to harness the power of Tachyons.
156+
<p class="f6 f5-ns measure lh-copy mt0">
157+
Clear documentation helps create a shared understanding of design patterns amongst your team.
158+
This helps promote reuse and reduces the amount of redundancy in a codebase.
160159
</p>
161160
</article>
162161
</div>

0 commit comments

Comments
 (0)