--- a/default/static/blog.css	Thu May 04 00:55:06 2017 +0200
+++ b/default/static/blog.css	Thu May 04 01:00:23 2017 +0200
@@ -1,13 +1,38 @@
-article {
+/**** articles ****/
+
+article.box {
+    position: relative;
     margin: 2% auto;
-    width: 80%;
-    border-style: solid;
+    border-style: solid None None;
     border-width: 1px;
-    border-radius: 3px;
-    padding: 1%;
-    background: lightgray;
+    padding: 2%;
+    max-height: 7em;
+    overflow: hidden;
+    transition: max-height 2s;
+}
+
+.main_article article.box:not(.clicked) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
+/* header */
+
+header .metadata {
+    text-align: right;
+}
+
+article .author {
+    font-weight: bold;
+}
+
+article .author::after {
+    content: ", ";
+}
+
+
+/* content */
+
 article div.content {
     text-align: justify;
     font-size: 0.9em;
@@ -15,4 +40,121 @@
 
 article img {
     max-width: 100%;
+    margin: 0;
 }
+
+.expand_box {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.expand_box::before {
+    background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff);
+    display: block;
+    content: "";
+    width: 100%;
+    height: 4em;
+    border: none;
+}
+
+.expand_box p {
+    background-color: white;
+    margin: 0;
+    text-align: center;
+    font-weight: bold;
+    font-size: 0.8em;
+    border-style: solid none dotted none;
+    border-width: 1px 0 1px;
+    border-bottom-color: gray;
+}
+
+.main_article .expand_box {
+    display: initial;
+}
+
+/**** comments ****/
+
+button.comments_btn {
+    border: none;
+    font-weight: bold;
+    display: block;
+    margin: 0 10% 0 auto;
+    border-radius: 1em;
+    background:  #b8bcc4;
+    color: #4d4d4d;
+}
+
+button.comments_btn:active {
+    background: #4d4d4d;
+    color: #b8bcc4;
+}
+
+.comments_panel {
+    max-height: 0;
+    opacity: 0;
+    transition: max-height 2s, opacity 4s;
+    overflow: hidden;
+}
+
+.comments_panel.show {
+    max-height: 10000px;
+    overflow: auto;
+    opacity: 1;
+}
+
+.comments article {
+    background-color: #9ca0a8;
+    border: None;
+}
+
+.comment_post {
+    text-align: center;
+}
+
+.comment_post input {
+    display: block;
+    margin: 0 auto;
+}
+
+.comment_post textarea {
+    border-style: solid;
+    border-width: 1px  0;
+    border-color: black;
+    max-width: 100%;
+}
+
+/**** media queries ****/
+
+@media (min-width: 500px) {
+    article.box {
+        width: 80%;
+        border-style: solid solid none solid;
+    }
+    .comments article.box {
+        width: 30rem;
+        margin: 2% auto;
+        border: none;
+    }
+    .comment_post textarea {
+        border-width: 1px;
+        border-radius: 1em;
+        border: solid 1px;
+        padding: 0.5em;
+    }
+
+}
+
+/**** clicked ****/
+
+.main_article article.clicked {
+    max-height: 10000px;
+    border-bottom-style: solid;
+    overflow: auto;
+}
+
+.clicked .expand_box {
+    display: none;
+}