task solution

mate-academy · Dec 18, 2024 · 6084d54 · 6084d54
1 parent f12c803
commit 6084d54
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -9,10 +9,44 @@
     <title>Calendar</title>
     <link
       rel="stylesheet"
-      href="styles/index.scss"
+      href="./styles/main.scss"
     />
   </head>
   <body>
-    <h1>Calendar</h1>
+    <div class="container">
+      <div class="calendar calendar--start-day-sun calendar--month-length-31">
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+        <div class="calendar__day"></div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/src/styles/blocks/calendar.scss 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
@@ -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
@@ -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);