Themes?

.gitignore

@@ -0,0 +1 @@
+sass/

README.md

@@ -1,86 +1,93 @@
-Life
-====
-
-This is something that I've wanted to build for a long time. It's a **timeline of important events** in my life, visualized in a way my mind always imagine it. There was something called [**Lifepath.me**](http://dcurt.is/facebook-timelines-and-lifepath-me-4) but now it's gone. How about Facebook timeline? Meh.
-
-So, this is it. Have a look at [cheeaun.github.io/life](http://cheeaun.github.io/life).
-
-Features
---------
-
-- Super simple
-- No fancy formatting
-- No fancy setup
-- No fancy effects
-- Flexible datetimes because sometimes you don't remember the exact date of an event
-
-How to contribute
------------------
-
-1. Fork this project.
-2. Write code.
-3. Make pull requests.
-
-How to setup your own *Life*
-----------------------------
-
-1. Fork this project.
-2. `git checkout -b gh-pages` (or any branch name you like)
-3. Make a copy of `life.example.md`, rename it to `life.md`.
-4. Add your life events into `life.md`.
-5. Preview it on a local server. Use [`python -m SimpleHTTPServer`](http://docs.python.org/2/library/simplehttpserver.html) or [`http-server`](https://github.com/nodeapps/http-server).
-6. Commit `life.md` (not in `master` branch).
-7. `git push origin gh-pages -f` and publish to [GitHub Pages](http://pages.github.com/).
-8. Update the website link in your GitHub repo description.
-9. Tell the world about your Life.
-10. Add your Life to the [Lives](https://github.com/cheeaun/life/wiki/Lives) page.
-
-How to upgrade your *Life*
---------------------------
-
-1. `git checkout master`
-2. `git remote add cheeaun https://github.com/cheeaun/life.git`
-3. `git fetch cheeaun` and `git merge cheeaun/master` to upgrade to latest Life.
-4. `git checkout gh-pages` and `git merge master` to sync changes back to GitHub Pages.
-
-[Learn more](https://help.github.com/articles/fork-a-repo).
-
-For those who forked the earlier version of Life, these are the steps that I would recommend (requires some Git-fu):
-
-1. Backup your `life.md`.
-2. Reset (hard) your fork to this repo's `master` branch.
-3. Clean up your `gh-pages`.
-4. Re-commit your `life.md` there.
-5. Make sure your `master` branch is untouched so that future updates work.
-
-How to configure your *Life*
-----------------------------
-
-1. Make a copy of `config.example.json`, rename it to `config.json`.
-2. Only commit it in `gh-pages` branch.
-
-The configuration:
-
-- `customStylesheetURL` - (*string*, default to `null`) Path to a custom stylesheet file, for those who doesn't like the default *theme*.
-- `yearLength` - (*number*, default to `120`) The width of the year grids, in pixels.
-- `hideAge` - (*boolean*, default to `false`) Option to hide age from year axis.
-
-Datetime "syntax"
------------------
-
-- `2000` - event that happen in that year
-- `01/2000` - event that happen in that month/year
-- `01/01/2000` - event that happen exactly in that day/month/year
-- `2001-2005`, `10/2001-02/03/2005` - event that happen within the two dates
-- `~2005` - event that happen around the time in that year
-- `2005-~` - event that happen from that year and beyond (now).
-
-Other people's Lives
---------------------
-
-Here's [a compilation of Lives from the people who has forked Life](https://github.com/cheeaun/life/wiki/Lives).
-
-License
--------
-
-[MIT](http://cheeaun.mit-license.org/)
+Life
+====
+
+This is something that I've wanted to build for a long time. It's a **timeline of important events** in my life, visualized in a way my mind always imagine it. There was something called [**Lifepath.me**](http://dcurt.is/facebook-timelines-and-lifepath-me-4) but now it's gone. How about Facebook timeline? Meh.
+
+So, this is it. Have a look at [cheeaun.github.io/life](http://cheeaun.github.io/life).
+
+Features
+--------
+
+- Super simple
+- No fancy formatting
+- No fancy setup
+- No fancy effects
+- Flexible datetimes because sometimes you don't remember the exact date of an event
+- Themes: Xmas, Android Light (uses Android colors), Playful (uses Android colors), Blueprint
+
+How to contribute
+-----------------
+
+1. Fork this project.
+2. Write code.
+3. Make pull requests.
+
+How to setup your own *Life*
+----------------------------
+
+1. Fork this project.
+2. `git checkout -b gh-pages` (or any branch name you like)
+3. Make a copy of `life.example.md`, rename it to `life.md`.
+4. Add your life events into `life.md`.
+5. Preview it on a local server. Use [`python -m SimpleHTTPServer`](http://docs.python.org/2/library/simplehttpserver.html) or [`http-server`](https://github.com/nodeapps/http-server).
+6. Commit `life.md` (not in `master` branch).
+7. `git push origin gh-pages -f` and publish to [GitHub Pages](http://pages.github.com/).
+8. Update the website link in your GitHub repo description.
+9. Tell the world about your Life.
+10. Add your Life to the [Lives](https://github.com/cheeaun/life/wiki/Lives) page.
+
+How to upgrade your *Life*
+--------------------------
+
+1. `git checkout master`
+2. `git remote add cheeaun https://github.com/cheeaun/life.git`
+3. `git fetch cheeaun` and `git merge cheeaun/master` to upgrade to latest Life.
+4. `git checkout gh-pages` and `git merge master` to sync changes back to GitHub Pages.
+
+[Learn more](https://help.github.com/articles/fork-a-repo).
+
+For those who forked the earlier version of Life, these are the steps that I would recommend (requires some Git-fu):
+
+1. Backup your `life.md`.
+2. Reset (hard) your fork to this repo's `master` branch.
+3. Clean up your `gh-pages`.
+4. Re-commit your `life.md` there.
+5. Make sure your `master` branch is untouched so that future updates work.
+
+How to configure your *Life*
+----------------------------
+
+1. Make a copy of `config.example.json`, rename it to `config.json`.
+2. Only commit it in `gh-pages` branch.
+
+The configuration:
+
+- `customStylesheetURL` - (*string*, default to `null`) Path to a custom stylesheet file, for those who doesn't like the default *theme*.
+- `yearLength` - (*number*, default to `120`) The width of the year grids, in pixels.
+- `hideAge` - (*boolean*, default to `false`) Option to hide age from year axis.
+
+How to theme your *Life*
+--------
+1. In your `config.json` file, change the `customStylesheetURL` string from `null` to `"css/theme.css"`, with quotatation marks.
+
+The stylesheets were designed to overwrite the default inline styles. Feel free to replace the inline styles instead if you'd prefer that.
+
+Datetime "syntax"
+-----------------
+
+- `2000` - event that happen in that year
+- `01/2000` - event that happen in that month/year
+- `01/01/2000` - event that happen exactly in that day/month/year
+- `2001-2005`, `10/2001-02/03/2005` - event that happen within the two dates
+- `~2005` - event that happen around the time in that year
+- `2005-~` - event that happen from that year and beyond (now).
+
+Other people's Lives
+--------------------
+
+Here's [a compilation of Lives from the people who has forked Life](https://github.com/cheeaun/life/wiki/Lives).
+
+License
+-------
+
+[MIT](http://cheeaun.mit-license.org/)

config.json

@@ -0,0 +1,5 @@
+{
+	"customStylesheetURL": "css/blueprint.css",
+	"yearLength": 120,
+	"hideAge": false
+}

css/android-light.css

@@ -0,0 +1,46 @@
+body {
+  background-color: white;
+  color: #33B5E5; }
+
+a {
+  color: #33B5E5;
+  opacity: 1;
+  text-decoration: none; }
+  a:hover {
+    text-decoration: underline; }
+
+header {
+  color: #33B5E5; }
+  header a {
+    color: #33B5E5;
+    opacity: 0.5;
+    -webkit-transition: opacity 0.5s ease;
+    -moz-transition: opacity 0.5s ease;
+    -o-transition: opacity 0.5s ease;
+    -ms-transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease; }
+    header a:hover {
+      opacity: 1;
+      text-decoration: none; }
+
+#life section.year {
+  border-left: 1px dashed rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.8); }
+
+#life .event b {
+  color: #FFBB33;
+  -webkit-transition: color 0.5s ease;
+  -moz-transition: color 0.5s ease;
+  -o-transition: color 0.5s ease;
+  -ms-transition: color 0.5s ease;
+  transition: color 0.5s ease; }
+#life .event .time {
+  border-color: black;
+  opacity: 0.2;
+  -webkit-transition: opacity 0.3s linear;
+  -moz-transition: opacity 0.3s linear;
+  -o-transition: opacity 0.3s linear;
+  -ms-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear; }
+  #life .event .time:hover .time {
+    opacity: .75; }

css/blueprint.css

@@ -0,0 +1,56 @@
+body {
+  background-color: #215480;
+  color: rgba(255, 255, 255, 0.8); }
+
+a {
+  color: white;
+  opacity: 0.8;
+  text-decoration: none;
+  -webkit-transition: opacity 0.5s ease;
+  -moz-transition: opacity 0.5s ease;
+  -o-transition: opacity 0.5s ease;
+  -ms-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease; }
+  a:hover {
+    text-decoration: underline;
+    opacity: 1; }
+
+header, header h1, header a {
+  color: white; }
+  header h1 {
+    opacity: 1; }
+  header a {
+    opacity: 0.8; }
+    header a:hover {
+      opacity: 1; }
+
+#life section.year {
+  border-left: 1px dashed rgba(255, 255, 255, 0.25);
+  color: rgba(255, 255, 255, 0.75); }
+
+#life .event {
+  -webkit-transition: color 0.5s ease;
+  -moz-transition: color 0.5s ease;
+  -o-transition: color 0.5s ease;
+  -ms-transition: color 0.5s ease;
+  transition: color 0.5s ease; }
+  #life .event:hover {
+    color: white; }
+  #life .event b {
+    -webkit-transition: color 0.5s ease;
+    -moz-transition: color 0.5s ease;
+    -o-transition: color 0.5s ease;
+    -ms-transition: color 0.5s ease;
+    transition: color 0.5s ease; }
+  #life .event:hover b {
+    color: rgba(255, 255, 255, 0.8); }
+  #life .event .time {
+    border-color: #0099CC;
+    opacity: 0.5;
+    -webkit-transition: opacity 0.5s ease;
+    -moz-transition: opacity 0.5s ease;
+    -o-transition: opacity 0.5s ease;
+    -ms-transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease; }
+  #life .event:hover .time {
+    opacity: 0.8; }

css/playful.css

@@ -0,0 +1,41 @@
+body {
+  background-color: rgba(0, 0, 0, 0.8);
+  color: rgba(255, 255, 255, 0.8); }
+
+a {
+  color: #33B5E5;
+  opacity: 0.8;
+  text-decoration: none; }
+  a:hover {
+    opacity: 1; }
+
+header, header h1, header a {
+  color: rgba(51, 181, 229, 0.8); }
+  header h1 {
+    opacity: 1; }
+  header a {
+    opacity: 0.8; }
+    header a:hover {
+      text-decoration: none; }
+
+#life section.year {
+  border-left: 1px dashed rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.8); }
+
+#life .event b {
+  color: #FF4444;
+  -webkit-transition: color 0.5s ease;
+  -moz-transition: color 0.5s ease;
+  -o-transition: color 0.5s ease;
+  -ms-transition: color 0.5s ease;
+  transition: color 0.5s ease; }
+#life .event .time {
+  border-color: #0099CC;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.5s ease;
+  -moz-transition: opacity 0.5s ease;
+  -o-transition: opacity 0.5s ease;
+  -ms-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease; }
+#life .event:hover .time {
+  opacity: 1; }

css/xmas.css

@@ -0,0 +1,40 @@
+body {
+  background-color: #359D6E;
+  color: rgba(255, 255, 255, 0.8); }
+
+a {
+  color: white;
+  text-decoration: none; }
+  a:hover {
+    text-decoration: underline; }
+
+header a {
+  color: #B7F8FD;
+  opacity: 0.5; }
+
+#life section.year {
+  border-left: 1px dashed rgba(255, 255, 255, 0.25);
+  color: rgba(183, 248, 253, 0.5); }
+
+#life .event b {
+  color: #e9b443;
+  -webkit-transition: color 0.5s ease;
+  -moz-transition: color 0.5s ease;
+  -o-transition: color 0.5s ease;
+  -ms-transition: color 0.5s ease;
+  transition: color 0.5s ease; }
+#life .event .time {
+  border-color: #973C31;
+  opacity: 1;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  transition: all 0.5s ease; }
+#life .event:hover .time {
+  opacity: 1;
+  -webkit-box-shadow: 0px 0px 3px #973C31;
+  -moz-box-shadow: 0px 0px 3px #973C31;
+  -o-box-shadow: 0px 0px 3px #973C31;
+  -ms-box-shadow: 0px 0px 3px #973C31;
+  box-shadow: 0px 0px 3px #973C31; }