Sudoku review #1

Open
BordedDev wants to merge 19 commits from BordedDev/sudoku:main into main
pull from: BordedDev/sudoku:main
merge into: retoor:main
Conversation 3 Commits 19 Files Changed 8 +65
1 changed files with 65 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b9cc26856c - Show all commits

65
reviews/BordedDev/sudoku.rewrite.css Normal file
View File

@ -0,0 +1,65 @@
:host {
display: inline-block;
--border-radius: 5px;
BordedDev commented 2025-01-16 23:17:25 +00:00
Outdated
Review
Copy Link

I'd normally use a @property for this but it wasn't working the initial value so I did this instead
https://developer.mozilla.org/en-US/docs/Web/CSS/@property

@property --border-radius {
  syntax: "<length>";
  inherits: true;
  initial-value: 5px;
}
I'd normally use a @property for this but it wasn't working the initial value so I did this instead https://developer.mozilla.org/en-US/docs/Web/CSS/@property ```css @property --border-radius { syntax: "<length>"; inherits: true; initial-value: 5px; } ```
}
.sudoku {
user-select: none;
border: 1px solid #ccc;
font-size: 13px;
color: #222;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: auto;
aspect-ratio: 1 / 1;
background-color: #e5e5e5;
border-radius: var(--border-radius);
overflow: hidden;
.sudoku-field {
aspect-ratio: 1 / 1;
width: 1em;
line-height: 1;
BordedDev commented 2025-01-16 23:43:44 +00:00
Outdated
Review
Copy Link

This is to fix the vertical alignment since it had a value of 1.5 for me

This is to fix the vertical alignment since it had a value of 1.5 for me
text-align: center;
padding: 2px;
border: 1px solid #ccc;
border-left: none;
border-top: none;
/* Cross bars */
&:nth-child(3n):not(:nth-child(9n)) {
border-right-color: black;
}
&:nth-child(n + 19):nth-child(-n + 27),
&:nth-child(n + 46):nth-child(-n + 54) {
border-bottom-color: black;
}
/* Match the corners with parent, otherwise they'll render on top */
&:nth-child(1) {
border-top-left-radius: var(--border-radius);
}
&:nth-child(9) {
border-top-right-radius: var(--border-radius);
}
&:nth-last-child(1) {
border-bottom-right-radius: var(--border-radius);
}
&:nth-last-child(9) {
border-bottom-left-radius: var(--border-radius);
}
&.initial {
color: #777;
}
&.selected {
background-color: lightgreen;
}
&.marked {
background-color: blue;
}
&.invalid {
color: red;
}
}
}