Add screenshot

Author: emmyoh

.github/workflows/publish.yml

@@ -25,7 +25,6 @@ jobs:
       - if: ${{ steps.cache-cargo.outputs.cache-hit != 'true' }}
         name: Install Grass and Vox
         run: |
-            rustup update nightly && rustup default nightly
             time cargo install grass
             time cargo install --git https://github.com/emmyoh/vox --features="cli"
       - name: Checkout codebase

about.vox

@@ -10,7 +10,7 @@ permalink = "about/index.html"
 Oku is a browser with an emphasis on local-first data storage.\
 It comes with a unique peer-to-peer protocol that enables:
 
-* Creating & publishing media without hosting fees
+* Creating & publishing sites
 * Sharing files directly with friends
 * Storing personal data on the devices you control
 * Synchronising files between your devices
@@ -37,7 +37,13 @@ No. Oku uses WebKit, the same browser engine found in Safari.
 
 > What platforms does Oku support?
 
-Currently, Oku is only available on operating systems using the Linux kernel.
+Currently, the Oku browser is only available on operating systems using the Linux kernel.
+
+The protocol included with Oku may be used via a command-line frontend, available on Linux, macOS, and Windows.
+
+> Where can I learn more about the protocol?
+
+To learn more about the protocol, visit [the code repository]({{ global.protocol_repository }}).
 
 > What does the name mean?
 

assets/dark.png

@@ -3,4 +3,6 @@ url = "https://okubrowser.github.io"
 # url = "http://localhost" # For developing locally
 title = "Oku"
 description = "Your new home on the Internet"
-author = "Emil Sayahi"
+author = "Emil Sayahi"
+browser_repository = "https://github.com/OkuBrowser/oku"
+protocol_repository = "https://github.com/OkuBrowser/oku-fs"

assets/light.png

@@ -3,28 +3,51 @@ layout = "index"
 permalink = "index.html"
 ---
 
+<div class="main-screenshot">
+</div>
+
 {% markdown %}
 
 # Making browsing *fun* again.
 
-Make & share your own Web sites.
+* 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.
+## *Your* data on *your* machine.
 
-Let sites keep your information with you, not on servers they control.
+### Let sites keep your information with you, not on servers they control.
 
-# Let your garden grow wild.
+- 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.
 
-Build your own space on the Internet, independent from any platforms.
+## Let your garden grow wild.
 
-# Not Google Chrome in disguise.
+### Build your own space on the Internet, independent from social media platforms.
 
-Powered by WebKit, Oku is an escape from Google's influence on browser technology and complies with the latest Web standards.
+- 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 }}/about)
 
 {% endmarkdown %}

global.toml

@@ -1,4 +1,5 @@
 :root {
+    font-family: var(--body-font);
     font-feature-settings: 'liga' 1, 'calt' 1;
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: transparent;
@@ -8,7 +9,7 @@
 
 @supports (font-variation-settings: normal) {
     :root {
-        font-family: "InterVariable", sans-serif;
+        font-family: "InterVariable", var(--body-font);
     }
 }
 

index.vox

@@ -16,6 +16,11 @@ html {
   background-attachment: fixed;
 }
 
+.main-screenshot {
+  content: var(--main-screenshot);
+  width: 100%;
+}
+
 .center {
   text-align: center;
   align-items: center;

sass/main.scss

@@ -7,7 +7,6 @@ pre,
 table,
 ul {
     color: var(--body-color);
-    text-shadow: var(--text-shadow);
 }
 
 h1,
@@ -16,11 +15,11 @@ h3,
 h4,
 h5,
 h6 {
+    font-family: "Poppins", sans-serif;
     margin-bottom: .5rem;
     font-weight: 700;
     line-height: 1.25;
     color: var(--heading-color);
-    text-shadow: var(--text-shadow);
 }
 
 h1 {
@@ -44,12 +43,20 @@ h6 {
     font-size: 1rem;
 }
 
+em {
+    font-family: "Tenor Sans", sans-serif;
+}
+
 p {
     margin-top: 0;
     margin-bottom: 1rem;
     font-weight: 600;
 }
 
+ul {
+    text-align: initial;
+}
+
 ul,
 ol,
 dl {

sass/site.scss

@@ -32,27 +32,27 @@
     --spacer: 1rem;
     --spacer-2: calc(var(--spacer) * 1.5);
     --spacer-3: calc(var(--spacer) * 3);
-    --body-bg: radial-gradient(var(--pico-color-red-400), var(--pico-color-red-500), var(--pico-color-red-400));
-    --body-bg-color: var(--pico-color-red-500);
+    --body-bg: linear-gradient(var(--pico-color-red-100), var(--pico-color-red-100), var(--pico-color-red-150));
+    --body-bg-color: var(--pico-color-red-100);
     --body-color: var(--gray-800);
     --link-color: var(--pico-color-pink-500);
     --link-hover-color: var(--pico-color-pink-650);
     --heading-color: var(--gray-900);
     --border-color: var(--gray-700);
     --container-bg: rgba(255, 255, 255, 0.45);
-    --text-shadow: var(--gray-800) 0px 0px 0.33px;
+    --main-screenshot: url('/assets/light.png');
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --body-bg: radial-gradient(var(--pico-color-violet-750), var(--pico-color-violet-600), var(--pico-color-violet-500));
-        --body-bg-color: var(--pico-color-violet-750);
+        --body-bg: linear-gradient(var(--pico-color-purple-950), var(--pico-color-purple-950), var(--pico-color-purple-900));
+        --body-bg-color: var(--pico-color-purple-950);
         --body-color: var(--gray-000);
         --link-color: var(--pico-color-amber-250);
         --link-hover-color: var(--pico-color-amber-200);
         --heading-color: var(--gray-000);
         --border-color: var(--gray-300);
         --container-bg: rgba(255, 255, 255, 0.33);
-        --text-shadow: var(--gray-200) 0px 0px 0.66px;
+        --main-screenshot: url('/assets/dark.png');
     }
 }

sass/typography.scss

@@ -11,6 +11,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="{{ global.description }}">
 
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tenor+Sans&display=swap" rel="stylesheet">
 <link rel="preconnect" href="https://rsms.me/">
 <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">