Mercurial > libervia-templates

comparison sat_templates/templates/default/static/blog.css @ 164:e9f0a4215e46

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
multi-sites handling (moved templates to "templates" sub-directory) + noscript styles handling.
author Goffi <goffi@goffi.org>
date Mon, 10 Sep 2018 08:53:33 +0200
parents sat_templates/default/static/blog.css@33c7ce833d3f
children 178f55b825b7
comparison
equal deleted inserted replaced
163:33f67228686a 164:e9f0a4215e46
1 /*** articles ***/
2
3 article.box {
4 position: relative;
5 margin: 2% auto;
6 border-style: solid none none;
7 border-width: 1px;
8 padding: 2%;
9 min-height: 9em;
10 max-height: 20em;
11 overflow: hidden;
12 transition: max-height 0.5s;
13 }
14
15 article video {
16 max-width: 100%;
17 height: auto;
18 }
19
20 .main_article article.box:not(.clicked) {
21 border-bottom-right-radius: 0;
22 border-bottom-left-radius: 0;
23 }
24
25 /** header **/
26
27 header a {
28 color: inherit;
29 text-decoration: inherit;
30 }
31
32 header .metadata {
33 text-align: right;
34 }
35
36 article .author {
37 font-weight: bold;
38 }
39
40 article .author::after {
41 content: ", ";
42 }
43
44 /*** labels ***/
45
46 .labels {
47 text-align: right;
48 white-space: nowrap;
49 }
50
51 .labels a {
52 text-decoration: none;
53 color: inherit;
54 }
55
56 .labels span {
57 font-variant: small-caps;
58 font-size: 0.8rem;
59 background-color: #ddd;
60 border-radius: 0.4em;
61 padding: 0 0.5em;
62 transition: all 0.5s;
63 }
64
65 .labels a>span {
66 cursor: pointer;
67 }
68
69 .labels a>span:hover {
70 box-shadow: 0px 0px 6px 1px #000;
71 }
72
73
74 /** content **/
75
76 article div.content {
77 text-align: justify;
78 font-size: 0.9em;
79 }
80
81 article div.content.text {
82 white-space: pre-wrap;
83 }
84
85
86 article img {
87 max-width: 100%;
88 margin: 0;
89 }
90
91 /** reduce/expand buttons **/
92
93 .expand_box {
94 cursor: pointer;
95 }
96
97 .box_top {
98 position: absolute;
99 top: 0;
100 left: 0;
101 width: 100%;
102 }
103
104 .box_bottom {
105 position: absolute;
106 bottom: 0;
107 left: 0;
108 width: 100%;
109 }
110
111 .expand_box.box_bottom::before {
112 /* we do a gradient to show that text can be expanded */
113 background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff);
114 display: block;
115 content: "";
116 width: 100%;
117 height: 4em;
118 border: none;
119 }
120
121 .expand_box p {
122 background-color: white;
123 margin: 0;
124 text-align: center;
125 font-weight: bold;
126 font-size: 0.8em;
127 border-style: solid none dotted none;
128 border-width: 1px 0 1px;
129 border-bottom-color: gray;
130 }
131
132 article .expand_box .hide {
133 /* when not clicked, we only display .show */
134 display: none;
135 }
136
137 article .expand_box.box_top {
138 /* top expand box only show a reduce button
139 * so it should be displayed only when article is .clicked */
140 display: none;
141 }
142
143 /** other language **/
144
145 /* we hide everything just to display a message informing that
146 * the item is in an other language, and asking to click
147 * to display it */
148
149 article.other_lang>div.info {
150 display: none;
151 }
152
153 article.other_lang.init>* {
154 display: none;
155 }
156
157 article.other_lang.init>div.info {
158 display: initial;
159 }
160
161 article.other_lang.init>div.expand_box.box_top {
162 /* as we need to have the message clickable, we cheat and use
163 * expand box on the whole surface but fully transparent */
164 display: initial;
165 height: 100%;
166 opacity: 0;
167 }
168
169 article.other_lang.init>div.info>p {
170 margin: 0;
171 padding: 0.2em;
172 text-align: center;
173 font-style: italic;
174 }
175
176 article.other_lang.init {
177 border: none;
178 border-radius: 0;
179 padding: 0;
180 min-height: 0;
181 }
182
183 /*** comments ***/
184
185 button.comments_btn {
186 border: none;
187 font-weight: bold;
188 display: block;
189 margin: 0 10% 0 auto;
190 border-radius: 1em;
191 background: #b8bcc4;
192 color: #4d4d4d;
193 }
194
195 button.comments_btn:active {
196 background: #4d4d4d;
197 color: #b8bcc4;
198 }
199
200 button.comments_btn.clicked span.show {
201 display: none;
202 }
203
204 button.comments_btn:not(.clicked) span.hide {
205 display: none;
206 }
207
208 .comments_panel {
209 max-height: 0;
210 opacity: 0;
211 transition: max-height 1s, opacity 2s;
212 overflow: hidden;
213 }
214
215 .comments_panel.clicked {
216 opacity: 1;
217 }
218
219 .comments article {
220 background-color: #9ca0a8;
221 border: none;
222 max-height: none;
223 }
224
225 .comment_post {
226 text-align: center;
227 }
228
229 .comment_post textarea {
230 border-style: solid;
231 border-width: 1px 0;
232 border-color: black;
233 max-width: 100%;
234 }
235
236 .comments_panel article .expand_box {
237 /* no expand box in comments */
238 display: none;
239 }
240
241 /*** media queries ***/
242
243 @media (min-width: 500px) {
244 /*** general ***/
245
246 #main_area {
247 background-image: var(--bg-img);
248 background-repeat: no-repeat;
249 background-size: cover;
250 }
251
252 article.box {
253 width: 80%;
254 border-style: solid solid none solid;
255 }
256 .comments article.box {
257 width: 30rem;
258 margin: 2% auto;
259 border: none;
260 }
261 .comment_post textarea {
262 border-width: 1px;
263 border-radius: 1em;
264 border: solid 1px;
265 padding: 0.5em;
266 }
267
268 footer span {
269 background: rgba(200,200,200,0.6);
270 border-radius: 0.5em 0.5em 0 0;
271 padding: 0 0.5em;
272 margin-top: 1em;
273 }
274
275 }
276
277 /*** clicked ***/
278
279 .main_article article.clicked {
280 border-bottom-style: solid;
281 }
282
283 .main_article article.clicked .expand_box.box_top {
284 display: initial;
285 }
286
287 .main_article article.clicked .expand_box {
288 opacity: 0;
289 transition: opacity 0.5s;
290 }
291
292 .main_article article.clicked .expand_box p {
293 background-color: transparent;
294 border: none;
295 }
296
297 .main_article article.clicked .expand_box:hover {
298 opacity: 1;
299 color: grey;
300 }
301
302 .main_article article.clicked .expand_box::before {
303 background-image: none;
304 display: none;
305 }
306
307 .main_article article.clicked .expand_box .hide {
308 display: inline;
309 }
310
311 .main_article article.clicked .expand_box .show {
312 display: none;
313 }