mirror of
https://github.com/bitwarden/help
synced 2025-12-06 00:03:30 +00:00
new layouts
This commit is contained in:
Kyle Spearrin
1
.gitignore
vendored
1
.gitignore
vendored
@@ -7,4 +7,3 @@ _site/
|
||||
*.bat
|
||||
*.tmp
|
||||
/lib
|
||||
_sass/
|
||||
@@ -2,23 +2,36 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="container container-content">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/">Help Center</a></li>
|
||||
<li class="active">{{page.title}}</li>
|
||||
</ol>
|
||||
<div class="panel panel-default panel-article">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-file-text-o"></i> {{page.title}}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<content>
|
||||
<div class="container">
|
||||
<h1 class="page-header"><i class="fa fa-file-text-o"></i> {{page.title}}</h1>
|
||||
<article>
|
||||
{{content}}
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="rw-ui-container"></div>
|
||||
</article>
|
||||
<div class="row">
|
||||
<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> Was this helpful?</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="rw-ui-container"></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>
|
||||
</div>
|
||||
</content>
|
||||
|
||||
<script>
|
||||
(function (d, t, e, m) {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="search-header">
|
||||
<header>
|
||||
<div class="container">
|
||||
<form action="/search/" method="get">
|
||||
<div class="input-group">
|
||||
@@ -13,24 +13,37 @@ layout: default
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/">Help Center</a></li>
|
||||
<li class="active">{{page.title}}</li>
|
||||
</ol>
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{page.title}}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ol>
|
||||
{% for article in site.articles %}
|
||||
{% if article.categories contains page.title %}
|
||||
<li><a href="{{article.url}}">{{article.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</header>
|
||||
<content>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{page.title}}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ol>
|
||||
{% for article in site.articles %}
|
||||
{% if article.categories contains page.title %}
|
||||
<li><a href="{{article.url}}">{{article.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</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>
|
||||
</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";
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "help";
|
||||
|
||||
96
index.html
96
index.html
@@ -3,7 +3,7 @@ layout: default
|
||||
title: Help Center
|
||||
---
|
||||
|
||||
<div class="search-header">
|
||||
<header>
|
||||
<div class="container">
|
||||
<form action="/search/" method="get">
|
||||
<div class="input-group">
|
||||
@@ -14,56 +14,58 @@ title: Help Center
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
{% for category in site.categories %}
|
||||
{% if category.featured == true %}
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{category.title}}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul>
|
||||
{% for article in site.articles %}
|
||||
{% if article.categories contains category.title and article.featured == true %}
|
||||
<li><a href="{{article.url}}">{{article.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</header>
|
||||
<content>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
{% for category in site.categories %}
|
||||
{% if category.featured == true %}
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-folder-open"></i> {{category.title}}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul>
|
||||
{% for article in site.articles %}
|
||||
{% if article.categories contains category.title and article.featured == true %}
|
||||
<li><a href="{{article.url}}">{{article.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-list-alt"></i> Categories</h3>
|
||||
<div class="col-md-4">
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-list-alt"></i> Categories</h3>
|
||||
</div>
|
||||
<div class="panel-body small">
|
||||
<ul>
|
||||
{% for category in site.categories %}
|
||||
<li><a href="{{category.url}}">{{category.title}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body small">
|
||||
<ul>
|
||||
{% for category in site.categories %}
|
||||
<li><a href="{{category.url}}">{{category.title}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-star"></i> Popular</h3>
|
||||
</div>
|
||||
<div class="panel-body small">
|
||||
<ul>
|
||||
{% for article in site.articles %}
|
||||
{% if article.popular == true %}
|
||||
<li><a href="{{article.url}}">{{article.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-star"></i> Popular</h3>
|
||||
</div>
|
||||
<div class="panel-body small">
|
||||
<ul>
|
||||
{% for article in site.articles %}
|
||||
{% if article.popular == true %}
|
||||
<li><a href="{{article.url}}">{{article.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</content>
|
||||
@@ -3,7 +3,7 @@ layout: default
|
||||
title: Search Results
|
||||
---
|
||||
|
||||
<div class="search-header">
|
||||
<header>
|
||||
<div class="container">
|
||||
<form action="/search/" method="get">
|
||||
<div class="input-group">
|
||||
@@ -15,22 +15,19 @@ title: Search Results
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/">Help Center</a></li>
|
||||
<li class="active">{{page.title}}</li>
|
||||
</ol>
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-search"></i> {{page.title}} for "<span id="search-term"></span>"</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ol id="search-results"></ol>
|
||||
</header>
|
||||
<content>
|
||||
<div class="container">
|
||||
<div class="panel panel-default panel-articles">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-search"></i> {{page.title}} for "<span id="search-term"></span>"</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ol id="search-results"></ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</content>
|
||||
|
||||
<script src="../lib/lunr/lunr.js"></script>
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user