init #5200
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| name: Test | ||
|
|
||
| on: | ||
| pull_request: | ||
| branches: [ master ] | ||
|
|
||
| jobs: | ||
| build: | ||
|
|
||
| runs-on: ubuntu-latest | ||
|
|
||
| strategy: | ||
| matrix: | ||
| node-version: [20.x] | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js ${{ matrix.node-version }} | ||
| uses: actions/setup-node@v1 | ||
| with: | ||
| node-version: ${{ matrix.node-version }} | ||
| - run: npm install | ||
| - run: npm test | ||
| - name: Upload HTML report(backstop data) | ||
| if: ${{ always() }} | ||
| uses: actions/upload-artifact@v2 | ||
| with: | ||
| name: report | ||
| path: backstop_data |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,84 @@ | ||
| // Variables | ||
|
||
| $day-size: 100px; | ||
| $border-width: 1px; | ||
| $gap: 1px; | ||
| $padding: 10px; | ||
| $columns: 7; | ||
|
|
||
| // Step between the start of one day and the next (size + gap) | ||
| $day-step: $day-size + $gap; | ||
|
|
||
| // Total calendar width: 7 columns + 6 gaps + 2 side paddings | ||
| $calendar-width: $columns * $day-size + ($columns - 1) * $gap + 2 * $padding; | ||
|
|
||
| body { | ||
| margin: 0; | ||
| min-height: 100vh; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .calendar { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: $gap; | ||
| padding: $padding; | ||
| width: $calendar-width; | ||
| box-sizing: border-box; | ||
|
|
||
| &__day { | ||
| box-sizing: border-box; | ||
| width: $day-size; | ||
| height: $day-size; | ||
| background-color: #eee; | ||
| border: $border-width solid black; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
|
||
| transition: | ||
| background-color 0.5s, | ||
| transform 0.5s; | ||
|
|
||
| // Generate day numbers via ::before using @for | ||
| @for $i from 1 through 31 { | ||
| &:nth-child(#{$i})::before { | ||
| content: '#{$i}'; | ||
| font-family: Arial, sans-serif; | ||
| font-size: 30px; | ||
| } | ||
| } | ||
|
|
||
| &:hover { | ||
| background-color: #ffbfcb; | ||
| transform: translateY(-20px); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // start-day modifiers — @each over day name → column offset map | ||
| $start-days: ( | ||
| 'mon': 0, | ||
| 'tue': 1, | ||
| 'wed': 2, | ||
| 'thu': 3, | ||
| 'fri': 4, | ||
| 'sat': 5, | ||
| 'sun': 6, | ||
|
||
| ); | ||
|
|
||
| @each $day, $offset in $start-days { | ||
| .calendar--start-day-#{$day} .calendar__day:first-child { | ||
| @if $offset > 0 { | ||
| margin-left: $offset * $day-step; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // month-length modifiers — @for to hide days beyond the chosen length | ||
| @for $i from 28 through 31 { | ||
|
||
| .calendar--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { | ||
| display: none; | ||
| } | ||
| } | ||
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.
The HTML currently links to
styles/index.scss(in the ) and the project requires styles written insrc/styles/main.scss. Please place your SCSS insrc/styles/main.scssand upload that file so I can validate SCSS-specific requirements (use of @for/@each, ::before numbering, flex layout, hover behavior, nth-child month-length logic, etc.). Without the SCSS file I cannot verify checklist items that depend on styling, including: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout" [CHECKLIST ITEM #1], "All Typical Mistakes from BEM lesson theory are checked." [CHECKLIST ITEM #3], and "Code follows all the Code Style Rules ❗️" [CHECKLIST ITEM #4].