git ssb

1
Posts {
2
  grid-template-columns: auto minmax(800px, 1200px) 1rem auto
3
4
  section.top {
5
    display: grid
6
    grid-template-columns: 6rem 1fr 6rem
7
    grid-template-rows: auto auto
8
    grid-gap: 2rem
9
    
10
    section.viewSettings {
11
      grid-row: 1 / 2
12
      grid-column: 2 / 3
13
14
      display: flex
15
      justify-content: space-between
16
      align-items: center
17
18
      div.show {
19
        display: flex
20
        align-items: center
21
22
        span {
23
          font-weight: 600
24
          margin-right: .3rem
25
        }
26
        
27
        div.toggle {
28
          color: #999
29
          cursor: pointer
30
31
          padding: .25rem .5rem
32
          border: 1px solid rgba(0,0,0,0)
33
34
          i { margin-right: .3rem }
35
36
          -active {
37
            color: #222
38
            i { color: #9754de }
39
          }
40
41
          :hover {
42
            border: 1px solid #9754de
43
          }
44
        }
45
      
46
      }
47
48
      div.sort {
49
        display: flex
50
        align-items: center
51
52
        span { font-weight: 600 }
53
        button { margin-left: .5rem }
54
      }
55
    }
56
57
    div.Compose {
58
      grid-row: 2 / 3
59
      grid-column: 2 / 3
60
      padding: 0
61
    }
62
  }
63
64
  section.content {
65
    div.ThreadCard {
66
      border: none
67
      margin-top: 3rem
68
    }
69
  }
70
}
71
72
ThreadCard {
73
  -loading { min-height: 10rem }
74
  outline: none
75
76
  display: grid
77
  grid-template-columns: 6rem 1fr 6rem
78
  grid-gap: 2rem
79
80
  section.authored {
81
    display: grid
82
    grid-gap: .8rem
83
    align-content: start
84
    justify-items: end
85
86
    div.avatar {
87
      height: 4rem
88
      width: 4rem
89
      a {
90
        height: 4rem
91
        width: 4rem
92
        img {
93
          height: 4rem
94
          width: 4rem
95
        }
96
      }
97
    }
98
    div.name {
99
      text-align: end
100
      a {
101
        color: #222
102
        font-weight: 600
103
        text-decoration: none
104
      }
105
    }
106
  }
107
108
  section.content-preview {
109
    cursor: pointer
110
111
    div.root {
112
      div.Markdown {
113
        background-color: #000
114
        color: #fff
115
        line-height: 1.4rem
116
        padding: 2rem
117
118
        max-height: 20rem
119
        overflow: hidden
120
121
        p {
122
          :first-of-type { margin-top: 0 }
123
        }
124
        (img) { max-width: 100% }
125
        (pre) { background-color: #000; }
126
        (code) { background-color: #000; }
127
        (a) { color: #db67ed }
128
      }
129
    }
130
131
    div.recent {
132
      div.msg {
133
        margin: 1rem 2rem 0 2rem
134
135
        :last-child { margin-bottom: .5rem }
136
137
        span.author { font-weight: 600 }
138
        span.preview { margin-left: .5rem }
139
      }
140
    }
141
  }
142
143
  section.stats {
144
    display: grid
145
    grid-gap: .8rem
146
    align-content: start
147
    justify-items: start
148
149
    div.participants {
150
      display: flex
151
      justify-content: flex-start
152
      flex-wrap: wrap
153
154
      a {
155
        height: 2rem
156
        width: 2rem
157
        margin: 0 .5rem .5rem 0
158
        img {
159
          height: 2rem
160
          width: 2rem
161
        }
162
      }
163
    }
164
165
    div.counts {
166
      display: flex
167
      justify-content: flex-start
168
      flex-wrap: wrap
169
170
      div {
171
        margin: 0 .5rem .5rem 0
172
173
        display: flex
174
        align-items: center
175
        i { margin-left: .3rem }
176
      }
177
    }
178
  }
179
180
  :focus {
181
    section.content-preview {
182
      div.root {
183
        div.Markdown {
184
          background: #6f0055
185
          transition: background .2s ease-in
186
        }
187
      }
188
    }
189
    (a) {
190
      color: #db67ed
191
    }
192
  }
193
}
194