include latest post on homepage
[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         }
115         div.meta {
116                 margin-top: 3em;
117                 color: lighten($text-color, 40%);
118         }
119 }
120
121 .post-list {
122         ul, li {
123                 margin: 0;
124                 padding: 0;
125                 list-style: none;
126                 display: inline-block;
127         }
128         li.unpublished {
129                 opacity: 0.5;
130         }
131         a {
132                 text-transform: uppercase;
133                 display: inline-block;
134                 text-decoration: none;
135                 font-size: 200%;
136                 font-weight: bold;
137                 padding-top: 0.5em;
138                 margin-right: 1em;
139                 span {
140                         font-size: 60%;
141                 }
142         }
143
144 }