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-width: 12px
80
  --day-border-radius: 2px
81
  --day-gap: 2px
82
83
  width: calc(7 * var(--day-width) +  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: var(--day-width)
104
  height: var(--day-width)
105
106
  border-radius: var(--day-border-radius)
107
108
  -past {
109
    background: hsl(0, 0%, 20%)
110
  }
111
112
  -future {
113
    background: hsl(0, 0%, 80%)
114
  }
115
}
116
117
CalendarDayName {
118
  color: hsl(0, 0%, 40%)
119
  font-family: arial
120
  font-size: calc(var(--day-width) - 3px)
121
  /* line-height: calc(var(--day-width) - 2px) */
122
123
  width: var(--day-width)
124
  height: var(--day-width)
125
126
  display: flex
127
  align-items: center
128
  justify-content: center
129
}
130