git ssb

16+

Dominic / patchbay



Tree: ee739c123cb53210216f3fe26a35eedcf2c6eecc

Files: ee739c123cb53210216f3fe26a35eedcf2c6eecc / app / page / calendar.mcss

2242 bytesRaw
1CalendarPage {
2 width: 100%
3
4 display: grid
5 justify-content: center
6}
7
8
9Calendar {
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
78CalendarMonth {
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
102CalendarDay {
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
117CalendarDayName {
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

Built with git-ssb-web