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