adding read page and side calendar

style/_template.scss

@@ -4,9 +4,9 @@ body {
 	min-width: 700px;
 	font-family: $font_para, sans-serif;
 	font-size:1em;
-	background-color:#e2ccb2;
+	background-color: $gray-200;
 	margin:0;
-	color:$col_main_1;
+	color: $col_main_1;
 }
 
 /* Typography */
@@ -54,7 +54,7 @@ a.button {
 	height:50px;
 	width:50px;
 	line-height:50px;
-	font-size: 1.1em;
+	font-size: 1.0em;
 	text-align:center;
 	background:	url("../images/minicloud.png") 0 0 no-repeat;
 	color: $gray-600;
@@ -78,10 +78,11 @@ a.button:active {
 	position: absolute;
 	width: 100%;
 	z-index: 1000;
-}
-
-#feedback .alert {
-	top: 1em;
+	
+	.alert {
+		top: 1em;
+		background: $gray-200;
+	}
 }
 
 /* Header */
@@ -113,7 +114,7 @@ a.button:active {
 
 #main {
 	display: none;
-	margin-top:1em;
+	margin-top: 1em;
 	position: absolute;
 	top:203px;
 	bottom: 2rem;
@@ -127,47 +128,67 @@ a.button:active {
 	}
 }
 
-/* Read */
+/* Side */
 
-div.read {
-	position:relative;
-	padding-bottom:30px;
+#side {
+	position: absolute;
+	left: 100%;
+	top: 203px;
+	padding: 1em;
+	bottom: 2rem;
+	overflow: hidden;
+	display: none;
+	
+	.tag {
+		margin-bottom: 1em;
+		
+		a {
+			@extend .shadow;
+			display: inline-block;
+			text-align: center;
+			width: 50px;
+			background: $gray-200;
+			border-radius: 0.5em;
+			font-size: 0.8rem;
+			line-height: 25px;
+			
+			&:hover {
+				color: $gray-200;
+				background: $gray-400;
+			}
+		}
+		
+		&.write a {
+			font-size: 1rem;
+			padding: 0;
+			line-height: 50px;
+		}
+	}
 }
 
-div.thought {
-	font-size:16px;
-	line-height:20px;
-}
+/* Thought */
 
-p.date {
-	font-size:20px;
-}
+.thought {
+	padding: 0;
+	font-family: $font_para;
+	font-size: 14px;
+	
+	div {
+		margin: 0;
+	}
 
-div.time {
-	position:absolute;
-	margin-left:-100px;
-}
+	p {
+		text-indent: 1.5em;
+		margin: 0;
+		padding: 0;
+		text-align: justify;
+		line-height: 1.5em;
+	}
 
-div.paragraphs p {
-	margin:0 0 20px 0;
-}
-
-div.paragraphs p:first-letter {
-	font-size:59px;
-	line-height:16px;
-	margin-right:5px;
-	font-weight:400;
-	float:left;
-	text-transform:uppercase;
-}
-
-div.paragraphs p + p, div.paragraphs p + p:first-letter {
-	font-size:inherit;
-	line-height:inherit;
-	margin-right:inherit;
-	font-weight:normal;
-	float:none;
-	text-indent:40px;
+	.date {
+		color: $gray-500;
+		font-size: 0.8em;
+	}
 }
 
 /* Settings */