From 6084d54809b236471aa8d9b45b51966571e98d67 Mon Sep 17 00:00:00 2001 From: Owk Date: Wed, 18 Dec 2024 20:38:52 +0200 Subject: [PATCH] task solution --- src/index.html | 38 +++++++++++++++++++-- src/styles/blocks/calendar.scss | 58 +++++++++++++++++++++++++++++++++ src/styles/main.scss | 10 ++++++ src/styles/utils/veriables.scss | 6 ++++ 4 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 src/styles/blocks/calendar.scss create mode 100644 src/styles/main.scss create mode 100644 src/styles/utils/veriables.scss diff --git a/src/index.html b/src/index.html index c10199d38..aca4c9fed 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,44 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 000000000..b852cb40f --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,58 @@ +@import '../utils/veriables'; + +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calendar { + display: flex; + flex-wrap: wrap; + max-width: $max-width; + gap: $gap; + padding: 0 10px; + + &:nth-child(7n) { + margin-top: 0; + } +} + +.calendar .calendar__day { + width: $block; + height: $block; + background-color: #eee; + border: 1px solid #000; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + transition-property: background-color, transform; + transition-duration: 0.5s; + cursor: pointer; + box-sizing: border-box; + + &:hover { + transform: translateY(-20px); + background-color: #ffbfcb; + } +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + } +} + +@each $day, $i in $days { + .calendar--start-day-#{$day} > :first-child { + margin-left: #{(($block + $gap) * $i)}; + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} :nth-child(n + #{$i + 1}) { + display: none; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 000000000..537c30f27 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,10 @@ +@import './blocks/calendar'; + +* { + margin: 0; +} + +html { + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; +} diff --git a/src/styles/utils/veriables.scss b/src/styles/utils/veriables.scss new file mode 100644 index 000000000..ef4c00d2a --- /dev/null +++ b/src/styles/utils/veriables.scss @@ -0,0 +1,6 @@ +$max-width: 706px; +$block: 100px; +$block-column: 7; +$gap: 1px; +$padding: 10px; +$days: ('mon' 0, 'tue' 1, 'wed' 2, 'thu' 3, 'fri' 4, 'sat' 5, 'sun' 6);