Add an infirmation panel for archived projects

style/_mask_project.scss

@@ -388,17 +388,18 @@ $legend-color: $post-color;
 
 		#feed-panel {
 			width: 100%;
+			padding-top: $block-spacing;
 			
 			#posts_list {
 				position: relative;
 			}
 
 			#poster {
-				display: inline-block;
-
-				.post-item {
-					margin-bottom: 0;
+				&.histo-mode .poster, &:not(.histo-mode) .archived {
+					display: none;
+				}
 
+				.poster {
 					textarea#post {
 						margin-bottom: 1em;
 						width: calc(100% - 2em);
@@ -413,6 +414,10 @@ $legend-color: $post-color;
 						margin-bottom: 0.5em;
 					}
 				}
+
+				.archived {
+					background: #EEE;
+				}
 			}
 
 			.body-box {
@@ -429,10 +434,6 @@ $legend-color: $post-color;
 				width: calc(100% - #{$block-spacing});
 				box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
 
-				&:first-child {
-					margin-top: $block-spacing;
-				}
-
 				a {
 					color: $post-color;
 					&:hover {
@@ -473,6 +474,8 @@ $legend-color: $post-color;
 
 							.link, .link:visited, .link_copied {
 								margin-left: $elem-spacing;
+								padding: 0;
+								line-height: 1;
 							}
 						}
 
@@ -493,7 +496,18 @@ $legend-color: $post-color;
 						display: none;
 					}
 					.body {
-						padding-top: $elem-spacing;
+						padding-top: $block-spacing;
+						text-align: center;
+
+						p {
+							margin: 0;
+							
+							.fa {
+								display: inline-block;
+								font-size: 2em;
+								margin: $elem-spacing 0;
+							}
+						}
 					}
 				}
 
@@ -637,18 +651,6 @@ $legend-color: $post-color;
 						}
 					}
 				}
-
-				&.loading {
-					.body {
-						text-align: center;
-
-						p {
-							display: inline-block;
-							font-size: 2em;
-							color: $post-color;
-						}
-					}
-				}
 			}
 		}
 	}