git ssb

1
CalendarPage {
2
  width: 100%
3
4
  display: grid
5
  justify-content: center
6
  align-content: start
7
  justify-items: center
8
9
  overflow-y: scroll
10
}
11
12
13
Calendar {
14
  font-family: 'input_mono_regular', monospace
15
  text-transform: capitalize
16
17
  padding: 0
18
  margin: 0
19
  margin-bottom: 4rem
20
21
  section {
22
    top: 50%
23
    margin: 0 auto
24
    user-select: none
25
    -webkit-user-select: none
26
    -ms-user-select: none
27
    -webkit-transform: translateY(-50%)
28
    -ms-transform: translateY(-50%)
29
    transform: translateY(-50%)
30
    text-align: center
31
  }
32
33
  div.header { 
34
    margin: 40px 0
35
    text-align: left
36
    align-content: flex-start
37
38
    div.year { 
39
      font-size: 40px
40
      font-weight: bold
41
42
      a {
43
        text-align: center
44
        color: #000
45
        width: 30px
46
        display: inline-block
47
        margin-left: 10px
48
49
        :hover {
50
          color: #ffffff
51
          background: #000
52
          cursor: pointer
53
          text-decoration: none
54
        }
55
      }
56
    }
57
58
    p.percentage {
59
      font-size: 20px
60
      color: #8b8b8b
61
    }
62
  }
63
64
  div.months {
65
    display: flex
66
67
    div.CalendarMonth {
68
      margin-right: 20px
69
    }
70
  }
71
72
  /* @media only screen and (min-width: 1440px) */
73
  /* { section { width: 1440px; }} */
74
75
  /* @media only screen and (max-width: 1440px) */
76
  /* { section { width: 720px; }} */
77
78
  /* @media only screen and (max-width: 720px) */
79
  /* { section { width: 360px; }} */
80
}
81
82
83
CalendarMonth {
84
  --day-radius: 6px
85
  --day-border-radius: 2px
86
  --day-gap: 1px
87
88
  width: calc(7 * 2 * var(--day-radius) +  6 * var(--day-gap))
89
  /* max of 6 weeks + day labels, with gaps between each */
90
91
  div.month-name {
92
    font-size: 20px
93
    font-weight: bold
94
    text-align: left
95
    cursor: pointer
96
    margin-bottom: 5px
97
  }
98
99
  div.days {
100
    grid-gap: var(--day-gap)
101
    justify-content: start
102
    align-content: start
103
104
    div.CalendarDay {}
105
  }
106
}
107
108
CalendarDay {
109
  width: calc(2 * var(--day-radius))
110
  height: calc(2 * var(--day-radius))
111
  cursor: pointer
112
113
  border-radius: var(--day-border-radius)
114
115
  display: flex
116
  justify-content: center
117
  align-items: center
118
119
  -past {
120
    background: hsl(0, 0%, 20%)
121
  }
122
123
  -future {
124
    background: hsl(0, 0%, 80%)
125
  }
126
127
  -selected {
128
    background: deeppink
129
130
    -future {
131
      background: deepskyblue
132
    }
133
  }
134
135
  -events {
136
    /* border-radius: var(--day-radius) */
137
    /* background: hsla(277, 57%, 45%, 1) */
138
139
    div {
140
      background: #fff
141
      width: 6px
142
      height: 6px
143
      border-radius: 8px
144
145
      display: flex
146
      justify-content: center
147
      align-items: center
148
149
      div {
150
        background: #000
151
        width: 4px
152
        height: 4px
153
        border-radius: 4px
154
      }
155
    }
156
157
    -past {
158
    }
159
  }
160
}
161
162
CalendarDayName {
163
  color: hsl(0, 0%, 40%)
164
  font-family: arial
165
  font-size: calc(2 * var(--day-radius) - 3px)
166
  /* line-height: calc(2 * var(--day-radius) - 2px) */
167
168
  width: calc(2 * var(--day-radius))
169
  height: calc(2 * var(--day-radius))
170
171
  display: flex
172
  align-items: center
173
  justify-content: center
174
}
175
176
CalendarEvents {
177
  width: 50rem
178
179
  div {
180
    width: 50rem
181
182
    div.Message {
183
      width: 50rem
184
      section.bottom { display: none }
185
    }
186
  }
187
}
188