Improved responsve for docs.
Fixed images on homepage. Created submenu. Improved responsive on homepage.
This commit is contained in:
Nistor Cristian
parent
2a6295eb66
commit
8d885ac5ae
|
|
@ -15,61 +15,48 @@
|
|||
<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>
|
||||
<a href="https://github.com/status-im/nimbus">Learn More on Github <img src="../img/arrow_orange.svg" /></a>
|
||||
<div class="work-item">
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Beginnings</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
<div class="work-items">
|
||||
<div class="work-item">
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Research</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
</div>
|
||||
<img class="work-item-image" src="../img/graphic-research.svg" />
|
||||
</div>
|
||||
<img class="work-item-image work-item-image-right" src="../img/graphic-friendly-beginnings.svg" />
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="work-item">
|
||||
<img class="work-item-image" src="../img/graphic-research.svg" />
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Research</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
<div class="work-item">
|
||||
<img class="work-item-image work-item-image-right" src="../img/graphic-licensing.svg" />
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Licensing</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-item">
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Networking</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
</div>
|
||||
<img class="work-item-image" src="../img/graphic-network.svg" />
|
||||
</div>
|
||||
<div class="work-item">
|
||||
<img class="work-item-image work-item-image-right" src="../img/graphic-platform-support.svg" />
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Platform Support</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="work-item">
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Licensing</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
</div>
|
||||
<img class="work-item-image work-item-image-right" src="../img/graphic-licensing.svg" />
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="work-item">
|
||||
<img class="work-item-image" src="../img/graphic-network.svg" />
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Networking</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="work-item">
|
||||
<div class="work-item-inner">
|
||||
<h2>Friendly Platform Support</h2>
|
||||
<p>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!
|
||||
</p>
|
||||
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
|
||||
</div>
|
||||
<img class="work-item-image work-item-image-right" src="../img/graphic-platform-support.svg" />
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="sections">
|
||||
<div class="inner-header">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
<div class="page-intro wrapper">
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">{{ page.title }}</h1>
|
||||
<a href="{{ raw_link(page.source) }}" class="article-edit-link" title="{{ __('page.improve') }}">Edit on Github</a>
|
||||
</header>
|
||||
</div>
|
||||
<div id="content-wrap">
|
||||
<div id="content" class="wrapper">
|
||||
<div id="content-inner">
|
||||
{{ partial('partial/sidebar') }}
|
||||
<article class="article-container" itemscope itemtype="http://schema.org/Article">
|
||||
<div class="article-inner">
|
||||
<div class="article">
|
||||
<div class="inner">
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">{{ page.title }}</h1>
|
||||
<a href="{{ raw_link(page.source) }}" class="article-edit-link" title="{{ __('page.improve') }}"><i class="fa fa-pencil"></i></a>
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
{{ page_anchor(page.content) }}
|
||||
</div>
|
||||
|
|
@ -18,16 +21,8 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<aside id="article-toc" role="navigation">
|
||||
<div id="article-toc-inner">
|
||||
<strong class="sidebar-title">{{ __('page.contents') }}</strong>
|
||||
{{ toc(page.content, {list_number: false}) }}
|
||||
<a href="#" id="article-toc-top">{{ __('page.back_to_top') }}</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</article>
|
||||
{{ partial('partial/sidebar') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li class="has-submenu">
|
||||
<a href="#">Status App</a>
|
||||
<a href="#" class="main-link">Status App</a>
|
||||
<i class="mobile-submenu-trigger"></i>
|
||||
<div class="sub-menu">
|
||||
<ul>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</li>
|
||||
<li class="has-submenu">
|
||||
<a href="#">Embark</a>
|
||||
<a href="#" class="main-link">Embark</a>
|
||||
<i class="mobile-submenu-trigger"></i>
|
||||
<div class="sub-menu">
|
||||
<ul>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<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>
|
||||
<a href="/" class="main-link">Nimbus</a>
|
||||
<i class="mobile-submenu-trigger"></i>
|
||||
<div class="sub-menu">
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -19,4 +19,22 @@
|
|||
<span class="title">Community</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-submenu-container-inner">
|
||||
<div class="mobile-menu-header">
|
||||
<a href="#" class="back">
|
||||
<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="M7.00687 12.1016C7.02704 12.3261 7.1228 12.5448 7.29281 12.7143L14.3042 19.7079C14.6926 20.0953 15.3188 20.0988 15.7089 19.7097C16.0963 19.3232 16.0907 18.6911 15.7072 18.3085L9.38119 11.9986L15.7072 5.68865C16.0956 5.30126 16.099 4.67664 15.7089 4.28751C15.3215 3.90107 14.6877 3.9067 14.3042 4.28924L7.29281 11.2828C7.06819 11.5069 6.97231 11.8103 7.00687 12.1016Z" fill="black"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="title">Status app</span>
|
||||
<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="dropdown">
|
||||
<nav></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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%;
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
<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 width="281" height="260" viewBox="0 0 281 260" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="86" cy="174" r="86" fill="#FFF5E5"/>
|
||||
<circle opacity="0.3" cx="148.5" cy="112.5" r="85.5" stroke="#FFA000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 10"/>
|
||||
<circle cx="197" cy="229" r="15" fill="#FFC05C"/>
|
||||
<circle cx="182" cy="36" r="8" fill="#FF9C00"/>
|
||||
<circle cx="273" cy="113" r="8" fill="#FF9C00"/>
|
||||
<circle cx="234" cy="128" r="8" fill="#FFF5E5"/>
|
||||
<circle cx="258" cy="153" r="8" fill="#FFF5E5"/>
|
||||
<circle cx="197" cy="52" r="6" fill="#FFF5E5"/>
|
||||
<circle cx="36" cy="82" r="6" fill="#FFF5E5"/>
|
||||
<circle opacity="0.8" cx="44" cy="64" r="6" fill="#FFB033"/>
|
||||
<circle opacity="0.3" cx="13" cy="44" r="6" fill="#FF9C00"/>
|
||||
<path d="M118 158L149.177 140L180.655 194.521C181.071 195.242 180.476 196.126 179.652 196.012L159.088 193.167L151.27 212.398C150.957 213.168 149.894 213.242 149.478 212.521L118 158Z" fill="#FFCD80"/>
|
||||
<path d="M104.5 140L135.677 158L104.199 212.521C103.783 213.242 102.72 213.168 102.407 212.398L94.5885 193.167L74.0254 196.012C73.2011 196.126 72.6062 195.242 73.0223 194.521L104.5 140Z" fill="#FFCD80"/>
|
||||
<circle cx="128" cy="137" r="39" fill="#FF9C00" stroke="white" stroke-width="4"/>
|
||||
<circle cx="128" cy="137" r="14" fill="white" fill-opacity="0.2" stroke="white" stroke-width="6"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 617 B After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="280" height="260" viewBox="0 0 280 260" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="137" cy="130" r="124" stroke="#FFECCE" stroke-width="2" stroke-linecap="round" stroke-dasharray="10 10"/>
|
||||
<circle opacity="0.1" cx="137" cy="130" r="84" stroke="#FF9C00" stroke-width="3" stroke-linecap="round" stroke-dasharray="10 10"/>
|
||||
<circle cx="137" cy="130" r="53" fill="#FFF5E5"/>
|
||||
<circle cx="244" cy="187" r="17" fill="#FF9C00"/>
|
||||
<circle cx="37" cy="58" r="14" fill="#FFE5BB"/>
|
||||
<circle cx="67" cy="86" r="6" fill="#FF9C00"/>
|
||||
<circle cx="137" cy="153" r="9" fill="#FF9C00"/>
|
||||
<circle cx="210" cy="30" r="7" fill="#FF9C00"/>
|
||||
<circle cx="190" cy="196" r="9" fill="#FFE5BB"/>
|
||||
<circle cx="37" cy="198" r="7" fill="#FF9C00"/>
|
||||
<rect x="110.761" y="70" width="62" height="112" rx="8" transform="rotate(5 110.761 70)" fill="#FF9C00"/>
|
||||
<rect opacity="0.7" x="109.89" y="79.9619" width="62" height="92" transform="rotate(5 109.89 79.9619)" fill="white"/>
|
||||
<rect opacity="0.8" x="134.234" y="77.0728" width="14" height="2" rx="1" transform="rotate(5 134.234 77.0728)" fill="white"/>
|
||||
<circle opacity="0.2" cx="136.763" cy="128.489" r="17" transform="rotate(5 136.763 128.489)" fill="#FF9C00"/>
|
||||
<circle opacity="0.2" cx="136.763" cy="128.489" r="11" transform="rotate(5 136.763 128.489)" fill="#FF9C00"/>
|
||||
<circle cx="136.763" cy="128.489" r="6" fill="#FF9C00"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,25 +1,15 @@
|
|||
<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 width="280" height="260" viewBox="0 0 280 260" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="74" cy="168" r="32" fill="#FFF5E5"/>
|
||||
<circle cx="42" cy="228" r="21" fill="#FF9C00"/>
|
||||
<path d="M280 157C280 200.63 244.63 236 201 236C157.37 236 122 200.63 122 157C122 113.37 157.37 78 201 78C244.63 78 280 113.37 280 157Z" fill="#FFF5E5"/>
|
||||
<circle cx="232.5" cy="236.5" r="13.5" fill="#FF9C00"/>
|
||||
<circle cx="229" cy="178" r="9" fill="#FFC05C"/>
|
||||
<circle cx="154" cy="57" r="10" fill="#FFCD80"/>
|
||||
<circle cx="178" cy="40" r="6" fill="#FF9C00"/>
|
||||
<circle cx="58" cy="196" r="6" fill="#FF9C00"/>
|
||||
<circle cx="36" cy="178" r="6" fill="#FFE5BB"/>
|
||||
<circle cx="58" cy="62" r="54" fill="#FFF5E5"/>
|
||||
<circle cx="131" cy="145" r="70" fill="#FF9C00"/>
|
||||
<path opacity="0.4" d="M131.351 120C131.351 120 128.371 122.386 125.303 124.773C122.148 124.685 116.013 125.392 112.683 126.629C109.616 124.596 106.899 122.475 106.899 122.475C106.899 122.475 104.62 126.452 103.13 128.839C100.939 129.988 98.836 131.314 96.9079 132.993C94.6292 132.109 92.0876 131.048 92 130.96C94.9798 136.97 96.9955 142.981 102.342 146.605C111.018 132.905 151.07 134.142 159.834 146.516C165.53 143.511 167.721 137.059 170 131.137C169.737 131.225 166.67 132.286 164.742 132.993C163.602 131.667 160.798 129.723 159.22 128.75C157.73 126.01 155.539 122.21 155.539 122.21C155.539 122.21 152.998 124.154 149.93 126.276C145.899 125.48 140.991 124.596 136.872 124.861C134.155 122.563 131.351 120 131.351 120Z" fill="white"/>
|
||||
<path opacity="0.7" d="M95.0674 143.776C95.0674 143.776 99.2742 154.029 102.166 161.189C114.524 177.629 146.074 178.778 159.834 161.542C163.076 154.118 167.458 143.776 167.458 143.776C163.953 149.079 158.169 152.703 154.663 154.648C152.121 156.062 146.337 156.858 146.337 156.858L131.088 148.903L115.751 156.681C115.751 156.681 110.054 155.797 107.425 154.56C102.254 151.643 98.7483 148.284 95.0674 143.776Z" fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,14 +1,22 @@
|
|||
<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 width="280" height="260" viewBox="0 0 280 260" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle opacity="0.8" cx="27" cy="191" r="9" fill="#FF9C00"/>
|
||||
<circle cx="138" cy="251" r="9" fill="#FFE5BB"/>
|
||||
<circle opacity="0.8" cx="254" cy="67" r="9" fill="#FF9C00"/>
|
||||
<circle cx="245" cy="198" r="6" fill="#FFE5BB"/>
|
||||
<circle cx="268" cy="128" r="9" fill="#FFE5BB"/>
|
||||
<circle opacity="0.8" cx="152" cy="23" r="9" fill="#FFE5BB"/>
|
||||
<circle cx="235.5" cy="107.5" r="12.5" fill="#FFF5E5"/>
|
||||
<circle cx="13.5" cy="155.5" r="12.5" fill="#FFE5BB"/>
|
||||
<circle cx="86.5" cy="92.5" r="52.5" fill="#FFF5E5"/>
|
||||
<path opacity="0.3" d="M223 143C223 174.48 197.48 200 166 200C134.52 200 109 174.48 109 143C109 111.52 134.52 86 166 86C197.48 86 223 111.52 223 143Z" stroke="#FFA000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 10"/>
|
||||
<path opacity="0.5" d="M166 210C128.997 210 99 180.003 99 143C99 105.997 128.997 76 166 76" stroke="#FFA000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 10"/>
|
||||
<path d="M149.679 187.089C154.763 188.972 160.261 190 166 190C191.957 190 213 168.957 213 143C213 122.751 200.195 105.493 182.241 98.8816L179.301 107.393C193.728 112.784 204 126.692 204 143C204 163.987 186.987 181 166 181C161.423 181 157.035 180.191 152.972 178.708L149.679 187.089Z" fill="#FFA000"/>
|
||||
<path d="M198 143C198 160.673 183.673 175 166 175C164.963 175 163.938 174.951 162.926 174.854L163.791 165.895C164.518 165.965 165.255 166 166 166C178.703 166 189 155.703 189 143C189 130.297 178.703 120 166 120C153.297 120 143 130.297 143 143H134C134 125.327 148.327 111 166 111C183.673 111 198 125.327 198 143Z" fill="#FFF3E0"/>
|
||||
<circle opacity="0.2" cx="166" cy="143" r="10" stroke="#FFA000" stroke-width="4"/>
|
||||
<circle cx="166" cy="143" r="4" fill="#FFA000"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M166 195C137.281 195 114 171.719 114 143C114 114.281 137.281 91.0001 166 91.0001C168.272 91.0001 170.511 91.1458 172.706 91.4285L173.889 82.5056C171.307 82.172 168.673 82.0001 166 82.0001C132.311 82.0001 105 109.311 105 143C105 176.689 132.311 204 166 204V195Z" fill="#FFEED0"/>
|
||||
<path opacity="0.3" d="M98 181C98 194.255 87.2548 205 74 205C60.7452 205 50 194.255 50 181C50 167.745 60.7452 157 74 157C87.2548 157 98 167.745 98 181Z" stroke="#FFA000" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
|
||||
<path d="M74 195C81.732 195 88 188.732 88 181C88 173.268 81.732 167 74 167V181L62.6069 189.138C65.1465 192.687 69.3031 195 74 195Z" fill="#FFA000"/>
|
||||
<circle cx="193.5" cy="62.5" r="9.5" stroke="#FFECCC" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 6"/>
|
||||
<circle cx="193.5" cy="62.5" r="4.5" fill="#FFA000"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 2.6 KiB |
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue