From ad705744deb2ad333cd9c5c8bbeacbdf07da1748 Mon Sep 17 00:00:00 2001 From: Saint Date: Tue, 14 Jul 2026 19:38:10 +0300 Subject: [PATCH 1/3] add task solution --- src/index.html | 68 +++++++++++++++++++++++++++++++++++++++-- src/styles/index.scss | 3 -- src/styles/main.scss | 71 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+), 5 deletions(-) delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss diff --git a/src/index.html b/src/index.html index c10199d38b..828d42c6b6 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,74 @@ Calendar -

Calendar

+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..9ed2cf1a00 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,71 @@ +/* stylelint-disable scss/operator-no-newline-after */ + +body { + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +$day-size: 100px; +$gap: 1px; +$padding: 10px; +$days-in-week: 7; +$border-color: black; +$background-color: #eee; +$background-color-hover: #ffbfcb; + +.calendar { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + gap: $gap; + padding: $padding; + width: ($days-in-week * $day-size) + (($days-in-week - 1) * $gap) + + ($padding * 2); +} + +.calendar__day { + box-sizing: border-box; + border: 1px solid $border-color; + width: $day-size; + height: $day-size; + background-color: $background-color; + + display: flex; + align-items: center; + justify-content: center; + font-family: Arial, sans-serif; + font-size: 30px; + + transition: all 0.5s; + cursor: pointer; + + &:hover { + background-color: $background-color-hover; + transform: translateY(-20px); + } +} + +@for $day from 1 through 31 { + .calendar__day:nth-child(#{$day})::before { + content: '#{$day}'; + } +} + +@each $day, $index in mon 1, tue 2, wed 3, thu 4, fri 5, sat 6, sun 7 { + .calendar--start-day-#{$day} { + .calendar__day:first-child { + margin-left: ($index - 1) * ($day-size + $gap); + } + } +} + +@for $days from 28 through 31 { + .calendar--month-length-#{$days} { + .calendar__day:nth-child(n + #{$days + 1}) { + display: none; + } + } +} From 9a6fa7c8f7f5597cfcf58cf8e0e217ca2eda4954 Mon Sep 17 00:00:00 2001 From: Saint Date: Tue, 14 Jul 2026 19:45:19 +0300 Subject: [PATCH 2/3] add task solution --- src/index.html | 66 ++++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/src/index.html b/src/index.html index 828d42c6b6..9105d0fd95 100644 --- a/src/index.html +++ b/src/index.html @@ -13,70 +13,68 @@ /> -
-
-
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
+
From ec29585d07b73e02f2de744557dab09696d0471c Mon Sep 17 00:00:00 2001 From: Saint Date: Tue, 14 Jul 2026 19:54:56 +0300 Subject: [PATCH 3/3] add task solution --- src/index.html | 66 +++++++++++++++++++++++--------------------- src/styles/main.scss | 9 ++++-- 2 files changed, 40 insertions(+), 35 deletions(-) diff --git a/src/index.html b/src/index.html index 9105d0fd95..828d42c6b6 100644 --- a/src/index.html +++ b/src/index.html @@ -13,68 +13,70 @@ /> -
-
+
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index 9ed2cf1a00..adcd825ad1 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,11 +1,14 @@ /* stylelint-disable scss/operator-no-newline-after */ -body { - margin: 0; - min-height: 100vh; +.page { display: flex; justify-content: center; align-items: center; + min-height: 100vh; +} + +body { + margin: 0; } $day-size: 100px;