website: various tweaks
- add Vanadium icon to navbar and mobile sidebar
- adjust sidebar icon/logo colors to match v.io
- adjust <h*> and <p> font sizes and line heights to more
closely follow Material Design, with a minimal number of
necessary deviations
- revert bits of v.io/c/19519 - note that the ToS talks
about Google-hosted site (v.io); adjustments to ToS should
go through Cos/Nadav
Change-Id: I1712b54f03cf7c7017bef0de75250d499827fd98
diff --git a/browser/sidebar.js b/browser/sidebar.js
index 9a84f44..8485473 100644
--- a/browser/sidebar.js
+++ b/browser/sidebar.js
@@ -86,7 +86,12 @@
displayName: 'Sidebar',
render: function() {
return h('div', [
- h('div.logo', 'Vanadium'),
+ h('div.logo-row', [
+ h('div.icon.v-icon', {}, h('img', {
+ src: '/images/v-icon-cyan-700.svg'
+ })),
+ h('div.logo', 'Vanadium')
+ ]),
h('div.items', renderItems(this.props.items))
]);
}
diff --git a/content/tos.md b/content/tos.md
index d723fe6..2d7e21a 100644
--- a/content/tos.md
+++ b/content/tos.md
@@ -2,12 +2,12 @@
title: Terms of Service
= yaml =
-The Vanadium website, [vanadium.github.io], (the "Website") and [Vanadium Cloud Services] (the
+The Vanadium [v.io] website (the "Website") and [Vanadium Cloud Services] (the
"Services") are hosted by Google. By using and/or visiting the Website and/or
Services, you consent to be bound by Google's general [Terms of Service], the
[Google APIs Terms of Service], and Google's general [Privacy Policy].
-[vanadium.github.io]: https://vanadium.github.io
+[v.io]: https://v.io
[Vanadium Cloud Services]: tools/services.html
[Terms of Service]: https://www.google.com/intl/en/policies/terms/
[Google APIs Terms of Service]: https://developers.google.com/terms/
diff --git a/content/tutorials/checkup.md b/content/tutorials/checkup.md
index 5236cc6..610659a 100644
--- a/content/tutorials/checkup.md
+++ b/content/tutorials/checkup.md
@@ -16,9 +16,9 @@
```
function bad_vanadium() {
echo '
- Per https://vanadium.github.io/installation, either
+ Per https://vanadium.github.io/installation/, either
- export V23_RELEASE={your installation directory}
+ export JIRI_ROOT={your installation directory}
or do a fresh install.';
exit 1;
diff --git a/content/tutorials/security/third-party-caveats.md b/content/tutorials/security/third-party-caveats.md
index 7eaab79..974b977 100644
--- a/content/tutorials/security/third-party-caveats.md
+++ b/content/tutorials/security/third-party-caveats.md
@@ -486,7 +486,7 @@
[identityd], [self-blessed][self-blessing] with the name `dev.v.io`.
A web server associated with that provider told the browser to send
-its user - _you_ - to Google for login, then to an [Oauth] grant
+its user - _you_ - to Google for login, then to an [OAuth] grant
screen. After completing that, it gave you a form for creating a
blessing. When you clicked __Bless__, the form was submitted, and the
provider sent an RPC with the resulting blessing to the aforementioned
diff --git a/public/images/v-icon-cyan-700.svg b/public/images/v-icon-cyan-700.svg
new file mode 100644
index 0000000..11c99c1
--- /dev/null
+++ b/public/images/v-icon-cyan-700.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"><path fill="#0097a7" d="M97.6,12.3c-3.2-5.5-8.8-8.7-15.1-8.7H15.3c-1.4,0-2.7,0.7-3.4,1.9c-0.7,1.2-0.7,2.7,0,3.9l8.2,14.2l-16.2,0 c-1.4,0-2.7,0.7-3.4,1.9c-0.7,1.2-0.7,2.7,0,3.9L34,87.7c3.2,5.5,8.8,8.8,15.1,8.8c6.3,0,12-3.3,15.1-8.8l33.3-57.9 C100.8,24.3,100.8,17.8,97.6,12.3z M90.9,25.9L57.6,83.8c-1.8,3-4.9,4.9-8.4,4.9c-3.5,0-6.7-1.8-8.4-4.9L10.6,31.3h14l18.1,31.4 c-0.6,1.1-0.9,2.3-0.9,3.6c0,4.1,3.3,7.4,7.4,7.4c4.1,0,7.4-3.3,7.4-7.4c0-1.3-0.3-2.5-0.9-3.6l16-27.9c4-0.1,7.2-3.4,7.2-7.4 c0-4.1-3.3-7.4-7.4-7.4c-2.7,0-5,1.4-6.4,3.6l-36.2,0l-7-12.2h60.5c3.5,0,6.6,1.8,8.4,4.8C92.7,19.2,92.7,22.8,90.9,25.9z M64.8,31.3L49.2,58.5L33.5,31.3L64.8,31.3z"/></svg>
diff --git a/public/images/v-icon-white.svg b/public/images/v-icon-white.svg
new file mode 100644
index 0000000..acacf92
--- /dev/null
+++ b/public/images/v-icon-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"><path fill="#ffffff" d="M97.6,12.3c-3.2-5.5-8.8-8.7-15.1-8.7H15.3c-1.4,0-2.7,0.7-3.4,1.9c-0.7,1.2-0.7,2.7,0,3.9l8.2,14.2l-16.2,0 c-1.4,0-2.7,0.7-3.4,1.9c-0.7,1.2-0.7,2.7,0,3.9L34,87.7c3.2,5.5,8.8,8.8,15.1,8.8c6.3,0,12-3.3,15.1-8.8l33.3-57.9 C100.8,24.3,100.8,17.8,97.6,12.3z M90.9,25.9L57.6,83.8c-1.8,3-4.9,4.9-8.4,4.9c-3.5,0-6.7-1.8-8.4-4.9L10.6,31.3h14l18.1,31.4 c-0.6,1.1-0.9,2.3-0.9,3.6c0,4.1,3.3,7.4,7.4,7.4c4.1,0,7.4-3.3,7.4-7.4c0-1.3-0.3-2.5-0.9-3.6l16-27.9c4-0.1,7.2-3.4,7.2-7.4 c0-4.1-3.3-7.4-7.4-7.4c-2.7,0-5,1.4-6.4,3.6l-36.2,0l-7-12.2h60.5c3.5,0,6.6,1.8,8.4,4.8C92.7,19.2,92.7,22.8,90.9,25.9z M64.8,31.3L49.2,58.5L33.5,31.3L64.8,31.3z"/></svg>
diff --git a/stylesheets/header.less b/stylesheets/header.less
index 55abdf1..75a4555 100644
--- a/stylesheets/header.less
+++ b/stylesheets/header.less
@@ -17,6 +17,7 @@
}
}
+/* Similar to .logo-row in sidebar.less. */
.row {
display: flex;
align-items: center;
@@ -24,14 +25,26 @@
height: @header-height;
.icon {
+ margin: 0 @gutter-quarter 0 calc(12px - @gutter);
+ }
+
+ .menu {
display: none;
@media @small-screen {
display: block;
- margin: 0 @gutter-half 0 calc(12px - @gutter);
padding: 12px;
}
}
+
+ .v-icon {
+ padding: 6px;
+ cursor: auto;
+
+ @media @small-screen {
+ display: none;
+ }
+ }
}
.spacer {
diff --git a/stylesheets/index.less b/stylesheets/index.less
index 203f597..48c61f9 100644
--- a/stylesheets/index.less
+++ b/stylesheets/index.less
@@ -34,16 +34,23 @@
h1, h2, h3, h4, h5, h6 {
margin: 1.2em 0 0.4em;
- line-height: 1.4;
+ line-height: 1.5;
}
h4, h5, h6 {
font-weight: 500;
}
+h1.title {
+ color: @color-cyan-700;
+ font-size: 45px;
+ line-height: 48px;
+}
h1 {
- font-size: 30px;
+ font-size: 34px;
+ line-height: 40px;
}
h2 {
font-size: 24px;
+ line-height: 32px;
}
h3 {
font-size: 20px;
@@ -60,6 +67,7 @@
p {
margin: 1em 0;
+ line-height: 1.7;
}
a {
@@ -142,11 +150,6 @@
padding: 0 calc(@gutter + @gutter-half) @gutter;
max-width: @main-max-width;
- h1.title {
- color: @color-cyan-700;
- font-size: 40px;
- }
-
/* Prevent headings from being obscured by the <header> for #heading urls. */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
/**
diff --git a/stylesheets/sidebar.less b/stylesheets/sidebar.less
index 432b163..0dc5d18 100644
--- a/stylesheets/sidebar.less
+++ b/stylesheets/sidebar.less
@@ -9,11 +9,22 @@
background-color: @color-grey-100;
}
-.logo {
+/* Similar to .row in header.less. */
+.logo-row {
display: flex;
align-items: center;
+ padding: 0 @gutter;
height: @header-height;
- padding-left: @gutter;
+ color: @color-cyan-700;
+
+ .icon {
+ margin: 0 @gutter-quarter 0 calc(12px - @gutter);
+ }
+
+ .v-icon {
+ padding: 6px;
+ cursor: auto;
+ }
}
.items {
diff --git a/templates/partials/header.mustache b/templates/partials/header.mustache
index 6d37287..ebe07ee 100644
--- a/templates/partials/header.mustache
+++ b/templates/partials/header.mustache
@@ -1,6 +1,7 @@
<header class="mdl-shadow--2dp">
<div class="row">
- <div class="icon"><i class="material-icons">menu</i></div>
+ <div class="icon menu"><i class="material-icons">menu</i></div>
+ <div class="icon v-icon"><img src="/images/v-icon-white.svg"></div>
<div class="logo"><a href="/">Vanadium</a></div>
<div class="spacer"></div>
<nav>
