From 7d7dfb82c0236c46996f28800a56f690474af98a Mon Sep 17 00:00:00 2001 From: Amir Al-Mohamad <131036084+amir-al-mohamad@users.noreply.github.com> Date: Mon, 23 Dec 2024 15:50:54 +0200 Subject: [PATCH] add task solution --- src/index.html | 36 +++++++++++++++++++- src/styles/index.scss | 72 +++++++++++++++++++++++++++++++++++++++ src/styles/variables.scss | 6 ++++ 3 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 src/styles/variables.scss diff --git a/src/index.html b/src/index.html index c10199d38..0cf74c08b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -12,7 +13,40 @@ href="styles/index.scss" /> + -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..87e106212 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,75 @@ +@import 'variables'; + +* { + box-sizing: border-box; +} + body { margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.calendar { + margin: auto; + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + width: $container-size; + padding: $container-padding; + + display: flex; + gap: $space-between-box; + flex-wrap: wrap; +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} { + @for $j from ($i + 1) through 32 { + .calendar__day:nth-child(#{$j}) { + display: none; + } + } + } +} + +$week-days: ( + 'mon': 1, + 'tue': 2, + 'wed': 3, + 'thu': 4, + 'fri': 5, + 'sat': 6, + 'sun': 7, +); + +@each $name, $week-day in $week-days { + .calendar--start-day-#{$name} > div:nth-child(1) { + margin-left: ($week-day - 1) * ($day-box-size + $space-between-box); + } +} + +.calendar__day { + width: $day-box-size; + height: $day-box-size; + background-color: #eee; + border: 1px solid black; + + display: flex; + justify-content: center; + align-items: center; +} + +.calendar__day:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + transition-duration: 500ms; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 000000000..ee766d40b --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,6 @@ +$day-box-size: 100px; +$space-between-box: 1px; +$container-padding: 10px; +$all-box-sizes: $day-box-size * 7; +$all-space-between: $space-between-box * 6; +$container-size: $all-box-sizes + $all-space-between + ($container-padding * 2);