updates

uradotdesign · Sep 29, 2023 · fe0f8ce · fe0f8ce
1 parent d64b929
commit fe0f8ce
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 66 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -623,7 +623,7 @@ figure img {
     align-items: center;
     justify-content: space-between;
     gap: 40px;
-    margin-top: 50px;
+    margin-top: 40px;
     margin-bottom: 32px;
 }
 
@@ -769,6 +769,21 @@ figure img {
     font-family: 'Inter 400';
 }
 
+#screenshots {
+    overflow-x: scroll;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-start;
+    gap: 12px;
+}
+
+#screenshots a {
+    display: inline-block;
+    width: 30%;
+    min-width: 30%;
+}
+
 .description a {
     display: block;
     width: min-content;
@@ -846,6 +861,11 @@ figure img {
     margin-bottom: 0;
 }
 
+table {
+    width: 100%;
+    table-layout: fixed;
+}
+
 td {
     font-family: 'Inter 400';
     font-size: 0.875rem;
@@ -886,6 +906,27 @@ figure.mobile-photo {
     margin-top: 40px;
 }
 
+.newsletter {
+    margin-top: 32px;
+}
+
+#newsletter {
+    padding: 8px 16px;
+    border-radius: 8px;
+    outline: none;
+    border: 1px solid var(--gray-300);
+    text-decoration: none;
+    font-family: 'Sinkin Sans 400';
+    font-size: 0.75rem;
+    color: var(--gray-600);
+    transition: all 0.3s ease;
+    background-color: var(--gray-100);
+}
+
+#newsletter:hover {
+    background-color: var(--gray-200);
+}
+
 @media only screen and (min-width: 1440px) {
     #container-bg {
         left: calc(-1*((100vw - (1232px))/2));
@@ -914,6 +955,11 @@ figure.mobile-photo {
     .news-article {
         width: calc(100% - 80px);
     }
+
+    #screenshots a {
+        width: 50%;
+        min-width: 50%;
+    }
 }
 
 @media only screen and (max-width: 992px) {
@@ -988,7 +1034,7 @@ figure.mobile-photo {
     }
 
     .download-links img {
-        width: 49%;
+        width: 178px;
     }
 
     #nav {
@@ -1092,6 +1138,11 @@ figure.mobile-photo {
         max-width: 93vw;
     }
 
+    #screenshots a {
+        width: 60%;
+        min-width: 60%;
+    }
+
     .mobile-overlay {
         width: calc(93vw - 140px);
         transform: translateX(-140px);
@@ -1178,6 +1229,11 @@ figure.mobile-photo {
         margin-top: 40px;
     }
 
+    #screenshots a {
+        width: 80%;
+        min-width: 80%;
+    }
+
     #logo img {
         width: 100%;
     }
@@ -1196,6 +1252,10 @@ figure.mobile-photo {
         margin-bottom: 0 !important;
     }
 
+    .download-links img {
+        width: 100%;
+    }
+
     figure.desktop-photo {
         display: none;
     }

diff --git a/content/_index.html b/content/_index.html
@@ -11,8 +11,12 @@
     <h1 id="main-title">Secure messaging <span>anywhere</span></h1>
     <p>Censorship-resistant peer-to-peer messaging that bypasses centralized servers. Connect via Bluetooth, Wi-Fi, or Tor, with privacy built-in.</p>
     <div class="download-links">
-      <img src="/img/google_play_badge_web_generic.png" alt="Google Play Badge" width="178px">
-      <img src="/img/fdroid_badge.png" alt="FDroid Badge" width="178px">
+      <a style="width: 178px;" href="https://play.google.com/store/apps/details?id=org.briarproject.briar.android">
+        <img src="/img/google_play_badge_web_generic.png" alt="Google Play Badge" width="178px">
+      </a>
+      <a style="width: 178px;" href="./fdroid">
+        <img src="/img/fdroid_badge.png" alt="FDroid Badge" width="178px">
+      </a>
     </div>
     <p id="release-text"><strong>Latest Release:</strong> {{ .releaseVersion }}</p>
   </div>

diff --git a/content/page/download.md b/content/page/download.md
@@ -11,7 +11,7 @@ Briar for Android is available for download from Google Play and F-Droid.
 Thank you to everyone who has tested Briar and sent feedback! We've
 fixed a lot of bugs and made many improvements thanks to your feedback.
 
-{{< googleplay url="https://play.google.com/store/apps/details?id=org.briarproject.briar.android" >}}
+{{< googleplay url_1="https://play.google.com/store/apps/details?id=org.briarproject.briar.android" url_2="/fdroid"  >}}
 
 If you prefer not to use Google Play, you can [install the app via
 F-Droid](/fdroid) or [download the APK file](/apk) directly from

diff --git a/layouts/shortcodes/googleplay.html b/layouts/shortcodes/googleplay.html
@@ -1,9 +1,9 @@
 <div class="download-links">
-    <a href="{{.Get "url" }}" rel="noopener noreferrer">
+    <a href="{{.Get "url_1" }}" rel="noopener noreferrer">
         <img src="/img/google_play_badge_web_generic.png" width="178px"
         alt="Get it on Google Play">
     </a>
-    <a href="{{.Get "url" }}">
+    <a href="{{.Get "url_2" }}">
         <img id="fdroidbutton" src="/img/fdroid_badge.png" width="178px" alt="Get it on F-Droid">
     </a>
 </div>
diff --git a/static/img/howitworks3(mobile).svg b/static/img/howitworks3(mobile).svg
diff --git a/static/img/howitworks3.svg b/static/img/howitworks3.svg
diff --git a/themes/briar/layouts/partials/footer.html b/themes/briar/layouts/partials/footer.html
@@ -1,6 +1,9 @@
  <div id="footer_container">
     <div id="footer">
       <img src="/img/briar-gray.svg" alt="Briar Logo Gray">
+      <div class="newsletter">
+        <a id="newsletter" href="https://sourceforge.net/projects/briar/lists/briar-announce">Subscribe to updates →</a>
+      </div>
       <ul>
         <li><a href="/copyright">Copyright</a></li>
         <li><a href="/privacy-policy">Privacy</a></li>