adding read page and side calendar

style/_bootstrap.scss

@@ -1,5 +1,5 @@
 $gray-100: lighten($col_main_1, 80%); 	//#ffffff
-$gray-200: lighten($col_main_1, 65%); 	//#efe6db
+$gray-200: #e2ccb2;						//Background
 $gray-300: lighten($col_main_1, 50%); 	//#d8c1a6
 $gray-400: lighten($col_main_1, 35%); 	//#c09b71
 $gray-500: lighten($col_main_1, 20%); 	//#9f7546

style/_font-awesome.scss

@@ -16,7 +16,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-password:before { content: fa-content($fa-var-key); }
 
 //Menu
-.#{$fa-css-prefix}-write:before { content: fa-content($fa-var-pen-fancy); }
+.#{$fa-css-prefix}-write:before { content: fa-content($fa-var-pen); }
 .#{$fa-css-prefix}-settings:before { content: fa-content($fa-var-cog); }
 .#{$fa-css-prefix}-logoff:before { content: fa-content($fa-var-sign-out); }
 

style/_quill.scss

@@ -1 +1,6 @@
-@import 'quill/quill.bubble';
+@import 'quill/quill.bubble';
+
+.ql-editor.ql-blank::before {
+	left: 1.5em;
+	color: $gray-400;
+}

style/_read.scss

@@ -0,0 +1,10 @@
+#read {
+	@extend .thought;
+	
+	.header {
+	}
+
+	.body {
+		
+	}
+}

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 */

style/_write.scss

@@ -20,20 +20,19 @@
 			}
 		
 			.ql-editor, #context {
-				padding:0;
-				font-family: $font_para;
-				font-size: 14px;
-				
-				div {
-					margin:0;
+				@extend .thought;
+			}
+		
+			#context {
+				.entry_date {
+					text-align: right;
 				}
 			
-				p {
-					text-indent: 1.5em;
-					margin: 0;
-					padding: 0;
-					text-align: justify;
-					line-height: 1.5em;
+				.entry_sep {
+					font-size: 1.5em;
+					text-align: center;
+					letter-spacing: 0.3em;
+					padding: 1em;
 				}
 			}
 		}
@@ -42,26 +41,29 @@
 	/* Write - Navbar */
 	
 	#nav {
-		position:absolute;
-		bottom:0;
-		right:0;
-		left:0;
-		text-align: center;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
 		
 		.nav-elem {
 			color: $gray-500;
-			width: 1.25em;
 			display: inline-block;
-			text-align: center;
-		}
-	
-		.fa-prev, .fa-next {
 			cursor: pointer;
-			display: none;
+			width: 1.25em;
+			font-size: 1.25em;
 			
 			&:hover {
 				color: $gray-700;
 			}
+			
+			&.prev, &.curr, &.next {
+				visibility: hidden;
+			}
+
+			&.next {
+				float: right;
+			}
 		}
 	}
 

style/mythoughts.scss

@@ -19,4 +19,5 @@
 /* Pages */
 
 @import 'logon';
-@import 'write';
+@import 'write';
+@import 'read';