From 7cca6711c5b3ce61795f4b6c140d4a473c38fb8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Thu, 14 Jun 2018 15:01:05 -0500
Subject: [PATCH] Mission Statement styling

---
 .../.vuepress/components/MissionStatement.vue | 38 +++++++++++++++++++
 content/.vuepress/scss/pages/_page.scss       |  7 ++--
 content/overview/index.md                     | 19 ++++++----
 3 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 content/.vuepress/components/MissionStatement.vue

diff --git a/content/.vuepress/components/MissionStatement.vue b/content/.vuepress/components/MissionStatement.vue
new file mode 100644
index 0000000..aae5d93
--- /dev/null
+++ b/content/.vuepress/components/MissionStatement.vue
@@ -0,0 +1,38 @@
+<template>
+
+  <div class="component--mission-statement">
+    <strong class="component--mission-statement__title">Mission Statement</strong>
+
+    To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
+  </div>
+
+</template>
+
+
+
+<style lang="scss">
+  @import "../scss/init/colors";
+
+  .component--mission-statement {
+    margin-bottom: 1.5rem; padding: 1rem 1rem 1rem 1.25rem;
+
+    background-color: rgba($teal, 0.1);
+    border-left: 0.5rem solid $teal;
+    line-height: 1.55;
+    position: relative;
+
+    @media (min-width: 901px) {
+      font-size: 1.25rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.05rem;
+    }
+  }
+
+  .component--mission-statement__title {
+    display: block;
+    letter-spacing: 0.025rem;
+    text-transform: uppercase;
+  }
+</style>
diff --git a/content/.vuepress/scss/pages/_page.scss b/content/.vuepress/scss/pages/_page.scss
index 04d8f31..68ef270 100644
--- a/content/.vuepress/scss/pages/_page.scss
+++ b/content/.vuepress/scss/pages/_page.scss
@@ -113,6 +113,10 @@
     font-size: 1rem;
   }
 
+  sup {
+    @include font-mono;
+  }
+
   blockquote {
     left: 2px;
     line-height: 1.5;
@@ -136,9 +140,6 @@
       width: 90%;
     }
 
-    @media (max-width: 375px) {
-    }
-
     p {
       font-size: inherit;
       line-height: inherit;
diff --git a/content/overview/index.md b/content/overview/index.md
index 64a9347..800fb29 100644
--- a/content/overview/index.md
+++ b/content/overview/index.md
@@ -8,16 +8,21 @@ What if anyone in the world could publish a piece of digital content, anyone els
 
 That's the idea behind LBRY.
 
-> To create a market for accessing and publishing information<sup>1</sup> that is global<sup>2</sup>, decentralized<sup>3</sup>, robust<sup>4</sup>, optimal<sup>5</sup> and complete<sup>6</sup>.
+<MissionStatement/>
 
 That's a fancy sentence, so here's a plainer one: we just thought it'd be really damn cool if there was a system that stored as much of the world's information as possible, but was owned and controlled by no one.
 
-<sup>1. In the information theoric sense, i.e. any data. LBRY facilitates distribution of all data, whether it be a video or a spreadsheet.</sup><br/>
-<sup>2. Accessible anywhere in the world on any internet-connected device.</sup><br/>
-<sup>3. Not controlled by any one person, party or authority.</sup><br/>
-<sup>4. Resistant to censorship or attempts to control; impervious to attacks or disruptions.</sup><br/>
-<sup>5. In the Pareto sense, with regards to the production and distribution of information (i.e. digital information is both created and distributed in a way that could not be any more efficient from the perspectives of information producers and consumers).</sup><br/>
-<sup>6. The most complete collection of world’s books, films, art, games, etc. should be available via LBRY.</sup>
+<sup>1</sup> In the information theoric sense, i.e. any data. LBRY facilitates distribution of all data, whether it be a video or a spreadsheet.
+
+<sup>2</sup> Accessible anywhere in the world on any internet-connected device.
+
+<sup>3</sup> Not controlled by any one person, party or authority.
+
+<sup>4</sup> Resistant to censorship or attempts to control; impervious to attacks or disruptions.
+
+<sup>5</sup> In the Pareto sense, with regards to the production and distribution of information (i.e. digital information is both created and distributed in a way that could not be any more efficient from the perspectives of information producers and consumers)
+
+<sup>6</sup> The most complete collection of world’s books, films, art, games, etc. should be available via LBRY.
 
 ## Ecosystem Overview