Files: 8a51c32a71a79eaf5aacc86fda73831f1a6356dc / message / html / layout / default.mcss
1745 bytesRaw
1 | Message -default { |
2 | padding: 1rem .5rem |
3 | |
4 | display: grid |
5 | grid-template-columns: 5rem auto |
6 | |
7 | section.avatar { |
8 | grid-column: 1 / 2 |
9 | grid-row: 1 / span 4 |
10 | a img { |
11 | } |
12 | } |
13 | |
14 | section.top { |
15 | grid-column: 2 / 3 |
16 | grid-row: 1 / span 1 |
17 | |
18 | display: flex |
19 | align-items: baseline |
20 | |
21 | div.author { |
22 | font-weight: 600 |
23 | margin-right: .5rem |
24 | (a) { color: #222 } |
25 | } |
26 | |
27 | div.title { |
28 | flex-grow: 1 |
29 | font-size: .9rem |
30 | $textSubtle |
31 | (a) { $textSubtle } |
32 | } |
33 | |
34 | div.meta { |
35 | display: flex |
36 | justify-content: flex-end |
37 | align-items: center |
38 | |
39 | a { |
40 | $textSubtle |
41 | margin-left: .5rem |
42 | } |
43 | } |
44 | } |
45 | |
46 | section.content { |
47 | grid-column: 2 / 3 |
48 | grid-row: 2 / span 1 |
49 | |
50 | margin-bottom: .5rem |
51 | |
52 | (img) { |
53 | max-width: 100% |
54 | } |
55 | (video) { |
56 | max-width: 100% |
57 | } |
58 | } |
59 | |
60 | section.bottom { |
61 | grid-column: 2 / 3 |
62 | grid-row: 4 / span 1 |
63 | |
64 | display: flex |
65 | align-items: center |
66 | |
67 | div.timestamp { |
68 | flex-grow: 1 |
69 | |
70 | a { |
71 | font-size: .9rem |
72 | $textSubtle |
73 | } |
74 | } |
75 | |
76 | div.actions { |
77 | display: flex |
78 | justify-content: flex-end |
79 | |
80 | font-size: .9rem |
81 | a { |
82 | margin-left: .5em |
83 | } |
84 | |
85 | a.unlike { |
86 | $textSubtle |
87 | } |
88 | } |
89 | } |
90 | |
91 | section.raw-content { |
92 | grid-column: 2 / 3 |
93 | grid-row: 3 / span 1 |
94 | |
95 | pre { |
96 | border: 1px gainsboro solid |
97 | padding: .8rem |
98 | background-color: #f5f5f5 |
99 | color: #c121dc |
100 | padding: .3rem |
101 | white-space: pre-wrap |
102 | word-wrap: break-word |
103 | |
104 | span { |
105 | font-weight: 600 |
106 | } |
107 | a { |
108 | word-break: break-all |
109 | } |
110 | } |
111 | } |
112 | |
113 | footer.backlinks { |
114 | grid-row: 5 / span 1 |
115 | |
116 | grid-column: 2 / 3 |
117 | flex-basis: 100% |
118 | } |
119 | } |
120 |
Built with git-ssb-web