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: flex
76
      justify-content: flex-end
77
78
      font-size: .9rem
79
      a {
80
        margin-left: .5em
81
      }
82
83
      a.unlike {
84
        $textSubtle
85
      }
86
    }
87
  }
88
89
  section.raw-content {
90
    grid-column: 2 / 3
91
    grid-row: 3 / span 1
92
93
    pre {
94
      border: 1px gainsboro solid
95
      padding: .8rem
96
      background-color: #f5f5f5
97
      color: #c121dc
98
      padding: .3rem
99
      white-space: pre-wrap
100
      word-wrap: break-word
101
102
      span {
103
        font-weight: 600
104
      }
105
      a {
106
        word-break: break-all
107
      }
108
    }
109
  }
110
111
  footer.backlinks {
112
    grid-row: 5 / span 1
113
114
    grid-column: 2 / 3
115
    flex-basis: 100%
116
  }
117
118
  /* UnreadFeature (search codebase for this if extracting) */
119
120
  /* initially read */
121
  -read {
122
  }
123
124
  /* initially unread */
125
  -unread {
126
    section.top {
127
      div.meta {
128
        i.unread {
129
          display: initial
130
          transition: color 1s ease-in
131
          color: hotpink
132
        }
133
      }
134
    }
135
  }
136
137
  /* initially unread, but subsequently marked read */
138
  -unread {
139
    -read {
140
      section.top {
141
        div.meta {
142
          i.unread {
143
            color: #bbb
144
          }
145
        }
146
      }
147
    }
148
  }
149
}
150