From 1f56a2c625c8e45f83c11873739c54568e710ab7 Mon Sep 17 00:00:00 2001 From: Patryk Czarnocki Date: Mon, 23 Dec 2024 20:11:00 +0100 Subject: [PATCH] solved task --- src/index.html | 2 +- src/styles/index.scss | 41 +++++++++++++++++++++++++++++++++++++---- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index 70a36b2d5..2c793f8dd 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,7 @@ /> -
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 09e654eb0..77b11d10f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,25 +1,58 @@ +$week: (mon 0, tue 1, wed 2, thu 3, fri 4, sat 5, sun 6); +$day-size: 100px; + body { margin: 0; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + height: 100vh; } .calendar { box-sizing: border-box; display: flex; flex-wrap: wrap; - justify-content: center; - align-items: center; + width: 726px; + padding: 10px; + gap: 1px; + + @each $day, $index in $week { + &--start-day-#{$day} .calendar__day:first-child { + margin-left: ($day-size + 1px) * $index; + } + } + + @for $i from 28 through 31 { + &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } + } &__day { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; background-color: #eee; - height: 100px; - width: 100px; + height: $day-size; + width: $day-size; border: 1px solid black; + transition-duration: 0.5s; @for $i from 1 through 31 { &:nth-child(#{$i})::before { content: '#{$i}'; font-size: 30px; + font-family: Arial, Helvetica, sans-serif; } } + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + } } }