initial commit

post/common.css

@@ -0,0 +1,178 @@
+/* ------------- Global post ------------- */
+.container{
+    width: 60%;
+    margin: 2% auto 0 auto;
+    color: #333;
+    padding: 1em 2em;
+    line-height: 1.3em;
+}
+.container>*{
+    border-radius: 0.3em;
+}
+
+/* ------------- Post ------------- */
+/* Title, username, time posted */
+
+.editor{
+    border: none;
+    border-bottom: 1px solid #ddd;
+    border-radius: 0.2em;
+    outline-width: 0;
+    resize: none;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: bold;
+}
+.title{
+    width: calc(100% - 0.4em);
+    font-size: 1.5em;
+    font-weight: bold;
+    padding: 0.2em;
+    font-family: 'Montserrat', sans-serif;
+}
+
+#submitPost{
+    font-size: 1em;
+    color: #00d09f;
+    border: 1px solid #00d09f;
+    border-radius: 0.2em;
+    background-color: white;
+    padding: 0.5em 1em;
+    margin: 2em auto 0 auto;
+    display: block;
+}
+#submitPost:hover{
+    cursor: pointer;
+}
+
+.postType{
+    color: #888;
+    font-weight: bold;
+    margin: 0 0.5em 0 0.2em;
+}
+/* Text and image */
+.content>p{
+    margin: 0;
+}
+.card{
+    padding: 2em 4em;
+}
+
+/* ------------- Post editor ------------- */
+.title{
+    margin-bottom: 0.3em;
+}
+/* Actual part to write the post */
+#postWriter{
+    background-color: white;
+}
+#postEditor{
+    padding: 0.5em;
+    width: calc(100% - 1em);
+    min-height: 3em;
+}
+#postEditor:empty:before{
+    content: attr(placeholder);
+    color: #777;
+}
+#postEditor:focus{
+    outline-width: 0;
+}
+#tagsAdder{
+    margin-top: 2em;
+}
+
+#postRadios{
+    text-align: center;
+    margin-top: 3em;
+}
+
+/*Images adder*/
+input[type=file]{
+    display: none;
+}
+label[for=postImg]{
+    margin: 1em 0;
+    padding: 1.5em 0;
+    display: block;
+    text-align: center;
+    border: 2px dashed #bbb;
+    border-radius: 0.3em;
+    color: #444;
+}
+
+.postTitle{
+    margin-top: 2em;
+    font-size: 1.2em;
+}
+label:hover{
+    cursor: pointer;
+}
+input[type=radio]{
+    display: none;
+}
+input[type=radio]:checked + label{
+    color: #00d09f;
+}
+label.typeLabel:not(:last-of-type), label.tagLabel:not(:last-of-type){
+    margin-right: 2em;
+}
+
+/*Previously had images*/
+.postImage{
+    margin-top: 1em;
+    width: 100%;
+    border-radius: 0.3em;
+}
+.postDocPreview{
+    margin-top: 1em;
+    width: 100%;
+    border-radius: 0.2em;
+    border: 1px solid #999;
+    height: 50vh;
+}
+#show:hover, #hide:hover{
+    cursor: pointer;
+}
+#hideImgs{
+    display: none;
+}
+#hideImgs ~ #hide{
+    display: block;
+}
+#hideImgs ~ #show{
+    display: none;
+}
+#hideImgs:checked ~ #hide{
+    display: none;
+}
+#hideImgs:checked ~ #show{
+    display: block;
+}
+#hideImgs ~ label{
+    margin-top: 2em;
+    color: #00d09f;
+    text-align: center;
+    font-size: 0.9em;
+    margin-bottom: 0;
+}
+#hideImgs:checked ~ img{
+    display: none;
+}
+
+@media (max-width: 1000px){
+    .container{
+        width: 90vw;
+        padding: 0;
+        margin-top: 2em;
+    }
+    #post{
+        padding: 1em 2em;
+    }
+    label{
+        margin-right: 0 !important;
+        margin-bottom: 5px;
+        text-align: center;
+        display: block;
+        list-style-type: none;
+    }
+}