Skip to content

Commit 7fc0fe8

Browse files
author
mrmrs
committed
Update home page with deep linking
1 parent 75dc2c4 commit 7fc0fe8

File tree

2 files changed

+54
-10
lines changed

2 files changed

+54
-10
lines changed

‎index.html‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,29 @@
5050
</nav>
5151
</header>
5252

53-
<main class="w-100">
53+
<main class="w-100 bt b--black-10">
54+
<header class="w-100 dt pa3 ph5-ns bg-white">
55+
<a title="Getting Started" href="#getting-started"
56+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
57+
Getting Started
58+
</a>
59+
<a title="Principles" href="#principles"
60+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
61+
Principles
62+
</a>
63+
<a title="Features" href="#features"
64+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
65+
Features
66+
</a>
67+
<a title="Features" href="#testimonials"
68+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
69+
Testimonials
70+
</a>
71+
<a title="Modules List" href="#modules"
72+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
73+
Modules
74+
</a>
75+
</header>
5476
<section class="bt b--black-10 bg-black-0125 w-100 pv5 pv6-ns">
5577
<article class="ph3 ph5-ns">
5678
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
@@ -69,7 +91,7 @@ <h1 class="f4 f3-ns lh-title measure">
6991
can quickly start to build out interfaces while writing little to no css.
7092
</p>
7193
</div>
72-
<article class="ph3 ph5-ns mb4 mb5-ns">
94+
<article class="ph3 ph5-ns mb4 mb5-ns" id="getting-started">
7395
<h1>Getting Started</h1>
7496
<p class="measure lh-copy">
7597
Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
@@ -83,7 +105,7 @@ <h1>Getting Started</h1>
83105
npm install &amp;&amp; npm build
84106
</code></pre>
85107
</article>
86-
<div class="ph3 ph5-ns tl tl-ns bt b--light-gray pv3 pv5-ns">
108+
<div class="ph3 ph5-ns tl tl-ns bt b--light-gray pv3 pv5-ns" id="principles">
87109
<h1>Principles</h1>
88110
<section class="list pln lh-copy mt0">
89111
<div class="cf">
@@ -141,7 +163,7 @@ <h2 class="f4 f3-ns fw6 mb0">Easy</h2>
141163
</article>
142164
</div>
143165
</section>
144-
<section class="cf">
166+
<section class="cf" id="features">
145167
<h1 class="fl w-100 mt5">Features</h1>
146168
<div class="cf">
147169
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">

‎src/templates/index.html‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,29 @@
99
</head>
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
12-
<main class="w-100">
12+
<main class="w-100 bt b--black-10">
13+
<header class="w-100 dt pa3 ph5-ns bg-white">
14+
<a title="Getting Started" href="#getting-started"
15+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
16+
Getting Started
17+
</a>
18+
<a title="Principles" href="#principles"
19+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
20+
Principles
21+
</a>
22+
<a title="Features" href="#features"
23+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
24+
Features
25+
</a>
26+
<a title="Features" href="#testimonials"
27+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
28+
Testimonials
29+
</a>
30+
<a title="Modules List" href="#modules"
31+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
32+
Modules
33+
</a>
34+
</header>
1335
<section class="bt b--black-10 bg-black-0125 w-100 pv5 pv6-ns">
1436
<article class="ph3 ph5-ns">
1537
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
@@ -28,7 +50,7 @@ <h1 class="f4 f3-ns lh-title measure">
2850
can quickly start to build out interfaces while writing little to no css.
2951
</p>
3052
</div>
31-
<article class="ph3 ph5-ns mb4 mb5-ns">
53+
<article class="ph3 ph5-ns mb4 mb5-ns" id="getting-started">
3254
<h1>Getting Started</h1>
3355
<p class="measure lh-copy">
3456
Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
@@ -42,7 +64,7 @@ <h1>Getting Started</h1>
4264
npm install &amp;&amp; npm build
4365
</code></pre>
4466
</article>
45-
<div class="ph3 ph5-ns tl tl-ns bt b--light-gray pv3 pv5-ns">
67+
<div class="ph3 ph5-ns tl tl-ns bt b--light-gray pv3 pv5-ns" id="principles">
4668
<h1>Principles</h1>
4769
<section class="list pln lh-copy mt0">
4870
<div class="cf">
@@ -100,7 +122,7 @@ <h2 class="f4 f3-ns fw6 mb0">Easy</h2>
100122
</article>
101123
</div>
102124
</section>
103-
<section class="cf">
125+
<section class="cf" id="features">
104126
<h1 class="fl w-100 mt5">Features</h1>
105127
<div class="cf">
106128
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
@@ -309,10 +331,10 @@ <h1>Testimonials</h1>
309331
</div>
310332
</div>
311333
</section>
312-
<section class="ph3 ph5-ns bg-white cf pv5 pv6-ns" id="npm">
334+
<section class="ph3 ph5-ns bg-white cf pv5 pv6-ns" id="modules">
313335
<div class="fl w-100">
314336
<div class="">
315-
<h1><a href="#npm" class="link near-black">NPM</a></h1>
337+
<h1><a href="#npm" class="link near-black">Module List</a></h1>
316338
<p class="f5 f3-ns lh-copy mt0 mb4 measure">
317339
The main tachyons repo is a collection of encapsulated css modules available on npm and github.
318340
You can grab the entire toolkit, or a few selected modules.

0 commit comments

Comments
 (0)