Skip to content

Commit

Permalink
final version v1.2
Browse files Browse the repository at this point in the history
  • Loading branch information
xxxKoRoBoKxxx committed Dec 23, 2024
1 parent 34ead66 commit 49764c7
Show file tree
Hide file tree
Showing 7 changed files with 40 additions and 36 deletions.
7 changes: 5 additions & 2 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<!doctype html>
<html lang="en">
<html
lang="en"
class="page"
>
<head>
<meta charset="UTF-8" />
<meta
Expand All @@ -12,7 +15,7 @@
href="styles/index.scss"
/>
</head>
<body>
<body class="page__body">
<div class="calendar calendar--start-day-sun calendar--month-length-31">
<div class="calendar__day"></div>
<div class="calendar__day"></div>
Expand Down
13 changes: 0 additions & 13 deletions src/styles/_body.scss

This file was deleted.

9 changes: 0 additions & 9 deletions src/styles/_start-day.scss

This file was deleted.

28 changes: 19 additions & 9 deletions src/styles/_month-lenght.scss → src/styles/calendar.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
}
}
}
Expand Down
5 changes: 2 additions & 3 deletions src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use 'variables';
@use 'body';
@use 'start-day';
@use 'month-lenght';
@use 'page';
@use 'calendar';
14 changes: 14 additions & 0 deletions src/styles/page.scss
Original file line number Diff line number Diff line change
@@ -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;
}
File renamed without changes.

0 comments on commit 49764c7

Please sign in to comment.