add link/unlink to quick edit
[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 }
138
139 .post-list {
140         ul, li {
141                 margin: 0;
142                 padding: 0;
143                 list-style: none;
144                 display: inline-block;
145         }
146         li.unpublished {
147                 opacity: 0.5;
148         }
149         a {
150                 text-transform: uppercase;
151                 display: inline-block;
152                 text-decoration: none;
153                 font-size: 200%;
154                 font-weight: bold;
155                 padding-top: 0.5em;
156                 margin-right: 1em;
157                 span {
158                         font-size: 60%;
159                 }
160         }
161 }
162
163 .older.post-list {
164         margin: 5em 0 2em 0;
165         padding: 1em 0;
166         border-top: 0.1em dotted $link-color;
167         border-bottom: 0.1em dotted $link-color;
168         line-height: 200%;
169         li {
170                 display: inline;
171                 a {
172                         padding-top: 0;
173                         display: inline;
174                         font-size: 120%;
175                 }
176         }
177 }
178
179 footer {
180         p {
181                 text-align: right;
182                 font-size: 100%;
183         }
184 }
185
186 #style-popup {
187         background: white;
188         input {
189                 display: none;
190                 padding: 3px;
191                 border: 1px inset #ccc;
192                 background: white;
193                 width: 0px;
194                 transition: width ease 2s;
195                 &.shown {
196                         display: inline-block;
197                         width: 400px;
198                 }
199         }
200         button {
201                 padding: 0;
202                 height: 2em;
203                 width: 2em;
204                 text-align: center;
205                 background: #eee;
206                 border: 1px outset #ccc;
207                 margin-right: 1px;
208                 &:hover {
209                         background: #ccc;
210                 }
211                 &[data-action=createLink] {
212                         color: blue;
213                         text-decoration: underline;
214                 }
215         }
216 }