git ssb

1
Marama {
2
  --day-radius: 6px
3
  --day-border-radius: 2px
4
  --day-gap: 1px
5
6
  width: calc(7 * 2 * var(--day-radius) +  6 * var(--day-gap))
7
  /* max of 6 weeks + day labels, with gaps between each */
8
9
  div.month-name {
10
    font-size: 20px
11
    font-weight: bold
12
    text-align: left
13
    cursor: pointer
14
    margin-bottom: 5px
15
  }
16
17
  div.days {
18
    grid-gap: var(--day-gap)
19
    justify-content: start
20
    align-content: start
21
22
    div.MaramaDay {}
23
  }
24
}
25
26
MaramaDay {
27
  width: calc(2 * var(--day-radius))
28
  height: calc(2 * var(--day-radius))
29
  cursor: pointer
30
31
  border-radius: var(--day-border-radius)
32
33
  display: flex
34
  justify-content: center
35
  align-items: center
36
37
  -past {
38
    background: hsl(0, 0%, 20%)
39
  }
40
41
  -future {
42
    background: hsl(0, 0%, 80%)
43
  }
44
45
  -range {
46
    background: deeppink
47
48
    -future {
49
      background: deepskyblue
50
    }
51
  }
52
53
  -events {
54
    /* border-radius: var(--day-radius) */
55
    /* background: hsla(277, 57%, 45%, 1) */
56
57
    div.dot {
58
      background: none
59
      width: 4px
60
      height: 4px
61
      border: 1px solid #fff
62
      border-radius: 8px
63
    }
64
65
    -past {
66
    }
67
68
    -attending {
69
      div.dot {
70
        background: #fff
71
        width: 6px
72
        height: 6px
73
        border: none
74
      }
75
    }
76
  }
77
}
78
79
MaramaDayName {
80
  color: hsl(0, 0%, 40%)
81
  font-family: arial
82
  font-size: calc(2 * var(--day-radius) - 3px)
83
  /* line-height: calc(2 * var(--day-radius) - 2px) */
84
85
  width: calc(2 * var(--day-radius))
86
  height: calc(2 * var(--day-radius))
87
88
  display: flex
89
  align-items: center
90
  justify-content: center
91
}
92