Skip to content

Commit 864b73e

Browse files
bbiggerrbbiggerr
authored
Merge pull request #653 from alertmybanjos/header-footer-updates-2022-12-05
Header Footer Updates - Dec 5, 2022
2 parents c4b7aa7 + 607b85f commit 864b73e

4 files changed

Lines changed: 132 additions & 31 deletions

File tree

‎src/components/3_organisms/footer-nav.js‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ class FooterNav extends React.Component {
141141
<a className="o-menu__link" href="https://www.linode.com/compare/"><span className="o-menu__title">Linode vs. Competitors</span></a>
142142
</li>
143143
<li className="o-menu__item">
144-
<a className="o-menu__link" href="https://www.linode.com/open-cloud/"><span className="o-menu__title">Open Cloud</span></a>
144+
<a className="o-menu__link" href="https://www.linode.com/approach/"><span className="o-menu__title">Our Approach</span></a>
145145
</li>
146146
<li className="o-menu__item">
147147
<a className="o-menu__link" href="https://www.linode.com/what-is-cloud-computing/"><span className="o-menu__title">What is Cloud Computing?</span></a>
@@ -198,9 +198,6 @@ class FooterNav extends React.Component {
198198
<li className="o-menu__item">
199199
<a className="o-menu__link" href="https://www.linode.com/products/gpu/"><span className="o-menu__title">GPU</span></a>
200200
</li>
201-
<li className="o-menu__item">
202-
<a className="o-menu__link" href="https://www.linode.com/products/bare-metal/"><span className="o-menu__title">Bare Metal</span></a>
203-
</li>
204201
<li className="o-menu__item">
205202
<a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
206203
</li>
@@ -216,15 +213,6 @@ class FooterNav extends React.Component {
216213
<li className="o-menu__item">
217214
<a className="o-menu__link" href="https://www.linode.com/products/databases/"><span className="o-menu__title">Managed Databases</span></a>
218215
</li>
219-
<li className="o-menu__item">
220-
<a className="o-menu__link" href="https://www.linode.com/products/mongodb/"><span className="o-menu__title">MongoDB</span></a>
221-
</li>
222-
<li className="o-menu__item">
223-
<a className="o-menu__link" href="https://www.linode.com/products/mysql/"><span className="o-menu__title">MySQL</span></a>
224-
</li>
225-
<li className="o-menu__item">
226-
<a className="o-menu__link" href="https://www.linode.com/products/postgresql/"><span className="o-menu__title">PostgreSQL</span></a>
227-
</li>
228216
<li className="o-menu__item">
229217
<a className="o-menu__link" href="https://www.linode.com/products/cloud-firewall/"><span className="o-menu__title">Cloud Firewall</span></a>
230218
</li>

‎src/components/3_organisms/header.js‎

Lines changed: 98 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ class Header extends React.Component {
221221
<a className="o-menu__link" href="https://www.linode.com/compare/"><span className="o-menu__title">Linode vs. Competitors</span></a>
222222
</li>
223223
<li className="o-menu__item">
224-
<a className="o-menu__link" href="https://www.linode.com/open-cloud/"><span className="o-menu__title">Open Cloud</span></a>
224+
<a className="o-menu__link" href="https://www.linode.com/approach/"><span className="o-menu__title">Our Approach</span></a>
225225
</li>
226226
<li className="o-menu__item">
227227
<a className="o-menu__link" href="https://www.linode.com/what-is-cloud-computing/"><span className="o-menu__title">What is Cloud Computing?</span></a>
@@ -250,10 +250,10 @@ class Header extends React.Component {
250250
<a className="o-menu__link" href="https://www.linode.com/products/gpu/"><span className="o-menu__title">GPU</span></a>
251251
</li>
252252
<li className="o-menu__item">
253-
<a className="o-menu__link" href="https://www.linode.com/products/bare-metal/"><span className="o-menu__title">Bare Metal</span></a>
253+
<a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
254254
</li>
255255
<li className="o-menu__item">
256-
<a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
256+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#edgeworkers"><span className="o-menu__title">EdgeWorkers</span></a>
257257
</li>
258258
</ul>
259259
</li>
@@ -354,6 +354,46 @@ class Header extends React.Component {
354354
</li>
355355
</ul>
356356
</li>
357+
<li className="o-menu__item o-menu__parent" id="submenu-mobile-primary-full--52611" data-group="submenu-mobile-primary-full--level-1">
358+
<button className="o-menu__link o-menu__toggle"data-group="submenu-mobile-primary-full--level-1" data-toggle="#submenu-mobile-primary-full--52611"><span className="o-menu__title">Delivery</span></button>
359+
<ul className="o-menu__list o-menu__child --d2">
360+
<li className="o-menu__item">
361+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#adaptive-media-delivery"><span className="o-menu__title">Adaptive Media</span></a>
362+
</li>
363+
<li className="o-menu__item">
364+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#download-delivery"><span className="o-menu__title">Download Delivery</span></a>
365+
</li>
366+
<li className="o-menu__item">
367+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#ion"><span className="o-menu__title">Ion</span></a>
368+
</li>
369+
<li className="o-menu__item">
370+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#global-traffic-management"><span className="o-menu__title">Global Traffic</span></a>
371+
</li>
372+
</ul>
373+
</li>
374+
<li className="o-menu__item o-menu__parent" id="submenu-mobile-primary-full--52612" data-group="submenu-mobile-primary-full--level-1">
375+
<button className="o-menu__link o-menu__toggle"data-group="submenu-mobile-primary-full--level-1" data-toggle="#submenu-mobile-primary-full--52612"><span className="o-menu__title">Security</span></button>
376+
<ul className="o-menu__list o-menu__child --d2">
377+
<li className="o-menu__item">
378+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#guardicore-segmentation"><span className="o-menu__title">Guardicore</span></a>
379+
</li>
380+
<li className="o-menu__item">
381+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#kona-site-defender"><span className="o-menu__title">Kona Site Defender</span></a>
382+
</li>
383+
<li className="o-menu__item">
384+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#app-api-protector"><span className="o-menu__title">App &amp; API Protector</span></a>
385+
</li>
386+
<li className="o-menu__item">
387+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#bot-manager"><span className="o-menu__title">Bot Manager</span></a>
388+
</li>
389+
<li className="o-menu__item">
390+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#account-protector"><span className="o-menu__title">Account Protector</span></a>
391+
</li>
392+
<li className="o-menu__item">
393+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#enterprise-application-access"><span className="o-menu__title">EAA</span></a>
394+
</li>
395+
</ul>
396+
</li>
357397
</ul>
358398
</li>
359399
<li className="o-menu__item o-menu__parent" id="submenu-mobile-primary-full--46178" data-group="submenu-mobile-primary-full">
@@ -563,7 +603,7 @@ class Header extends React.Component {
563603
</div>
564604

565605

566-
<div className="o-layout__row c-submenu c-submenu--why-linode" data-toggle data-group="sub-menu" id="sub-menu--why-linode">
606+
<div className="o-layout__row c-submenu c-submenu--3col c-submenu--why-linode" data-toggle data-group="sub-menu" id="sub-menu--why-linode">
567607
<div className="o-layout__colset">
568608
<div className="o-layout__col">
569609

@@ -623,7 +663,7 @@ class Header extends React.Component {
623663
<a className="o-menu__link" href="https://www.linode.com/compare/"><span className="o-menu__title">Linode vs. Competitors</span></a>
624664
</li>
625665
<li className="o-menu__item">
626-
<a className="o-menu__link" href="https://www.linode.com/open-cloud/"><span className="o-menu__title">Open Cloud</span></a>
666+
<a className="o-menu__link" href="https://www.linode.com/approach/"><span className="o-menu__title">Our Approach</span></a>
627667
</li>
628668
<li className="o-menu__item">
629669
<a className="o-menu__link" href="https://www.linode.com/what-is-cloud-computing/"><span className="o-menu__title">What is Cloud Computing?</span></a>
@@ -637,7 +677,7 @@ class Header extends React.Component {
637677
</div>
638678

639679

640-
<div className="o-layout__row c-submenu c-submenu--products" data-toggle data-group="sub-menu" id="sub-menu--products">
680+
<div className="o-layout__row c-submenu c-submenu--4col c-submenu--products" data-toggle data-group="sub-menu" id="sub-menu--products">
641681
<div className="o-layout__colset">
642682
<div className="o-layout__col">
643683

@@ -669,10 +709,10 @@ class Header extends React.Component {
669709
<a className="o-menu__link" href="https://www.linode.com/products/gpu/"><span className="o-menu__title">GPU</span></a>
670710
</li>
671711
<li className="o-menu__item">
672-
<a className="o-menu__link" href="https://www.linode.com/products/bare-metal/"><span className="o-menu__title">Bare Metal</span></a>
712+
<a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
673713
</li>
674714
<li className="o-menu__item">
675-
<a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
715+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#edgeworkers"><span className="o-menu__title">EdgeWorkers</span></a>
676716
</li>
677717
</ul>
678718
</nav>
@@ -794,6 +834,55 @@ class Header extends React.Component {
794834
</div>
795835

796836
</div>
837+
<div className="o-layout__col">
838+
839+
<div className="o-layout__module">
840+
<h6>Delivery</h6>
841+
<nav className="o-menu">
842+
<ul className="o-menu__list --d0">
843+
<li className="o-menu__item">
844+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#adaptive-media-delivery"><span className="o-menu__title">Adaptive Media</span></a>
845+
</li>
846+
<li className="o-menu__item">
847+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#download-delivery"><span className="o-menu__title">Download Delivery</span></a>
848+
</li>
849+
<li className="o-menu__item">
850+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#ion"><span className="o-menu__title">Ion</span></a>
851+
</li>
852+
<li className="o-menu__item">
853+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#global-traffic-management"><span className="o-menu__title">Global Traffic</span></a>
854+
</li>
855+
</ul>
856+
</nav>
857+
</div>
858+
859+
<div className="o-layout__module">
860+
<h6>Security</h6>
861+
<nav className="o-menu">
862+
<ul className="o-menu__list --d0">
863+
<li className="o-menu__item">
864+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#guardicore-segmentation"><span className="o-menu__title">Guardicore</span></a>
865+
</li>
866+
<li className="o-menu__item">
867+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#kona-site-defender"><span className="o-menu__title">Kona Site Defender</span></a>
868+
</li>
869+
<li className="o-menu__item">
870+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#app-api-protector"><span className="o-menu__title">App &amp; API Protector</span></a>
871+
</li>
872+
<li className="o-menu__item">
873+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#bot-manager"><span className="o-menu__title">Bot Manager</span></a>
874+
</li>
875+
<li className="o-menu__item">
876+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#account-protector"><span className="o-menu__title">Account Protector</span></a>
877+
</li>
878+
<li className="o-menu__item">
879+
<a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#enterprise-application-access"><span className="o-menu__title">EAA</span></a>
880+
</li>
881+
</ul>
882+
</nav>
883+
</div>
884+
</div>
885+
797886
</div>
798887
</div>
799888

@@ -889,7 +978,7 @@ class Header extends React.Component {
889978
</div>
890979

891980

892-
<div className="o-layout__row c-submenu c-submenu--community" data-toggle data-group="sub-menu" id="sub-menu--community">
981+
<div className="o-layout__row c-submenu c-submenu--3col c-submenu--community" data-toggle data-group="sub-menu" id="sub-menu--community">
893982
<div className="o-layout__colset">
894983
<div className="o-layout__col">
895984

‎src/css/components/3_organisms/footer.css‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,24 @@
7373
border-color: #32363b;
7474
color: #ffffff;
7575
}
76+
button#cookie-prefs-icon {
77+
background: transparent;
78+
border: none;
79+
bottom: 16px;
80+
color: #5e6065;
81+
cursor: pointer;
82+
left: 16px;
83+
position: fixed;
84+
z-index: 10;
85+
}
86+
button#cookie-prefs-icon:hover {
87+
color: #02b159;
88+
}
89+
button#cookie-prefs-icon svg {
90+
height: 32px;
91+
width: 32px;
92+
}
93+
7694
.c-site-footer {
7795
background-color: #ffffff;
7896
color: #32363b;
@@ -86,7 +104,6 @@
86104
.c-site-footer a {
87105
color: inherit;
88106
}
89-
90107
.c-site-footer__primary {
91108
background-color: #ffffff;
92109
border-top: 1px solid var(--divider-color);
@@ -198,4 +215,4 @@
198215
.c-site-footer__primary .c-social a {
199216
padding: 8px 12px;
200217
}
201-
}
218+
}

‎src/css/components/3_organisms/header.css‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,10 @@
233233
width: 8px !important;
234234
}
235235

236+
body.om-position-floating-top {
237+
--site-top-offset: 60px;
238+
}
239+
236240
.c-identity {
237241
vertical-align: top;
238242
}
@@ -289,6 +293,7 @@
289293
align-items: center;
290294
display: flex;
291295
flex-wrap: nowrap;
296+
height: calc(var(--site-header-height) - 1px);
292297
max-width: none;
293298
}
294299
.c-site-header__primary .o-layout__col {
@@ -463,7 +468,7 @@
463468
margin: 0 -16px;
464469
}
465470
.c-submenu .o-layout__colset {
466-
grid-template-columns: 46% 27% 27%;
471+
justify-content: center;
467472
}
468473
.c-submenu .o-layout__col {
469474
border-left: 1px solid #ededf4;
@@ -595,14 +600,17 @@
595600
width: 7px;
596601
}
597602
.c-submenu--2col .o-layout__colset {
598-
grid-template-columns: 46% -webkit-max-content;
599603
grid-template-columns: 46% max-content;
600-
justify-content: center;
604+
}
605+
.c-submenu--3col .o-layout__colset {
606+
grid-template-columns: 46% 27% 27%;
607+
}
608+
.c-submenu--4col .o-layout__colset {
609+
grid-template-columns: 46% 18% 18% 18%;
601610
}
602611
.c-submenu--mobile {
603612
display: none;
604613
grid-template-columns: 100%;
605-
grid-template-rows: 1fr -webkit-min-content -webkit-min-content -webkit-min-content;
606614
grid-template-rows: 1fr min-content min-content min-content;
607615
}
608616
@media (max-width: 61.99em) {
@@ -642,7 +650,6 @@
642650
}
643651
.c-submenu--mobile :where(#submenu-mobile-primary .--d0) {
644652
font-size: 22px;
645-
height: -webkit-min-content;
646653
height: -moz-min-content;
647654
height: min-content;
648655
padding-block: 6px;
@@ -684,7 +691,6 @@
684691
overflow-x: scroll;
685692
}
686693
.c-submenu--mobile :where(#submenu-mobile-quicklinks) .o-menu {
687-
width: -webkit-min-content;
688694
width: -moz-min-content;
689695
width: min-content;
690696
}
@@ -809,6 +815,7 @@
809815
align-items: center;
810816
display: flex;
811817
flex-wrap: nowrap;
818+
height: calc(var(--site-topbar-height) - 1px);
812819
max-width: none;
813820
}
814821
.c-site-header__topbar .o-layout__col {
@@ -903,4 +910,4 @@
903910
}
904911
.c-site-header__topbar .c-weglot-nav .wgcurrent a, .c-site-header__topbar .c-weglot-nav .wgcurrent span {
905912
padding: 8px 0;
906-
}
913+
}

0 commit comments

Comments
 (0)