website: fixing some nits:

https://screenshot.googleplex.com/70zBTvkh5GK.png
https://screenshot.googleplex.com/pnpqOkvxZ8g.png
https://screenshot.googleplex.com/RYDpRHZDsj6.png

-Bolded heading text
-More padding around sections
-Fixing the sidebar when in "narrow-screen" mode
-Fixing logo jumping few pixels between landing and subsites
-Wording fix Alex proposed

Change-Id: I30e8366ba71944bb7108c0db4f88ae0857994bc8

Author: aghassemi

browser/index.js

@@ -17,6 +17,7 @@ domready(function() {
   var sidebarEl = dom.find('.sidebar');
   if (sidebarEl) {
     ReactDOM.render(Sidebar({
+      subsite: sidebarEl.dataset.subsite,
       items: parseSidebarProps(dom.find('.sidebar-data'))
     }), sidebarEl);
 

browser/sidebar.js

@@ -80,18 +80,38 @@ function renderItems(items) {
   });
 }
 
+function renderLogo(subsite) {
+  var title;
+  var href;
+  if (subsite === 'syncbase') {
+    title = 'Syncbase';
+    href = '/syncbase';
+  } else {
+    title = 'Core';
+    href = '/core.html';
+  }
+
+  return h('div.logo-row', [
+    h('div.icon.v-icon', {},
+      h('a', {href: '/'},
+        h('img', {
+          src: '/images/v-icon-cyan-700.svg'
+        })
+      )
+    ),
+    h('div.logo', {},
+      h('a', {href: href}, title)
+    )
+  ]);
+}
+
 // Expects props {items []Item}, where Item is either {text, items []Item} or
 // {text, href}.
 module.exports = React.createClass({
   displayName: 'Sidebar',
   render: function() {
     return h('div', [
-      h('div.logo-row', [
-        h('div.icon.v-icon', {}, h('img', {
-          src: '/images/v-icon-cyan-700.svg'
-        })),
-        h('div.logo', 'Vanadium')
-      ]),
+      renderLogo(this.props.subsite),
       h('div.items', renderItems(this.props.items))
     ]);
   }

content/syncbase/example-apps.md

@@ -4,7 +4,7 @@ layout: syncbase
 toc: true
 = yaml =
 
-# Todos *(canonical example)*
+# Todos *(Canonical Example)*
 
 * Repo: https://github.com/vanadium/todos
 

content/syncbase/first-app.md

@@ -56,7 +56,7 @@ Make note of the Syncbase **Address** and the **Blessing** for your cloud
 instance, they are required by the Syncbase API during initialization.
 
 {{# helpers.info }}
-## Please note
+## Note
 Requiring a cloud Syncbase is temporary. We are planning to allow the API to be
 used without a cloud Syncbase very soon.
 {{/ helpers.info }}
@@ -298,12 +298,12 @@ the `Select a Deployment Target`. If you prefer to use the command line
 tool that makes it easy to run Android apps on multiple devices.
 
 {{# helpers.info }}
-## Please note
+## Note
 Internet connectivity is required the first time the app is run to authenticate
 the user and generate an offline auth certificate.
-Subsequence runs do not require Internet connectivity for 24 hours. (Auth protocol
-starts trying to refresh the certificate after 12 hours and it would expire in
-24 hours if all tries are unsuccessful).
+Subsequent runs generally do not require Internet connectivity. The auth
+protocol refreshes its certificate automatically after 12 hours, but the
+certificate will expire if a device is offline for more than 24 hours.
 {{/ helpers.info }}
 
 After running the application on 2 or more devices with Internet connectivity,
@@ -319,7 +319,7 @@ cd $PROJECT_DIR && ./gradlew assembleRelease
 ```
 {{/ helpers.hidden }}
 
-# Want to dive deeper?
+# Want to Dive Deeper?
 Checkout the [Tutorial] to build a full-fledged Todo app and learn more Syncbase
 features such as sharing, batches and discovery.
 

content/syncbase/guides/synchronization.md

@@ -38,7 +38,7 @@ By default, creating a collection creates an associated syncgroup, initially
 synced amongst the creator’s devices but other users can also be added to this
 syncgroup to allow sharing.
 
-## Sharing collections
+## Sharing Collections
 
 Sharing collections involves **inviting** other users to **join** a collection's
 syncgroup. Upon inviting a user, the invitee **receives an invite event**. When
@@ -84,7 +84,7 @@ syncing into the invitee's database. As the collection syncs, data will be
 surfaced through the *Watch API*. See [Data Flow] guide for details on how
 to model your app's data flow.
 
-## Unsharing collections
+## Unsharing Collections
 
 Ejecting a user from a collection's syncgroup will unshare the collection. If
 the target user has not accepted the invitation yet, the invite will simply

content/syncbase/index.md

@@ -12,7 +12,7 @@ Syncbase runs on both Android and iOS (coming soon).
 
 <figcaption>Syncbase Overview</figcaption>
 
-# Why use Syncbase?
+# Why Use Syncbase?
 
 <div class="intro-detail intro-detail-offline">
 <p>
@@ -60,7 +60,7 @@ configurable conflict resolution we want. In summary, we're trying to solve a
 bunch of problems simultaneously whereas those other systems each solve a subset
 of those problems.
 
-# Ready to get started?
+# Ready to Get Started?
 
 The initial version of Syncbase is ready for testing and evaluation by early
 adopters - it is suitable for prototyping, but not for production applications.

content/syncbase/my-cloud-syncbase.md

@@ -14,7 +14,7 @@ Each instance is running in a dedicated container, isolated from all the other
 instances.  Access is restricted to the creator of the instance.
 
 {{# helpers.warning }}
-## Please note
+## Note
 
 The instances are meant to be used for development.  There are no guarantees
 about availability or performance.  Data stored in the instances can be lost at

content/syncbase/quickstart.md

@@ -49,7 +49,7 @@ Make note of the Syncbase **Address** and the **Blessing** for your cloud
 instance, they are required by the Syncbase API during initialization.
 
 {{# helpers.info }}
-## Please note
+## Note
 Requiring a cloud Syncbase is temporary. We are planning to allow the API to be
 used without a cloud Syncbase soon.
 {{/ helpers.info }}
@@ -110,7 +110,7 @@ cd $PROJECT_DIR && ./gradlew assembleRelease
 ```
 {{/ helpers.hidden }}
 
-# Got 10 more minutes?
+# Got 10 More Minutes?
 Let's create a simple *Dice Roller* app and see it sync peer-to-peer in action!
 
 <a href="/syncbase/first-app.html" class="button-passive">

stylesheets/home.less

@@ -36,15 +36,15 @@
   section {
     max-width: 100%;
     width: 100%;
-    padding: @gutter;
+    padding: (2 * @gutter) @gutter;
   }
 
   .menu {
     display: none !important;
   }
 
   .v-icon {
-    display: block !important;
+    display: flex !important;
   }
 
   .section-container {
@@ -53,23 +53,25 @@
   }
 
   h1, h2, h3 {
-    font-weight: 100;
     margin: @gutter-half 0px;
   }
 
   h1 {
     color: @color-white;
     font-size: @intro-heading-font-size;
+    font-weight: 400;
   }
 
   h2 {
     color: @color-primary-700;
     font-size: @intro-subheading-font-size;
+    font-weight: 100;
   }
 
   h3 {
     color: @color-blue-grey-500;
     font-size: @intro-text-font-size;
+    font-weight: 100;
   }
 
   .intro {

stylesheets/sidebar.less

@@ -29,31 +29,31 @@
 
 .items {
   padding: @gutter-half 0;
-}
-
-a {
-  display: block;
-  padding: @gutter-quarter @gutter-half;
-  color: @color-text-primary;
-  font-size: 14px;
-  font-weight: 400;
 
-  &.active {
-    background-color: @color-blue-grey-100;
-    font-weight: 500;
+  a {
+    display: block;
+    padding: @gutter-quarter @gutter-half;
+    color: @color-text-primary;
+    font-size: 14px;
+    font-weight: 400;
+
+    &.active {
+      background-color: @color-blue-grey-100;
+      font-weight: 500;
+    }
   }
-}
 
-nav {
-  overflow: hidden;
+  nav {
+    overflow: hidden;
 
-  a {
-    padding: 6px;
-    padding-left: @gutter;
-    font-size: 13px;
-  }
+    a {
+      padding: 6px;
+      padding-left: @gutter;
+      font-size: 13px;
+    }
 
-  nav a {
-    padding-left: calc(@gutter + @gutter-half);
+    nav a {
+      padding-left: calc(@gutter + @gutter-half);
+    }
   }
 }

templates/partials/core_sidebar.mustache

@@ -2,7 +2,7 @@
 Note to contributors: The sidebar items and ordering were tested extensively for
 usability. Changes here should not be taken lightly.
 }}
-<div class="sidebar"></div>
+<div data-subsite="core" class="sidebar"></div>
 {{! TODO(sadovsky): Transmit data as JSON, not HTML. }}
 <div class="sidebar-data">
   <a href="/core.html">Overview</a>

templates/partials/syncbase_sidebar.mustache

@@ -2,7 +2,7 @@
 Note to contributors: The sidebar items and ordering were tested extensively for
 usability. Changes here should not be taken lightly.
 }}
-<div class="sidebar"></div>
+<div data-subsite="syncbase" class="sidebar"></div>
 {{! TODO(sadovsky): Transmit data as JSON, not HTML. }}
 <div class="sidebar-data">
   <a href="/syncbase/">Overview</a>