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