website: General theme support and using Teal theme
for Syncbase website.
https://screenshot.googleplex.com/gioL6fOyUCS
The other option for Syncbase is Ligh Blue. Teal
and Light Blue are the two colors closes to Cyan
anything other than those (unless non-Material) will
be too different from the main site.
Blue version: https://screenshot.googleplex.com/grOTbUEnxbM.png
Change-Id: Ic517c15d6f18c62d348745624b945f53c51a5d2b
diff --git a/Makefile b/Makefile
index 333843d..5089feb 100644
--- a/Makefile
+++ b/Makefile
@@ -64,7 +64,7 @@
TMPDIR := $(shell mktemp -d "/tmp/XXXXXX")
HEAD := $(shell git rev-parse HEAD)
-bundles := public/css/bundle.css public/js/bundle.js
+bundles := public/css public/js/bundle.js
haiku_inputs := $(shell find public/* content/* templates/*)
# A list of case-sensitive banned words.
@@ -166,8 +166,13 @@
# NOTE(sadovsky): Newer versions of postcss-cli and autoprefixer use JavaScript
# Promises, which doesn't work with Vanadium's old version of node, 0.10.24.
-public/css/bundle.css: $(shell find stylesheets/*) node_modules
- lessc -sm=on stylesheets/index.less | postcss -u autoprefixer > $@
+
+# Generates a compiled css file for every less file in the themes directory.
+public/css: $(shell find stylesheets/*) node_modules
+ @for FILE in $(shell find stylesheets/themes/* -type f -print0 | xargs -0 -n1 basename) ; do \
+ lessc -sm=on stylesheets/themes/$$FILE | postcss -u autoprefixer > $@/bundle.$${FILE%.*}.css ; \
+ done
+ touch $@
public/js/bundle.js: browser/index.js $(shell find browser) node_modules
$(call BROWSERIFY,$<,$@)
diff --git a/content/syncbase/example-apps.md b/content/syncbase/example-apps.md
index faa653c..0df0162 100644
--- a/content/syncbase/example-apps.md
+++ b/content/syncbase/example-apps.md
@@ -1,5 +1,6 @@
= yaml =
title: Example Apps
layout: syncbase
+theme: teal
toc: true
= yaml =
diff --git a/content/syncbase/guides/acls.md b/content/syncbase/guides/acls.md
index e634c83..6867784 100644
--- a/content/syncbase/guides/acls.md
+++ b/content/syncbase/guides/acls.md
@@ -1,6 +1,7 @@
= yaml =
title: Access Control
layout: syncbase
+theme: teal
sort: 5
toc: true
= yaml =
diff --git a/content/syncbase/guides/batches.md b/content/syncbase/guides/batches.md
index 8772d54..5f5c608 100644
--- a/content/syncbase/guides/batches.md
+++ b/content/syncbase/guides/batches.md
@@ -1,6 +1,7 @@
= yaml =
title: Batches
layout: syncbase
+theme: teal
sort: 4
toc: true
= yaml =
diff --git a/content/syncbase/guides/blobs.md b/content/syncbase/guides/blobs.md
index 863f015..c10f63c 100644
--- a/content/syncbase/guides/blobs.md
+++ b/content/syncbase/guides/blobs.md
@@ -1,6 +1,7 @@
= yaml =
title: Blobs
layout: syncbase
+theme: teal
sort: 7
toc: true
= yaml =
diff --git a/content/syncbase/guides/cloud.md b/content/syncbase/guides/cloud.md
index 647976c..82b7d94 100644
--- a/content/syncbase/guides/cloud.md
+++ b/content/syncbase/guides/cloud.md
@@ -1,6 +1,7 @@
= yaml =
title: Cloud Syncbase
layout: syncbase
+theme: teal
sort: 10
toc: true
= yaml =
diff --git a/content/syncbase/guides/conflict.md b/content/syncbase/guides/conflict.md
index a2aaa8c..bdf1b58 100644
--- a/content/syncbase/guides/conflict.md
+++ b/content/syncbase/guides/conflict.md
@@ -1,6 +1,7 @@
= yaml =
title: Conflict Resolution
layout: syncbase
+theme: teal
sort: 8
toc: true
= yaml =
diff --git a/content/syncbase/guides/data-flow.md b/content/syncbase/guides/data-flow.md
index de03f53..3cba173 100644
--- a/content/syncbase/guides/data-flow.md
+++ b/content/syncbase/guides/data-flow.md
@@ -1,6 +1,7 @@
= yaml =
title: Data Flow
layout: syncbase
+theme: teal
sort: 2
toc: true
= yaml =
diff --git a/content/syncbase/guides/data-model.md b/content/syncbase/guides/data-model.md
index dc39331..8d26e8a 100644
--- a/content/syncbase/guides/data-model.md
+++ b/content/syncbase/guides/data-model.md
@@ -1,6 +1,7 @@
= yaml =
title: Data Model
layout: syncbase
+theme: teal
sort: 1
toc: true
= yaml =
diff --git a/content/syncbase/guides/schema.md b/content/syncbase/guides/schema.md
index 0f517e6..6a6a9f1 100644
--- a/content/syncbase/guides/schema.md
+++ b/content/syncbase/guides/schema.md
@@ -1,6 +1,7 @@
= yaml =
title: Schema and upgrades
layout: syncbase
+theme: teal
sort: 9
toc: true
= yaml =
diff --git a/content/syncbase/guides/synchronization.md b/content/syncbase/guides/synchronization.md
index 1b981db..548ac20 100644
--- a/content/syncbase/guides/synchronization.md
+++ b/content/syncbase/guides/synchronization.md
@@ -1,6 +1,7 @@
= yaml =
title: Synchronization
layout: syncbase
+theme: teal
sort: 3
toc: true
= yaml =
diff --git a/content/syncbase/guides/syncql.md b/content/syncbase/guides/syncql.md
index 35a297b..e95c03d 100644
--- a/content/syncbase/guides/syncql.md
+++ b/content/syncbase/guides/syncql.md
@@ -1,6 +1,7 @@
= yaml =
title: SyncQL Queries
layout: syncbase
+theme: teal
sort: 6
toc: true
= yaml =
diff --git a/content/syncbase/index.md b/content/syncbase/index.md
index 2d9cf25..59eb642 100644
--- a/content/syncbase/index.md
+++ b/content/syncbase/index.md
@@ -1,6 +1,7 @@
= yaml =
title: Syncbase
layout: syncbase
+theme: teal
toc: true
= yaml =
diff --git a/content/syncbase/quickstart.md b/content/syncbase/quickstart.md
index e3291b4..f5537b0 100644
--- a/content/syncbase/quickstart.md
+++ b/content/syncbase/quickstart.md
@@ -1,5 +1,6 @@
= yaml =
title: Quick Start
layout: syncbase
+theme: teal
toc: true
= yaml =
diff --git a/content/syncbase/tutorial/step1.md b/content/syncbase/tutorial/step1.md
index 24cf992..f019661 100644
--- a/content/syncbase/tutorial/step1.md
+++ b/content/syncbase/tutorial/step1.md
@@ -1,6 +1,7 @@
= yaml =
title: Step 1
layout: syncbase_tutorial
+theme: teal
wherein: you do the step 1
sort: 1
toc: true
diff --git a/content/syncbase/tutorial/step2.md b/content/syncbase/tutorial/step2.md
index e06fcd5..77c0a36 100644
--- a/content/syncbase/tutorial/step2.md
+++ b/content/syncbase/tutorial/step2.md
@@ -1,6 +1,7 @@
= yaml =
title: Step 2
layout: syncbase_tutorial
+theme: teal
wherein: you do the step 2
sort: 2
toc: true
diff --git a/content/syncbase/tutorial/step3.md b/content/syncbase/tutorial/step3.md
new file mode 100644
index 0000000..b70fbf8
--- /dev/null
+++ b/content/syncbase/tutorial/step3.md
@@ -0,0 +1,10 @@
+= yaml =
+title: Step 3
+layout: syncbase_tutorial
+theme: teal
+wherein: you do the step 3
+sort: 3
+toc: true
+= yaml =
+
+# Introduction
diff --git a/stylesheets/code.less b/stylesheets/code.less
index eaea532..e8660e8 100644
--- a/stylesheets/code.less
+++ b/stylesheets/code.less
@@ -42,7 +42,7 @@
justify-content: flex-end;
.status {
- color: @color-cyan-700;
+ color: @color-primary-700;
font-family: "Roboto", sans-serif;
font-size: 13px;
font-weight: 500;
@@ -50,6 +50,6 @@
}
.icon {
- color: @color-cyan-700;
+ color: @color-primary-700;
}
}
diff --git a/stylesheets/constants.less b/stylesheets/constants.less
index a0cbb8b..84bc10b 100644
--- a/stylesheets/constants.less
+++ b/stylesheets/constants.less
@@ -8,9 +8,6 @@
@color-blue-grey-100: #cfd8dc;
@color-blue-grey-500: #607d8b;
@color-blue-grey-800: #37474f;
-@color-deep-orange-A200: #ff6e40;
-@color-cyan-700: #0097a7;
-@color-cyan-800: #00838f;
@color-grey-100: #f5f5f5;
@color-white: #ffffff;
diff --git a/stylesheets/header.less b/stylesheets/header.less
index 261f33b..733e5f3 100644
--- a/stylesheets/header.less
+++ b/stylesheets/header.less
@@ -6,7 +6,7 @@
& {
color: @color-white;
- background-color: @color-cyan-800;
+ background-color: @color-primary-800;
}
a {
diff --git a/stylesheets/index.less b/stylesheets/main.less
similarity index 97%
rename from stylesheets/index.less
rename to stylesheets/main.less
index 08a102f..b4219e4 100644
--- a/stylesheets/index.less
+++ b/stylesheets/main.less
@@ -48,7 +48,7 @@
font-weight: 500;
}
h1.title {
- color: @color-cyan-700;
+ color: @color-primary-700;
font-size: 45px;
line-height: 48px;
}
@@ -81,12 +81,12 @@
}
a {
- color: @color-cyan-700;
+ color: @color-primary-700;
text-decoration: none;
&:hover,
&:active {
- color: @color-cyan-800;
+ color: @color-primary-800;
}
}
diff --git a/stylesheets/note.less b/stylesheets/note.less
index 9b28f52..1d50201 100644
--- a/stylesheets/note.less
+++ b/stylesheets/note.less
@@ -13,7 +13,7 @@
}
&.warning {
- border-color: @color-deep-orange-A200;
+ border-color: @color-accent-A200;
}
h1, h2, h3, h4 {
diff --git a/stylesheets/previous-next.less b/stylesheets/previous-next.less
index 068af21..c970f2c 100644
--- a/stylesheets/previous-next.less
+++ b/stylesheets/previous-next.less
@@ -26,7 +26,7 @@
.previous {
justify-content: flex-start;
- background-color: @color-cyan-800;
+ background-color: @color-primary-800;
.text-wrapper {
align-items: flex-start;
@@ -35,7 +35,7 @@
.next {
justify-content: flex-end;
- background-color: @color-cyan-700;
+ background-color: @color-primary-700;
.text-wrapper {
align-items: flex-end;
diff --git a/stylesheets/sidebar.less b/stylesheets/sidebar.less
index 0dc5d18..30f9b4a 100644
--- a/stylesheets/sidebar.less
+++ b/stylesheets/sidebar.less
@@ -15,7 +15,7 @@
align-items: center;
padding: 0 @gutter;
height: @header-height;
- color: @color-cyan-700;
+ color: @color-primary-700;
.icon {
margin: 0 @gutter-quarter 0 calc(12px - @gutter);
diff --git a/stylesheets/themes/cyan.less b/stylesheets/themes/cyan.less
new file mode 100644
index 0000000..60a002e
--- /dev/null
+++ b/stylesheets/themes/cyan.less
@@ -0,0 +1,10 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "../main.less";
+
+/* https://www.google.com/design/spec/style/color.html */
+@color-accent-A200: #ff6e40;
+@color-primary-700: #0097a7;
+@color-primary-800: #00838f;
diff --git a/stylesheets/themes/teal.less b/stylesheets/themes/teal.less
new file mode 100644
index 0000000..437233b
--- /dev/null
+++ b/stylesheets/themes/teal.less
@@ -0,0 +1,10 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "../main.less";
+
+/* https://www.google.com/design/spec/style/color.html */
+@color-accent-A200: #ff6e40;
+@color-primary-700: #00796B;
+@color-primary-800: #00695C;
diff --git a/stylesheets/toc.less b/stylesheets/toc.less
index f715567..5c54f86 100644
--- a/stylesheets/toc.less
+++ b/stylesheets/toc.less
@@ -24,7 +24,7 @@
font-weight: 400;
&.active {
- color: @color-cyan-700;
+ color: @color-primary-700;
font-weight: 500;
}
}
diff --git a/templates/partials/head.mustache b/templates/partials/head.mustache
index 9503c93..11f2a08 100644
--- a/templates/partials/head.mustache
+++ b/templates/partials/head.mustache
@@ -41,7 +41,7 @@
<meta name="msapplication-TileColor" content="#00acc1">
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
- <link rel="stylesheet" href="/css/bundle.css">
+ <link rel="stylesheet" href="/css/bundle.{{ page.theme }}{{^ page.theme }}cyan{{/ page.theme }}.css">
<script src="/js/bundle.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
