fixed #7

css/screen.css

@@ -5,6 +5,12 @@ html, body {
 	font-family: FeuraSans, sans-serif;
 }
 
+body.f1 { font-size: 0.75em; }
+body.f2 { font-size: 1em; }
+body.f3 { font-size: 1.25em; }
+body.f4 { font-size: 1.5em; }
+body.f5 { font-size: 1.75em; }
+
 .red    { background: #e74c3c; color: #ecf0f1; }
 .white  { background: #ecf0f1; color: #2c3e50; }
 .blue   { background: #3498db; color: #ecf0f1; }
@@ -32,7 +38,7 @@ a {
 	font-size: 1em;
 }
 
-header .button, footer .button {
+header .button, footer .button, .button.small {
 	width: auto;
 	display: inline-block;
 }
@@ -128,8 +134,6 @@ img {
 }
 
 canvas {
-	width: 80px;
-	height: 40px;
 	float: right;
 }
 
@@ -317,4 +321,18 @@ canvas {
 
 #settings .version {
 	font-style: italic;
+}
+
+#settings .font-size {
+	text-align: right;
+}
+
+#settings .font-size span {
+	float: left;
+	line-height: 2.4;
+}
+
+#settings .button.small {
+	width: 20%;
+	text-align: center;
 }

index.html

@@ -23,7 +23,7 @@
   <footer class="bar">
     <a class="button" href="#reload">Reload</a>
     <a class="button" href="#settings">Settings</a>
-    <canvas></canvas>
+    <canvas width="40" height="40"></canvas>
   </footer>
 </section>
 
@@ -35,6 +35,11 @@
     <ul>
       <li><a href="#logout" class="button">Log out</a></li>
       <li><a href="#reset-info" class="button">View those info bubbles again</a></li>
+      <li class="font-size">
+        <span>Font size:</span>
+        <a class="button small" href="#font-smaller">-</a>
+        <a class="button small" href="#font-bigger">+</a>
+      </li>
       <li><a href="#color-white" class="color-white button">White colors</a></li>
       <li><a href="#color-blue" class="color-blue button">Blue colors</a></li>
       <li><a href="#color-yellow" class="color-yellow button">Yellow colors</a></li>
@@ -76,7 +81,7 @@
   <header class="bar">
     <a class="button" href="#list">List</a>
     <a id="setunread" class="button" href="#unread">Set unread</a>
-    <canvas></canvas>
+    <canvas width="40" height="40"></canvas>
   </header>
   <article>
 	  <header>

js/App.js

@@ -6,7 +6,7 @@ function App() {
 	var color = localStorage.color;
 	if(!color) color = "red";
 	this.setColor(color);
-
+	this.fontChange();
 };
 
 App.prototype.authenticate = function() {
@@ -56,6 +56,10 @@ App.prototype.after_login = function() {
 			_this.showNext();
 		} else if(url == "#previous") {
 			_this.showPrevious();
+		} else if(url == "#font-smaller") {
+			_this.fontChange("smaller");
+		} else if(url == "#font-bigger") {
+			_this.fontChange("bigger");
 		}
 
 		// this is here so you can tap on a button more then once
@@ -311,3 +315,37 @@ App.prototype.setCurrentUnread = function() {
 App.prototype.goToList = function() {
 	this.changeToPage("#list");
 };
+
+App.prototype.fontChange = function(size) {
+	if(size == "bigger") {
+		
+		var i = localStorage.font_size;
+		if(i < 5) {
+			document.body.removeClass("f" + i);
+			i++;
+			document.body.addClass("f" + i);
+			localStorage.font_size = i;
+		}
+
+	} else if(size == "smaller") {
+
+		var i = localStorage.font_size;
+		if(i > 1) {
+			document.body.removeClass("f" + i);
+			i--;
+			document.body.addClass("f" + i);
+			localStorage.font_size = i;
+		}
+
+	} else {
+
+		var i = localStorage.font_size;
+		if(typeof i == "undefined") {
+			i = localStorage.font_size = 2;
+		}
+
+		document.body.addClass("f" + i);
+	}
+
+
+};