mirror of
https://github.com/bitwarden/help
synced 2025-12-10 13:23:16 +00:00
new layouts
This commit is contained in:
Kyle Spearrin
1
.gitignore
vendored
1
.gitignore
vendored
@@ -7,4 +7,3 @@ _site/
|
|||||||
*.bat
|
*.bat
|
||||||
*.tmp
|
*.tmp
|
||||||
/lib
|
/lib
|
||||||
_sass/
|
|
||||||
@@ -2,23 +2,36 @@
|
|||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="container container-content">
|
<content>
|
||||||
<ol class="breadcrumb">
|
<div class="container">
|
||||||
<li><a href="/">Help Center</a></li>
|
<h1 class="page-header"><i class="fa fa-file-text-o"></i> {{page.title}}</h1>
|
||||||
<li class="active">{{page.title}}</li>
|
<article>
|
||||||
</ol>
|
{{content}}
|
||||||
<div class="panel panel-default panel-article">
|
</article>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="panel panel-default panel-contact">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title"><i class="fa fa-file-text-o"></i> {{page.title}}</h3>
|
<h3 class="panel-title"><i class="fa fa-file-text-o"></i> Was this helpful?</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
{{content}}
|
|
||||||
</div>
|
|
||||||
<div class="panel-footer">
|
|
||||||
<div class="rw-ui-container"></div>
|
<div class="rw-ui-container"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="panel panel-default panel-contact">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title"><i class="fa fa-file-text-o"></i> Email Us</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
Want to talk to a human?
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</content>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function (d, t, e, m) {
|
(function (d, t, e, m) {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="search-header">
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<form action="/search/" method="get">
|
<form action="/search/" method="get">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
@@ -13,12 +13,11 @@ layout: default
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<div class="container">
|
<content>
|
||||||
<ol class="breadcrumb">
|
<div class="container">
|
||||||
<li><a href="/">Help Center</a></li>
|
<div class="row">
|
||||||
<li class="active">{{page.title}}</li>
|
<div class="col-md-8">
|
||||||
</ol>
|
|
||||||
<div class="panel panel-default panel-articles">
|
<div class="panel panel-default panel-articles">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{page.title}}</h3>
|
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{page.title}}</h3>
|
||||||
@@ -33,4 +32,18 @@ layout: default
|
|||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="panel panel-default panel-contact">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title"><i class="fa fa-envelope"></i> Email Us</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
Want to talk to a human?
|
||||||
|
Email Us
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</content>
|
||||||
58
_sass/_bootstrap.scss
Normal file
58
_sass/_bootstrap.scss
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
$brand-primary: #3c8dbc;
|
||||||
|
$brand-danger: #dd4b39;
|
||||||
|
$brand-success: #00a65a;
|
||||||
|
$brand-info: #555555;
|
||||||
|
$brand-warning: #f39c12;
|
||||||
|
$brand-primary-accent: darken($brand-primary, 15%);
|
||||||
|
$brand-secondary: #2c3e50;
|
||||||
|
$brand-dark-accent: #222d32;
|
||||||
|
|
||||||
|
$font-size-base: 18px;
|
||||||
|
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
$headings-font-family: "Open Sans", sans-serif;
|
||||||
|
$text-color: $brand-secondary;
|
||||||
|
$gray-lighter: lighten(#000, 93.5%);
|
||||||
|
|
||||||
|
$navbar-height: 80px;
|
||||||
|
$navbar-margin-bottom: 0;
|
||||||
|
$navbar-border-radius: 0;
|
||||||
|
|
||||||
|
//=== Inverted navbar
|
||||||
|
// Reset inverted navbar basics
|
||||||
|
$navbar-inverse-color: #fff;
|
||||||
|
$navbar-inverse-bg: $brand-primary;
|
||||||
|
$navbar-inverse-border: $brand-primary;
|
||||||
|
|
||||||
|
// Inverted navbar links
|
||||||
|
$navbar-inverse-link-color: #fff;
|
||||||
|
$navbar-inverse-link-hover-color: lighten($brand-primary, 35%);
|
||||||
|
$navbar-inverse-link-hover-bg: transparent;
|
||||||
|
$navbar-inverse-link-active-color: #fff;
|
||||||
|
$navbar-inverse-link-active-bg: $brand-primary;
|
||||||
|
$navbar-inverse-link-disabled-color: #444;
|
||||||
|
$navbar-inverse-link-disabled-bg: transparent;
|
||||||
|
|
||||||
|
// Inverted navbar brand label
|
||||||
|
$navbar-inverse-brand-color: $navbar-inverse-link-color;
|
||||||
|
$navbar-inverse-brand-hover-color: #fff;
|
||||||
|
$navbar-inverse-brand-hover-bg: transparent;
|
||||||
|
|
||||||
|
// Inverted navbar toggle
|
||||||
|
$navbar-inverse-toggle-hover-bg: $brand-primary-accent;
|
||||||
|
$navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||||
|
$navbar-inverse-toggle-border-color: darken($brand-primary, 5%);
|
||||||
|
|
||||||
|
//== Container sizes
|
||||||
|
$grid-gutter-width: 30px !default;
|
||||||
|
// Large screen / wide desktop
|
||||||
|
$container-large-desktop: (940px + $grid-gutter-width) !default;
|
||||||
|
//** For `$screen-lg-min` and up.
|
||||||
|
$container-lg: $container-large-desktop !default;
|
||||||
|
|
||||||
|
// Screen sizes
|
||||||
|
|
||||||
|
$screen-xxs: 375px;
|
||||||
|
$screen-xxs-min: 375px;
|
||||||
|
$screen-xxs-max: ($screen-xxs-min - 1);
|
||||||
|
|
||||||
|
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
|
||||||
134
_sass/_help.scss
Normal file
134
_sass/_help.scss
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
@import "bootstrap";
|
||||||
|
|
||||||
|
html {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin-bottom: 465px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:$screen-sm) {
|
||||||
|
body {
|
||||||
|
margin-bottom: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:$screen-xs-max) {
|
||||||
|
font-size: 30px;
|
||||||
|
padding-top: 25px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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);");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 10px 0 40px;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
background: $brand-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
content {
|
||||||
|
margin: 30px 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: $brand-dark-accent;
|
||||||
|
height: 465px;
|
||||||
|
margin: 0;
|
||||||
|
color: #b8c7ce;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 40px 0;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #8aa4af;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:$screen-sm) {
|
||||||
|
height: 300px;
|
||||||
|
|
||||||
|
.social {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
}
|
||||||
125
css/styles.scss
125
css/styles.scss
@@ -1,127 +1,4 @@
|
|||||||
---
|
---
|
||||||
---
|
---
|
||||||
|
|
||||||
@import "bootstrap";
|
@import "help";
|
||||||
|
|
||||||
html {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin-bottom: 465px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(min-width:$screen-sm) {
|
|
||||||
body {
|
|
||||||
margin-bottom: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
@include box-shadow("0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)");
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include box-shadow("0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08)");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
@include button-variant(#ffffff, $brand-secondary, $brand-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-xl {
|
|
||||||
@include button-size(20px, 25px, $font-size-large, $line-height-large, 5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width:$screen-xs-max) {
|
|
||||||
font-size: 30px;
|
|
||||||
padding-top: 25px;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
b {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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 {
|
|
||||||
background-color: $brand-dark-accent;
|
|
||||||
height: 465px;
|
|
||||||
margin: 0;
|
|
||||||
color: #b8c7ce;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 40px 0;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #8aa4af;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(min-width:$screen-sm) {
|
|
||||||
height: 300px;
|
|
||||||
|
|
||||||
.social {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
10
index.html
10
index.html
@@ -3,7 +3,7 @@ layout: default
|
|||||||
title: Help Center
|
title: Help Center
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="search-header">
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<form action="/search/" method="get">
|
<form action="/search/" method="get">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
@@ -14,8 +14,9 @@ title: Help Center
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<div class="container">
|
<content>
|
||||||
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
{% for category in site.categories %}
|
{% for category in site.categories %}
|
||||||
@@ -66,4 +67,5 @@ title: Help Center
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</content>
|
||||||
@@ -3,7 +3,7 @@ layout: default
|
|||||||
title: Search Results
|
title: Search Results
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="search-header">
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<form action="/search/" method="get">
|
<form action="/search/" method="get">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
@@ -15,12 +15,9 @@ title: Search Results
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<div class="container">
|
<content>
|
||||||
<ol class="breadcrumb">
|
<div class="container">
|
||||||
<li><a href="/">Help Center</a></li>
|
|
||||||
<li class="active">{{page.title}}</li>
|
|
||||||
</ol>
|
|
||||||
<div class="panel panel-default panel-articles">
|
<div class="panel panel-default panel-articles">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title"><i class="fa fa-search"></i> {{page.title}} for "<span id="search-term"></span>"</h3>
|
<h3 class="panel-title"><i class="fa fa-search"></i> {{page.title}} for "<span id="search-term"></span>"</h3>
|
||||||
@@ -29,8 +26,8 @@ title: Search Results
|
|||||||
<ol id="search-results"></ol>
|
<ol id="search-results"></ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</content>
|
||||||
|
|
||||||
<script src="../lib/lunr/lunr.js"></script>
|
<script src="../lib/lunr/lunr.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user