-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add changes in README.md, src folder #3874
base: master
Are you sure you want to change the base?
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,55 @@ | ||||||
.calendar { | ||||||
box-sizing: border-box; | ||||||
padding: $padding; | ||||||
width: ($padding * 2) + ($gap * 6) + ($size * 7); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what do these variables refer to?
Suggested change
|
||||||
display: flex; | ||||||
align-items: center; | ||||||
gap: $gap; | ||||||
flex-wrap: wrap; | ||||||
|
||||||
&__day { | ||||||
box-sizing: border-box; | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. maybe this will be a better solution in this case?
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the instructions recommend avoiding this selector so as not to decrease performance |
||||||
width: $size; | ||||||
height: $size; | ||||||
background-color: $main-bg; | ||||||
border: $border; | ||||||
position: relative; | ||||||
transition: all 0.5s; | ||||||
|
||||||
&::before { | ||||||
content: ''; | ||||||
position: absolute; | ||||||
width: 100%; | ||||||
height: 100%; | ||||||
top: 0; | ||||||
display: flex; | ||||||
align-items: center; | ||||||
justify-content: center; | ||||||
} | ||||||
|
||||||
&:hover { | ||||||
background-color: $hover-bg; | ||||||
cursor: pointer; | ||||||
transform: translateY(-20px); | ||||||
} | ||||||
|
||||||
@for $n from 1 through 31 { | ||||||
&:nth-child(#{$n})::before { | ||||||
content: '#{$n}'; | ||||||
} | ||||||
} | ||||||
} | ||||||
} | ||||||
|
||||||
@each $day, $margin in (mon: 0, tue: 1, wed: 2, thu: 3, fri: 4, sat: 5, sun: 6) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. create a variable for it
Suggested change
|
||||||
{ | ||||||
.calendar--start-day-#{$day} .calendar__day:nth-child(1) { | ||||||
margin-left: ($size + $gap) * $margin; | ||||||
} | ||||||
} | ||||||
|
||||||
@for $days from 28 through 31 { | ||||||
.calendar--month-length-#{$days} .calendar__day:nth-child(n + #{$days + 1}) { | ||||||
display: none; | ||||||
} | ||||||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
.page { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
height: 100vh; | ||
margin: 0; | ||
|
||
font: { | ||
family: $font; | ||
size: $font-size; | ||
} | ||
TargoniyAnatoliy marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The use of nested properties for the 'font' shorthand is incorrect. According to CSS syntax, 'font' should be a single shorthand property, not a nested block. You should use 'font-family' and 'font-size' separately or use the 'font' shorthand correctly. |
||
} |
Original file line number | Diff line number | Diff line change | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,9 @@ | ||||||||||||||||||
$main-bg: #eee; | ||||||||||||||||||
$hover-bg: #ffbfcb; | ||||||||||||||||||
$size: 100px; | ||||||||||||||||||
$font: Arial, sans-serif; | ||||||||||||||||||
$font-size: 30px; | ||||||||||||||||||
$hover-offset: 20px; | ||||||||||||||||||
$gap: 1px; | ||||||||||||||||||
$padding: 10px; | ||||||||||||||||||
$border: 1px solid black; | ||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. u don't need a variables for it. don't create normal variables for fonts. moreover - u use it only once
Suggested change
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
body { | ||
margin: 0; | ||
} | ||
@import 'variables'; | ||
@import 'page'; | ||
@import 'calendar'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that all the empty lines are redundant)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made empty lines because AI Buddy recommended