Homepage redesign

TODO: - Redo FAQ - Add release blog post for v0.1.1
OkuBrowser · Dec 9, 2024 · f5a553d · f5a553d
1 parent 1707297
commit f5a553d
Show file tree

Hide file tree

Showing 11 changed files with 242 additions and 137 deletions.
diff --git a/global.toml b/global.toml
@@ -2,7 +2,7 @@ locale = "en_US"
 url = "https://okubrowser.github.io"
 # url = "http://localhost" # For developing locally
 title = "Oku"
-description = "Your new home on the Internet"
+description = "Your home on the Internet"
 author = "Emil Sayahi"
 browser_repository = "https://github.com/OkuBrowser/oku"
 protocol_repository = "https://github.com/OkuBrowser/oku-fs"

diff --git a/index.vox b/index.vox
@@ -3,50 +3,48 @@ layout = "index"
 permalink = "index.html"
 ---
 
-<img class="main-screenshot screenshot"></img>
-
-{% markdown %}
-
-# Making browsing *fun* again.
-
-* Create & publish sites
-* Share files directly with friends
-* Storing personal data on the devices you control
-* Synchronise files between your devices
-
-### Make & share your own sites.
-
-- Oku lets you create *replicas*, virtual drives that you can share online.
-- Replicas can contain anything, including photos, videos, or documents.
-- You can put a site in a replica and share it with the world.
-
-## *Your* data on *your* machine.
-
-### Let sites keep your information with you, not on servers they control.
-
-- Replicas are sent with *tickets*.
-- A *read-only ticket* can be used to view, but not edit, your replica.
-- A *read & write ticket* can be used to view or edit your replica.
-- Sites can keep your data with you in a replica by asking for a read & write ticket.
-
-## Let your garden grow wild.
-
-### Build your own space on the Internet, independent from social media platforms.
-
-- Replicas can be viewed by their ID.
-- Every time you visit a new replica, your browser saves its ID.
-- When you update a replica, those with its ID will see the newest version.
-
-## Not Google Chrome in disguise.
-
-Powered by WebKit, Oku is a genuine alternative to Google Chrome, not a derivative.
-
----
-
-# Looking to contribute?
-
-Oku is free and open-source software, [accepting code contributions on GitHub]({{ global.browser_repository }}).
-
-[Learn more about Oku →]({{ global.url }}/faq)
-
-{% endmarkdown %}
+<div class="intro-box">
+
+    <div class="intro-info">
+        <h1>{{ global.title }}</h1>
+        <h2>{{ global.description }}</h2>
+        <p>Unleash your creativity and join a network of users supporting an independent effort to reintroduce control, privacy, & free expression online.</p>
+        <div>
+            <a href='https://flathub.org/apps/io.github.OkuBrowser.oku'>
+                <img width='120' style="display: inline;" alt='Get it on Flathub' src='https://flathub.org/api/badge?locale=en'/>
+            </a>
+            <small style="display: block;">Looking for macOS or Windows? Join <a href="https://forms.gle/toyf1N6zdWzSAdpH8">the waitlist</a>.</small>
+        </div>
+    </div>
+    <img class="main-screenshot screenshot"></img>
+</div>
+
+<div class="content center">
+    <div class="home-block">
+        <div class="home-block-info">
+            <h2>Build & publish sites, together.</h2>
+            <p>Create sites locally, edit them in real time, and publish changes instantly.</p>
+            <a href="{{ global.url }}/guide/Replicas.html">Explore replicas →</a>
+        </div>
+        <img class="replicas-screenshot screenshot"></img>
+    </div>
+
+    <div class="home-block">
+        <div class="home-block-info">
+            <h2>Build a knowledge base as you browse.</h2>
+            <p>Take notes on what you view. Contextualise your browsing history.</p>
+            <a href="{{ global.url }}/guide/Notes.html">Explore notes →</a>
+        </div>
+        <img class="note-editor-screenshot screenshot"></img>
+    </div>
+
+    <div class="home-block">
+        <div class="home-block-info">
+            <h2>Build your own invite-only social network.</h2>
+            <p>Find & share sites through social bookmarking. Curate your feed. Search known sites locally.</p>
+            <a href="{{ global.url }}/guide/OkuNet.html">Explore the OkuNet →</a>
+        </div>
+        <img class="okunet-home-screenshot screenshot"></img>
+    </div>
+
+</div>
diff --git a/layouts/default.vox b/layouts/default.vox
@@ -8,7 +8,7 @@
     <body>
         <a id="skip" href="#skip-target">Skip to main content</a>
         {% include header.html %}
-        <div class="container" id="skip-target">
+        <div class="container content" id="skip-target">
             {% assign output_name = page.url | split: "/" | last %}
             {% if output_name != 'index.html' %}
                 {% if page.collections.first %}
@@ -21,7 +21,7 @@
         </div>
         <script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
     </body>
-    <footer class="container">
+    <footer class="container content">
         <small>
             &copy; {{ global.author }} <time datetime="{{ meta.date.rfc_2822 }}">{{ meta.date.year }}</time>
         </small>

diff --git a/layouts/index.vox b/layouts/index.vox
@@ -8,7 +8,7 @@
     <body>
         <a id="skip" href="#skip-target">Skip to main content</a>
         {% include header.html %}
-        <div class="container glass center" id="skip-target">
+        <div id="skip-target">
             {% assign output_name = page.url | split: "/" | last %}
             {% if output_name != 'index.html' %}
                 {% if page.collections.first %}
@@ -21,7 +21,7 @@
         </div>
         <script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
     </body>
-    <footer class="container">
+    <footer class="container content">
         <small>
             &copy; {{ global.author }} <time datetime="{{ meta.date.rfc_2822 }}">{{ meta.date.year }}</time>
         </small>

diff --git a/sass/masthead.scss b/sass/masthead.scss
@@ -1,23 +1,68 @@
 .masthead {
-    padding-top: var(--spacer);
-    padding-bottom: var(--spacer);
-    margin-bottom: var(--spacer-2);
+    top: 0;
+    display: flex;
+    position: sticky;
+    flex-direction: column;
+    background-color: var(--header-color);
+    z-index: 1;
+    padding: 0.333rem;
+    margin: 8px;
+    margin-bottom: var(--spacer);
+    border-bottom: thin solid var(--border-color);
+    border: 1px solid rgba(255, 255, 255, .25);
+    border-radius: 20px;
+    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(15px);
+    nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.masthead-left {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    .masthead-ul {
+        flex-grow: 1;
+        margin-left: 34px;
+    }
 }
 
-.masthead small:not(:last-of-type)::after {
-    content: " • ";
+.masthead-ul {
+    list-style: none;
+    display: flex;
+    align-items: center;
 }
 
+.masthead-li {
+    position: relative;
+    font-size: 0.8375rem;
+    font-weight: 500;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+// .masthead small:not(:last-of-type)::after {
+//     content: " • ";
+// }
+
 .masthead-title {
-    margin-bottom: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
 
     a {
         color: inherit;
         text-decoration: none;
     }
 
-    small {
-        font-weight: 400;
-        opacity: .5;
+    * {
+        font-size: 0.8375rem;
+        font-weight: 600;
+        margin: 0;
     }
 }
diff --git a/sass/posts.scss b/sass/posts.scss
@@ -52,7 +52,7 @@
         text-decoration: none;
 
         small {
-            color: var(--gray-600);
+            color: var(--dark-3);
         }
     }
 }
diff --git a/sass/site.scss b/sass/site.scss
@@ -14,9 +14,6 @@
 }
 
 html {
-  margin: 0;
-  padding-top: 4rem;
-  padding-bottom: 4rem;
   font-family: var(--body-font);
   line-height: var(--body-line-height);
   color: var(--body-color);
@@ -113,20 +110,27 @@ html {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 1rem;
+  justify-content: center;
 }
 
 .gallery-post {
-  width: 12rem;
-  height: 12rem;
-}
-
-.gallery-post > figure {
-  height: 7.5rem;
-}
-
-.gallery-post > h1 {
-  height: 2rem;
-  font-size: 1rem;
+  max-width: 12rem;
+  height: 100%;
+  display: flex;
+  flex-flow: row wrap;
+  align-content: space-between;
+  justify-content: space-between;
+  figure {
+    flex-basis: 100%;
+  }
+  div {
+    flex-basis: 100%;
+    height: 0;
+  }
+  h1 {
+    flex-basis: 100%;
+    font-size: 1rem;
+  }
 }
 
 .center {
@@ -135,17 +139,20 @@ html {
   justify-content: center;
 }
 
+.content {
+  z-index: -1;
+  max-width: 45rem;
+  padding: var(--spacer-2);
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .container {
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: 20px;
   background-color: var(--container-bg);
   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(15px);
-  z-index: -1;
-  max-width: 45rem;
-  padding: var(--spacer-2);
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .clay {
@@ -162,6 +169,38 @@ html {
   border: 0.1px solid transparent;
 }
 
+.intro-box {
+  display: flex;
+  align-items: center;
+  padding: var(--spacer-3);
+  .intro-info {
+    width: 50%;
+    h1 {
+      font-weight: 600;
+    }
+    h2 {
+      font-weight: 500;
+    }
+  }
+  .main-screenshot {
+    width: 50%;
+  }
+}
+
+.home-block {
+  display: block;
+  align-items: center;
+  padding: var(--spacer-3);
+  .home-block-info {
+    h2 {
+      font-weight: 600;
+    }
+    p {
+      color: var(--gray);
+    }
+  }
+}
+
 footer {
   margin-top: var(--spacer-3);
   margin-bottom: var(--spacer-3);
@@ -217,7 +256,7 @@ thead th {
 
 mark {
   padding: .15rem;
-  background-color: var(--yellow-100);
+  background-color: var(--yellow-1);
   border-radius: .125rem;
 }
 

diff --git a/sass/typography.scss b/sass/typography.scss
@@ -17,7 +17,7 @@ h5,
 h6 {
     font-family: "Poppins", sans-serif;
     margin-bottom: .5rem;
-    font-weight: 700;
+    font-weight: 600;
     line-height: 1.25;
     color: var(--heading-color);
 }
@@ -50,7 +50,7 @@ em {
 p {
     margin-top: 0;
     margin-bottom: 1rem;
-    font-weight: 600;
+    font-weight: 500;
 }
 
 ul {
@@ -82,7 +82,7 @@ hr {
 abbr {
     font-size: 85%;
     font-weight: bold;
-    color: var(--gray-600);
+    color: var(--dark-3);
     text-transform: uppercase;
 
     &[title] {
@@ -94,7 +94,7 @@ abbr {
 blockquote {
     padding: .5rem 1rem;
     margin: .8rem 0;
-    color: var(--gray-500);
+    color: var(--dark-2);
     border-left: .25rem solid var(--border-color);
 
     p:last-child {