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: 8rem 1fr
7
    grid-gap: 2rem
8
    
9
    div.Compose {
10
      grid-column: 2 / 3
11
      padding: 0
12
    }
13
  }
14
15
  section.content {
16
    div.ThreadCard {
17
      border: none
18
      margin-top: 3rem
19
    }
20
  }
21
}
22
23
ThreadCard {
24
  -loading {
25
    min-height: 20rem
26
  }
27
  outline: none
28
29
  display: grid
30
  grid-template-columns: 8rem 1fr
31
  grid-gap: 2rem
32
33
  section.context {
34
    display: grid
35
    grid-gap: 1rem
36
    align-content: start
37
    justify-items: end
38
39
    div.avatar {
40
      height: 4rem
41
      width: 4rem
42
      a {
43
        height: 4rem
44
        width: 4rem
45
        img {
46
          height: 4rem
47
          width: 4rem
48
        }
49
      }
50
    }
51
    div.name {
52
      a {
53
        color: #222
54
        font-weight: 600
55
        text-decoration: none
56
      }
57
    }
58
    div.counts {
59
      display: grid
60
      grid-template-columns: auto auto auto
61
      grid-gap: 1rem
62
63
      div {
64
        display: flex
65
        align-items: center
66
        i { margin-left: .3rem }
67
      }
68
    }
69
70
    div.participants {
71
      display: flex
72
      justify-content: flex-end
73
      flex-wrap: wrap
74
75
      a {
76
        height: 2rem
77
        width: 2rem
78
        margin: 0 0 .5rem .5rem
79
        img {
80
          height: 2rem
81
          width: 2rem
82
        }
83
      }
84
    }
85
  }
86
87
  section.content-preview {
88
    cursor: pointer
89
90
    div.root {
91
      div.Markdown {
92
        background-color: #000
93
        color: #fff
94
        line-height: 1.4rem
95
        padding: 2rem
96
97
        max-height: 20rem
98
        overflow: hidden
99
100
        p {
101
          :first-of-type { margin-top: 0 }
102
        }
103
        (img) { max-width: 100% }
104
      }
105
    }
106
107
    div.recent {
108
      div.msg {
109
        margin: 1rem 2rem 0 2rem
110
        display: flex
111
112
        :last-child { margin-bottom: .5rem }
113
114
        div.author {
115
          font-weight: 600 
116
        }
117
        div.preview { margin-left: .5rem }
118
      }
119
    }
120
  }
121
  :focus {
122
    section.content-preview {
123
      div.root {
124
        div.Markdown {
125
          background: #6f0055
126
          transition: background .2s ease-in
127
        }
128
      }
129
    }
130
  }
131
}
132