templates: add contact email in footer
[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         background: #fafaff;
66         min-height: 70vh;
67         clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
68 }
69
70 .home {
71         nav a {
72                 text-transform: uppercase;
73                 display: inline-block;
74                 text-decoration: none;
75                 font-size: 500%;
76                 font-weight: bold;
77                 padding-top: 0.5em;
78                 line-height: 50%;
79                 width: 100%;
80                 span {
81                         font-size: 30%;
82                 }
83                 margin-bottom: 1rem;
84                 &.divers {
85                         width: 49%;
86                 }
87                 &.vrac {
88                         width: 49%;
89                         text-align: right;
90                         float: right;
91                 }
92         }
93         .latest {
94                 margin-top: 2em;
95                 h2 {
96                         margin: 0;
97                         font-size: 400%;
98                         font-weight: bold;
99                         text-transform: uppercase;
100                 }
101                 .meta {
102                         padding-top: 0.5rem;
103                         padding-left: 0.5rem;
104                         color: lighten($text-color, 40%);
105                 }
106         }
107 }
108
109 .post {
110         max-width: 50em;
111         div.figure {
112                 text-align: center;
113                 margin: 1em 0;
114                 img {
115                         border: 1px solid gray;
116                         padding: 3px;
117                 }
118                 .caption {
119                         margin-top: 0;
120                         font-style: italic;
121                 }
122         }
123         p {
124                 line-height: 160%;
125         }
126         code,
127         pre.screen {
128                 background: #111;
129                 color: white;
130                 padding: 2px;
131         }
132         div.meta {
133                 margin-top: 3em;
134                 color: lighten($text-color, 40%);
135         }
136 }
137
138 .post-list {
139         ul, li {
140                 margin: 0;
141                 padding: 0;
142                 list-style: none;
143                 display: inline-block;
144         }
145         li.unpublished {
146                 opacity: 0.5;
147         }
148         a {
149                 text-transform: uppercase;
150                 display: inline-block;
151                 text-decoration: none;
152                 font-size: 200%;
153                 font-weight: bold;
154                 padding-top: 0.5em;
155                 margin-right: 1em;
156                 span {
157                         font-size: 60%;
158                 }
159         }
160 }
161
162 .older.post-list {
163         margin: 5em 0 2em 0;
164         padding: 1em 0;
165         border-top: 0.1em dotted $link-color;
166         border-bottom: 0.1em dotted $link-color;
167         line-height: 200%;
168         li {
169                 display: inline;
170                 a {
171                         padding-top: 0;
172                         display: inline;
173                         font-size: 120%;
174                 }
175         }
176 }
177
178 footer {
179         p {
180                 text-align: right;
181                 font-size: 100%;
182         }
183 }