Add services page

_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">
+          <a class="nav-link dropdown-toggle" href="/providers/" id="providerDropdown" 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">
             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">
+        <li class="nav-item dropdown">
-          <a class="nav-link" href="https://social.privacytools.io/"><i class="fas fa-retweet text-danger"></i> Mastodon</a>
+          <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>

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;

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>

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>

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>