git ssb

1
Message -default {
2
  padding: 1rem .5rem
3
4
  display: grid
5
  grid-template-columns: 5rem auto
6
  grid-row-gap: .5rem
7
8
  section.avatar {
9
    grid-column: 1 / 2
10
    grid-row: 1 / span 4
11
    a img {
12
    }
13
  }
14
15
  section.top {
16
    grid-column: 2 / 3
17
    grid-row: 1 / span 1
18
19
    display: flex
20
    align-items: baseline
21
    
22
    div.author {
23
      font-weight: 600
24
      margin-right: .5rem
25
      (a) { color: #222 }
26
    }
27
28
    div.title {
29
      flex-grow: 1
30
      font-size: .9rem
31
      $textSubtle
32
      (a) { $textSubtle }
33
    }
34
35
    div.meta {
36
      display: flex
37
      justify-content: flex-end
38
      align-items: baseline
39
40
      i, div, a {
41
        margin-left: .5rem
42
      }
43
    }
44
  }
45
46
  section.content {
47
    grid-column: 2 / 3
48
    grid-row: 2 / span 1
49
50
    (img) {
51
      max-width: 100%
52
    }
53
    (video) {
54
      max-width: 100%
55
    }
56
  }
57
58
  section.bottom {
59
    grid-column: 2 / 3
60
    grid-row: 4 / span 1
61
62
    display: flex
63
    align-items: center
64
65
    div.timestamp {
66
      flex-grow: 1
67
68
      a {
69
        font-size: .9rem
70
        $textSubtle
71
      }
72
    }
73
74
    div.actions {
75
      display: grid
76
      grid-auto-flow: column
77
78
      font-size: .9rem
79
      a {
80
        margin-left: .5em
81
      }
82
83
      a.likes { grid-column: 1 }
84
      a.like, a.unlike { grid-column: 2 }
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
  /* UnreadFeature (search codebase for this if extracting) */
121
122
  /* initially read */
123
  -read {
124
  }
125
126
  /* initially unread */
127
  -unread {
128
    section.top {
129
      div.meta {
130
        i.unread {
131
          display: initial
132
          transition: color 1s ease-in
133
          color: hotpink
134
        }
135
      }
136
    }
137
  }
138
139
  /* initially unread, but subsequently marked read */
140
  -unread {
141
    -read {
142
      section.top {
143
        div.meta {
144
          i.unread {
145
            color: #bbb
146
          }
147
        }
148
      }
149
    }
150
  }
151
}
152