style: add rules for figure captions
[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: 1rem;
51         right: 1rem;
52         a {
53                 margin-left: 1rem;
54         }
55 }
56
57 main {
58         margin: 0 4em;
59         padding: 1em;
60         background: #fafaff;
61         max-width: 70em;
62         min-height: 70vh;
63         clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
64 }
65
66 .home {
67         nav a {
68                 text-transform: uppercase;
69                 display: inline-block;
70                 text-decoration: none;
71                 font-size: 500%;
72                 font-weight: bold;
73                 padding-top: 0.5em;
74                 line-height: 50%;
75                 width: 100%;
76                 span {
77                         font-size: 30%;
78                 }
79                 margin-bottom: 1rem;
80                 &.divers {
81                         width: 49%;
82                 }
83                 &.vrac {
84                         width: 49%;
85                         text-align: right;
86                         float: right;
87                 }
88         }
89         .latest {
90                 margin-top: 2em;
91                 h2 {
92                         margin: 0;
93                         font-size: 400%;
94                         font-weight: bold;
95                         text-transform: uppercase;
96                 }
97                 .meta {
98                         padding-top: 0.5rem;
99                         padding-left: 0.5rem;
100                         color: lighten($text-color, 40%);
101                 }
102         }
103 }
104
105 .post {
106         max-width: 50em;
107         div.figure {
108                 text-align: center;
109                 margin: 1em 0;
110                 img {
111                         border: 1px solid gray;
112                         padding: 3px;
113                 }
114                 .caption {
115                         margin-top: 0;
116                         font-style: italic;
117                 }
118         }
119         div.meta {
120                 margin-top: 3em;
121                 color: lighten($text-color, 40%);
122         }
123 }
124
125 .post-list {
126         ul, li {
127                 margin: 0;
128                 padding: 0;
129                 list-style: none;
130                 display: inline-block;
131         }
132         li.unpublished {
133                 opacity: 0.5;
134         }
135         a {
136                 text-transform: uppercase;
137                 display: inline-block;
138                 text-decoration: none;
139                 font-size: 200%;
140                 font-weight: bold;
141                 padding-top: 0.5em;
142                 margin-right: 1em;
143                 span {
144                         font-size: 60%;
145                 }
146         }
147
148 }