Responsive menu.
This commit is contained in:
Nistor Cristian
parent
256a77ea6c
commit
2a6295eb66
|
|
@ -1,69 +1,5 @@
|
||||||
<div class="home-cover">
|
<div class="home-cover">
|
||||||
<div class="header">
|
{{ partial('partial/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>
|
|
||||||
<div class="intro">
|
<div class="intro">
|
||||||
<h1>Nimbus</h1>
|
<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>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,15 @@
|
||||||
<div id="header" class="wrapper">
|
<div class="header">
|
||||||
<div id="header-inner" class="inner">
|
<div class="header-left">
|
||||||
<div id="logo-wrap-page">
|
<div class="logo-wrap">
|
||||||
<span class="logo-span"><a href="{{ url_for_lang('') }}" id="logo"></a></span>
|
<span class="logo-span"><a class="logo" href="/"></a></span>
|
||||||
<span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
|
<span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
|
||||||
</div>
|
</div>
|
||||||
<header class="dropdown">
|
<header class="dropdown">
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="has-submenu"><a href="#">Status App</a>
|
<li class="has-submenu">
|
||||||
|
<a href="#">Status App</a>
|
||||||
|
<i class="mobile-submenu-trigger"></i>
|
||||||
<div class="sub-menu">
|
<div class="sub-menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://status/im">About</a></li>
|
<li><a href="https://status/im">About</a></li>
|
||||||
|
|
@ -19,8 +21,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="has-submenu">
|
||||||
<li class="has-submenu"><a href="#">Embark</a>
|
<a href="#">Embark</a>
|
||||||
|
<i class="mobile-submenu-trigger"></i>
|
||||||
<div class="sub-menu">
|
<div class="sub-menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://embark.status.im">About</a></li>
|
<li><a href="https://embark.status.im">About</a></li>
|
||||||
|
|
@ -30,12 +33,11 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li><a href="https://our.status.im/tag/studio">Studio</a></li>
|
<li><a href="https://our.status.im/tag/studio">Studio</a></li>
|
||||||
|
|
||||||
<li><a href="https://status.im/incubate">Incubate</a></li>
|
<li><a href="https://status.im/incubate">Incubate</a></li>
|
||||||
|
<li class="current has-submenu">
|
||||||
<li class="current has-submenu"><a href="/">Nimbus</a>
|
<a href="/">Nimbus</a>
|
||||||
|
<i class="mobile-submenu-trigger"></i>
|
||||||
<div class="sub-menu">
|
<div class="sub-menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">About</a></li>
|
<li><a href="#">About</a></li>
|
||||||
|
|
@ -45,34 +47,27 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
|
<li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
|
||||||
|
|
||||||
<li><a href="https://our.status.im">Community</a></li>
|
<li><a href="https://our.status.im">Community</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
</div>
|
||||||
<div class="secondary-nav">
|
<div class="secondary-nav">
|
||||||
<div id="search-input-wrap" class="standalone">
|
<div id="search-input-wrap">
|
||||||
<div id="search-input-icon">
|
<div id="search-input-icon">
|
||||||
<i class="fa fa-search"></i>
|
<i class="fa fa-search"></i>
|
||||||
</div>
|
</div>
|
||||||
<input type="search" id="search-input" placeholder="Search...">
|
<input type="search" id="search-input" placeholder="Search...">
|
||||||
</div>
|
</div>
|
||||||
|
<span><a href="http://get.status.im/chat/public/status" class="button button--secondary">Status Public Chat</a></span>
|
||||||
<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--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--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>
|
<span class="social-link social-link--github"><a href="https://github.com/status-im" target="_blank"></a></span>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
||||||
<a id="mobile-nav-toggle">
|
<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"/>
|
||||||
<span class="mobile-nav-toggle-bar"></span>
|
</svg>
|
||||||
<span class="mobile-nav-toggle-bar"></span>
|
|
||||||
<span class="mobile-nav-toggle-bar"></span>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,22 @@
|
||||||
<nav id="mobile-nav">
|
<div class="backdrop"></div>
|
||||||
<div id="mobile-nav-inner">
|
<div class="mobile-menu-container">
|
||||||
<ul id="mobile-nav-list">
|
<div class="mobile-menu-container-inner">
|
||||||
{{ header_menu('mobile-nav') }}
|
<div class="mobile-menu-header">
|
||||||
<li class="mobile-nav-item">
|
<div class="logo-wrap">
|
||||||
<a href="https://github.com/{{ config.github }}" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
|
<span class="logo-span"><a class="logo" href="/"></a></span>
|
||||||
</li>
|
<span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
|
||||||
</ul>
|
</div>
|
||||||
{% if page.layout == 'page' %}
|
<a href="#" class="close">
|
||||||
{{ doc_sidebar('mobile-nav') }}
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
{% endif %}
|
<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>
|
||||||
<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>
|
</div>
|
||||||
</nav>
|
|
||||||
|
|
@ -227,16 +227,161 @@ select[multiple] {
|
||||||
vertical-align: top;
|
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;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin: 24px 0 0 0;
|
margin: 24px auto;
|
||||||
z-index: 9;
|
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 {
|
.header-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -449,7 +594,7 @@ select[multiple] {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1072px) {
|
@media (max-width: 1199px) {
|
||||||
.header {
|
.header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
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 {
|
.home-cover {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -601,7 +716,7 @@ select[multiple] {
|
||||||
padding: 8px 0 0 0;
|
padding: 8px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 710px) {
|
@media (max-width: 991px) {
|
||||||
.intro {
|
.intro {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -721,7 +836,7 @@ select[multiple] {
|
||||||
color: #363763;
|
color: #363763;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1072px) {
|
@media (max-width: 1199px) {
|
||||||
.features {
|
.features {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -764,7 +879,7 @@ select[multiple] {
|
||||||
padding-top: 32px;
|
padding-top: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1072px) {
|
@media (max-width: 1199px) {
|
||||||
.community {
|
.community {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -838,7 +953,7 @@ body {
|
||||||
box-shadow: 0 -20px 11px 0 rgba(43, 55, 107, 0.08);
|
box-shadow: 0 -20px 11px 0 rgba(43, 55, 107, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 710px) {
|
@media (max-width: 991px) {
|
||||||
.home-wrap {
|
.home-wrap {
|
||||||
margin: 400px 0 0 0;
|
margin: 400px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
@ -1078,7 +1193,7 @@ pre {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1072px) {
|
@media (max-width: 1199px) {
|
||||||
.sections {
|
.sections {
|
||||||
margin: 12px 0 0 0;
|
margin: 12px 0 0 0;
|
||||||
padding-bottom: 32px;
|
padding-bottom: 32px;
|
||||||
|
|
@ -1370,3 +1485,33 @@ footer input[type="email"]{
|
||||||
border: 3px solid #ffffff;
|
border: 3px solid #ffffff;
|
||||||
background: #eff0f1;
|
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
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 532 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 596 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 664 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 820 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 617 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 628 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 796 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 836 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 232 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 755 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 607 B |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 937 B |
|
|
@ -1,22 +1,26 @@
|
||||||
(function() {
|
$(document).ready(function () {
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var body = document.getElementsByTagName('body')[0];
|
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||||
var navToggle = document.getElementById('mobile-nav-toggle');
|
|
||||||
var dimmer = document.getElementById('mobile-nav-dimmer');
|
|
||||||
var CLASS_NAME = 'mobile-nav-on';
|
|
||||||
if (!navToggle) return;
|
|
||||||
|
|
||||||
navToggle.addEventListener('click', function(e) {
|
$(window).on('resize', function(event) {
|
||||||
e.preventDefault();
|
w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||||
e.stopPropagation();
|
setMenu(w);
|
||||||
body.classList.toggle(CLASS_NAME);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
dimmer.addEventListener('click', function(e) {
|
function setMenu(w){
|
||||||
if (!body.classList.contains(CLASS_NAME)) return;
|
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');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
setMenu(w);
|
||||||
|
|
||||||
|
$('.mobile-menu-trigger, .backdrop, .mobile-menu-container .close').on('click', function () {
|
||||||
|
$('body').toggleClass('open');
|
||||||
|
});
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
body.classList.remove(CLASS_NAME);
|
|
||||||
});
|
});
|
||||||
}());
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue