Files: 3d4eca03f309655578710ab4453f309c514268d1 / app / html / blogCard.mcss
1178 bytesRaw
1 | BlogCard { |
2 | -arriving { |
3 | opacity: 0 |
4 | $borderBottomLight |
5 | } |
6 | |
7 | padding: 1.5rem 0 |
8 | $backgroundPrimaryText |
9 | |
10 | border: 1px solid #fff |
11 | transition: all .5s ease-in |
12 | |
13 | display: flex |
14 | flex-direction: column |
15 | |
16 | div.context { |
17 | font-size: .8rem |
18 | margin-bottom: 1.5rem |
19 | |
20 | display: flex |
21 | align-items: center |
22 | |
23 | img.Avatar { |
24 | margin-right: .5rem |
25 | } |
26 | |
27 | div.name { |
28 | margin-right: 1rem |
29 | } |
30 | |
31 | div.Timeago {} |
32 | } |
33 | |
34 | div.content { |
35 | display: flex |
36 | flex-direction: row |
37 | flex-grow: 1 |
38 | |
39 | cursor: pointer |
40 | |
41 | |
42 | div.Thumbnail { |
43 | margin-right: 1rem |
44 | } |
45 | |
46 | div.text { |
47 | display: flex |
48 | flex-wrap: wrap |
49 | |
50 | h2 { |
51 | $markdownLarge |
52 | margin: 0 .5rem 0 0 |
53 | } |
54 | div.Button.-channel {} |
55 | div.summary { |
56 | flex-basis: 100% |
57 | } |
58 | } |
59 | } |
60 | background-color: #fff |
61 | |
62 | -unread { |
63 | div.content { |
64 | font-weight: bold |
65 | } |
66 | background-color: #fff |
67 | } |
68 | } |
69 | |
70 | Thumbnail { |
71 | border-radius: .5rem |
72 | min-width: 9rem |
73 | width: 9rem |
74 | min-height: 7rem |
75 | height: 7rem |
76 | |
77 | -empty { |
78 | color: #fff |
79 | font-size: 1.8rem |
80 | opacity: .8 |
81 | |
82 | display: flex |
83 | justify-content: center |
84 | align-items: center |
85 | } |
86 | } |
87 | |
88 |
Built with git-ssb-web