--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/default/static/blog.css	Sat Jun 02 17:25:43 2018 +0200
@@ -0,0 +1,313 @@
+/*** articles ***/
+
+article.box {
+    position: relative;
+    margin: 2% auto;
+    border-style: solid none none;
+    border-width: 1px;
+    padding: 2%;
+    min-height: 9em;
+    max-height: 20em;
+    overflow: hidden;
+    transition: max-height 0.5s;
+}
+
+article video {
+    max-width: 100%;
+    height: auto;
+}
+
+.main_article article.box:not(.clicked) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+/** header **/
+
+header a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+header .metadata {
+    text-align: right;
+}
+
+article .author {
+    font-weight: bold;
+}
+
+article .author::after {
+    content: ", ";
+}
+
+/*** labels ***/
+
+.labels {
+    text-align: right;
+    white-space: nowrap;
+}
+
+.labels a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.labels span {
+    font-variant: small-caps;
+    font-size: 0.8rem;
+    background-color: #ddd;
+    border-radius: 0.4em;
+    padding: 0 0.5em;
+    transition: all 0.5s;
+}
+
+.labels a>span {
+    cursor: pointer;
+}
+
+.labels a>span:hover {
+    box-shadow: 0px 0px 6px 1px #000;
+}
+
+
+/** content **/
+
+article div.content {
+    text-align: justify;
+    font-size: 0.9em;
+}
+
+article div.content.text {
+    white-space: pre-wrap;
+}
+
+
+article img {
+    max-width: 100%;
+    margin: 0;
+}
+
+/** reduce/expand buttons **/
+
+.expand_box {
+    cursor: pointer;
+}
+
+.box_top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.box_bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.expand_box.box_bottom::before {
+    /* we do a gradient to show that text can be expanded */
+    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;
+}
+
+article .expand_box .hide {
+    /* when not clicked, we only display .show */
+    display: none;
+}
+
+article .expand_box.box_top {
+    /* top expand box only show a reduce button
+     * so it should be displayed only when article is .clicked */
+    display: none;
+}
+
+/** other language **/
+
+/* we hide everything just to display a message informing that
+ * the item is in an other language, and asking to click
+ * to display it */
+
+article.other_lang>div.info {
+    display: none;
+}
+
+article.other_lang.init>* {
+    display: none;
+}
+
+article.other_lang.init>div.info {
+    display: initial;
+}
+
+article.other_lang.init>div.expand_box.box_top {
+    /* as we need to have the message clickable, we cheat and use
+     * expand box on the whole surface but fully transparent */
+    display: initial;
+    height: 100%;
+    opacity: 0;
+}
+
+article.other_lang.init>div.info>p {
+    margin: 0;
+    padding: 0.2em;
+    text-align: center;
+    font-style: italic;
+}
+
+article.other_lang.init {
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    min-height: 0;
+}
+
+/*** 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;
+}
+
+button.comments_btn.clicked span.show {
+    display: none;
+}
+
+button.comments_btn:not(.clicked) span.hide {
+    display: none;
+}
+
+.comments_panel {
+    max-height: 0;
+    opacity: 0;
+    transition: max-height 1s, opacity 2s;
+    overflow: hidden;
+}
+
+.comments_panel.clicked {
+    opacity: 1;
+}
+
+.comments article {
+    background-color: #9ca0a8;
+    border: none;
+    max-height: none;
+}
+
+.comment_post {
+    text-align: center;
+}
+
+.comment_post textarea {
+    border-style: solid;
+    border-width: 1px  0;
+    border-color: black;
+    max-width: 100%;
+}
+
+.comments_panel article .expand_box {
+    /* no expand box in comments */
+    display: none;
+}
+
+/*** media queries ***/
+
+@media (min-width: 500px) {
+    /*** general ***/
+
+    #main_area {
+        background-image: var(--bg-img);
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+
+    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;
+    }
+
+    footer span {
+        background: rgba(200,200,200,0.6);
+        border-radius: 0.5em 0.5em 0 0;
+        padding: 0 0.5em;
+        margin-top: 1em;
+    }
+
+}
+
+/*** clicked ***/
+
+.main_article article.clicked {
+    border-bottom-style: solid;
+}
+
+.main_article article.clicked .expand_box.box_top {
+    display: initial;
+}
+
+.main_article article.clicked .expand_box {
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.main_article article.clicked .expand_box p {
+    background-color: transparent;
+    border: none;
+}
+
+.main_article article.clicked .expand_box:hover {
+    opacity: 1;
+    color: grey;
+}
+
+.main_article article.clicked .expand_box::before {
+    background-image: none;
+    display: none;
+}
+
+.main_article article.clicked .expand_box .hide {
+    display: inline;
+}
+
+.main_article article.clicked .expand_box .show {
+    display: none;
+}