Skip to content

Commit 2a14b25

Browse files
leslitagorditaleslitagordita
committed
Theme build
Add featured widget to headers Add pricing submenu split header and footer css tweak text wrapping of menu titles add missing consent black bar styles
1 parent 70a8c21 commit 2a14b25

File tree

6 files changed

+435
-182
lines changed

6 files changed

+435
-182
lines changed

‎themes/docsmith/layouts/partials/footer.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,9 @@ <h4 class="o-menu__heading">Marketplace</h4>
154154
<nav class="o-menu">
155155
<h4 class="o-menu__heading">Pricing</h4>
156156
<ul id="menu-footer-pricing" class="o-menu__list">
157-
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/pricing/"><span class="o-menu__title">Pricing</span></a></li>
158-
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/estimator/"><span class="o-menu__title">Pricing Estimator</span></a></li>
157+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/pricing/"><span class="o-menu__title">Pricing List</span></a></li>
158+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/estimator/"><span class="o-menu__title">Cloud Estimator</span></a></li>
159+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/cloud-pricing-calculator/"><span class="o-menu__title">TCO Calculator</span></a></li>
159160
</ul>
160161
</nav>
161162
</div>
@@ -184,6 +185,7 @@ <h4 class="o-menu__heading">Community</h4>
184185
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/community/"><span class="o-menu__title">Community Overview</span></a></li>
185186
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/community/questions/"><span class="o-menu__title">Q&A</span></a></li>
186187
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/developers/"><span class="o-menu__title">Developer Portal</span></a></li>
188+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/green-light/"><span class="o-menu__title">Beta Program</span></a></li>
187189
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/blog/"><span class="o-menu__title">Blog</span></a></li>
188190
<li class="o-menu__item"><a class="o-menu__link" href="https://linode.com/events/"><span class="o-menu__title">Events</span></a></li>
189191
<li class="o-menu__item"><a class="o-menu__link" href="https://linode.com/resources/"><span class="o-menu__title">Content Resources</span></a></li>

‎themes/docsmith/layouts/partials/header.html

Lines changed: 91 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<div class="o-layout__module c-utility-nav">
1919
<nav class="o-menu o-menu--flex">
2020
<ul id="menu-header-utility" class="o-menu__list">
21+
<li class="o-menu__item o-menu__item--search"><a class="o-menu__link" href="https://www.linode.com/search/"><span class="o-menu__title">Search</span></a></li>
2122
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/partners/"><span class="o-menu__title">Partners</span></a></li>
2223
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/docs/"><span class="o-menu__title">Docs</span></a></li>
2324
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/support/"><span class="o-menu__title">Support</span></a></li>
@@ -59,7 +60,7 @@
5960
<li class="o-menu__item"><a class="o-menu__link" href="#sub-menu--products"><span class="o-menu__title">Products</span></a></li>
6061
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/solutions/"><span class="o-menu__title">Solutions</span></a></li>
6162
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/marketplace/"><span class="o-menu__title">Marketplace</span></a></li>
62-
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/pricing/"><span class="o-menu__title">Pricing</span></a></li>
63+
<li class="o-menu__item"><a class="o-menu__link" href="#sub-menu--pricing"><span class="o-menu__title">Pricing</span></a></li>
6364
<li class="o-menu__item"><a class="o-menu__link" href="#sub-menu--community"><span class="o-menu__title">Community</span></a></li>
6465
<li class="o-menu__item o-menu__item--sign-up"><a class="o-menu__link" href="https://login.linode.com/signup"><span class="o-menu__title">Sign Up</span></a></li>
6566
<li class="o-menu__item o-menu__item--search"><a class="o-menu__link" href="https://www.linode.com/search/"><span class="o-menu__title">Search</span></a></li>
@@ -84,7 +85,7 @@
8485
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/products/"><span class="o-menu__title">Products</span></a></li>
8586
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/solutions/"><span class="o-menu__title">Solutions</span></a></li>
8687
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/marketplace/"><span class="o-menu__title">Marketplace</span></a></li>
87-
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/pricing/"><span class="o-menu__title">Pricing</span></a></li>
88+
<li class="o-menu__item o-menu__item--search"><a class="o-menu__link" href="https://www.linode.com/search/"><span class="o-menu__title">Search</span></a></li>
8889
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/community/"><span class="o-menu__title">Community</span></a></li>
8990
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/company/about/"><span class="o-menu__title">About Us</span></a></li>
9091
</ul>
@@ -122,6 +123,21 @@
122123

123124
<div class="o-layout__row c-sub-menu c-sub-menu--why-linode" id="sub-menu--why-linode">
124125
<div class="o-layout__colset">
126+
<div class="o-layout__col">
127+
128+
<div class="o-layout__module">
129+
<h6>
130+
Featured</h6>
131+
<a id="c-featured--why_linode" class="c-featured" href="https://www.linode.com/spotlight/cloudnet/" style="--c-featured-color:#ffffff;">
132+
<img width="632" height="279" src="https://www.linode.com/wp-content/uploads/2020/08/cloudnet-hero-1-scaled-1-632x279.jpg" class="c-featured__background" alt="" srcset="https://www.linode.com/wp-content/uploads/2020/08/cloudnet-hero-1-scaled-1-632x279.jpg 632w, https://www.linode.com/wp-content/uploads/2020/08/cloudnet-hero-1-scaled-1-1064x470.jpg 1064w, https://www.linode.com/wp-content/uploads/2020/08/cloudnet-hero-1-scaled-1-416x184.jpg 416w, https://www.linode.com/wp-content/uploads/2020/08/cloudnet-hero-1-scaled-1-768x339.jpg 768w, https://www.linode.com/wp-content/uploads/2020/08/cloudnet-hero-1-scaled-1-1536x678.jpg 1536w, https://www.linode.com/wp-content/uploads/2020/08/cloudnet-hero-1-scaled-1-2048x904.jpg 2048w" sizes="(max-width: 632px) 100vw, 632px" /> <div class="c-featured__text">
133+
<div class="c-featured__headline"><b>Craft of Code:</b><br>Cloudnet</div>
134+
<div class="c-featured__excerpt">Reliability Allows Customers (and Cloudnet) To Do What They Love</div>
135+
<span class="c-featured__button" href="https://www.linode.com/spotlight/cloudnet/">Read Cloudnet's Story</span>
136+
</div>
137+
</a>
138+
</div>
139+
140+
</div>
125141
<div class="o-layout__col">
126142

127143
<div class="o-layout__module">
@@ -154,17 +170,40 @@ <h6>Get to Know Us Better</h6>
154170
</nav>
155171
</div>
156172

157-
</div>
158-
<div class="o-layout__col">
159-
160-
161173
</div>
162174
</div>
163175
</div>
164176

165177

166178
<div class="o-layout__row c-sub-menu c-sub-menu--products" id="sub-menu--products">
167179
<div class="o-layout__colset">
180+
<div class="o-layout__col">
181+
182+
<div class="o-layout__module">
183+
<h6>
184+
Featured</h6>
185+
<a id="c-featured--products" class="c-featured" href="https://www.linode.com/products/gpu/" style="--c-featured-border-width:2px;--c-featured-border-color:#ededf4;">
186+
<img width="400" height="339" src="https://www.linode.com/wp-content/uploads/2020/08/mum-fg.png" class="c-featured__image" alt="" /> <div class="c-featured__text">
187+
<div class="c-featured__headline"><b>GPUs have landed in Mumbai!</b></div>
188+
<div class="c-featured__excerpt">On-demand GPUs for machine learning, scientific computing, and video processing.</div>
189+
<span class="c-featured__button" href="https://www.linode.com/products/gpu/">Try Today</span>
190+
</div>
191+
</a>
192+
<style>
193+
#c-featured--products .c-featured__image {
194+
align-self: flex-end;
195+
margin-bottom: -24px;
196+
margin-left: -24px;
197+
margin-right: -24px;
198+
max-width: 50%;
199+
}</style>
200+
</div>
201+
202+
<div class="o-layout__module c-sub-menu__view_all">
203+
<a href="/products/" class="o-link--arrow">View All Products</a>
204+
</div>
205+
206+
</div>
168207
<div class="o-layout__col">
169208

170209
<div class="o-layout__module">
@@ -232,16 +271,39 @@ <h6>Developer Tools</h6>
232271
</div>
233272

234273
</div>
274+
</div>
275+
</div>
276+
277+
278+
<div class="o-layout__row c-sub-menu c-sub-menu--pricing" id="sub-menu--pricing">
279+
<div class="o-layout__colset">
235280
<div class="o-layout__col">
236281

282+
<div class="o-layout__module">
283+
<h6>
284+
Featured</h6>
285+
<a id="c-featured--pricing" class="c-featured" href="https://www.linode.com/lp/tco-calculator/" style="--c-featured-border-width:2px;--c-featured-border-color:#ededf4;">
286+
<img width="416" height="376" src="https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2-416x376.png" class="c-featured__image" alt="" srcset="https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2-416x376.png 416w, https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2.png 620w" sizes="(max-width: 416px) 100vw, 416px" /> <div class="c-featured__text">
287+
<div class="c-featured__headline">Total Cost of Ownership Calculator</div>
288+
<div class="c-featured__excerpt">Migrating from on-premises or between cloud providers for hosting, cloud storage, or cloud computing? </div>
289+
<span class="c-featured__button" href="https://www.linode.com/lp/tco-calculator/">Launch Calculator</span>
290+
</div>
291+
</a>
292+
</div>
237293

238294
</div>
239-
</div>
240-
<div class="o-layout__colset">
295+
241296
<div class="o-layout__col">
242297

243298
<div class="o-layout__module">
244-
<a href="/products/" class="o-link--arrow">View All Products</a>
299+
<h6>Pricing</h6>
300+
<nav class="o-menu">
301+
<ul class="o-menu__list">
302+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/pricing/"><span class="o-menu__title">Pricing List</span></a></li>
303+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/estimator/"><span class="o-menu__title">Cloud Estimator</span></a></li>
304+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/cloud-pricing-calculator/"><span class="o-menu__title">TCO Calculator</span></a></li>
305+
</ul>
306+
</nav>
245307
</div>
246308

247309
</div>
@@ -251,6 +313,21 @@ <h6>Developer Tools</h6>
251313

252314
<div class="o-layout__row c-sub-menu c-sub-menu--community" id="sub-menu--community">
253315
<div class="o-layout__colset">
316+
<div class="o-layout__col">
317+
318+
<div class="o-layout__module">
319+
<h6>
320+
Featured</h6>
321+
<a id="c-featured--community" class="c-featured" href="https://www.linode.com/marketplace/apps/linode/nextcloud/" style="--c-featured-color:#ffffff;">
322+
<img width="632" height="418" src="https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-632x418.png" class="c-featured__background" alt="" srcset="https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-632x418.png 632w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-416x275.png 416w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-768x508.png 768w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient.png 1000w" sizes="(max-width: 632px) 100vw, 632px" /> <img width="416" height="416" src="https://www.linode.com/wp-content/uploads/2020/05/linode-nextcloud-white.svg" class="c-featured__image" alt="" srcset="https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 416w, https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 632w, https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 1064w" sizes="(max-width: 416px) 100vw, 416px" /> <div class="c-featured__text">
323+
<div class="c-featured__headline">New One Click App:<br><b>Nextcloud</b></div>
324+
<div class="c-featured__excerpt">Open source productivity and storage management platform.</div>
325+
<span class="c-featured__button" href="https://www.linode.com/marketplace/apps/linode/nextcloud/">Deploy App</span>
326+
</div>
327+
</a>
328+
</div>
329+
330+
</div>
254331
<div class="o-layout__col">
255332

256333
<div class="o-layout__module">
@@ -261,6 +338,7 @@ <h6>Community</h6>
261338
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/community/questions/"><span class="o-menu__title">Q&A</span></a></li>
262339
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/developers/"><span class="o-menu__title">Developer Portal</span></a></li>
263340
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/blog/"><span class="o-menu__title">Blog</span></a></li>
341+
<li class="o-menu__item"><a class="o-menu__link" href="https://www.linode.com/green-light/"><span class="o-menu__title">Beta Program</span></a></li>
264342
</ul>
265343
</nav>
266344
</div>
@@ -299,12 +377,11 @@ <h6>Engage With Us</h6>
299377
'use strict';
300378

301379
// elements we'll be listening on or manipulating
302-
var $html, $header, $main_menu, $switches, $sub_menus; // element bindings
380+
var $html, $header, $main_menu, $sub_menus; // element bindings
303381

304382
var bindElements = function bindElements() {
305383
$header = document.querySelector('.c-site-header');
306384
$main_menu = document.querySelector('.c-main-menu');
307-
$switches = $main_menu.querySelectorAll('.o-menu__switch');
308385
$sub_menus = document.querySelectorAll('.c-sub-menu');
309386
}; // event bindings
310387

@@ -320,6 +397,7 @@ <h6>Engage With Us</h6>
320397

321398
if ($target_sub_menu.classList.contains('active')) {
322399
closeAllSubMenus();
400+
$clicked_link.blur();
323401
$clicked_link.classList.remove('active');
324402
$target_sub_menu.classList.remove('active');
325403
setHtmlScrollState(true); // Else clicked menu was not active
@@ -349,16 +427,14 @@ <h6>Engage With Us</h6>
349427
switch (event.keyCode) {
350428
case 27:
351429
closeAllSubMenus();
430+
document.activeElement.blur();
352431
setHtmlScrollState(true);
353432
break;
354433
}
355434
});
356435
};
357436

358437
var closeAllSubMenus = function closeAllSubMenus() {
359-
$switches.forEach(function ($switch) {
360-
$switch.classList.remove('active');
361-
});
362438
$sub_menus.forEach(function ($sub_menu) {
363439
$sub_menu.classList.remove('active');
364440
});
@@ -384,7 +460,7 @@ <h6>Engage With Us</h6>
384460
} // find all header links that match this path
385461

386462

387-
$current_links = $header.querySelectorAll('a[href$="' + current_path + '"]'); // add "current" class to found item
463+
$current_links = $header.querySelectorAll('a.o-menu__link[href$="' + current_path + '"]'); // add "current" class to found item
388464

389465
$current_links.forEach(function ($link) {
390466
$link.classList.add('current'); // find any parent submenus

‎themes/docsmith/layouts/partials/includes_head_prod.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<link href="{{ relURL "build/stylesheets/home-c3f32780be.min.css" }}" rel='stylesheet' type='text/css'>
1+
<link href="{{ relURL "build/stylesheets/home-7abf8cb1d7.min.css" }}" rel='stylesheet' type='text/css'>

‎themes/docsmith/static/build/stylesheets/home-c3f32780be.min.css renamed to ‎themes/docsmith/static/build/stylesheets/home-7abf8cb1d7.min.css

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)