diff --git a/src/index.html b/src/index.html index c10199d38..f2b37f4f3 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,39 @@ href="styles/index.scss" /> - -

Calendar

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..5ceaf53de 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,85 @@ +$day-size: 100px; +$month-length: 31; +$day-border: 1px solid #000; +$day-font-size: 30px; +$day-color: #eee; +$day-hover-color: #ffbfcd; +$day-hover-transform: translateY(-20px); +$day-transition: all 0.5s ease; +$calendar-width: calc(7 * $day-size + 10px); +$days: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); + body { margin: 0; } + +.body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calendar { + display: flex; + align-items: center; + flex-wrap: wrap; + width: 706px; + margin: 10px; + border-collapse: collapse; + gap: 1px; +} + +.calendar__day { + display: flex; + justify-content: center; + align-items: center; + background-color: $day-color; + font-family: Arial, sans-serif; + border: $day-border; + height: $day-size; + width: $day-size; + box-sizing: border-box; + font-size: $day-font-size; + transition: $day-transition; +} + +.calendar__day:hover { + cursor: pointer; + background-color: $day-hover-color; + transform: $day-hover-transform; +} + +.calendar__day::before { + content: attr(data-day); +} + +.calendar__day:nth-child(7n + 1) { + margin-left: 0; +} + +@for $i from 1 through $month-length { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + } +} + +@for $i from 28 through $month-length { + .calendar--month-length-#{$i}.calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } +} + +@each $day, $i in $days { + .calendar--start-day-#{$day} > .calendar__day:first-child { + margin-left: ($day-size + 1px) * $i; + } +}