status-im
/
our-status-site-theme
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improved subheader

This commit is contained in:
Nistor Cristian 2019-03-31 21:37:33 +03:00
parent 0149455a4d
commit e3bed1cfb6
8 changed files with 3718 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
assets/css/style.css
View File

@ -62,10 +62,13 @@ blockquote {
.sub-header {
border-top: 1px solid #EAECEF;
border-bottom: 1px solid #EAECEF;
padding: 0 40px;
padding: 0 25px;
font-family: "Manrope", sans-serif;
display: flex;
justify-content: space-between; }
.sub-header .contribute {
display: flex;
align-items: center; }
.sub-header nav {
white-space: nowrap; }
.sub-header nav ul {
@ -73,7 +76,8 @@ blockquote {
margin: 0 0 0 -20px;
padding: 0;
width: 100%;
display: flex; }
display: flex;
justify-content: center; }
.sub-header nav ul li {
margin: 0 10px;
display: flex; }
@ -122,7 +126,8 @@ blockquote {
width: 320px;
border-radius: 4px;
max-height: 70vh;
overflow: auto; }
overflow: auto;
text-align: left; }
#search-form #search-results a {
color: #000000;
display: block;
@ -417,17 +422,29 @@ blockquote {
.home-template:not(.end-posts) .loop-grid .post:nth-last-child(-n+2) {
display: none; }
@media screen and (max-width: 1499px) {
.sub-header nav ul li {
margin: 0 5px;
display: flex; } }
@media screen and (max-width: 1199px) {
.sub-header {
padding: 0 25px 0 20px;
overflow: auto; }
.sub-header nav ul li {
margin-right: 0; }
.sub-header nav ul li:last-child {
margin-right: 15px; }
.sub-header nav ul li a {
padding: 10px; }
.sub-header nav {
width: 100%; }
.sub-header nav ul {
margin: 0; }
.sub-header nav ul li {
margin-right: 0; }
.sub-header nav ul li:last-child {
margin-right: 15px; }
.sub-header nav ul li a {
padding: 10px; }
.sub-header #search-form {
display: none;
height: 46px; }
.sub-header .contribute {
display: none; }
.blog-intro {
padding: 60px 0; }
@ -487,7 +504,12 @@ blockquote {
iframe[src*="https://www.youtube.com/"] {
height: calc(500px / 1.77777778) !important; }
.related-posts h3 {
margin-left: 0; } }
margin-left: 0; }
.sub-header nav ul {
justify-content: flex-start;
margin: 0 -15px; }
.sub-header nav ul li:last-child {
padding-right: 10px; } }
@media screen and (max-width: 575px) {
iframe[src*="https://www.youtube.com/"] {

2
assets/js/main.js
View File

@ -5,7 +5,7 @@ $(document).ready(function ($) {
'infinite-scroll': true,
'infinite-scroll-step': 9999,
'content-api-host': 'http://localhost:2368',
'content-api-key': '8a13e02a8917186f02014db742',
'content-api-key': '1bfefb2fd10a5cb7230c8f220b',
};
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),

40
assets/scss/style.scss
View File

@ -101,10 +101,14 @@ blockquote{
.sub-header{
border-top: 1px solid $lighter-grey;
border-bottom: 1px solid $lighter-grey;
padding: 0 40px;
padding: 0 25px;
font-family: $manrope;
display: flex;
justify-content: space-between;
.contribute{
display: flex;
align-items: center;
}
nav{
white-space: nowrap;
ul{
@ -113,6 +117,7 @@ blockquote{
padding: 0;
width: 100%;
display: flex;
justify-content: center;
li{
margin: 0 10px;
display: flex;
@ -178,6 +183,7 @@ blockquote{
border-radius: 4px;
max-height: 70vh;
overflow: auto;
text-align: left;
a{
color: $black;
display: block;
@ -589,12 +595,27 @@ blockquote{
}
}
@media screen and (max-width: 1499px) {
.sub-header{
nav{
ul{
li {
margin: 0 5px;
display: flex;
}
}
}
}
}
@media screen and (max-width: 1199px) {
.sub-header{
padding: 0 25px 0 20px;
overflow: auto;
nav{
width: 100%;
ul{
margin: 0;
li{
margin-right: 0;
&:last-child{
@ -608,6 +629,10 @@ blockquote{
}
#search-form{
display: none;
height: 46px;
}
.contribute{
display: none;
}
}
.blog-intro {
@ -705,6 +730,19 @@ blockquote{
margin-left: 0;
}
}
.sub-header{
nav{
ul{
justify-content: flex-start;
margin: 0 -15px;
li{
&:last-child{
padding-right: 10px;
}
}
}
}
}
}
@media screen and (max-width: 575px) {

3607
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

20
partials/theme_footer.hbs
View File

@ -71,7 +71,7 @@
<h5>Connect</h5>
<ul>
<li>
<a href="#">
<a href="https://get.status.im/chat/public/status">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect width="26" height="26" rx="2" fill="white"/>
@ -81,7 +81,7 @@
</a>
</li>
<li>
<a href="#">
<a href="https://www.facebook.com/ethstatus">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect width="26" height="26" rx="2" fill="white"/>
@ -91,7 +91,7 @@
</a>
</li>
<li>
<a href="#">
<a href="https://twitter.com/ethstatus">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect width="26" height="26" rx="2" fill="white"/>
@ -101,7 +101,7 @@
</a>
</li>
<li>
<a href="#">
<a href="https://chat.status.im/#/register">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect width="26" height="26" rx="2" fill="white"/>
@ -111,7 +111,7 @@
</a>
</li>
<li>
<a href="#">
<a href="https://github.com/status-im">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect width="26" height="26" rx="2" fill="white"/>
@ -121,17 +121,17 @@
</a>
</li>
<li>
<a href="#">
<svg width="36" height="26" viewBox="0 0 36 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<a href="https://www.reddit.com/r/statusim/">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect width="26" height="26" rx="2" fill="white"/>
<path d="M17.7002 7.6001C18.5286 7.6001 19.2002 6.92852 19.2002 6.1001C19.2002 5.27167 18.5286 4.6001 17.7002 4.6001C16.8718 4.6001 16.2002 5.27167 16.2002 6.1001C16.2002 6.92852 16.8718 7.6001 17.7002 7.6001Z" fill="black"/>
<rect width="26" height="26" rx="2" fill="white"></rect>
<path d="M21.9998 13.2212C21.9859 12.836 21.8622 12.4631 21.6438 12.1474C21.4253 11.8318 21.1214 11.5868 20.7686 11.4422C20.4158 11.2975 20.0292 11.2593 19.6554 11.3321C19.2817 11.405 18.9367 11.5857 18.6621 11.8527C17.1249 10.7944 15.3179 10.2097 13.4596 10.1693L14.338 5.89943L17.2297 6.51528C17.2641 6.83891 17.4113 7.13955 17.6448 7.36321C17.8783 7.58688 18.1829 7.71892 18.5038 7.73565C18.8248 7.75237 19.1412 7.65268 19.3961 7.45447C19.651 7.25626 19.8279 6.9725 19.8949 6.65414C19.9619 6.33579 19.9146 6.00367 19.7616 5.71741C19.6086 5.43115 19.3599 5.20949 19.0601 5.09222C18.7603 4.97496 18.429 4.96976 18.1257 5.07757C17.8225 5.18538 17.5671 5.39913 17.4054 5.68045L14.0947 5.00985C14.0406 4.99782 13.9846 4.9968 13.9301 5.00683C13.8755 5.01687 13.8235 5.03777 13.777 5.06832C13.7305 5.09887 13.6904 5.13847 13.6592 5.18482C13.6279 5.23116 13.606 5.28334 13.5948 5.33831L12.5948 10.0872C10.7137 10.1159 8.88184 10.7011 7.32479 11.7706C7.11648 11.5721 6.86805 11.4218 6.5967 11.3302C6.32535 11.2386 6.03758 11.2079 5.75333 11.2401C5.46908 11.2723 5.19515 11.3668 4.95053 11.5169C4.7059 11.667 4.49643 11.8692 4.33663 12.1094C4.17683 12.3497 4.07052 12.6223 4.02507 12.9083C3.97962 13.1943 3.99611 13.4869 4.07341 13.7658C4.15071 14.0447 4.28696 14.3032 4.47273 14.5235C4.65849 14.7438 4.88933 14.9205 5.14923 15.0415C5.13402 15.2419 5.13402 15.4432 5.14923 15.6436C5.14923 18.7092 8.67608 21.2 13.0272 21.2C17.3784 21.2 20.9052 18.7092 20.9052 15.6436C20.9204 15.4432 20.9204 15.2419 20.9052 15.0415C21.2387 14.8736 21.5184 14.6136 21.7121 14.2915C21.9058 13.9694 22.0055 13.5983 21.9998 13.2212ZM8.4869 14.5898C8.4869 14.3191 8.56615 14.0545 8.71463 13.8295C8.86311 13.6044 9.07416 13.429 9.32107 13.3254C9.56799 13.2218 9.83968 13.1947 10.1018 13.2475C10.3639 13.3003 10.6047 13.4307 10.7937 13.6221C10.9827 13.8135 11.1114 14.0573 11.1635 14.3228C11.2156 14.5883 11.1889 14.8635 11.0866 15.1136C10.9843 15.3636 10.8111 15.5774 10.5889 15.7277C10.3667 15.8781 10.1054 15.9584 9.83819 15.9584C9.66073 15.9584 9.48502 15.923 9.32107 15.8542C9.15713 15.7854 9.00816 15.6846 8.88268 15.5575C8.7572 15.4305 8.65767 15.2796 8.58976 15.1136C8.52185 14.9475 8.4869 14.7695 8.4869 14.5898ZM16.3379 18.3534C15.3792 19.0851 14.1996 19.4575 13.0002 19.4072C11.8008 19.4575 10.6212 19.0851 9.66252 18.3534C9.60506 18.2825 9.57569 18.1925 9.58013 18.1008C9.58458 18.0092 9.62251 17.9225 9.68656 17.8577C9.7506 17.7928 9.83618 17.7544 9.92665 17.7499C10.0171 17.7454 10.106 17.7751 10.176 17.8333C10.9884 18.4369 11.9801 18.7411 12.9867 18.6955C13.9945 18.751 14.9908 18.4565 15.8109 17.8607C15.8826 17.7899 15.9791 17.7509 16.0792 17.7522C16.1287 17.7528 16.1777 17.7633 16.2232 17.7831C16.2688 17.8029 16.31 17.8316 16.3446 17.8675C16.3792 17.9035 16.4065 17.946 16.4249 17.9926C16.4433 18.0392 16.4524 18.0891 16.4518 18.1393C16.4512 18.1894 16.4408 18.239 16.4212 18.2852C16.4017 18.3313 16.3734 18.3731 16.3379 18.4081V18.3534ZM16.0946 16.0131C15.8274 16.0131 15.5661 15.9329 15.3439 15.7825C15.1217 15.6321 14.9485 15.4184 14.8462 15.1683C14.7439 14.9182 14.7172 14.643 14.7693 14.3776C14.8215 14.1121 14.9502 13.8682 15.1391 13.6768C15.3281 13.4854 15.5689 13.3551 15.831 13.3023C16.0931 13.2495 16.3648 13.2766 16.6118 13.3802C16.8587 13.4837 17.0697 13.6592 17.2182 13.8842C17.3667 14.1093 17.4459 14.3739 17.4459 14.6446C17.4533 14.83 17.4233 15.015 17.3578 15.1883C17.2924 15.3617 17.1928 15.5197 17.0651 15.6528C16.9375 15.786 16.7844 15.8914 16.6152 15.9628C16.4461 16.0341 16.2644 16.0699 16.0811 16.0679L16.0946 16.0131Z" fill="black"></path>
</g>
</svg>
</a>
</li>
<li>
<a href="#">
<a href="https://www.youtube.com/statusim">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect width="26" height="26" rx="2" fill="white"/>

2
partials/theme_head.hbs
View File

@ -31,6 +31,6 @@
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,600|IBM+Plex+Sans:400,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{> "url"}}/css/style.css" />
<link rel="stylesheet" type="text/css" href="{{> "url"}}/css/main.css" />
<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />

28
partials/theme_header.hbs
View File

@ -1,10 +1,10 @@
<header>
<div class="col">
<a href="https://status.hauntedthemes.com/" class="logo"><img src="https://status.hauntedthemes.com/img/logo.svg"></a>
<a href="{{> "url"}}/" class="logo"><img src="{{> "url"}}/img/logo.svg"></a>
</div>
<nav>
<ul>
<li><a href="https://status.hauntedthemes.com/features/">Features</a></li>
<li><a href="{{> "url"}}/features/">Features</a></li>
<li class="has-submenu">
<a href="/">Get Involved <i class="arrow"></i></a>
<div class="submenu">
@ -66,32 +66,32 @@
</div>
</div>
</li>
<li><a href="https://status.hauntedthemes.com/security/">Security</a></li>
<li><a href="{{> "url"}}/security/">Security</a></li>
<li class="has-submenu ">
<a href="#">Docs <i class="arrow"></i></a>
<a href="{{> "url"}}/docs/">Docs <i class="arrow"></i></a>
<div class="submenu">
<div class="container">
<div class="row">
<div class="col-md-5 text-right">
<h4>Documentation</h4>
<p class="p-large">Everything you need to start <br>developing with Status</p>
<a href="#" class="link-arrow">Read all</a>
<a href="{{> "url"}}/docs/" class="link-arrow">Read all</a>
</div>
<div class="col-md-4 offset-md-1">
<ul>
<li><a href="#" class="link-arrow">Getting Started</a></li>
<li><a href="#" class="link-arrow">Developer Tools</a></li>
<li><a href="#" class="link-arrow">Build Status</a></li>
<li><a href="#" class="link-arrow">Research</a></li>
<li><a href="#" class="link-arrow">Nightlies</a></li>
<li><a href="#" class="link-arrow">Tutorials</a></li>
<li><a href="{{> "url"}}/contribute/" class="link-arrow">Contribute</a></li>
<li><a href="{{> "url"}}/developer_tools/" class="link-arrow">Developer Tools</a></li>
<li><a href="{{> "url"}}/build_status/" class="link-arrow">Build Status</a></li>
<li><a href="{{> "url"}}/research/" class="link-arrow">Research</a></li>
<li><a href="{{> "url"}}/nightly/" class="link-arrow">Nightlies</a></li>
<li><a href="{{> "url"}}/tutorials/" class="link-arrow">Tutorials</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a href="https://status.hauntedthemes.com/about/">About</a></li>
<li><a href="{{> "url"}}/about/">About</a></li>
<li class="active"><a href="/">Blog</a></li>
</ul>
</nav>
@ -101,7 +101,7 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 11.2793C-0.000298842 16.1348 3.02955 20.4456 7.52152 21.9808C8.07188 22.0837 8.27249 21.7358 8.27249 21.4367C8.27249 21.1688 8.26325 20.4596 8.25797 19.5189C5.19868 20.1997 4.5533 18.0072 4.5533 18.0072C4.05178 16.7038 3.33117 16.356 3.33117 16.356C2.33208 15.6576 3.4064 15.6712 3.4064 15.6712C4.51107 15.751 5.09178 16.8338 5.09178 16.8338C6.07239 18.5567 7.66538 18.0586 8.29229 17.7703C8.39259 17.0422 8.67635 16.5455 8.99178 16.2626C6.54883 15.9784 3.98051 15.0107 3.98051 10.6893C3.98051 9.45765 4.40944 8.45071 5.11289 7.66302C4.99939 7.37745 4.62193 6.22976 5.22112 4.67739C5.22112 4.67739 6.14498 4.37422 8.24477 5.83456C9.1425 5.5836 10.0687 5.45572 10.9992 5.45425C11.9292 5.45552 12.8549 5.58295 13.7523 5.8332C15.8508 4.37422 16.7746 4.67739 16.7746 4.67739C17.3738 6.22976 16.9963 7.37745 16.8828 7.66302C17.5889 8.45071 18.0139 9.45765 18.0139 10.6893C18.0139 15.0215 15.4416 15.9757 12.9921 16.2545C13.3867 16.6023 13.7391 17.2912 13.7391 18.3428C13.7391 19.8505 13.7259 21.0673 13.7259 21.4367C13.7259 21.7385 13.9239 22.0891 14.4808 21.9795C19.8103 20.1557 22.9429 14.5062 21.7459 8.877C20.5489 3.24775 15.4072 -0.551533 9.82107 0.065584C4.23498 0.682701 0.000354915 5.51783 0 11.2793H0Z" fill="#4360DF"/>
</svg>
</a>
<a href="https://status.hauntedthemes.com/get/" class="btn btn-purple btn-arrow">Get Status</a>
<a href="{{> "url"}}/get/" class="btn btn-purple btn-arrow">Get Status</a>
</div>
<a href="#" class="mobile-nav-trigger">
<svg width="22" height="8" viewbox="0 0 22 8" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -111,7 +111,7 @@
</a>
<div class="mobile-nav">
<div class="mobile-nav-header">
<a href="https://status.hauntedthemes.com/" class="logo"><img src="https://status.hauntedthemes.com/img/logo.svg"></a>
<a href="{{> "url"}}/" class="logo"><img src="{{> "url"}}/img/logo.svg"></a>
<a href="#" class="mobile-nav-trigger-close">
<svg width="18" height="17" viewbox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5752" y="0.368273" width="22" height="1" rx="0.5" transform="rotate(45 1.5752 0.368273)" fill="#090909"/>

19
partials/theme_subheader.hbs
View File

@ -1,7 +1,16 @@
<div class="sub-header">
{{navigation}}
<form action="/" id="search-form">
<input id="search-input" placeholder="Search blog…">
<div id="search-results"></div>
</form>
<div class="container-fluid">
<div class="row">
<div class="col contribute">
<a href="#" class="link-arrow">Contribute</a>
</div>
{{navigation}}
<div class="col text-right">
<form action="/" id="search-form">
<input id="search-input" placeholder="Search blog…">
<div id="search-results"></div>
</form>
</div>
</div>
</div>
</div>