acid-info
/
nimbus-site
mirror of https://github.com/acid-info/nimbus-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Responsive menu.

This commit is contained in:
Nistor Cristian 2018-10-04 01:02:24 +03:00
parent 256a77ea6c
commit 2a6295eb66
19 changed files with 391 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
themes/navy/layout/index.swig
View File

@ -1,69 +1,5 @@
<div class="home-cover">
<div class="header">
<div class="header-left">
<div class="logo-wrap">
<span class="logo-span"><a class="logo" href="/"></a></span>
<span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
</div>
<header class="dropdown">
<nav>
<ul>
<li class="has-submenu">
<a href="#">Status App</a>
<div class="sub-menu">
<ul>
<li><a href="https://status/im">About</a></li>
<li><a href="https://status.im">Features</a></li>
<li><a href="https://desktop.status.im">Desktop</a></li>
<li><a href="https://docs.status/im">Docs</a></li>
<li><a href="https://our.status/im">Blog</a></li>
<li><a href="https://people-ops.status.im/">Contribute</a></li>
</ul>
</div>
</li>
<li class="has-submenu">
<a href="#">Embark</a>
<div class="sub-menu">
<ul>
<li><a href="https://embark.status.im">About</a></li>
<li><a href="https://embark.status.im/docs">Docs</a></li>
<li><a href="https://our.status.im/tag/embark">Blog</a></li>
<li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
</ul>
</div>
</li>
<li><a href="https://our.status.im/tag/studio">Studio</a></li>
<li><a href="https://status.im/incubate">Incubate</a></li>
<li class="current has-submenu">
<a href="/">Nimbus</a>
<div class="sub-menu">
<ul>
<li><a href="#">About</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="https://our.status.im/tag/research">Blog</a></li>
<li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
</ul>
</div>
</li>
<li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
<li><a href="https://our.status.im">Community</a></li>
</ul>
</nav>
</header>
</div>
<div class="secondary-nav">
<div id="search-input-wrap">
<div id="search-input-icon">
<i class="fa fa-search"></i>
</div>
<input type="search" id="search-input" placeholder="Search...">
</div>
<span><a href="http://get.status.im/chat/public/status" class="button button--secondary">Status Public Chat</a></span>
<span class="social-link social-link--twitter"><a href="https://twitter.com/ethstatus" target="_blank"></a></span>
<span class="social-link social-link--gitter"><a href="https://gitter.im/status-im/nimbus" target="_blank"></a></span>
<span class="social-link social-link--github"><a href="https://github.com/status-im" target="_blank"></a></span>
</div>
</div>
{{ partial('partial/header') }}
<div class="intro">
<h1>Nimbus</h1>
<p>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.</p>

131
themes/navy/layout/partial/header.swig
View File

@ -1,78 +1,73 @@
<div id="header" class="wrapper">
<div id="header-inner" class="inner">
<div id="logo-wrap-page">
<span class="logo-span"><a href="{{ url_for_lang('') }}" id="logo"></a></span>
<div class="header">
<div class="header-left">
<div class="logo-wrap">
<span class="logo-span"><a class="logo" href="/"></a></span>
<span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
</div>
<header class="dropdown">
<nav>
<ul>
<li class="has-submenu"><a href="#">Status App</a>
<div class="sub-menu">
<ul>
<li><a href="https://status/im">About</a></li>
<li><a href="https://status.im">Features</a></li>
<li><a href="https://desktop.status.im">Desktop</a></li>
<li><a href="https://docs.status/im">Docs</a></li>
<li><a href="https://our.status/im">Blog</a></li>
<li><a href="https://people-ops.status.im/">Contribute</a></li>
</ul>
</div>
</li>
<li class="has-submenu"><a href="#">Embark</a>
<div class="sub-menu">
<ul>
<li><a href="https://embark.status.im">About</a></li>
<li><a href="https://embark.status.im/docs">Docs</a></li>
<li><a href="https://our.status.im/tag/embark">Blog</a></li>
<li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
</ul>
</div>
</li>
<li><a href="https://our.status.im/tag/studio">Studio</a></li>
<li><a href="https://status.im/incubate">Incubate</a></li>
<li class="current has-submenu"><a href="/">Nimbus</a>
<div class="sub-menu">
<ul>
<li><a href="#">About</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="https://our.status.im/tag/research">Blog</a></li>
<li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
</ul>
</div>
</li>
<li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
<li><a href="https://our.status.im">Community</a></li>
<li class="has-submenu">
<a href="#">Status App</a>
<i class="mobile-submenu-trigger"></i>
<div class="sub-menu">
<ul>
<li><a href="https://status/im">About</a></li>
<li><a href="https://status.im">Features</a></li>
<li><a href="https://desktop.status.im">Desktop</a></li>
<li><a href="https://docs.status/im">Docs</a></li>
<li><a href="https://our.status/im">Blog</a></li>
<li><a href="https://people-ops.status.im/">Contribute</a></li>
</ul>
</div>
</li>
<li class="has-submenu">
<a href="#">Embark</a>
<i class="mobile-submenu-trigger"></i>
<div class="sub-menu">
<ul>
<li><a href="https://embark.status.im">About</a></li>
<li><a href="https://embark.status.im/docs">Docs</a></li>
<li><a href="https://our.status.im/tag/embark">Blog</a></li>
<li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
</ul>
</div>
</li>
<li><a href="https://our.status.im/tag/studio">Studio</a></li>
<li><a href="https://status.im/incubate">Incubate</a></li>
<li class="current has-submenu">
<a href="/">Nimbus</a>
<i class="mobile-submenu-trigger"></i>
<div class="sub-menu">
<ul>
<li><a href="#">About</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="https://our.status.im/tag/research">Blog</a></li>
<li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
</ul>
</div>
</li>
<li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
<li><a href="https://our.status.im">Community</a></li>
</ul>
</nav>
</header>
<div class="secondary-nav">
<div id="search-input-wrap" class="standalone">
<div id="search-input-icon">
<i class="fa fa-search"></i>
</div>
<input type="search" id="search-input" placeholder="Search...">
</div>
<div class="second-nav-links">
<span><a href="http://get.status.im/chat/public/status" class="button button--secondary button--header">Status Public Chat</a></span>
<span class="social-link social-link--twitter"><a href="https://twitter.com/ethstatus" target="_blank"></a></span>
<span class="social-link social-link--gitter"><a href="https://gitter.im/status-im/nimbus" target="_blank"></a></span>
<span class="social-link social-link--github"><a href="https://github.com/status-im" target="_blank"></a></span>
</div>
</div>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
</a>
</div>
<div class="secondary-nav">
<div id="search-input-wrap">
<div id="search-input-icon">
<i class="fa fa-search"></i>
</div>
<input type="search" id="search-input" placeholder="Search...">
</div>
<span><a href="http://get.status.im/chat/public/status" class="button button--secondary">Status Public Chat</a></span>
<span class="social-link social-link--twitter"><a href="https://twitter.com/ethstatus" target="_blank"></a></span>
<span class="social-link social-link--gitter"><a href="https://gitter.im/status-im/nimbus" target="_blank"></a></span>
<span class="social-link social-link--github"><a href="https://github.com/status-im" target="_blank"></a></span>
</div>
<a href="#" class="mobile-menu-trigger">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 7C4 6.44727 4.44775 6 5 6H19C19.5522 6 20 6.44727 20 7C20 7.28516 19.8811 7.54102 19.6903 7.72266C19.5109 7.89453 19.2677 8 19 8H5C4.44775 8 4 7.55273 4 7ZM4 17C4 16.4473 4.44775 16 5 16H19C19.1147 16 19.2251 16.0195 19.3278 16.0547C19.463 16.1016 19.5851 16.1777 19.687 16.2734C19.8798 16.4551 20 16.7129 20 17C20 17.5527 19.5522 18 19 18H5C4.44775 18 4 17.5527 4 17ZM5 11C4.44775 11 4 11.4473 4 12C4 12.5527 4.44775 13 5 13H15C15.3312 13 15.6249 12.8398 15.8068 12.5918C15.9282 12.4258 16 12.2207 16 12C16 11.6387 15.8087 11.3223 15.5221 11.1465C15.3701 11.0527 15.1913 11 15 11H5Z" fill="black"/>
</svg>
</a>
</div>

41
themes/navy/layout/partial/mobile_nav.swig
View File

@ -1,21 +1,22 @@
<nav id="mobile-nav">
<div id="mobile-nav-inner">
<ul id="mobile-nav-list">
{{ header_menu('mobile-nav') }}
<li class="mobile-nav-item">
<a href="https://github.com/{{ config.github }}" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
</li>
</ul>
{% if page.layout == 'page' %}
{{ doc_sidebar('mobile-nav') }}
{% endif %}
<div class="backdrop"></div>
<div class="mobile-menu-container">
<div class="mobile-menu-container-inner">
<div class="mobile-menu-header">
<div class="logo-wrap">
<span class="logo-span"><a class="logo" href="/"></a></span>
<span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
</div>
<a href="#" class="close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.574L7.72275 6.2968C7.32616 5.90021 6.68994 5.90241 6.29617 6.29617C5.89966 6.69269 5.90269 7.32864 6.2968 7.72275L10.574 12L6.2968 16.2772C5.90021 16.6738 5.90241 17.3101 6.29617 17.7038C6.69269 18.1003 7.32864 18.0973 7.72275 17.7032L12 13.426L16.2772 17.7032C16.6738 18.0998 17.3101 18.0976 17.7038 17.7038C18.1003 17.3073 18.0973 16.6714 17.7032 16.2772L13.426 12L17.7032 7.72275C18.0998 7.32616 18.0976 6.68994 17.7038 6.29617C17.3073 5.89966 16.6714 5.90269 16.2772 6.2968L12 10.574Z" fill="black"/>
</svg>
</a>
</div>
<div class="ecosystem">
<span class="title">Ecosystem</span>
</div>
<div class="community">
<span class="title">Community</span>
</div>
</div>
<div id="mobile-lang-select-wrap">
<span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>{{ lang_name(page.lang) }}</span></span>
<select id="mobile-lang-select" data-canonical="{{ canonical_path_for_nav() }}">
{% for lang in site.data.languages %}
<option value="{{ loop.key }}"{% if page.lang === loop.key %} selected{% endif %}>{{ lang_name(loop.key) }}</option>
{% endfor %}
</select>
</div>
</nav>
</div>

223
themes/navy/source/css/_partial/main.styl
View File

@ -227,16 +227,161 @@ select[multiple] {
vertical-align: top;
}
.header {
.backdrop
z-index: 9998;
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;
.mobile-menu-container
position: fixed;
z-index: 9999;
left: 0;
width: 100%;
height: 100%;
top: 0;
padding: 16px;
overflow: auto;
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
top: 16px;
left: 16px;
background: #fff;
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
border-radius: 8px;
width: calc(100vw - 32px);
.title
font-size: 14px;
text-transform: uppercase;
color: #939BA1;
.ecosystem
padding: 24px 24px 12px 24px
.community
padding: 0 24px;
border-radius: 0 0 8px 8px;
overflow: hidden;
.secondary-nav
margin: 0;
display: flex;
flex-wrap: wrap;
span
order: 1;
margin: 15px 24px 0 0;
&.social-link--github a
background-image: url(../img/icon-github-mobile.svg);
width: 32px;
height: 32px;
&.social-link--gitter a
background-image: url(../img/icon-gitter-mobile.svg);
width: 32px;
height: 32px;
&.social-link--twitter a
background-image: url(../img/icon-twitter-mobile.svg);
width: 32px;
height: 32px;
&:not(.social-link)
order: 2;
background: #EEF2F5;
padding: 16px 24px;
margin-left: -24px;
width: calc(100% + 48px);
margin-right: -24px;
margin-top: 20px;
a
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066);
border-radius: 20px;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
color: #000000;
text-align: center;
padding: 10px 23px 7px;
font-weight: 500;
.mobile-menu-header
position: relative
.close
position: absolute;
top: 50%;
display: flex;
padding: 10px;
margin-top: -22px;
right: 14px;
.logo-wrap
padding: 16px 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.logo
background-image: url(../img/nimbus.svg);
background-size: 44px;
width: 44px;
height: 44px;
.logo-text
color: #000;
font-size: 22px;
header
margin-left: 0
nav
width: 100%;
ul
display: flex;
flex-direction: column;
margin-top: 10px;
li
margin: 0;
.sub-menu
display: none;
a
padding: 12px 0;
color: #000;
.mobile-submenu-trigger
background-image: url(../img/arrow.svg);
width: 24px;
top: 0;
right: -12px;
position: absolute;
height: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0 24px;
.header
position: relative;
display: flex;
justify-content: space-between;
width: 1200px;
height: 56px;
top: 0;
margin: 24px 0 0 0;
margin: 24px auto;
z-index: 9;
}
.mobile-menu-trigger
display: flex;
height: auto;
align-self: center;
margin-right: 6px;
padding: 10px;
margin-left: auto;
display: none;
svg
path
fill: #fff
.header-left {
display: flex;
@ -449,7 +594,7 @@ select[multiple] {
margin-right: 0;
}
@media (max-width: 1072px) {
@media (max-width: 1199px) {
.header {
width: 100%;
left: 0;
@ -459,36 +604,6 @@ select[multiple] {
}
}
@media (max-width: 710px) {
.header {
margin-top: 8px;
padding: 0 16px;
}
.logo-wrap {
width: 91px;
height: 21px;
}
.logo {
width: 91px;
height: 21px;
background-size: 91px;
}
.main-nav {
display: none;
}
.secondary-nav li {
margin-right: 12px;
}
.secondary-nav li.social-link {
margin-left: 2px;
}
}
.home-cover {
position: fixed;
left: 0;
@ -601,7 +716,7 @@ select[multiple] {
padding: 8px 0 0 0;
}
@media (max-width: 710px) {
@media (max-width: 991px) {
.intro {
width: 100%;
margin: 0;
@ -721,7 +836,7 @@ select[multiple] {
color: #363763;
}
@media (max-width: 1072px) {
@media (max-width: 1199px) {
.features {
width: 100%;
margin: 0 auto;
@ -764,7 +879,7 @@ select[multiple] {
padding-top: 32px;
}
@media (max-width: 1072px) {
@media (max-width: 1199px) {
.community {
width: 100%;
flex-wrap: wrap;
@ -838,7 +953,7 @@ body {
box-shadow: 0 -20px 11px 0 rgba(43, 55, 107, 0.08);
}
@media (max-width: 710px) {
@media (max-width: 991px) {
.home-wrap {
margin: 400px 0 0 0;
}
@ -1078,7 +1193,7 @@ pre {
}
}
@media (max-width: 1072px) {
@media (max-width: 1199px) {
.sections {
margin: 12px 0 0 0;
padding-bottom: 32px;
@ -1370,3 +1485,33 @@ footer input[type="email"]{
border: 3px solid #ffffff;
background: #eff0f1;
}
@media (max-width: 1199px)
.open
.backdrop
visibility: visible;
opacity: 0.45;
pointer-events: all;
.mobile-menu-container
visibility: visible;
opacity: 1;
pointer-events: all;
.header
margin: 10px 0;
padding: 0 16px;
.mobile-menu-trigger
display: flex;
.logo-text
font-size: 22px
.logo
width: 44px
height: 44px
header
display: none
.secondary-nav
display: none
.mobile-menu-container
header
display: flex
.secondary-nav
display: flex

3
themes/navy/source/img/arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6809 12.0013L9.28104 8.62758C8.91136 8.26074 8.90774 7.65332 9.28306 7.28088C9.66099 6.90586 10.266 6.90756 10.6402 7.27888L14.7216 11.329C14.9061 11.5121 14.9994 11.7551 15 11.9989C15.0023 12.246 14.9084 12.4883 14.7216 12.6737L10.6402 16.7238C10.2705 17.0906 9.65837 17.0942 9.28306 16.7218C8.90513 16.3467 8.90684 15.7464 9.28104 15.3751L12.6809 12.0013Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

4
themes/navy/source/img/arrow_orange.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.12" cx="12" cy="12" r="12" fill="#FF9C00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0548 13.0807L11.4957 16.6398C11.1531 16.9824 10.6008 16.9854 10.2567 16.6413C9.91502 16.2996 9.92 15.7406 10.2583 15.4024L13.2129 12.4478L10.2583 9.4932C9.91571 9.15064 9.91264 8.59832 10.2567 8.25423C10.5984 7.91252 11.1574 7.9175 11.4957 8.25576L15.0548 11.8149C15.2529 12.013 15.3375 12.2813 15.307 12.5389C15.2892 12.7374 15.2048 12.9307 15.0548 13.0807Z" fill="#FF9C00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 596 B

3
themes/navy/source/img/close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.574L7.72275 6.2968C7.32616 5.90021 6.68994 5.90241 6.29617 6.29617C5.89966 6.69269 5.90269 7.32864 6.2968 7.72275L10.574 12L6.2968 16.2772C5.90021 16.6738 5.90241 17.3101 6.29617 17.7038C6.69269 18.1003 7.32864 18.0973 7.72275 17.7032L12 13.426L16.2772 17.7032C16.6738 18.0998 17.3101 18.0976 17.7038 17.7038C18.1003 17.3073 18.0973 16.6714 17.7032 16.2772L13.426 12L17.7032 7.72275C18.0998 7.32616 18.0976 6.68994 17.7038 6.29617C17.3073 5.89966 16.6714 5.90269 16.2772 6.2968L12 10.574Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 664 B

14
themes/navy/source/img/graphic-friendly-beginnings.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="215" height="192" viewBox="0 0 215 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.1" cx="100" cy="84" r="66" fill="#FD9A00"/>
<circle opacity="0.1" cx="100" cy="84" r="82" fill="#FD9A00"/>
<circle cx="39" cy="112" r="28" fill="#FF9C00"/>
<circle cx="84" cy="157" r="17" fill="#FFE6BF"/>
<circle opacity="0.8" cx="88" cy="119" r="9" fill="#FF9C00"/>
<circle opacity="0.8" cx="133" cy="183" r="9" fill="#FF9C00"/>
<circle opacity="0.8" cx="197" cy="60" r="9" fill="#FF9C00"/>
<circle opacity="0.8" cx="209" cy="154" r="6" fill="#FFE5BB"/>
<circle opacity="0.8" cx="199" cy="138" r="9" fill="#FF9C00"/>
<circle opacity="0.8" cx="9" cy="9" r="9" fill="#FFE5BB"/>
<circle opacity="0.8" cx="97" cy="23" r="15" fill="#FF9C00"/>
<circle cx="181.5" cy="98.5" r="12.5" fill="#FFE5BB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 820 B

12
themes/navy/source/img/graphic-licensing.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="196" height="196" viewBox="0 0 196 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="98" cy="98" r="98" fill="#FFF5E5"/>
<circle opacity="0.1" cx="98" cy="98" r="63" fill="#FF9C00"/>
<circle opacity="0.1" cx="98" cy="98" r="32" fill="#FF9C00"/>
<circle cx="179" cy="151" r="17" fill="#FF9C00"/>
<circle cx="27" cy="32" r="14" fill="#FFE5BB"/>
<circle cx="70" cy="82" r="6" fill="#FF9C00"/>
<circle cx="124" cy="116" r="9" fill="#FF9C00"/>
<circle cx="165" cy="25" r="7" fill="#FF9C00"/>
<circle cx="89" cy="159" r="9" fill="#FFE5BB"/>
<circle cx="24" cy="161" r="7" fill="#FF9C00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 617 B

12
themes/navy/source/img/graphic-network.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="226" height="229" viewBox="0 0 226 229" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="61" cy="197" r="32" fill="#FFF5E5"/>
<circle cx="21" cy="194" r="21" fill="#FF9C00"/>
<circle cx="211.5" cy="202.5" r="13.5" fill="#FF9C00"/>
<circle cx="180" cy="147" r="9" fill="#FF9C00"/>
<circle cx="133" cy="23" r="10" fill="#FF9C00"/>
<circle cx="157" cy="6" r="6" fill="#FF9C00"/>
<circle cx="37" cy="162" r="6" fill="#FF9C00"/>
<circle cx="15" cy="144" r="6" fill="#FF9C00"/>
<circle opacity="0.1" cx="75" cy="71" r="54" fill="#FF9C00"/>
<circle opacity="0.1" cx="147" cy="129" r="79" fill="#FF9C00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 628 B

25
themes/navy/source/img/graphic-platform-support.svg Normal file
View File

@ -0,0 +1,25 @@
<svg width="244" height="238" viewBox="0 0 244 238" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.2" cx="159.5" cy="78.5" r="65.5" fill="#FF9C00"/>
<circle cx="196" cy="181" r="16" fill="#FF9C00"/>
<circle cx="77" cy="16" r="16" fill="#FF9C00"/>
<circle cx="199.5" cy="46.5" r="24.5" fill="#FF9C00"/>
<circle opacity="0.5" cx="51" cy="111" r="14" fill="#FF9C00"/>
<circle cx="41" cy="79" r="8" fill="#FF9C00"/>
<circle cx="22" cy="97" r="6" fill="#FF9C00"/>
<circle cx="121" cy="180" r="6" fill="#FF9C00"/>
<circle opacity="0.2" cx="49" cy="189" r="49" fill="#FF9C00"/>
<circle cx="169" cy="217" r="6" fill="#FF9C00"/>
<circle opacity="0.5" cx="226" cy="77" r="6" fill="#FF9C00"/>
<circle opacity="0.5" cx="71" cy="211" r="6" fill="#FF9C00"/>
<circle cx="156" cy="182" r="4" fill="#FF9C00"/>
<circle cx="216" cy="91" r="4" fill="#FF9C00"/>
<circle cx="61" cy="194" r="4" fill="#FF9C00"/>
<circle opacity="0.5" cx="65" cy="223" r="4" fill="#FF9C00"/>
<circle cx="148" cy="210" r="4" fill="#FF9C00"/>
<circle cx="81" cy="202" r="4" fill="#FF9C00"/>
<circle opacity="0.5" cx="37" cy="169" r="4" fill="#FF9C00"/>
<circle cx="98" cy="140" r="9" fill="#FF9C00"/>
<circle opacity="0.5" cx="203" cy="106" r="9" fill="#FF9C00"/>
<circle cx="235" cy="96" r="9" fill="#FF9C00"/>
<circle opacity="0.5" cx="140" cy="194" r="8" fill="#FF9C00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

14
themes/navy/source/img/graphic-research.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="250" height="249" viewBox="0 0 250 249" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.1" cx="86" cy="163" r="86" fill="#FF9C00"/>
<circle opacity="0.1" cx="148.5" cy="101.5" r="101.5" fill="#FF9C00"/>
<circle cx="197" cy="218" r="15" fill="#FF9C00"/>
<circle cx="107" cy="147" r="15" fill="#FF9C00"/>
<circle cx="137" cy="113" r="11" fill="#FF9C00"/>
<circle cx="164" cy="124" r="8" fill="#FF9C00"/>
<circle cx="182" cy="25" r="8" fill="#FF9C00"/>
<circle opacity="0.5" cx="154" cy="142" r="6" fill="#FF9C00"/>
<circle opacity="0.5" cx="197" cy="41" r="6" fill="#FF9C00"/>
<circle opacity="0.5" cx="36" cy="71" r="6" fill="#FF9C00"/>
<circle opacity="0.8" cx="44" cy="53" r="6" fill="#FF9C00"/>
<circle opacity="0.3" cx="13" cy="33" r="6" fill="#FF9C00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 796 B

1
themes/navy/source/img/icon-github-mobile.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 12.228c0 4.077 2.722 7.535 6.497 8.756.475.085.648-.2.648-.445 0-.219-.008-.8-.012-1.57-2.643.558-3.2-1.236-3.2-1.236-.433-1.067-1.056-1.35-1.056-1.35-.862-.572.066-.561.066-.561.953.065 1.455.951 1.455.951.847 1.41 2.224 1.003 2.765.766.086-.596.332-1.002.603-1.233-2.11-.233-4.327-1.025-4.327-4.56 0-1.008.37-1.832.978-2.477-.098-.233-.424-1.172.093-2.442 0 0 .797-.248 2.612.946A9.351 9.351 0 0 1 12 7.463c.807.003 1.62.105 2.379.31 1.813-1.194 2.61-.946 2.61-.946.518 1.27.192 2.209.094 2.442.61.645.977 1.47.977 2.476 0 3.545-2.222 4.326-4.338 4.554.341.285.645.848.645 1.709 0 1.233-.012 2.228-.012 2.531 0 .247.172.534.653.444 3.773-1.223 6.492-4.68 6.492-8.755C21.5 7.131 17.246 3 12 3s-9.5 4.131-9.5 9.228z" fill="#939BA1" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 836 B

3
themes/navy/source/img/icon-gitter-mobile.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="22" viewBox="0 0 14 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H0V14H2V0ZM14 3H12V14H14V3ZM4 3H6V22H4V3ZM10 3H8V22H10V3Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 232 B

3
themes/navy/source/img/icon-menu.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 7C4 6.44727 4.44775 6 5 6H19C19.5522 6 20 6.44727 20 7C20 7.28516 19.8811 7.54102 19.6903 7.72266C19.5109 7.89453 19.2677 8 19 8H5C4.44775 8 4 7.55273 4 7ZM4 17C4 16.4473 4.44775 16 5 16H19C19.1147 16 19.2251 16.0195 19.3278 16.0547C19.463 16.1016 19.5851 16.1777 19.687 16.2734C19.8798 16.4551 20 16.7129 20 17C20 17.5527 19.5522 18 19 18H5C4.44775 18 4 17.5527 4 17ZM5 11C4.44775 11 4 11.4473 4 12C4 12.5527 4.44775 13 5 13H15C15.3312 13 15.6249 12.8398 15.8068 12.5918C15.9282 12.4258 16 12.2207 16 12C16 11.6387 15.8087 11.3223 15.5221 11.1465C15.3701 11.0527 15.1913 11 15 11H5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 755 B

1
themes/navy/source/img/icon-twitter-mobile.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.27 8.877c0-.15-.003-.3-.01-.449A7.08 7.08 0 0 0 21 6.629a6.983 6.983 0 0 1-2.003.547 3.488 3.488 0 0 0 1.534-1.922 7.006 7.006 0 0 1-2.215.844A3.49 3.49 0 0 0 15.77 5a3.482 3.482 0 0 0-3.398 4.266 9.915 9.915 0 0 1-7.189-3.63 3.468 3.468 0 0 0 1.08 4.638 3.472 3.472 0 0 1-1.58-.434v.044A3.48 3.48 0 0 0 7.48 13.29a3.51 3.51 0 0 1-1.575.06 3.49 3.49 0 0 0 3.258 2.412 7.016 7.016 0 0 1-4.332 1.487c-.281 0-.559-.015-.832-.048a9.903 9.903 0 0 0 5.346 1.56c6.416 0 9.924-5.293 9.924-9.884z" fill="#939BA1" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 607 B

4
themes/navy/source/img/nimbus.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M28 0C12.536 0 0 12.5362 0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.5362 43.464 0 28 0Z" fill="#FF9C00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.1021 26.7727C29.5115 26.9191 30.9209 27.0654 32.6536 26.9691C37.3482 26.708 40.1917 24.3042 39.99 20.7111C39.7842 17.0553 36.0013 14.803 32.2159 15.0136C26.0472 15.3565 21.5108 20.7597 21 26.9353C21.8377 26.7395 22.7195 26.6226 23.5511 26.5764C25.2837 26.4801 26.6929 26.6264 28.1021 26.7727ZM16.0096 34.7648C16.2044 38.116 19.7884 40.1805 23.3746 39.9876C29.2185 39.6731 33.5162 34.7202 34 29.0592C33.2063 29.2387 32.3711 29.346 31.5833 29.3883C29.9419 29.4766 28.6067 29.3424 27.2715 29.2083C25.9363 29.0742 24.6011 28.9401 22.9595 29.0284C18.5125 29.2677 15.8182 31.4711 16.0096 34.7648Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 937 B

36
themes/navy/source/js/mobile_nav.js
View File

@ -1,22 +1,26 @@
(function() {
'use strict';
$(document).ready(function () {
var body = document.getElementsByTagName('body')[0];
var navToggle = document.getElementById('mobile-nav-toggle');
var dimmer = document.getElementById('mobile-nav-dimmer');
var CLASS_NAME = 'mobile-nav-on';
if (!navToggle) return;
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
navToggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
body.classList.toggle(CLASS_NAME);
$(window).on('resize', function(event) {
w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
setMenu(w);
});
dimmer.addEventListener('click', function(e) {
if (!body.classList.contains(CLASS_NAME)) return;
function setMenu(w){
if (w < 1199) {
$('.header header').appendTo('.mobile-menu-container .ecosystem');
$('.header .secondary-nav').appendTo('.mobile-menu-container .community');
}else{
$('.mobile-menu-container header').appendTo('.header .header-left');
$('.mobile-menu-container .secondary-nav').insertAfter('.header .header-left');
};
}
e.preventDefault();
body.classList.remove(CLASS_NAME);
setMenu(w);
$('.mobile-menu-trigger, .backdrop, .mobile-menu-container .close').on('click', function () {
$('body').toggleClass('open');
});
}());
});