misc: add image/file upload for live edit (sync with panikdb)
[chloro.git] / chloro / phyll / static / css / style.scss
1 @charset "UTF-8";
2
3 $text-color: #222;
4 $link-color: #0000ee;
5 $visited-link-color: #551a8b;
6
7 @import "opensans";
8
9 body {
10         font-family: "Open Sans", sans-serif;
11         background: white;
12         color: $text-color;
13         font-size: 100%;
14 }
15
16 a {
17         color: $link-color;
18         text-decoration: none;
19         border-bottom: 0.1em dotted $link-color;
20         &:visited {
21                 color: $visited-link-color;
22                 border-color: $visited-link-color;
23         }
24         &:hover {
25                 border-bottom-style: solid;
26         }
27 }
28
29 header {
30         display: inline-block;
31         h1 {
32                 font-weight: normal;
33                 text-transform: uppercase;
34                 margin: 1em 0 0 1em;
35                 padding: 0 0.5em;
36                 color: lighten($text-color, 20%);
37                 background: #fafaff;
38                 display: inline-block;
39                 a {
40                         border: none;
41                 }
42         }
43         transform: rotate(-2deg);
44         position: relative;
45         z-index: 2;
46 }
47
48 div.actions {
49         position: absolute;
50         top: 0.5rem;
51         left: 1rem;
52         z-index: 100;
53         a {
54                 margin-right: 1rem;
55         }
56 }
57
58 main, footer {
59         margin: 0 4em;
60         padding: 1em;
61         max-width: 70em;
62 }
63
64 main {
65         position: relative;
66         background: #fafaff;
67         min-height: 70vh;
68         clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
69 }
70
71 .home {
72         nav a {
73                 text-transform: uppercase;
74                 display: inline-block;
75                 text-decoration: none;
76                 font-size: 500%;
77                 font-weight: bold;
78                 padding-top: 0.5em;
79                 line-height: 50%;
80                 width: 100%;
81                 span {
82                         font-size: 30%;
83                 }
84                 margin-bottom: 1rem;
85                 &.divers {
86                         width: 49%;
87                 }
88                 &.vrac {
89                         width: 49%;
90                         text-align: right;
91                         float: right;
92                 }
93         }
94         .latest {
95                 margin-top: 2em;
96                 h2 {
97                         margin: 0;
98                         font-size: 400%;
99                         font-weight: bold;
100                         text-transform: uppercase;
101                 }
102                 .meta {
103                         padding-top: 0.5rem;
104                         padding-left: 0.5rem;
105                         color: lighten($text-color, 40%);
106                 }
107         }
108 }
109
110 .post {
111         max-width: 50em;
112         div.figure {
113                 text-align: center;
114                 margin: 1em 0;
115                 img {
116                         border: 1px solid gray;
117                         padding: 3px;
118                 }
119                 .caption {
120                         margin-top: 0;
121                         font-style: italic;
122                 }
123         }
124         p {
125                 line-height: 160%;
126         }
127         code,
128         pre.screen {
129                 background: #111;
130                 color: white;
131                 padding: 2px;
132         }
133         div.meta {
134                 margin-top: 3em;
135                 color: lighten($text-color, 40%);
136         }
137         div.note {
138                 background: #fbf7c1;;
139                 padding: 0.2em 0.5em 0.2em 2em;
140                 p {
141                         margin: 0.5em 0;
142                 }
143         }
144 }
145
146 .post-list {
147         ul, li {
148                 margin: 0;
149                 padding: 0;
150                 list-style: none;
151                 display: inline-block;
152         }
153         li.unpublished {
154                 opacity: 0.5;
155         }
156         a {
157                 text-transform: uppercase;
158                 display: inline-block;
159                 text-decoration: none;
160                 font-size: 200%;
161                 font-weight: bold;
162                 padding-top: 0.5em;
163                 margin-right: 1em;
164                 span {
165                         font-size: 60%;
166                 }
167         }
168 }
169
170 .older.post-list {
171         margin: 5em 0 2em 0;
172         padding: 1em 0;
173         border-top: 0.1em dotted $link-color;
174         border-bottom: 0.1em dotted $link-color;
175         line-height: 200%;
176         li {
177                 display: inline;
178                 a {
179                         padding-top: 0;
180                         display: inline;
181                         font-size: 120%;
182                 }
183         }
184 }
185
186 footer {
187         p {
188                 text-align: right;
189                 font-size: 100%;
190         }
191 }
192
193 div[contenteditable=true]:focus-within {
194         outline: 1px solid gray;
195         outline-offset: 3px;
196 }
197
198 .inline-style-popup,
199 .block-style-popup {
200         background: white;
201         box-shadow: 0 0 5px #666;
202         input {
203                 display: none;
204                 padding: 3px;
205                 border: 1px inset #ccc;
206                 background: white;
207                 width: 0px;
208                 transition: width ease 2s;
209                 &.shown {
210                         display: inline-block;
211                         width: 400px;
212                 }
213         }
214         button {
215                 padding: 0 0.5em;
216                 height: 2em;
217                 text-align: center;
218                 background: #eee;
219                 border: 0px;
220                 &:hover {
221                         background: #ccc;
222                 }
223                 &[data-action=createLink] {
224                         color: blue;
225                         text-decoration: underline;
226                 }
227                 &.on {
228                         background: #444;
229                         color: white;
230                 }
231         }
232         &.inline-style-popup button {
233                 width: 2em;
234                 padding: 0;
235         }
236         &.block-style-popup {
237                 &.selected button {
238                         display: none;
239                         &.on {
240                                 display: block;
241                         }
242                 }
243         }
244 }
245
246 button#save {
247         position: sticky;
248         bottom: 10px;
249 }
250
251 main.post {
252         [contenteditable=true] div.figure {
253                 cursor: pointer;
254         }
255         div.figure {
256                 text-align: center;
257                 line-height: initial;
258                 img {
259                         max-width: 90%;
260                         max-height: 70vh;
261                 }
262                 span.empty::before {
263                         min-height: 50px;
264                         margin: 0 auto;
265                         display: block;
266                         width: 90%;
267                         background: #eee;
268                         padding: 1rem;
269                         font-size: 200px;
270                         content: "(image)";
271                         color: #aaa;
272                 }
273         }
274 }