diff --git a/src/styles/_body.scss b/src/styles/_body.scss
deleted file mode 100644
index 7fac444c3..000000000
--- a/src/styles/_body.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- padding-top: 82px;
- padding-left: 159px;
-}
-
-.calendar {
- width: 760px;
-
- display: flex;
- flex-wrap: wrap;
- gap: 1px;
-}
diff --git a/src/styles/_start-day.scss b/src/styles/_start-day.scss
deleted file mode 100644
index 0eba0e2d6..000000000
--- a/src/styles/_start-day.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use 'variables';
-
-@each $day, $number in variables.$start-day {
- .calendar--start-day-#{$day} {
- .calendar__day:first-child {
- margin-left: 101px * ($number - 1);
- }
- }
-}
diff --git a/src/styles/_month-lenght.scss b/src/styles/calendar.scss
similarity index 64%
rename from src/styles/_month-lenght.scss
rename to src/styles/calendar.scss
index d6ae850d1..9231fd485 100644
--- a/src/styles/_month-lenght.scss
+++ b/src/styles/calendar.scss
@@ -1,17 +1,34 @@
@use 'variables';
+.calendar {
+ width: 706px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1px;
+}
+
+@each $day, $number in variables.$start-day {
+ .calendar--start-day-#{$day} {
+ .calendar__day:first-child {
+ margin-left: 101px * ($number - 1);
+ }
+ }
+}
+
@each $number in variables.$month-length {
.calendar--month-length-#{$number} {
@for $i from 1 through $number {
.calendar__day:nth-child(#{$i} of .calendar__day) {
- position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
height: variables.$calendarDayHeight;
width: variables.$calendarDayWidth;
box-sizing: border-box;
border: 1 solid black;
background-color: #eee;
- transition: all 0.5s;
+ transition: all 500ms;
&:hover {
cursor: pointer;
@@ -22,14 +39,7 @@
.calendar__day:nth-child(#{$i} of .calendar__day)::before {
content: '#{$i}';
- position: absolute;
- height: variables.$calendarDayHeight - 3;
- width: variables.$calendarDayWidth - 2;
-
text-align: center;
- line-height: variables.$calendarDayHeight - 3;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 30px;
}
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 87ce83687..bfe8b5251 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,3 @@
@use 'variables';
-@use 'body';
-@use 'start-day';
-@use 'month-lenght';
+@use 'page';
+@use 'calendar';
diff --git a/src/styles/page.scss b/src/styles/page.scss
new file mode 100644
index 000000000..a974e1a3d
--- /dev/null
+++ b/src/styles/page.scss
@@ -0,0 +1,14 @@
+.page {
+ padding: 0;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 30px;
+}
+
+.page__body {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+}
diff --git a/src/styles/_variables.scss b/src/styles/variables.scss
similarity index 100%
rename from src/styles/_variables.scss
rename to src/styles/variables.scss