status-im
/
status-site-legacy
mirror of https://github.com/status-im/status-site-legacy.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

added fixes to subpages

This commit is contained in:
andmironov 2017-06-05 12:59:21 +03:00
parent a5c56ae160
commit 2740b0ba76
7 changed files with 200 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/css/main.css
View File

@ -197,6 +197,18 @@ a {
color: rgba(255, 255, 255, 0.5);
cursor: default; }
.header-wrap.header-wrap--page {
margin: 30px 0 0 0;
width: 1080px;
height: 130px;
background-color: #4957b8;
background-image: url(../img/new-site/dot.svg);
box-shadow: 0px 10px 14px 0px rgba(79, 90, 166, 0.35);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform: translate3d(0, 0, 0);
transition: transform .6s ease, opacity .3s ease; }
.header {
position: absolute;
display: -ms-flexbox;
@ -210,6 +222,9 @@ a {
opacity: .6;
transition: opacity .2s ease; }
.header-wrap--page .header {
opacity: 1; }
.header:hover {
opacity: 1; }
@ -220,6 +235,9 @@ a {
-ms-flex-pack: justify;
justify-content: space-between; }
.header-wrap--page .header__inner {
width: 1012px; }
.nav {
display: -ms-flexbox;
display: flex;
@ -271,12 +289,22 @@ a.logo {
color: #70808D;
transition: opacity .2s ease, color .2s ease; }
.header-wrap--page .nav a {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.header .nav a {
color: #49555F; }
.header-wrap--page .header .nav a {
color: white; }
.header .nav a:hover {
color: #6673CE; }
.header-wrap--page .header .nav a:hover {
color: white;
opacity: .8; }
.header .nav a.nav__item--blog::before {
content: "";
width: 16px;
@ -350,7 +378,25 @@ li.social-link a {
.header {
top: 20px;
box-sizing: border-box;
padding: 0 20px; } }
padding: 0 20px; }
.header-wrap--page .header {
top: 0;
padding: 0; }
.header-wrap--page .header__inner {
width: 100%;
margin: 40px;
-ms-flex-align: center;
align-items: center; }
.header-wrap--page.header-wrap {
margin: 0 0 0 0;
width: 100%; } }
@media (max-width: 960px) {
.header-wrap--page .nav {
display: none; }
.header-wrap--page a.logo,
.header-wrap--page .shares {
width: auto; } }
@media (max-width: 840px) {
.header {
@ -361,6 +407,10 @@ li.social-link a {
flex-direction: column;
-ms-flex-align: center;
align-items: center; }
.header-wrap--page .header__inner {
margin: 30px;
-ms-flex-direction: row;
flex-direction: row; }
.nav {
-ms-flex-align: center;
align-items: center; }
@ -369,6 +419,38 @@ li.social-link a {
@media (max-width: 767px) {
.header {
display: none; }
.header-wrap--page .header {
display: -ms-flexbox;
display: flex; }
.header-wrap--page .header__inner {
margin: 20px 20px 20px 17px;
-ms-flex-align: start;
align-items: flex-start; }
.header-wrap--page.header-wrap {
height: 92px;
border-radius: 0; }
.header-wrap--page .logo__icon {
height: 48px;
width: 48px;
background-size: 48px;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-positive: 0;
flex-grow: 0; }
.header-wrap--page .logo__title {
font-size: 18px;
line-height: 24px; }
.header-wrap--page .logo__description {
font-size: 14px;
line-height: 15px; }
.header-wrap--page .logo__description span {
display: none; }
.header-wrap--page .logo_text {
margin: 0px 0 0 4px; }
.header-wrap--page .shares .social-links li.social-link {
margin: 0 0 0 7px; }
.header-wrap--page .header .social-link.social-link--fb {
display: none; } }
.the-iphone {

2
src/jobs-api.html
View File

@ -26,7 +26,7 @@
<div class="container">
<div class="page">
<div class="header-wrap">
<div class="header-wrap header-wrap--page">
<div class="header">
<div class="header__inner">
<a class="logo" href="/">

2
src/jobs.html
View File

@ -26,7 +26,7 @@
<div class="container">
<div class="page">
<div class="header-wrap">
<div class="header-wrap header-wrap--page">
<div class="header">
<div class="header__inner">
<a class="logo" href="/">

2
src/lgpl.html
View File

@ -26,7 +26,7 @@
<div class="container">
<div class="page">
<div class="header-wrap">
<div class="header-wrap header-wrap--page">
<div class="header">
<div class="header__inner">
<a class="logo" href="/">

2
src/privacy-policy.html
View File

@ -26,7 +26,7 @@
<div class="container">
<div class="page">
<div class="header-wrap">
<div class="header-wrap header-wrap--page">
<div class="header">
<div class="header__inner">
<a class="logo" href="/">

113
src/scss/header.scss
View File

@ -1,3 +1,16 @@
.header-wrap.header-wrap--page {
margin: 30px 0 0 0;
width: 1080px;
height: 130px;
background-color: rgba(73, 87, 184, 1);
background-image: url(../img/new-site/dot.svg);
box-shadow: 0px 10px 14px 0px rgba(79,90,166,0.35);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform: translate3d(0, 0, 0);
transition: transform .6s ease, opacity .3s ease;
}
.header {
position: absolute;
display: flex;
@ -10,6 +23,10 @@
transition: opacity .2s ease;
}
.header-wrap--page .header {
opacity: 1;
}
.header:hover {
opacity: 1;
}
@ -20,6 +37,10 @@
justify-content: space-between;
}
.header-wrap--page .header__inner {
width: 1012px;
}
.nav {
display: flex;
align-items: flex-start;
@ -62,7 +83,6 @@ a.logo {
}
.nav a {
//font-family:$PostGroteskMedium;
font-size: 15px;
display: flex;
align-items: center;
@ -71,14 +91,27 @@ a.logo {
transition: opacity .2s ease, color .2s ease;
}
.header-wrap--page .nav a {
font-family:$PostGroteskMedium;
}
.header .nav a {
color: #49555F;
}
.header-wrap--page .header .nav a {
color: $colorWhite;
}
.header .nav a:hover {
color: #6673CE;
}
.header-wrap--page .header .nav a:hover {
color: $colorWhite;
opacity: .8
}
.header .nav a.nav__item--blog::before {
content: "";
width: 16px;
@ -164,10 +197,35 @@ li.social-link a {
box-sizing: border-box;
padding: 0 20px;
}
.header-wrap--page .header {
top: 0;
padding: 0;
}
.header-wrap--page .header__inner {
width: 100%;
margin: 40px;
align-items: center;
}
.header-wrap--page.header-wrap {
margin: 0 0 0 0;
width: 100%;
}
}
@media (max-width: 960px) {
.header-wrap--page .nav {
display: none;
}
.header-wrap--page a.logo,
.header-wrap--page .shares {
width: auto;
}
}
@media (max-width: 840px) {
@ -182,6 +240,11 @@ li.social-link a {
align-items: center;
}
.header-wrap--page .header__inner {
margin: 30px;
flex-direction: row;
}
.nav {
align-items: center;
}
@ -196,4 +259,52 @@ li.social-link a {
.header {
display: none;
}
.header-wrap--page .header {
display: flex;
}
.header-wrap--page .header__inner {
margin: 20px 20px 20px 17px;
align-items: flex-start;
}
.header-wrap--page.header-wrap {
height: 92px;
border-radius: 0;
}
.header-wrap--page .logo__icon {
height: 48px;
width: 48px;
background-size: 48px;
flex-shrink: 0;
flex-grow: 0;
}
.header-wrap--page .logo__title {
font-size: 18px;
line-height: 24px;
}
.header-wrap--page .logo__description {
font-size: 14px;
line-height: 15px;
}
.header-wrap--page .logo__description span{
display: none;
}
.header-wrap--page .logo_text {
margin: 0px 0 0 4px;
}
.header-wrap--page .shares .social-links li.social-link {
margin: 0 0 0 7px;
}
.header-wrap--page .header .social-link.social-link--fb {
display: none;
}
}

2
src/success.html
View File

@ -26,7 +26,7 @@
<div class="container">
<div class="page">
<div class="header-wrap">
<div class="header-wrap header-wrap--page">
<div class="header">
<div class="header__inner">
<a class="logo" href="/">