From 970516fc6783ba55c816cf9e1ac31a1c8493e40c Mon Sep 17 00:00:00 2001
From: Jonah Aragon <jonah@triplebit.net>
Date: Mon, 1 Apr 2019 17:12:47 -0500
Subject: [PATCH] Add services page

---
 _includes/nav.html    | 31 ++++++++++++++-----------------
 assets/css/style.scss |  7 +++++++
 pages/providers.html  |  2 +-
 pages/services.html   | 18 ++++++++++++++++++
 pages/software.html   |  4 +---
 5 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 pages/services.html

diff --git a/_includes/nav.html b/_includes/nav.html
index d4e3c35e..1cd5a695 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -10,17 +10,7 @@
           <a class="nav-link" href="/index.html"><i class="fas fa-home"></i> <span class="sr-only">Home</span></a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Services
-          </a>
-          <div class="dropdown-menu" aria-labelledby="servicesDropdown">
-            <a class="dropdown-item" href="https://social.privacytools.io/"><i class="fas fa-retweet"></i> Mastodon - Social Network</a>
-            <a class="dropdown-item" href="https://bin.privacytools.io/"><i class="fas fa-clipboard"></i> PrivateBin - Encrypted Pastebin</a>
-            <a class="dropdown-item" href="https://search.privacytools.io/"><i class="fas fa-search"></i> Searx - Privacy Friendly Search</a>
-          </div>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="providerDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <a class="nav-link dropdown-toggle" href="/providers/" id="providerDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Provider
           </a>
           <div class="dropdown-menu" aria-labelledby="providerDropdown">
@@ -36,7 +26,7 @@
           </div>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <a class="nav-link dropdown-toggle" href="/browsers/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Browser
           </a>
           <div class="dropdown-menu" aria-labelledby="browserDropdown">
@@ -48,7 +38,7 @@
           </div>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="softwareDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <a class="nav-link dropdown-toggle" href="/software/" id="softwareDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Software
           </a>
           <div class="dropdown-menu" aria-labelledby="softwareDropdown">
@@ -68,7 +58,7 @@
           </div>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="osDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <a class="nav-link dropdown-toggle" href="/operating-systems/" id="osDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             OS
           </a>
           <div class="dropdown-menu" aria-labelledby="osDropdown">
@@ -85,11 +75,18 @@
         </li>
       </ul>
       <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" href="https://social.privacytools.io/"><i class="fas fa-retweet text-danger"></i> Mastodon</a>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="/services/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Services
+          </a>
+          <div class="dropdown-menu" aria-labelledby="servicesDropdown">
+            <a class="dropdown-item" href="https://social.privacytools.io/"><i class="fas fa-retweet"></i> Mastodon - Social Network</a>
+            <a class="dropdown-item" href="https://bin.privacytools.io/"><i class="fas fa-clipboard"></i> PrivateBin - Encrypted Pastebin</a>
+            <a class="dropdown-item" href="https://search.privacytools.io/"><i class="fas fa-search"></i> Searx - Privacy Friendly Search</a>
+          </div>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="/donate.html">Donate <i class="fas fa-heart text-danger"></i></a>
+          <a class="nav-link" href="/donate/">Donate <i class="fas fa-heart text-danger"></i></a>
         </li>
       </ul>
     </div>
diff --git a/assets/css/style.scss b/assets/css/style.scss
index ff03f1b1..50d26ad6 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -50,6 +50,13 @@ a,
   }
 }
 
+.card-list {
+  margin-top: 2em;
+  margin-bottom: 2em;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
 .blockquote {
   border-left: 5px solid $blockquote-border;
   font-size: 1.2rem;
diff --git a/pages/providers.html b/pages/providers.html
index 24e7ee21..19fd31ad 100644
--- a/pages/providers.html
+++ b/pages/providers.html
@@ -13,7 +13,7 @@ description: "There's a ton of people providing services online. Discover which
 
 <p>Click on whatever service you need to view our recommendations.</p>
 
-<div class="card">
+<div class="card card-list">
   <ul class="list-group list-group-flush">
     <li class="list-group-item"><a href="/providers/vpn/"><i class="far fa-eye-slash"></i> Virtual Private Network (VPN)</a></li>
     <li class="list-group-item"><a href="/providers/email/"><i class="fas fa-mail-bulk"></i> Privacy Email</a></li>
diff --git a/pages/services.html b/pages/services.html
new file mode 100644
index 00000000..c2c0c574
--- /dev/null
+++ b/pages/services.html
@@ -0,0 +1,18 @@
+---
+layout: page
+permalink: /services/
+title: "Services from privacytools.io"
+description: "The privacytools.io team is proud to introduce a suite of privacy-centric online services to connect you with other privacy-minded individuals and stay safe and secure online. No advertisers, no Google Analytics, no tracking, no third party requests of any kind."
+---
+
+<p>We currently have the following free-to-use services online now.</p>
+
+<div class="card card-list">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item"><a href="https://social.privacytools.io/"><i class="fas fa-retweet"></i> Mastodon - Tracker Free Social Networking at social.privacytools.io</a></li>
+    <li class="list-group-item"><a href="https://bin.privacytools.io/"><i class="fas fa-clipboard"></i> PrivateBin - Encrypted Pastebin at bin.privacytools.io</a></li>
+    <li class="list-group-item"><a href="https://search.privacytools.io/"><i class="fas fa-search"></i> Searx - Privacy Friendly Search at search.privacytools.io</a></li>
+  </ul>
+</div>
+
+<p>More services are on the way! If there's something that would be super beneficial for us to run, don't hesitate to reach out and ask! And of course, if you like our services, please consider <a href="/donate/">donating to support our server costs</a>, <em>any donation helps!</em></p>
diff --git a/pages/software.html b/pages/software.html
index 21ed21f9..4386be18 100644
--- a/pages/software.html
+++ b/pages/software.html
@@ -5,11 +5,9 @@ title: "Software"
 description: "Discover a variety of open source software built to protect your privacy and keep your digital data secure."
 ---
 
-<h1 id="os" class="anchor">Software</h1>
-
 <p>Click on whatever software you need to view our recommendations.</p>
 
-<div class="card">
+<div class="card card-list">
   <ul class="list-group list-group-flush">
     <li class="list-group-item"><a href="/software/email/"><i class="fas fa-envelope"></i> Email Clients</a></li>
     <li class="list-group-item"><a href="/software/email/#messaging"><i class="fas fa-random"></i> Email Alternatives</a></li>