comments + images

style/spot.scss

@@ -8,7 +8,7 @@
 	left:0;
 	top:0;
 	bottom:0;
-	width:100%;
+	width:70%;
 	background:#EEE;
 }
 
@@ -23,6 +23,104 @@
 	@extend .flicker;
 }
 
+#feed {
+	position:absolute;
+	right:0;
+	top:0;
+	bottom:0;
+	width:30%;
+	overflow:auto;
+	
+	#poster {
+		padding:1em;
+		background:#EEE;
+		border-bottom:1px solid #DDD;
+		
+		#post, #name, #submit {
+			width:calc(100% - 2em);
+			border:none;
+			padding:0.5em 1em;
+		}
+		
+		#post {
+			margin-bottom:1em;
+		}
+		
+		#name {
+			width: calc(100% - 5.5em);
+		}
+		
+		#submit {
+			width: 3em;
+			background:#CCC;
+			cursor:pointer;
+			font-weight:bold;
+		}
+	}
+	
+	#posts {
+		font-family: Arial;
+		
+		.post {
+			margin:1em;
+			background: #B4BDFF;
+			color:#323268;
+			border-radius: 0.5em;
+			
+			.message {
+				margin:0.3em 0 0 0;
+			}
+			.signature {
+				margin:0.5em 0 0 0;
+				text-align: right;
+			}
+		}
+		
+		.header {
+			padding: 0.5em 1em;
+			font-style: italic;
+			font-size:0.8em;
+			text-align:right;
+			
+			.index {
+				float:left;
+				font-style: normal;
+			}
+		}
+		
+		.body {
+			padding: 0em 1em 0.5em;
+		}
+		
+		.post.picture {
+			background:#F3EC9F;
+			color:#635C28;
+			
+			a {
+				display:inline-block;
+				line-height:0;
+				margin:0;
+			}
+			
+			img {
+				width:100%;
+				image-orientation:from-image;
+				border: 1px solid white;
+				outline:none;
+			}
+			
+		}
+		.post.message {
+			background: #6DFF58;
+			color:#326526;
+		}
+		
+		.fa.push {
+			margin-right:0.5em;
+		}
+	}
+}
+
 /* Info Window */
 
 .info-window h1 {
@@ -50,3 +148,6 @@
 	height: 18px;
 	background: green;
 }
+
+/* Other */
+