solved task

mate-academy · Dec 23, 2024 · 1f56a2c · 1f56a2c
1 parent da027e8
commit 1f56a2c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,7 +13,7 @@
     />
   </head>
   <body>
-    <div class="calendar">
+    <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>

diff --git 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);
+    }
   }
 }