From 0a7a2271e9657845808bc671817e97cd6762fe2c Mon Sep 17 00:00:00 2001
From: Seth Vargo <seth@sethvargo.com>
Date: Fri, 21 Jul 2017 16:40:26 -0400
Subject: [PATCH] Add svg for terminal circles

The HTML bullet is a different size in different browsers :(
---
 .../source/assets/images/terminal-circle.svg   |  3 +++
 website/source/assets/stylesheets/_home.scss   | 12 +++---------
 website/source/index.html.erb                  | 18 +++++++++---------
 3 files changed, 15 insertions(+), 18 deletions(-)
 create mode 100644 website/source/assets/images/terminal-circle.svg

diff --git a/website/source/assets/images/terminal-circle.svg b/website/source/assets/images/terminal-circle.svg
new file mode 100644
index 000000000..da23c966a
--- /dev/null
+++ b/website/source/assets/images/terminal-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <circle fill="#FFFFFF" cx="25" cy="25" r="25"/>
+</svg>
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 868b442cd..53820600e 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -261,15 +261,9 @@
     }
 
     span.circle {
-      &:before {
-        content: '\25CF';
-        color: $white;
-        font-family: $font-family-monospace;
-        font-size: 30px;
-        line-height: 1;
-        margin: 0 0 0 -4px;
-        padding: 0;
-        height: 100%;
+      svg {
+        height: 12px;
+        width: 12px;
       }
     }
   }
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 7705ecd1e..127cc1fde 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -267,9 +267,9 @@ description: |-
     <div class="row">
       <div class="col-sm-12">
         <div class="terminal">
-          <span class="circle"></span>
-          <span class="circle"></span>
-          <span class="circle"></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
           <div class="terminal-content">
             <span>
               <span class="text-green">admin@hashicorp.com:</span>
@@ -318,9 +318,9 @@ description: |-
     <div class="row">
       <div class="col-sm-12">
         <div class="terminal">
-          <span class="circle"></span>
-          <span class="circle"></span>
-          <span class="circle"></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
           <div class="terminal-content">
             <span>
               <span class="text-green">admin@hashicorp.com:</span>
@@ -366,9 +366,9 @@ description: |-
     <div class="row">
       <div class="col-sm-12">
         <div class="terminal">
-          <span class="circle"></span>
-          <span class="circle"></span>
-          <span class="circle"></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
+          <span class="circle"><%= inline_svg "terminal-circle.svg" %></span>
           <div class="terminal-content">
             <span>
               <span class="text-green">admin@hashicorp.com:</span>