solution

mate-academy · Oct 24, 2024 · e99046d · e99046d
1 parent 09543af
commit e99046d
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 51 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,47 +1,51 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Calendar</title>
+    <link
+      rel="stylesheet"
+      href="styles/index.scss"
+    />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Calendar</title>
-  <link rel="stylesheet" href="styles/index.scss" />
-</head>
-
-<body>
-  <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>
-</body>
-
-</html>
+  <body>
+    <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>
+  </body>
+</html>
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,29 +1,44 @@
 $calendar-day-size: 100px;
 $calendar-day-border: 1px solid black;
 $calendar-day-color: #eee;
+$gap-size: 1px;
+$padding-size: 10px;
+$start-day: (
+  mon 0,
+  tue ($calendar-day-size + $gap-size),
+  wed ($calendar-day-size + $gap-size) * 2,
+  thu ($calendar-day-size + $gap-size) * 3,
+  fri ($calendar-day-size + $gap-size) * 4,
+  sat ($calendar-day-size + $gap-size) * 5,
+  sun ($calendar-day-size + $gap-size) * 6
+);
+
 body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .calendar {
-  padding: 10px;
-  height: calc($calendar-day-size * 7);
-  width: calc($calendar-day-size * 7);
+  padding: $padding-size;
+  width: calc($calendar-day-size * 7 + $gap-size * 6);
   display: flex;
   flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 1px;
+  gap: $gap-size;
   &__day {
     width: $calendar-day-size;
     height: $calendar-day-size;
     box-sizing: border-box;
     background-color: $calendar-day-color;
-    border: 1px solid black;
-    gap: 1px;
+    border: $calendar-day-border;
+    gap: $gap-size;
     display: flex;
     justify-content: center;
     align-items: center;
+
     @for $i from 1 through 31 {
       &:nth-child(#{$i}) {
         &::before {
@@ -40,9 +55,18 @@ body {
       transition: 0.5s;
     }
   }
+
   @for $i from 28 through 31 {
     &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) {
       display: none;
     }
   }
+
+  @each $day, $margin-left in $start-day {
+    &--start-day-#{$day} {
+      .calendar__day:first-child {
+        margin-left: $margin-left;
+      }
+    }
+  }
 }