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
      }
126
    }
127
128
    div.recent {
129
      div.msg {
130
        margin: 1rem 2rem 0 2rem
131
132
        :last-child { margin-bottom: .5rem }
133
134
        span.author { font-weight: 600 }
135
        span.preview { margin-left: .5rem }
136
      }
137
    }
138
  }
139
140
  section.stats {
141
    display: grid
142
    grid-gap: .8rem
143
    align-content: start
144
    justify-items: start
145
146
    div.participants {
147
      display: flex
148
      justify-content: flex-start
149
      flex-wrap: wrap
150
151
      a {
152
        height: 2rem
153
        width: 2rem
154
        margin: 0 .5rem .5rem 0
155
        img {
156
          height: 2rem
157
          width: 2rem
158
        }
159
      }
160
    }
161
162
    div.counts {
163
      display: flex
164
      justify-content: flex-start
165
      flex-wrap: wrap
166
167
      div {
168
        margin: 0 .5rem .5rem 0
169
170
        display: flex
171
        align-items: center
172
        i { margin-left: .3rem }
173
      }
174
    }
175
  }
176
177
  :focus {
178
    section.content-preview {
179
      div.root {
180
        div.Markdown {
181
          background: #6f0055
182
          transition: background .2s ease-in
183
        }
184
      }
185
    }
186
  }
187
}
188