Skip to content
This repository was archived by the owner on Oct 1, 2019. It is now read-only.

Commit a41bfd2

Browse files
alicebartlettalicebartlett
committed
Update to new tech-docs
1 parent a344283 commit a41bfd2

File tree

7 files changed

+87
-129
lines changed

7 files changed

+87
-129
lines changed

Diff for: ‎_includes/footer.html

-5
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,3 @@
66
<p>The Origami team uses <a href="https://www.browserstack.com/">BrowserStack</a> to test user interface components in most commonly used browsers.</p>
77
<p>&copy; THE FINANCIAL TIMES LTD {{ site.time | date:'%Y' }}. FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
88
</footer>
9-
10-
<div class="shipit">
11-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100px" height="50px" viewBox="0 0 100.0 100.0" xml:space="preserve" title="Created by Marco Galtarossa"><path d="M50.891,71.361c-7.989,0.001-15.978-0.048-23.966,0.046c-1.451,0.017-2.299-0.441-3.18-1.524 c-7.041-8.658-14.15-17.261-21.206-25.907c-0.284-0.348-0.467-1.034-0.316-1.409c0.15-0.371,0.761-0.727,1.207-0.781 c8.421-1.02,16.847-1.995,25.272-2.976c4.179-0.487,8.361-0.951,12.536-1.473c0.429-0.054,0.951-0.337,1.204-0.68 c1.744-2.366,3.433-4.771,5.128-7.173c0.855-1.211,1.741-1.188,2.541,0.068c1.526,2.393,3.043,4.793,4.626,7.148 c0.252,0.374,0.805,0.712,1.253,0.763c4.679,0.534,9.365,1.004,14.049,1.497c6.609,0.695,13.218,1.395,19.827,2.093 c2.225,0.235,4.455,0.439,6.672,0.737c0.455,0.061,1.076,0.387,1.233,0.756c0.159,0.375-0.018,1.059-0.291,1.427 c-6.595,8.877-13.216,17.735-19.868,26.569c-0.314,0.417-0.96,0.825-1.454,0.828c-7.587,0.037-15.174,0.006-22.761-0.009 C52.562,71.358,51.726,71.36,50.891,71.361z M94.116,44.375C79.561,47.992,65.26,51.546,50.67,55.172 c8.536,4.688,16.777,9.214,25.078,13.772C81.853,60.778,87.906,52.682,94.116,44.375z M26.16,68.886 c6.913-4.544,13.76-9.046,20.814-13.683c-13.681-3.592-27.127-7.121-40.861-10.727C12.917,52.762,19.523,60.805,26.16,68.886z M28.901,68.811c14.618,0,28.975,0,43.471,0c-0.212-0.167-0.282-0.24-0.367-0.287c-7.549-4.149-15.095-8.303-22.663-12.417 c-0.308-0.167-0.909-0.1-1.222,0.098c-2.399,1.518-4.762,3.094-7.134,4.654C37.026,63.463,33.068,66.069,28.901,68.811z M55.502,39.892c0.232,0.445,0.355,0.709,0.502,0.959c1.809,3.08,3.643,6.145,5.418,9.245c0.37,0.646,0.725,0.766,1.429,0.589 c8.995-2.258,17.998-4.484,26.998-6.72c0.258-0.064,0.508-0.16,0.761-0.241c-0.012-0.047-0.024-0.095-0.035-0.142 C78.94,42.358,67.307,41.134,55.502,39.892z M8.794,43.596c0.393,0.165,0.56,0.26,0.741,0.307c8.289,2.174,16.581,4.336,24.864,6.53 c0.57,0.151,0.758-0.082,1.008-0.487c1.766-2.87,3.551-5.728,5.329-8.592c0.294-0.473,0.579-0.951,0.957-1.573 C30.68,41.058,19.856,42.314,8.794,43.596z M47.935,33.522c-0.112-0.046-0.224-0.093-0.336-0.139 c-3.713,5.816-7.426,11.632-11.214,17.563c3.949,1.035,7.716,2.022,11.549,3.026C47.935,47.103,47.935,40.313,47.935,33.522z M49.716,33.301c-0.083,0.039-0.166,0.079-0.249,0.118c0,6.821,0,13.643,0,20.579c3.665-0.913,7.289-1.816,11.052-2.753 C56.851,45.154,53.283,39.227,49.716,33.301z"/></svg>
12-
“Ship it”
13-
</div>

Diff for: ‎_includes/head.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@
1717
document.documentElement.className = document.documentElement.className.replace(/\bcore\b/g, 'enhanced');
1818
}
1919
</script>
20-
<link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-techdocs@^7.0.0,o-grid@^4.0.0,o-buttons@^5.0.0,o-labels@^3.0.0" />
20+
<link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-techdocs@^7.0.0,o-grid@^4.0.0,o-buttons@^5.0.0,o-labels@^3.0.0,o-fonts@^3.0.0" />
2121
<link href="{{ site.baseurl }}/main.css" rel="stylesheet" />
2222
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
2323

2424
<script src="https://polyfill.io/v2/polyfill.min.js"></script>
25+
<script src="{{ site.baseurl }}/js/search.js"></script>
2526

2627
<script>
2728
(function(src) {

Diff for: ‎_includes/header.html

+36-31
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,37 @@
1-
<header data-o-component="o-techdocs-header" class="o-techdocs-header {% if page.title == 'Home' %}o-techdocs-header--pull-up o-techdocs-header--transparent{% endif %}">
2-
<div class="o-techdocs-header__container">
3-
<div class="o-techdocs-header__inner">
4-
<div class="o-techdocs-header__primary">
5-
<a class="o-techdocs-header__primary__left" href="/">
6-
<span class="origami-logo"></span>
7-
<h1 class="o-techdocs-header__title">{{site.name}}</h1>
8-
</a>
9-
<div class="o-techdocs-header__primary__center c-search">
10-
<script>
11-
(function() {
12-
var cx = '013700166063307641389:hr156qdcx6w';
13-
var gcse = document.createElement('script');
14-
gcse.async = true;
15-
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
16-
var s = document.getElementsByTagName('script')[0];
17-
s.parentNode.insertBefore(gcse, s);
18-
})();
19-
</script>
20-
<gcse:search></gcse:search>
21-
</div>
22-
<nav class="o-techdocs-header__primary__right o-hierarchical-nav o-techdocs-header__nav--primary-theme" data-o-component="o-hierarchical-nav">
23-
<ul data-o-hierarchical-nav-level="1"><!--
24-
--><li data-priority="1" {% if page.site_section == 'developer-guide' %}aria-selected="true"{% endif %}><a href="http://origami.ft.com/docs/developer-guide/">Docs</a></li><!--
25-
--><li data-priority="1" {% if page.site_section == 'about-origami' %}aria-selected="true"{% endif %}><a href="http://origami.ft.com/docs/component-spec/">Spec</a></li><!--
26-
--><li data-priority="1"><a href="http://registry.origami.ft.com">Components</a></li><!--
27-
--></ul>
28-
</nav>
29-
</div>
30-
</div>
31-
</div>
1+
<header class="o-header-services {% if page.title == 'Home' %}homepage-header{% endif %}" data-o-component="o-header">
2+
<div class="o-header-services__top o-header-services__container">
3+
<div class="o-header-services__ftlogo"></div>
4+
<div class="o-header-services__title">
5+
<h1 class="o-header-services__product-name"><a href="/">Origami</a></h1><span class="o-header-subrand__product-tagline">Documentation site</span>
6+
</div>
7+
<div class="o-header-services__related-content">
8+
<a class="o-header-services__related-content-link" href="http://registry.origami.ft.com">Components</a>
9+
</div>
10+
</div>
11+
<div class="o-header-services__primary-nav">
12+
<div class="o-header-services__container">
13+
<ul class="o-header-services__nav-list">
14+
<li class="o-header-services__nav-item {% if page.site_section == 'developer-guide' %}o-header-services__nav-link--selected{% endif %}">
15+
<a class="o-header-services__nav-link" href="http://origami.ft.com/docs/developer-guide/">Docs</a></li>
16+
</li>
17+
<li class="o-header-services__nav-item {% if page.site_section == 'about-origami' %}o-header-services__nav-link--selected{% endif %}">
18+
<a class="o-header-services__nav-link" href="http://origami.ft.com/docs/component-spec/">Spec</a></li>
19+
</li>
20+
</ul>
21+
<i class="search-icon searchbutton"></i>
22+
<div class="o-techdocs-header__primary__center c-search searchbox">
23+
<script>
24+
(function() {
25+
var cx = '013700166063307641389:hr156qdcx6w';
26+
var gcse = document.createElement('script');
27+
gcse.async = true;
28+
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
29+
var s = document.getElementsByTagName('script')[0];
30+
s.parentNode.insertBefore(gcse, s);
31+
})();
32+
</script>
33+
<gcse:search></gcse:search>
34+
</div>
35+
</div>
36+
</div>
3237
</header>

Diff for: ‎docs/developer-guide/choosing-your-build-method.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,4 @@ Origami modules are written as Sass and JavaScript and need 'building' before th
4747
Once you've decided how to build Origami's modules, we have a tutorial for each method.
4848

4949

50-
<a href="{{site.baseurl}}/docs/developer-guide/modules/build-service" class="o-buttons o-buttons--standout">Build service tutorial</a> <a href="{{site.baseurl}}/docs/developer-guide/modules/building-modules" class="o-buttons o-buttons--standout">Manual build tutorial</a>
50+
<a href="{{site.baseurl}}/docs/developer-guide/modules/build-service" class="o-buttons o-buttons--secondary o-buttons--big">Build service tutorial</a> <a href="{{site.baseurl}}/docs/developer-guide/modules/building-modules" class="o-buttons o-buttons--secondary o-buttons--big">Manual build tutorial</a>

Diff for: ‎docs/developer-guide/quick-start-guide.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ For this tutorial though, you need to add the class `o-buttons` to the `<button>
6767
o-buttons has some design variations. Let's apply the `standout` variation by the adding `o-buttons--standout` class.
6868

6969
```
70-
<button class="o-buttons o-buttons--standout">Here's a button</button>
70+
<button class="o-buttons o-buttons--secondary">Here's a button</button>
7171
```
7272

7373
## 4. Include the JavaScript
@@ -95,7 +95,7 @@ Instead of using a `<link ...>` tag, use a `<script ...>` tag.
9595
</head>
9696
<body>
9797
Hello!
98-
<button class="o-buttons o-buttons--standout">Here's a button</button>
98+
<button class="o-buttons o-buttons--secondary">Here's a button</button>
9999
</body>
100100
</html>
101101
~~~
@@ -113,4 +113,4 @@ Some components, like `o-header` have much more complicated HTML than `o-buttons
113113

114114
This tutorial is a very quick guide to Origami. It skipped over a few important concepts that you'll need to know for using Origami modules in a live service. The next tutorial will take you through using Origami in more detail.
115115

116-
<a href="/docs/developer-guide/modules/choosing-your-build-method/" class="o-buttons o-buttons--standout">Let's do this the proper way</a>
116+
<a href="/docs/developer-guide/modules/choosing-your-build-method/" class="o-buttons o-buttons--secondary">Let's do this the proper way</a>

Diff for: ‎docs/developer-guide/using-modules.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Origami's front end modules contain Sass, JavaScript and markup templates to cre
1515
## The quick way
1616
If you just want to experiment with Origami modules, we have a 5 minute tutorial especially for you
1717

18-
<a href="/docs/developer-guide/modules/very-quick-origami/" class="o-buttons o-buttons--standout">Take me to the 5 minute tutorial</a>
18+
<a href="/docs/developer-guide/modules/very-quick-origami/" class="o-buttons o-buttons--secondary">Take me to the 5 minute tutorial</a>
1919

2020
## The proper way
2121

@@ -27,4 +27,4 @@ There are three steps to getting an Origami module working on your page properly
2727

2828
If you want to work through these steps, the jumping off point is this guide:
2929

30-
<a href="/docs/developer-guide/modules/choosing-your-build-method/" class="o-buttons o-buttons--standout">Let's do this the proper way</a>
30+
<a href="/docs/developer-guide/modules/choosing-your-build-method/" class="o-buttons o-buttons--secondary">Let's do this the proper way</a>

Diff for: ‎main.scss

+43-86
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,37 @@ body {
66
font-family: Helvetica, Arial, sans-serif;
77
}
88

9-
.o-techdocs-header {
10-
-webkit-font-smoothing: antialiased;
11-
-moz-osx-font-smoothing: grayscale;
12-
}
13-
.o-techdocs-header__primary__left {
14-
width: 180px;
15-
}
9+
.search-icon {
10+
// Older browsers: PNG fallback (resized to 40px wide)
11+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon:search?width=40&format=png&source=o-icons');
12+
// Modern browsers: SVG covering the whole size of the element
13+
// we declare multiple backgrounds so that only modern browsers read this property
14+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:search?format=svg&source=o-icons'), none;
1615

17-
.o-techdocs-container {
18-
padding-bottom: 50px;
19-
margin-top: 3em;
20-
}
16+
display: inline-block;
17+
width: 40px;
18+
height: 40px;
19+
background-repeat: no-repeat;
20+
background-size: contain;
21+
background-position: 50%;
22+
background-color: transparent;
23+
vertical-align: middle;
24+
float: right;
25+
cursor: pointer;
2126

22-
@media (min-width: 46.25em) {
23-
.o-techdocs-header__primary__left {
24-
min-width: 303px;
25-
width: 33%;
27+
&:hover {
28+
background-color: #f2e5da;
2629
}
2730
}
2831

32+
.o-header-services__nav-list {
33+
display: inline-block;
34+
@media (max-width: 46.24em) {
35+
.o-header-services__nav-item {
36+
display: inline-block;
37+
}
38+
}
39+
}
2940
/* Google custom search overrides */
3041
.gsc-control-cse {
3142
background-color: transparent !important;
@@ -35,16 +46,25 @@ body {
3546
.gsc-input {
3647
padding-right: 0 !important;
3748
}
38-
.gsc-input-box {
39-
opacity: 0.7;
40-
}
4149
.gsc-input-box-focus {
4250
opacity: 1;
4351
}
4452
.gsc-search-button {
4553
display: none;
4654
}
4755

56+
.c-search {
57+
padding-top: 7px;
58+
display: inline-block;
59+
width: 40%;
60+
float: right;
61+
}
62+
63+
.searchbox.hidden {
64+
display: none;
65+
}
66+
67+
4868
.footer-logo {
4969
float: right;
5070
font-size: 20px;
@@ -63,19 +83,6 @@ body {
6383
margin-right: 10px;
6484
}
6585

66-
.c-search {
67-
padding-top: 4px;
68-
69-
@media (max-width: 46.25em) {
70-
position: absolute;
71-
top: 100%;
72-
width: 100%;
73-
left: 0;
74-
padding: 10px;
75-
box-sizing: border-box;
76-
}
77-
}
78-
7986
.hero {
8087
-webkit-font-smoothing: antialiased;
8188
-moz-osx-font-smoothing: grayscale;
@@ -136,62 +143,12 @@ body {
136143
}
137144
}
138145

139-
.o-techdocs-main--nonav {
140-
margin: auto;
141-
}
142-
143-
a.o-buttons--standout{
144-
color: white;
145-
}
146-
147-
.homepage-content {
148-
h2 {
149-
padding: 1.5em 0 .5em 0;
150-
}
151-
.o-techdocs-content {
152-
font-size:19px;
153-
}
154-
}
155-
156-
.o-techdocs-header--pull-up {
157-
margin-bottom: 0 !important;
158-
}
159-
160-
/** Override o-heirachical nav background colours */
161-
.o-techdocs-header__nav--primary-theme [data-o-hierarchical-nav-level],
162-
.o-techdocs-header__nav--secondary-theme [data-o-hierarchical-nav-level] {
163-
background-color: transparent;
164-
}
165-
166-
167-
.o-techdocs-header--transparent {
168-
[data-o-hierarchical-nav-level] {
146+
.homepage-header {
147+
.o-header-services,
148+
.o-header-services__top {
169149
background: transparent;
170150
}
171-
}
172-
173-
.o-hierarchical-nav__more--all {
174-
[data-o-hierarchical-nav-level] {
175-
right: 10px;
176-
}
177-
}
178-
179-
.o-hierachical-nav__parent--active {
180-
background-color: #275e86;
181-
}
182-
183-
.shipit {
184-
-webkit-font-smoothing: antialiased;
185-
-moz-osx-font-smoothing: grayscale;
186-
margin: 20px 0;
187-
text-align: center;
188-
font-style: italic;
189-
font-weight: 200;
190-
color: #767676;
191-
192-
svg {
193-
fill: #999999;
194-
display: block;
195-
margin: 0 auto;
151+
.o-header-services__primary-nav {
152+
display: none;
196153
}
197154
}

0 commit comments

Comments
 (0)