templates: display publication time
[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         a {
68                 text-transform: uppercase;
69                 display: block;
70                 text-decoration: none;
71                 font-size: 500%;
72                 font-weight: bold;
73                 padding-top: 0.5em;
74                 line-height: 50%;
75                 span {
76                         font-size: 30%;
77                 }
78                 margin-bottom: 2rem;
79         }
80 }
81
82 .post {
83         max-width: 50em;
84         div.figure {
85                 text-align: center;
86                 margin: 1em 0;
87                 img {
88                         border: 1px solid gray;
89                         padding: 3px;
90                 }
91         }
92         div.meta {
93                 margin-top: 3em;
94                 color: lighten($text-color, 40%);
95         }
96 }
97
98 .post-list {
99         ul, li {
100                 margin: 0;
101                 padding: 0;
102                 list-style: none;
103                 display: inline-block;
104         }
105         li.unpublished {
106                 opacity: 0.5;
107         }
108         a {
109                 text-transform: uppercase;
110                 display: inline-block;
111                 text-decoration: none;
112                 font-size: 200%;
113                 font-weight: bold;
114                 padding-top: 0.5em;
115                 margin-right: 1em;
116                 span {
117                         font-size: 60%;
118                 }
119         }
120
121 }