diff --git a/themes/navy/layout/index.swig b/themes/navy/layout/index.swig index b058776..15bebe5 100644 --- a/themes/navy/layout/index.swig +++ b/themes/navy/layout/index.swig @@ -15,61 +15,48 @@

Nimbus is a research project and a client implementation for Ethereum 2.0 designed to perform well on embedded systems and personal mobile devices, including older smartphones with resource-restricted hardware.

Learn More on Github -
-
-

Friendly Beginnings

-

The Nimbus team kicked off research in March 2018 and has steadily been finalizing the blocks needed to deliver a fully stand-alone implementation of - the next generation of Ethereum. Excited about new developments? Get in touch! -

- See docs +
+
+
+

Friendly Research

+

We’re translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, performant and reusable + libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch! +

+ See docs +
+
- -
-
-
- -
-

Friendly Research

-

We’re translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, performant and reusable - libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch! -

- See docs +
+ +
+

Friendly Licensing

+

We’re building Nimbus as a common good with liberal licensing to allow the widest deployment of Ethereum 2.0 possible. + Want to integrate Nimbus in your product? Get in touch! +

+ See docs +
+
+
+
+

Friendly Networking

+

We’re translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, + performant and reusable libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch! +

+ See docs +
+ +
+
+ +
+

Friendly Platform Support

+

The Nim language delivers safe and performant code on any platform with a C compiler available. Developing the latest RISC-V + boards or simply have an old Windows machine lying around? Get in touch! +

+ See docs +
-
-
-
-

Friendly Licensing

-

We’re building Nimbus as a common good with liberal licensing to allow the widest deployment of Ethereum 2.0 possible. - Want to integrate Nimbus in your product? Get in touch! -

- See docs -
- -
-
-
- -
-

Friendly Networking

-

We’re translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, - performant and reusable libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch! -

- See docs -
-
-
-
-
-

Friendly Platform Support

-

The Nim language delivers safe and performant code on any platform with a C compiler available. Developing the latest RISC-V - boards or simply have an old Windows machine lying around? Get in touch! -

- See docs -
- -
-
diff --git a/themes/navy/layout/page.swig b/themes/navy/layout/page.swig index bb901ab..088e882 100644 --- a/themes/navy/layout/page.swig +++ b/themes/navy/layout/page.swig @@ -1,14 +1,17 @@ +
+
+

{{ page.title }}

+ Edit on Github +
+
+ {{ partial('partial/sidebar') }}
-
-

{{ page.title }}

- -
{{ page_anchor(page.content) }}
@@ -18,16 +21,8 @@
-
- {{ partial('partial/sidebar') }}
diff --git a/themes/navy/layout/partial/header.swig b/themes/navy/layout/partial/header.swig index a5c98f8..23abb85 100644 --- a/themes/navy/layout/partial/header.swig +++ b/themes/navy/layout/partial/header.swig @@ -8,7 +8,7 @@
\ No newline at end of file diff --git a/themes/navy/source/css/_partial/base.styl b/themes/navy/source/css/_partial/base.styl index cb38b76..b1ffa3d 100644 --- a/themes/navy/source/css/_partial/base.styl +++ b/themes/navy/source/css/_partial/base.styl @@ -38,8 +38,9 @@ body .wrapper clearfix() @media screen - max-width: max-width - margin: 0 auto + max-width: 1240px; + margin: 0 auto; + padding: 0 20px; .inner clearfix() diff --git a/themes/navy/source/css/_partial/main.styl b/themes/navy/source/css/_partial/main.styl index 60753db..1ed7a85 100644 --- a/themes/navy/source/css/_partial/main.styl +++ b/themes/navy/source/css/_partial/main.styl @@ -1,56 +1,3 @@ -@font-face { - font-family: 'Inter UI'; - font-style: normal; - font-weight: 400; - src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"), - url("../fonts/Inter-UI-Regular.woff") format("woff"); -} -@font-face { - font-family: 'Inter UI'; - font-style: italic; - font-weight: 400; - src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"), - url("../fonts/Inter-UI-Italic.woff") format("woff"); -} - -@font-face { - font-family: 'Inter UI'; - font-style: normal; - font-weight: 500; - src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"), - url("../fonts/Inter-UI-Medium.woff") format("woff"); -} -@font-face { - font-family: 'Inter UI'; - font-style: italic; - font-weight: 500; - src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"), - url("../fonts/Inter-UI-MediumItalic.woff") format("woff"); -} - -@font-face { - font-family: 'Inter UI'; - font-style: normal; - font-weight: 700; - src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"), - url("../fonts/Inter-UI-Bold.woff") format("woff"); -} - -@font-face { - font-family: 'Inter UI'; - font-style: italic; - font-weight: 700; - src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"), - url("../fonts/Inter-UI-BoldItalic.woff") format("woff"); -} - -@font-face { - font-family: 'GT Walsheim'; - src: url('../fonts/GTWalsheim-Bold.woff2') format('woff2'), - url('../fonts/GTWalsheim-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; -} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -228,24 +175,24 @@ select[multiple] { } .backdrop - z-index: 9998; + z-index: -101; position: fixed; left: 0; top: 0; width: 100%; height 100%; background: #000000; - opacity: 0.45; visibility: hidden; opacity: 0; pointer-events: none; - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + display: none; + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; .mobile-menu-container position: fixed; - z-index: 9999; + z-index: -100; left: 0; width: 100%; height: 100%; @@ -255,11 +202,15 @@ select[multiple] { visibility: hidden; opacity: 0; pointer-events: none; - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - .mobile-menu-container-inner + display: none; + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; + max-width: 100vw; + overflow: hidden; + .mobile-menu-container-inner, + .mobile-submenu-container-inner top: 16px; left: 16px; background: #fff; @@ -267,6 +218,10 @@ select[multiple] { box-shadow: 0px 3px 3px rgba(0,0,0,0.2); border-radius: 8px; width: calc(100vw - 32px); + -webkit-transition: all 0.3s linear; + -moz-transition: all 0.3s linear; + -o-transition: all 0.3s linear; + transition: all 0.3s linear; .title font-size: 14px; text-transform: uppercase; @@ -317,13 +272,16 @@ select[multiple] { font-weight: 500; .mobile-menu-header position: relative - .close + .close, .back position: absolute; top: 50%; display: flex; padding: 10px; margin-top: -22px; right: 14px; + .back + right: auto; + left: 14px; .logo-wrap padding: 16px 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); @@ -335,7 +293,7 @@ select[multiple] { .logo-text color: #000; font-size: 22px; - header + .dropdown margin-left: 0 nav width: 100%; @@ -347,9 +305,15 @@ select[multiple] { margin: 0; .sub-menu display: none; + &.current + a + color: #000; a - padding: 12px 0; + margin: 0 -24px 0 -24px; + padding: 12px 26px; color: #000; + &:hover + background: rgba(250, 157, 1, 0.3); .mobile-submenu-trigger background-image: url(../img/arrow.svg); width: 24px; @@ -360,17 +324,35 @@ select[multiple] { background-repeat: no-repeat; background-position: center; padding: 0 24px; + .mobile-submenu-container-inner + position: absolute; + margin-bottom: 20px; + transform: translateX(100vw); + .dropdown + padding: 0 24px; + margin: 10px 0; + nav + ul + margin-top: 0; + .mobile-menu-header + justify-content: center; + display: flex; + min-height: 77px; + align-items: center; + border-bottom: 1px solid rgba(0,0,0,0.1); .header position: relative; display: flex; justify-content: space-between; - width: 1200px; + max-width: 1240px; + padding: 0 20px; height: 56px; top: 0; margin: 24px auto; z-index: 9; + width: 100%; .mobile-menu-trigger display: flex; height: auto; @@ -716,45 +698,6 @@ select[multiple] { padding: 8px 0 0 0; } -@media (max-width: 991px) { - .intro { - width: 100%; - margin: 0; - padding: 128px 24px 0; - height: 400px; - } - - .intro h1 { - font-size: 22px; - line-height: 26px; - padding: 0 0 4px 0; - } - - .intro-buttons { - flex-direction: column; - } - - .intro .button { - width: 220px; - margin: 0 0 12px 0; - } - - .home-cover { - height: 400px; - } - - .command-wrap { - width: 100%; - margin: 0; - border-radius: 0; - } - - .command { - border-radius: 0; - font-size: 18px; - } -} - .features { width: 1024px; margin: 0 auto; @@ -1007,7 +950,7 @@ body { clear: both; } -.work-item { +.work-item margin: 30px auto; text-align: left; max-width: 910px; @@ -1015,10 +958,14 @@ body { display: flex; justify-content: space-between; align-items: center; -} + &:nth-of-type(2n) + .work-item-inner + padding-left: 30px; + padding-right: 0; .work-item-inner{ max-width: 480px; + padding-right: 30px; } .work-item-inner p { @@ -1052,7 +999,7 @@ body { .sections { width: 100%; margin: 24px 0 0 0; - padding: 0 0 60px 0; + padding: 0 16px 60px 16px; display: flex; align-items: center; flex-direction: column; @@ -1199,18 +1146,18 @@ pre { padding-bottom: 32px; } - .section-header, .inner-header { + .section-header { width: 100%; - max-width: 680px; + max-width: calc(100% - 32px); padding: 32px 24px 16px 24px; } - .section-header h2, .inner-header h2 { + .section-header h2 { font-size: 22px; padding: 0 0 8px 0; } - .section-header p, .inner-header p { + .section-header p{ width: 100%; } @@ -1322,6 +1269,7 @@ footer .container max-width: 1200px; margin: 0 auto; + padding: 0 16px; display: flex; a text-decoration: none @@ -1487,6 +1435,12 @@ footer input[type="email"]{ } @media (max-width: 1199px) + .backdrop + z-index: 9998 + display: block + .mobile-menu-container + z-index: 9999 + display: block .open .backdrop visibility: visible; @@ -1514,4 +1468,109 @@ footer input[type="email"]{ header display: flex .secondary-nav - display: flex \ No newline at end of file + display: flex + .open-submenu + .mobile-menu-container .mobile-menu-container-inner + transform: translateX(-100vw); + .mobile-submenu-container-inner + transform: translateX(0); + +@media (max-width: 991px) + .section-header + margin: -30px auto 0 auto; + + .intro + padding: 50px 16px; + + .command-wrap { + width: 100%; + margin: 0; + border-radius: 0; + } + + .command { + border-radius: 0; + font-size: 18px; + } + + #content-inner + flex-direction: column; + #sidebar + padding: 20px 0; + margin-left: -14px; + .inner + flex-wrap: nowrap; + display: flex; + overflow: auto; + white-space: nowrap; + width: calc(100% + 20px); + a + padding: 9px 14px; + margin-bottom: 0; + + .article + padding: 0; + .inner + padding: 0; + + footer .container + .social-links + flex: 0 0 20%; + max-width: 20%; + .more + flex: 0 0 20%; + max-width: 20%; + +@media (max-width: 767px) + .home-cover + position: relative; + height: auto; + .home-wrap + margin-top: 30px; + .work-item + flex-direction: column-reverse; + margin-top: 70px; + padding: 0; + &:nth-of-type(2n) + flex-direction: column; + .work-item-inner + padding-left: 0; + .work-item-inner + padding-right: 0; + margin-top: 30px; + .intro-buttons + flex-wrap: wrap; + justify-content: center; + .button + margin-bottom: 16px; + .contribute-wrap + flex-wrap: wrap; + .contribute + width: 100%; + margin-right: 0; + footer .container + flex-direction: column-reverse; + text-align: center; + p + margin-top: 10px; + ul li + margin-bottom: 16px; + .info + flex: 0 0 100%; + max-width: 100%; + align-items: center; + margin-top: 50px; + .blog-logo a span + display: none; + .social-links + flex: 0 0 100%; + max-width: 100%; + margin-left: 0; + margin-top: 30px; + .community + width: 130px; + text-align: left; + margin: 0 auto; + .more + flex: 0 0 100%; + max-width: 100%; \ No newline at end of file diff --git a/themes/navy/source/css/_partial/page.styl b/themes/navy/source/css/_partial/page.styl index 4044727..e0095ba 100644 --- a/themes/navy/source/css/_partial/page.styl +++ b/themes/navy/source/css/_partial/page.styl @@ -7,11 +7,7 @@ note-warn = hsl(0, 100%, 50%) position: relative #content-inner - clearfix() - @media mq-normal - margin-left: sidebar-width - @media screen and (min-width: 1500px) - margin-left: 2px + display: flex; #content-inner-full clearfix() @@ -29,7 +25,7 @@ note-warn = hsl(0, 100%, 50%) .article float: left width: 100% - padding: 40px 0 + padding: 20px 0 @media print padding: 0 @@ -78,17 +74,21 @@ note-warn = hsl(0, 100%, 50%) color: color-link-hover .article-header - clearfix() - padding-bottom: 20px + max-width: 1200px; + margin: 0 auto; + padding: 90px 0 20px; + display: flex; + justify-content: space-between; .article-title - float: left font-family: font-title font-size: 26px line-height: 32px font-weight: 300 text-decoration: none - color: color-title + font-weight: bold; + font-size: 25px; + color: #ffffff; transition: 0.2s a&:hover color: color-link-hover @@ -104,16 +104,18 @@ note-warn = hsl(0, 100%, 50%) color: color-link-hover .article-edit-link - float: right - color: #bbb - font-size: 24px - line-height: 36px - transition: 0.2s - display: none + font-style: normal; + font-weight: normal; + line-height: normal; + font-size: 15px; + color: #ffffff; + display: none; + align-items: flex-end; + text-decoration: none; &:hover - color: color-link-hover + opacity: 0.7; @media mq-normal - display: block + display: flex .article-anchor margin-left: 10px @@ -144,8 +146,8 @@ note-warn = hsl(0, 100%, 50%) margin: 1em 0 color: color-title a - color: color-link - text-decoration: none + color: #000000; + text-decoration: underline; &:hover color: color-link-hover text-decoration: underline @@ -223,6 +225,7 @@ note-warn = hsl(0, 100%, 50%) line-height: 1em padding-top: 1em position: relative + background: transparent @media print display: none diff --git a/themes/navy/source/css/_partial/sidebar.styl b/themes/navy/source/css/_partial/sidebar.styl index 497f005..9f7fbe7 100644 --- a/themes/navy/source/css/_partial/sidebar.styl +++ b/themes/navy/source/css/_partial/sidebar.styl @@ -1,12 +1,12 @@ #sidebar - width: sidebar-width - float: left - padding-bottom: 40px - opacity: 0.8 - margin-left: sidebar-width * -1 - display: none - @media mq-normal - display: block + min-width: sidebar-width + padding: 40px 0 + .inner + padding: 0; + &:before + display: none + strong + display: none .sidebar-title margin-top: 40px @@ -19,18 +19,21 @@ line-height: 1 .sidebar-link - font-family: font-sans - display: block - color: color-default - text-decoration: none - padding: 7px 0 - line-height: 1 - position: relative - width: 100% - text-overflow: ellipsis - overflow: hidden - white-space: nowrap - &.current - color: color-link + border-radius: 23.5px; + font-size: 15px; + padding: 9px 24px; + display: block; + margin-bottom: 10px; + position: relative; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; + color: #000; + text-decoration: none; + line-height: normal; &:hover - color: color-link-hover + background: rgba(250, 157, 1, 0.1); + color: #fa9d01; + diff --git a/themes/navy/source/css/_variables.styl b/themes/navy/source/css/_variables.styl index 8d47af6..4e4a924 100644 --- a/themes/navy/source/css/_variables.styl +++ b/themes/navy/source/css/_variables.styl @@ -1,15 +1,55 @@ -// Fonts @font-face { - font-family: "Post Grotesk Medium"; - src: url("/fonts/PostGrotesk-Medium.ttf") format("ttf"), - url("/fonts/PostGrotesk-Medium.woff") format("woff"), - url("/fonts/PostGrotesk-Medium.eot") format("eot"); + font-family: 'Inter UI'; + font-style: normal; + font-weight: 400; + src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"), + url("../fonts/Inter-UI-Regular.woff") format("woff"); } @font-face { - font-family: "Post Grotesk Book"; - src: url("/fonts/PostGrotesk-Book.ttf") format("ttf"), - url("/fonts/PostGrotesk-Book.woff") format("woff"), - url("/fonts/PostGrotesk-Book.eot") format("eot"); + font-family: 'Inter UI'; + font-style: italic; + font-weight: 400; + src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"), + url("../fonts/Inter-UI-Italic.woff") format("woff"); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 500; + src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"), + url("../fonts/Inter-UI-Medium.woff") format("woff"); +} +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 500; + src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"), + url("../fonts/Inter-UI-MediumItalic.woff") format("woff"); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 700; + src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"), + url("../fonts/Inter-UI-Bold.woff") format("woff"); +} + +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 700; + src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"), + url("../fonts/Inter-UI-BoldItalic.woff") format("woff"); +} + +@font-face { + font-family: 'GT Walsheim'; + src: url('../fonts/GTWalsheim-Bold.woff2') format('woff2'), + url('../fonts/GTWalsheim-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; } // Config @@ -25,20 +65,20 @@ color-navy = #363763 color-background = #F2F2F5 color-background-light = #fff color-main-link = #fff -color-link = #7c7db6 +color-link = #fa9d01 color-link-hover = lighten(color-link, 10%) // Typography -font-sans = "Post Grotesk Book", "Helvetica Neue", Helvetica, Arial, sans-serif -font-mono = "Source Code Pro", Monaco, Menlo, Consolas, monospace -font-title = "Post Grotesk Medium", font-sans +font-sans = "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif +font-mono = "Inter UI", Monaco, Menlo, Consolas, monospace +font-title = "Inter UI", font-sans font-size = 16px line-height = 24px // Layout -max-width = 1024px +max-width = 1200px gutter-width = 20px -sidebar-width = 220px +sidebar-width = 30% mobile-nav-width = 260px // Media queries diff --git a/themes/navy/source/img/graphic-licensing.svg b/themes/navy/source/img/graphic-licensing.svg index 39c21dc..0bcf47e 100644 --- a/themes/navy/source/img/graphic-licensing.svg +++ b/themes/navy/source/img/graphic-licensing.svg @@ -1,12 +1,17 @@ - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/themes/navy/source/img/graphic-networking.svg b/themes/navy/source/img/graphic-networking.svg new file mode 100644 index 0000000..79c60f8 --- /dev/null +++ b/themes/navy/source/img/graphic-networking.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/themes/navy/source/img/graphic-platform-support.svg b/themes/navy/source/img/graphic-platform-support.svg index aae4cd3..f9fd04e 100644 --- a/themes/navy/source/img/graphic-platform-support.svg +++ b/themes/navy/source/img/graphic-platform-support.svg @@ -1,25 +1,15 @@ - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/themes/navy/source/img/graphic-research.svg b/themes/navy/source/img/graphic-research.svg index bfd7b13..3d8d04a 100644 --- a/themes/navy/source/img/graphic-research.svg +++ b/themes/navy/source/img/graphic-research.svg @@ -1,14 +1,22 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/navy/source/js/mobile_nav.js b/themes/navy/source/js/mobile_nav.js index a80e407..ad1674d 100644 --- a/themes/navy/source/js/mobile_nav.js +++ b/themes/navy/source/js/mobile_nav.js @@ -19,8 +19,27 @@ $(document).ready(function () { setMenu(w); - $('.mobile-menu-trigger, .backdrop, .mobile-menu-container .close').on('click', function () { + $('.mobile-menu-trigger, .backdrop, .mobile-menu-container .close').on('click', function (event) { + event.preventDefault(); $('body').toggleClass('open'); + $('body').removeClass('open-submenu'); + }); + + $('.mobile-menu-container .mobile-submenu-container-inner .mobile-menu-header .back').on('click', function (event) { + event.preventDefault(); + $('body').removeClass('open-submenu'); + }); + + $('.mobile-menu-container-inner .has-submenu .main-link').each(function (index, element) { + $(this).on('click', function (event) { + event.preventDefault(); + var cloneSubMenu = $(this).parent().find('.sub-menu ul').clone(), + subMenuTitle = $(this).text(); + $('.mobile-menu-container .mobile-submenu-container-inner .dropdown nav').empty(); + $('body').addClass('open-submenu'); + cloneSubMenu.appendTo('.mobile-menu-container .mobile-submenu-container-inner .dropdown nav'); + $('.mobile-menu-container .mobile-submenu-container-inner .title').text(subMenuTitle); + }); }); });