Mercurial > libervia-templates

comparison default/static/blog.css @ 16:8cdcbe0d7dee

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
blog: various appareance improvments: - use new .box classe - article as a maxium size and is expandable on click - display comments in a different way - author and date are now visible - responsive design - placeholders on comment input - transitions - various other improvments
author Goffi <goffi@goffi.org>
date Thu, 04 May 2017 01:00:23 +0200
parents b13a26d55c64
children 69a2e3bf5e17
comparison
equal deleted inserted replaced
15:c319291943be 16:8cdcbe0d7dee
1 article { 1 /**** articles ****/
2
3 article.box {
4 position: relative;
2 margin: 2% auto; 5 margin: 2% auto;
3 width: 80%; 6 border-style: solid None None;
4 border-style: solid;
5 border-width: 1px; 7 border-width: 1px;
6 border-radius: 3px; 8 padding: 2%;
7 padding: 1%; 9 max-height: 7em;
8 background: lightgray; 10 overflow: hidden;
11 transition: max-height 2s;
9 } 12 }
13
14 .main_article article.box:not(.clicked) {
15 border-bottom-right-radius: 0;
16 border-bottom-left-radius: 0;
17 }
18
19 /* header */
20
21 header .metadata {
22 text-align: right;
23 }
24
25 article .author {
26 font-weight: bold;
27 }
28
29 article .author::after {
30 content: ", ";
31 }
32
33
34 /* content */
10 35
11 article div.content { 36 article div.content {
12 text-align: justify; 37 text-align: justify;
13 font-size: 0.9em; 38 font-size: 0.9em;
14 } 39 }
15 40
16 article img { 41 article img {
17 max-width: 100%; 42 max-width: 100%;
43 margin: 0;
18 } 44 }
45
46 .expand_box {
47 display: none;
48 position: absolute;
49 bottom: 0;
50 left: 0;
51 width: 100%;
52 }
53
54 .expand_box::before {
55 background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff);
56 display: block;
57 content: "";
58 width: 100%;
59 height: 4em;
60 border: none;
61 }
62
63 .expand_box p {
64 background-color: white;
65 margin: 0;
66 text-align: center;
67 font-weight: bold;
68 font-size: 0.8em;
69 border-style: solid none dotted none;
70 border-width: 1px 0 1px;
71 border-bottom-color: gray;
72 }
73
74 .main_article .expand_box {
75 display: initial;
76 }
77
78 /**** comments ****/
79
80 button.comments_btn {
81 border: none;
82 font-weight: bold;
83 display: block;
84 margin: 0 10% 0 auto;
85 border-radius: 1em;
86 background: #b8bcc4;
87 color: #4d4d4d;
88 }
89
90 button.comments_btn:active {
91 background: #4d4d4d;
92 color: #b8bcc4;
93 }
94
95 .comments_panel {
96 max-height: 0;
97 opacity: 0;
98 transition: max-height 2s, opacity 4s;
99 overflow: hidden;
100 }
101
102 .comments_panel.show {
103 max-height: 10000px;
104 overflow: auto;
105 opacity: 1;
106 }
107
108 .comments article {
109 background-color: #9ca0a8;
110 border: None;
111 }
112
113 .comment_post {
114 text-align: center;
115 }
116
117 .comment_post input {
118 display: block;
119 margin: 0 auto;
120 }
121
122 .comment_post textarea {
123 border-style: solid;
124 border-width: 1px 0;
125 border-color: black;
126 max-width: 100%;
127 }
128
129 /**** media queries ****/
130
131 @media (min-width: 500px) {
132 article.box {
133 width: 80%;
134 border-style: solid solid none solid;
135 }
136 .comments article.box {
137 width: 30rem;
138 margin: 2% auto;
139 border: none;
140 }
141 .comment_post textarea {
142 border-width: 1px;
143 border-radius: 1em;
144 border: solid 1px;
145 padding: 0.5em;
146 }
147
148 }
149
150 /**** clicked ****/
151
152 .main_article article.clicked {
153 max-height: 10000px;
154 border-bottom-style: solid;
155 overflow: auto;
156 }
157
158 .clicked .expand_box {
159 display: none;
160 }