Skip to content

Commit

Permalink
Fix spacing of columns
Browse files Browse the repository at this point in the history
  • Loading branch information
Dean Sofer authored and Dean Sofer committed May 13, 2024
1 parent afdf500 commit 0ce4a12
Showing 1 changed file with 138 additions and 143 deletions.
281 changes: 138 additions & 143 deletions public/game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,201 +4,196 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<style>
#board {
display: flex;
gap: 10px;
height: 100%;
flex-wrap: wrap;
#board {
display: flex;
gap: 0;
height: 100%;
flex-wrap: wrap;
}
.dice {
position: absolute;
left: 20%;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.bar {
background: lightblue;
flex-basis: 4%;
}
.home {
background: lightblue;
flex-basis: 4%;
}
.piece {
width: 20px;
height: 20px;
&.white {
background: white;
}

.dice {
position: absolute;
left: 20%;
top: 50%;
transform: translateY(-50%);
&.black {
background: black;
}

.bar {
/* position: absolute; */
/* left: 48%; */
/* top: 0; */
/* bottom: 0; */
/* right: 48%; */
background: lightblue;
/* height: 100%; */
width: 30px;
}
.point {
position: relative;
flex-basis: calc(100% / 14);
&::before {
content: ' ';
display: block;
width: 0;
height: 0;
position: absolute;
}

.home {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 20px;
background: lightblue;
}

:nth-child(1 of .bar) {
order: 3;
}
:nth-child(2 of .bar) {
order: 7;
}
:nth-child(1 of .home) {
order: 5;
}
:nth-child(2 of .home) {
order: 9;
}
:nth-child(-n+12 of .point){
order: 4;
}
:nth-child(-n+6 of .point){
order: 2;
}
:nth-child(n+13 of .point) {
order: 6;
}
:nth-child(n+19 of .point) {
order: 8;
}

/* landscape layout (tablet / computer) */
@media (min-aspect-ratio: 1) {
.point:hover::before {
border-top-color: blue !important;
}

.piece {
width: 20px;
height: 20px;

&.white {
background: white;
.point::before {
left: 50%;
transform: translateX(-50%);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
/* top */
:nth-child(-n+12 of .point) {
&::before {
border-top: 40vh solid #111;
}

&.black {
background: black;
&:nth-child(odd)::before {
border-top-color: brown;
border-top-width: 30vh;
}

}
.point {
position: relative;
flex-basis: 7.3%;
flex-grow: 1;
/* bottom */
:nth-child(n+13 of .point) {
&::before {
content: ' ';
display: block;
width: 0;
height: 0;
position: absolute;
border-top: none;
border-bottom: 40vh solid black;
bottom: 0;
top: auto;
}
}

/* landscape layout (tablet / computer) */
@media (min-aspect-ratio: 1) {
.point:hover::before {
border-top-color: blue !important;
&:nth-child(even)::before {
border-bottom-color: brown;
border-bottom-width: 30vh;
}

.point::before {
left: 50%;
transform: translateX(-50%);
border-left: 40px solid transparent;
border-right: 40px solid transparent;
&:hover::before {
border-bottom-color: blue !important;
}
}
}

:nth-child(-n+12 of .point) {
&::before {
border-top: 40vh solid #f00;
}
&:nth-child(odd)::before {
border-top-color: lightcoral;
border-top-width: 30vh;
}
/* Portrait layout (mobile phone) */
@media (max-aspect-ratio: 1) {
#board {
flex-direction: column;
}
.point {
&:hover::before {
border-left-color: blue !important;
}

:nth-child(n+13 of .point) {
&::before {
border-top: none;
border-bottom: 40vh solid #f00;
bottom: 0;
top: auto;
}
&:nth-child(even)::before {
border-bottom-color: lightcoral;
border-bottom-width: 30vh;
}

&:hover::before {
border-bottom-color: blue !important;
}
&::before {
top: 50%;
transform: translateY(-50%);
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}
}

/* Portrait layout (mobile phone) */
@media (max-aspect-ratio: 1) {
#board {
flex-direction: column;
:nth-child(-n+12 of .point){
&::before {
border-left: 40vw solid #f00;
left: 0;
}

.point {
&:hover::before {
border-left-color: blue !important;
}

&::before {
top: 50%;
transform: translateY(-50%);
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}
&:nth-child(odd)::before {
border-left-color: lightcoral;
border-left-width: 30vw;
}

:nth-child(-n+12 of .point){

&::before {
border-left: 40vw solid #f00;
left: 0;
}
&:nth-child(odd)::before {
border-left-color: lightcoral;
border-left-width: 30vw;
}
}
:nth-child(n+13 of .point){
&::before {
border-left: none;
border-right: 40vw solid #f00;
right: 0;
}

:nth-child(n+13 of .point){
&::before {
border-left: none;
border-right: 40vw solid #f00;
right: 0;
}
&:hover::before {
border-right-color: blue !important;
}
&:nth-child(even)::before {
border-right-color: lightcoral;
border-right-width: 30vw;
}

&:hover::before {
border-right-color: blue !important;
}
&:nth-child(even)::before {
border-right-color: lightcoral;
border-right-width: 30vw;
}

}
}
</style>
</head>
<body>
<div id="board">
<div class="dice">
<img src="images/digit-6-white.png" />
<img src="images/digit-5-black.png" />
</div>
<div class="dice">
<img src="images/digit-6-white.png" />
<img src="images/digit-5-black.png" />
</div>
<!-- 13 -->
<!-- <div class="corner"> -->
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<!-- </div> -->
<!-- 18 | 19 -->
<!-- <div class="bar"></div> -->
<!-- <div class="corner"> -->
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<!-- </div> -->
<!-- 24 | 12 -->
<!-- <div class="corner"> -->
<!-- 24 -->
<div class="bar"></div>
<div class="bar"></div>
<!-- 12 -->
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<!-- </div> -->
<!-- 7 | 6 -->
<!-- <div class="corner"> -->
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<!-- </div> -->
<!-- 1 -->
<div class="home"></div>
<div class="home"></div>
</div>
</body>
</html>

0 comments on commit 0ce4a12

Please sign in to comment.