callout styling. note and warning tags. sorting

_articles/importing/import-from-1password.md

@@ -11,14 +11,14 @@ Importing your data from 1Password into bitwarden is easy. 1Password has two ver
 
 ## Export Your 1Password 1pif Logins
 
-{% alert info %}
+{% note %}
 This set of instructions is only for:
 
 - 1Password 4 users on macOS and Windows
 - 1Password 6 users on macOS
 
 These instructions may vary slightly for macOS users.
-{% endalert %}
+{% endnote %}
 
 1. Open the 1Password desktop application on your computer and enter your 1Password master password to unlock your vault.
 2. Select the vault that you wish to export. It is not possible to export from "All Vaults", so you'll need to switch to a specific vault.
@@ -29,11 +29,11 @@ These instructions may vary slightly for macOS users.
 
 ## Export your 1Password 6 csv logins from Windows
 
-{% alert info %}
+{% note %}
 This set of instructions is only for:
 
 - 1Password 6 users on Windows
-{% endalert %}
+{% endnote %}
 
 1. Open the 1Password 6 desktop application on your computer and enter your 1Password master password to unlock your vault.
 2. Select the items you want to export. Select multiple items by holding down the Ctrl key (Command on macOS) when clicking on them. Select all of the items by pressing Ctrl+A (Command+A on macOS) after clicking one of the items in the list.

_articles/importing/import-from-chrome.md

@@ -9,9 +9,9 @@ tags: [import, chrome, opera, vivaldi]
 
 Importing your data from Google Chrome into bitwarden is easy. 
 
-{% alert info %}
+{% note %}
 The process is exactly the same for Opera and Vivaldi browser users.
-{% endalert %}
+{% endnote %}
 
 ## Export your Chrome passwords
 

_articles/importing/import-from-lastpass.md

@@ -9,11 +9,11 @@ tags: [import, lastpass]
 
 Importing your data from LastPass into bitwarden is easy. 
 
-{% alert warning %}
+{% warning %}
 It is recommended to export through the LastPass.com web vault in order to avoid known bugs with the LastPass extension exporter.
 
 If you use the LastPass browser extension to export your sites, your password data could be corrupted.
-{% endalert %}
+{% endwarning %}
 
 ## Export your sites from the LastPass.com web vault
 

_articles/organizations/collections.md

@@ -13,4 +13,6 @@ Collections allow you to group related logins within your organization that your
 
 When you add a new user to your organization, you can associate that user to one or more collections within your organization. Once the user has access to your organization, any logins that are placed into that user's associated collections will be available in their vault. When associating a user to a particular collection, you can also decide whether or not that user has write access to logins contained within it. Selecting the **Read Only** option will ensure that the user cannot edit any logins within that particular collection (they can just view and use them).
 
-Note that collections are different than folders. Collections are a way to organize logins and limit user access within an organization’s vault while folders are a way for individual users to organize logins within their own personal vault. An individual user may wish to further organize the logins being shared with them in their own vault into a personalized folder structure that makes sense just for them.
+{% note %}
+Collections are different than folders. Collections are a way to organize logins and limit user access within an organization’s vault while folders are a way for individual users to organize logins within their own personal vault. An individual user may wish to further organize the logins being shared with them in their own vault into a personalized folder structure that makes sense just for them.
+{% endnote %}

_articles/organizations/directory-sync.md

@@ -16,9 +16,9 @@ The following directories are supported:
 - GSuite (Google)
 - Any other LDAP-based directory
 
-{% alert info %}
+{% note %}
 Directory sync is only available to enterprise organizations.
-{% endalert %}
+{% endnote %}
 
 ## bitwarden Directory Connector Tool
 

_articles/organizations/groups.md

@@ -9,9 +9,9 @@ tags: []
 
 In addition to collections, groups are a way for organizations to further control user access. They are particularly useful to larger organizations where user access can be difficult to manage.
 
-{% alert info %}
+{% note %}
 User groups are only available to enterprise organizations.
-{% endalert %}
+{% endnote %}
 
 ## User Assignment
 

_articles/organizations/managing-users.md

@@ -1,6 +1,6 @@
 ---
 layout: article
-title: Managings users
+title: Managing users for your organization
 categories: [Organizations]
 featured: true
 popular: false
@@ -13,9 +13,9 @@ Adding new users to your organization involves a three step process: invite, acc
 
 To **invite** a user to your organization simply enter their email address, select what type of user they are (normal user, admin, or owner) and select the collection(s) that they should have access to (you can change this later by editing the user). You can also designate a user as having access to all items for the organization and collection assignment will not be necessary.
 
-{% alert info %}
+{% note %}
 Enterprise organizations can sync their existing user directory with their bitwarden organization to automatically invite new users into bitwarden.
-{% endalert %}
+{% endnote %}
 
 {% image invite-modal.png %}
 
@@ -29,9 +29,9 @@ After the user has successfully accepted the organization invite, an organizatio
 
 ## Removing Users
 
-{% alert info %}
+{% note %}
 Enterprise organizations can sync their existing user directory with their bitwarden organization to automatically remove users when they are disabled or deleted from the directory.
-{% endalert %}
+{% endnote %}
 
 To remove a user from your organization, select the **Remove** option from the options menu for that user. Once a user is removed from your organization, they will no longer have access to any shared logins.
 

_layouts/category.html

@@ -1,6 +1,7 @@
 ---
 layout: default
 ---
+{% assign sorted_articles = site.articles | sort: 'title' %}
 
 <div class="container">
     <h1 class="page-header">
@@ -10,7 +11,7 @@ layout: default
     <div class="row">
         <div class="col-md-8 articles">
             <ol>
-                {% for article in site.articles %}
+                {% for article in sorted_articles %}
                 {% if article.categories contains page.title %}
                 <li><a href="{{article.url}}">{{article.title}}</a></li>
                 {% endif %}

_plugins/callout.rb

@@ -6,11 +6,11 @@ module Jekyll
       def initialize(tag_name, type, tokens)
         super
         type.strip!
-        if %w(info danger warning).include?(type)
+        if %w(info danger warning primary success default).include?(type)
           @type = type
         else
-          puts "#{type} callout not supported. Defaulting to info"
+          puts "#{type} callout not supported. Defaulting to default"
-          @type = "info"
+          @type = "default"
         end
       end
 

_plugins/note.rb

@@ -0,0 +1,17 @@
+module Jekyll
+  module Tags
+    class NoteTag < Liquid::Block
+      def render(context)
+        site = context.registers[:site]
+        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
+        output = converter.convert(super(context))
+        "<div class=\"callout callout-info\">
+            <h3><i class=\"fa fa-info-circle\"></i> Note</h3>
+            #{output}
+        </div>"
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag('note', Jekyll::Tags::NoteTag)

_plugins/warning.rb

@@ -0,0 +1,17 @@
+module Jekyll
+  module Tags
+    class WarningTag < Liquid::Block
+      def render(context)
+        site = context.registers[:site]
+        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
+        output = converter.convert(super(context))
+        "<div class=\"callout callout-warning\">
+            <h3><i class=\"fa fa-warning\"></i> Warning</h3>
+            #{output}
+        </div>"
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag('warning', Jekyll::Tags::WarningTag)

_sass/_bootstrap.scss

@@ -2,7 +2,7 @@ $brand-primary: #3c8dbc;
 $brand-danger: #dd4b39;
 $brand-success: #00a65a;
 $brand-info: #555555;
-$brand-warning: #f39c12;
+$brand-warning: #aa6708;
 $brand-primary-accent: darken($brand-primary, 15%);
 $brand-secondary: #2c3e50;
 $brand-dark-accent: #222d32;

_sass/_help.scss

@@ -227,6 +227,14 @@ footer {
 }
 
 .article {
+    .panel-body > *:first-child {
+        margin-top: 0;
+    }
+
+    .panel-body > *:last-child {
+        margin-bottom: 0;
+    }
+
     ul {
         li + li,
         ul li:first-child,
@@ -311,7 +319,13 @@ footer {
     }
 }
 
-.alert {
+a[rel='lightbox'] {
+    cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in;
+}
+
+.alert, .callout {
     p, ul, ol {
         margin-bottom: 12.5px;
     }
@@ -320,3 +334,56 @@ footer {
         margin-bottom: 0;
     }
 }
+
+.callout {
+    padding: 20px;
+    margin: 20px 0;
+    border: 1px solid $panel-default-border;
+    border-left-width: 5px;
+    border-radius: $panel-border-radius;
+    background-color: #fafafa;
+
+    h3 {
+        margin-top: 0;
+    }
+
+    &.callout-primary, &.callout-info {
+        border-left-color: $brand-primary;
+
+        h3 {
+            color: $brand-primary;
+        }
+    }
+
+    &.callout-default {
+        border-left-color: $gray;
+
+        h3 {
+            color: $gray;
+        }
+    }
+
+    &.callout-danger {
+        border-left-color: $brand-danger;
+
+        h3 {
+            color: $brand-danger;
+        }
+    }
+
+    &.callout-success {
+        border-left-color: $brand-success;
+
+        h3 {
+            color: $brand-success;
+        }
+    }
+
+    &.callout-warning {
+        border-left-color: $brand-warning;
+
+        h3 {
+            color: $brand-warning;
+        }
+    }
+}

index.html

@@ -2,6 +2,7 @@
 layout: default
 title: Help Center
 ---
+{% assign sorted_articles = site.articles | sort: 'title' %}
 
 <div class="container main">
     <div class="row">
@@ -12,7 +13,7 @@ title: Help Center
                 </div>
                 <div class="panel-body">
                     <ul class="fa-ul">
-                        {% for article in site.articles %}
+                        {% for article in sorted_articles %}
                         {% if article.popular == true %}
                         <li>
                             <i class="fa-li fa fa-file-text-o"></i>
@@ -30,7 +31,7 @@ title: Help Center
                 </div>
                 <div class="panel-body">
                     <ul class="fa-ul">
-                        {% for article in site.articles %}
+                        {% for article in sorted_articles %}
                         {% if article.categories contains category.title %}
                         <li>
                             <i class="fa-li fa fa-file-text-o"></i>