git ssb

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