bitwarden/help
1
0
Fork 0
mirror of https://github.com/bitwarden/help synced 2025-12-10 05:13:43 +00:00
Code Issues Releases Wiki Activity

new layout

Browse Source
This commit is contained in:
Kyle Spearrin
2017-05-22 14:53:28 -04:00
parent 48ff508e49
commit 1cdf950554
3 changed files with 97 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
_layouts/default.html
View File

@@ -39,25 +39,13 @@
</div> </div>
<div class="collapse navbar-collapse" id="menu"> <div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="visible-xs"><a href="/">Home</a></li> <li><a href="/">Help Center</a></li>
<li><a href="/#organizations" onclick="gaEvent('Nav Org')">Business</a></li> <li><a href="https://bitwarden.com/contact">Contact Us</a></li>
<li><a href="/#download" onclick="gaEvent('Nav Download')">Download</a></li>
<li><a href="https://help.bitwarden.com" onclick="gaEvent('Nav Help')">Help/FAQs</a></li>
<li><a href="/contact">Contact</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li> <li>
<a href="https://vault.bitwarden.com/#/register" class="hidden-sm" <a href="https://bitwarden.com" onclick="gaEvent('Return')">
onclick="gaEvent('Nav Create Account')"><b>Create Account</b></a> <i class="fa fa-share fa-flip-horizontal fa-fw"></i> Return to bitwarden.com
</li>
<li>
<a href="https://vault.bitwarden.com/#/register" class="visible-sm"
onclick="gaEvent('Nav Register')"><b>Register</b></a>
</li>
<li>
<a href="https://vault.bitwarden.com/#/" onclick="gaEvent('Nav Log In')">
Log In
<i class="fa fa-sign-in"></i>
</a> </a>
</li> </li>
</ul> </ul>
@@ -73,10 +61,10 @@
<div class="col-sm-4 col-xs-6"> <div class="col-sm-4 col-xs-6">
<h4>Links</h4> <h4>Links</h4>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><a href="/">Home</a></li> <li><a href="https://bitwarden.com">Home</a></li>
<li><a href="/#download" onclick="gaEvent('Footer Download')">Download</a></li> <li><a href="https://bitwarden.com/#download" onclick="gaEvent('Footer Download')">Download</a></li>
<li><a href="/#organizations" onclick="gaEvent('Footer Business')">Business</a></li> <li><a href="https://bitwarden.com/#organizations" onclick="gaEvent('Footer Business')">Business</a></li>
<li><a href="/contact">Contact Us</a></li> <li><a href="https://bitwarden.com/contact">Contact Us</a></li>
<li><a href="https://vault.bitwarden.com/#/" onclick="gaEvent('Footer Web Vault')">Web Vault</a></li> <li><a href="https://vault.bitwarden.com/#/" onclick="gaEvent('Footer Web Vault')">Web Vault</a></li>
</ul> </ul>
</div> </div>
@@ -90,8 +78,8 @@
Source Code Source Code
</a> </a>
</li> </li>
<li><a href="/privacy">Privacy Policy</a></li> <li><a href="https://bitwarden.com/privacy">Privacy Policy</a></li>
<li><a href="/credits">Credits</a></li> <li><a href="https://bitwarden.com/credits">Credits</a></li>
</ul> </ul>
</div> </div>
<div class="col-sm-4 col-xs-12 social"> <div class="col-sm-4 col-xs-12 social">

243
css/styles.scss
View File

@@ -3,194 +3,125 @@
@import "bootstrap"; @import "bootstrap";
$brand-primary: #3c8dbc;
$brand-danger: #dd4b39;
$brand-success: #00a65a;
$brand-info: #555555;
$brand-warning: #f39c12;
$brand-primary-accent: #286090;
$brand-secondary: #2c3e50;
$brand-dark-accent: #222d32;
$font-size-base: 15px;
$font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-family: "Open Sans", sans-serif;
$text-color: $brand-secondary;
$gray-lighter: lighten(#000, 93.5%);
html { html {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
body { body {
margin-bottom: 160px; margin-bottom: 465px;
padding-top: 51px; }
font-family: $font-family-sans-serif;
font-size: 15px;
background-color: #fafafa;
@media(min-width:768px) { @media(min-width:$screen-sm) {
margin-bottom: 101px; body {
margin-bottom: 300px;
} }
} }
blockquote { .btn {
font-size: 15px; @include box-shadow("0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)");
} border: 0;
h1, h2, h3, h4, h5 { &:hover {
font-family: $headings-font-family; @include box-shadow("0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08)");
margin-top: 0;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
a {
color: $brand-primary;
}
.navbar-inverse {
background-color: $brand-dark-accent;
color: white;
.navbar-brand {
font-family: $headings-font-family;
} }
}
.navbar-brand, .navbar-nav > li > a { .btn-secondary {
color: white; @include button-variant(#ffffff, $brand-secondary, $brand-secondary);
} }
.navbar-nav > li > a { .btn-xl {
&:hover, &:focus { @include button-size(20px, 25px, $font-size-large, $line-height-large, 5px);
text-decoration: underline; }
.navbar-brand {
@media(min-width:$screen-sm) {
.fa {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
&:hover {
color: $navbar-inverse-link-hover-color !important;
} }
} }
.navbar-toggle { @media(max-width:$screen-xs-max) {
border-color: darken($brand-dark-accent, 5%); font-size: 30px;
} padding-top: 25px;
font-weight: 300;
.navbar-toggle:focus, .navbar-toggle:hover {
background-color: $brand-secondary;
} }
} }
.search-header { .navbar-nav {
background-color: $brand-primary; b {
padding: 50px 0; font-weight: 600;
margin-bottom: 20px; }
color: white; }
@media(max-width:$screen-xs-max) {
.navbar-collapse {
background-color: $brand-primary-accent;
border: 0;
@include box-shadow("inset 0 10px 10px -10px rgba(0,0,0,.35), inset 0 -10px 10px -10px rgba(0,0,0,.35);");
}
} }
footer { footer {
position: absolute;
bottom: 0;
width: 100%;
height: 160px;
background-color: $brand-dark-accent; background-color: $brand-dark-accent;
color: white; height: 465px;
padding: 30px 0; margin: 0;
color: #b8c7ce;
position: absolute;
width: 100%;
bottom: 0;
font-size: 16px;
padding: 40px 0;
@media(min-width:768px) { h4 {
height: 101px; color: #fff;
}
.container { a {
position: relative; color: #8aa4af;
.social-buttons { &:hover {
position: absolute; color: #fff;
right: 0; }
top: -7px; }
ul {
li {
padding-bottom: 10px;
}
}
.social {
i {
font-size: 40px;
margin-bottom: 10px;
}
}
@media(min-width:$screen-md) {
.social {
margin-top: 40px;
i {
font-size: 55px;
} }
} }
} }
}
.container-content { @media(min-width:$screen-sm) {
margin-top: 20px; height: 300px;
}
.btn-social { .social {
display: inline-block; margin-top: 0;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 100%;
text-align: center;
font-size: 20px;
line-height: 45px;
}
.btn-outline {
color: white;
font-size: 20px;
border: solid 2px white;
background: transparent;
transition: all 0.3s ease-in-out;
&:hover,
&:focus,
&:active,
&.active {
color: $brand-primary;
background: white;
border: solid 2px white;
}
}
.panel-articles {
ul, ol {
margin-bottom: 0;
margin-left: 0;
padding-left: 20px;
li + li {
margin-top: 0.25em;
} }
} }
} }
.panel-article {
ul, ol {
li + li,
ul li:first-child,
ol li:first-child {
margin-top: 0.40em;
}
}
}
.breadcrumb {
border: 1px solid #ddd;
}
.panel-article .alert {
ul, ol {
li {
margin: 0;
}
}
p + *, ul + *, ol + * {
margin-top: 10px;
}
}
@media (max-width: 767px) {
.fa-support.visible-xs {
display: inline-block !important;
}
}

4
gulpfile.js
View File

@@ -36,10 +36,6 @@ gulp.task('lib', ['clean:lib'], function () {
src: paths.npmDir + 'bootstrap-sass/assets/fonts/bootstrap/*', src: paths.npmDir + 'bootstrap-sass/assets/fonts/bootstrap/*',
dest: paths.libDir + 'bootstrap/fonts' dest: paths.libDir + 'bootstrap/fonts'
}, },
{
src: paths.npmDir + 'bootstrap-sass/assets/stylesheets/**',
dest: paths.sass
},
{ {
src: [ src: [
paths.npmDir + 'font-awesome/**/css/font-awesome.min.css', paths.npmDir + 'font-awesome/**/css/font-awesome.min.css',