Added SecureDrop project page

css/style.css

@@ -367,6 +367,9 @@ body {
 .button.i2p::before {
   background: #4661A9; }
 
+.button.securedrop::before {
+  background: #034482; }
+
 .button.boxed.white {
   border: 1px solid #fff;
   background: none;
@@ -479,6 +482,15 @@ body {
   color: #fff;
   background: #4661A9; }
 
+ .button.boxed.securedrop {
+  border: 1px solid #034482;
+  background: none;
+  color: #034482; }
+  
+ .button.boxed.securedrop:hover {
+  color: #fff;
+  background: #034482; }
+
 .button.boxed.openlabs {
   border: 1px solid #2BBBB0;
   background: none;

index.html

@@ -36,30 +36,30 @@ slides:
   image: images/main/half-4.jpg
 
 works_left:
-- title: I2P Style Guide and Usability Study
+- title: SecureDrop Style Guide
-  link_to: /projects/i2p
+  link_to: /projects/securedrop
-  image: images/projects/i2p_overview.png
+  image: images/projects/securedrop_overview.png
-  categories: Usability Study | Style Guide
+  categories: Style Guide
 - title: Thunderbird Style Guide and Usability Study
   link_to: /projects/thunderbird
   image: images/projects/tb_overview.png
   categories: Usability Study | Style Guide
 
 works_middle:
-- title: LibOCon 2018 Visual Identity
+- title: I2P Style Guide and Usability Study
-  link_to: /projects/libocon
+  link_to: /projects/i2p
-  image: images/projects/libocon_overview.png
+  image: images/projects/i2p_overview.png
-  categories: Visual Identity
+  categories: Usability Study | Style Guide
-- title: Open Labs
-  link_to: /projects/openlabs
-  image: images/projects/openlabs_thumbnail.png
-  categories: Visual Identity
-
-works_right:
 - title: Reproducible Builds Styleguide
   link_to: /projects/reproducible-builds
   image: images/projects/rb_thumbnail.png
   categories: Style Guide
+
+works_right:
+- title: LibOCon 2018 Visual Identity
+  link_to: /projects/libocon
+  image: images/projects/libocon_overview.png
+  categories: Visual Identity
 - title: Enigmail Rebranding
   link_to: /projects/enigmail
   image: images/projects/enigmail_overview.png

projects/index.html

@@ -2,6 +2,10 @@
 layout: default
 section_id: portfolio
 works_left:
+- title: SecureDrop Style Guide
+  link_to: securedrop
+  image: images/projects/securedrop_overview.png
+  categories: Style Guide
 - title: I2P Style Guide and Usability Study
   link_to: i2p
   image: images/projects/i2p_overview.png

projects/securedrop.html

@@ -0,0 +1,102 @@
+---
+layout: default
+section_id: portfolio
+title: SecureDrop Style Guide
+---
+
+<div style="background-color: #034482;" class="full new">
+  <div class="section-title new">
+    <div class="row">
+      <div class="medium-10 medium-centered columns">
+        <h1 class="wow slideInUp" style="color: white; font-size: 2rem;">SecureDrop Style Guide</h1>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="full text">
+  <div class="row">
+    <div class="large-8 columns">
+      <img class="lazy" data-src="../images/projects/securedrop_logo.png" alt="I2P logo">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/securedrop_image_1.png" alt="Colors">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/securedrop_image_2.png" alt="Typography">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/securedrop_image_alerts.png" alt="Alerts">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/securedrop_image_3.png" alt="Buttons/Badges">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/securedrop_image_4.png" alt="Cards">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/securedrop_image_5.png" alt="Writing">
+      <div class="spacing"></div>
+    </div>
+    <div class="large-4 columns">
+      <div class="project-intro">
+        <p>SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+        <p>SecureDrop is employed by many of the world’s leading news organizations to handle sensitive information shared by sources whose safety may depend on complete anonymity. It is used to report about matters of local, national or international significance; sometimes, submissions may concern matters of life and death. How we communicate should reflect the seriousness and importance of these objectives.</p>
+        <hr>
+        <div class="spacing"></div>
+        <h4>Date</h4>
+        <p><span>October, 2018</span></p>
+        <h4>Clients</h4>
+        <p><span><a href="https://securedrop.org" target="_blank" rel="noopener">SecureDrop</a></span></p>
+        <h4>Category</h4>
+        <p><span>Style Guide</span></p>
+         <hr>
+        <a class="button boxed blog" href="https://ura.design/" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
+        <a class="button boxed black" href="https://github.com/uracreative/works" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/securedrop" target="_blank" rel="noopener"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed securedrop" href="https://securedrop.org" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a><br />
+      </div>
+    </div>
+  </div>
+</div>
+<hr>
+<div class="full">
+  <div class="section-title">
+    <div class="row">
+      <div class="medium-10 medium-centered columns">
+        <h2>Related projects</h2>
+      </div>
+    </div>
+  </div>
+  <div class="related-works">
+    <div class="row">
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="reproducible-builds" class="work">
+            <img class="lazy" data-src="../images/projects/rb_thumbnail.png" alt="">
+            <div class="info">
+              <h3>Reproducible Builds Style Guide</h3>
+              <p>Style Guide</p>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="thunderbird" class="work">
+          <img class="lazy" data-src="../images/projects/tb_overview.png" alt="">
+          <div class="info">
+            <h3>Thunderbird Style Guide and Usability Study</h3>
+            <p>Style Guide | Usability Study</p>
+          </div>
+        </a>
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="i2p" class="work">
+            <img class="lazy" data-src="../images/projects/i2p_overview.png" alt="">
+            <div class="info">
+              <h3>I2P Style Guide and Usability Study</h3>
+              <p>Style Guide | Usability Study</p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>