diff options
Diffstat (limited to 'sass')
| -rwxr-xr-x | sass/board.scss | 34 | ||||
| -rw-r--r-- | sass/head.scss | 129 | ||||
| -rwxr-xr-x | sass/index.scss | 14 | ||||
| -rwxr-xr-x | sass/stones.scss | 10 | ||||
| -rwxr-xr-x | sass/variables.scss | 38 |
5 files changed, 225 insertions, 0 deletions
diff --git a/sass/board.scss b/sass/board.scss new file mode 100755 index 0000000..a34a4fa --- /dev/null +++ b/sass/board.scss @@ -0,0 +1,34 @@ +@import "variables"; + +#board { + background-image: $board_image; + background-size: 100%; + opacity:0.9; + + margin: 0 auto; + padding: $board-border; + + height: $board-size; + aspect-ratio: 1; +} + +@media screen and (max-width: $screen-transition-width) { + #board { + height: $board-size-mob; + padding: $board-border-mob; + } +} + +table { + height: 100%; + width: 100%; +} + +table, tr, td { + border: 1px solid black; + padding: 0; + margin: 0; + border-collapse: collapse; +} + + diff --git a/sass/head.scss b/sass/head.scss new file mode 100644 index 0000000..88b0d3b --- /dev/null +++ b/sass/head.scss @@ -0,0 +1,129 @@ +@import "variables"; +#head { + display: block; + height: $head_height; + margin: 0; + padding: 0; + overflow:scroll; +} + +@media screen and (max-width: $screen-transition-width) { + #head { + height: $head_height_mob; + margin-top: calc(#{$head_top_vh} - #{$head_top_vw}); + } +} + +@mixin player-image { + position: absolute; + display: inline-block; + z-index: 1; + + height: $head_height * 0.6; + margin: $head_height * 0.2; + + top: 0; +} + +img.player-image-left { + left: calc(50% - #{$board_size / 2 + $board_border}); + @include player-image; +} + +img.player-image-right { + left: calc(50% + #{$board_size / 2 + $board_border - $head_height}); + @include player-image; +} + +@media screen and (max-width: $screen-transition-width) { + @mixin player-image-mob { + height: $head_height_mob * 0.4; + margin: $head_height_mob * 0.3; + top: calc(#{$head_top_vh} - #{$head_top_vw}); + } + + img.player-image-left { + left: calc(50% - #{$board_size_mob / 2 + $board_border_mob + $label_width_mob * 0.3}); + @include player-image-mob; + } + + img.player-image-right { + left: calc(50% + #{$board_size_mob / 2 + $board_border_mob - $head_height_mob + $label_width_mob * 0.3}); + @include player-image-mob; + } +} + +.turn { + width: 20vh; + height: $label_height; + + margin: 0 auto; + margin-top: calc(#{$head_height / 2} - #{$label_height}); + background-color: black; + clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); +} + +.turn h2 { + font-size: $label_height - 1; +} + +.turn .border { + height: $label_height; + + margin: 0 auto; + margin-top: 4vh; + background-color: black; + clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); +} + +.turn .inner { + height:100%; + width: 100%; + text-align: center; + background-color: $background-color; + clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%); +} + +@mixin player-label { + width: $label_width; + height: $label_height; + + font-size: 3vh; + text-align: center; + + background-color: #000b; + color: white; + position: absolute; + top: calc(#{$head_height / 2 - $label_height / 2}); +} + +div.player-label-left { + clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%); + left: calc(50% - #{$board_size / 2 + $board_border - $label_width * $label_margin}); + @include player-label; +} + +div.player-label-right { + clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%); + left: calc(50% + #{$board_size / 2 + $board_border - $label_width * ($label_margin + 1)}); + @include player-label; +} + +@media screen and (max-width: $screen-transition-width) { + @mixin player-label-mob { + width: $label_width_mob; + height: $label_height_mob; + font-size: $label_height_mob - 1; + + top: #{calc(#{$head_top_vh} - #{$head_top_vw} + #{$head_height_mob / 2} - #{$label_height_mob / 2})}; + } + div.player-label-left { + left: calc(50% - #{$board_size_mob / 2 + $board_border_mob - $label_width_mob * $label_margin_mob}); + @include player-label-mob; + } + + div.player-label-right { + left: calc(50% + #{$board_size_mob / 2 + $board_border_mob} - #{$label_width_mob * ($label_margin_mob + 1)}); + @include player-label-mob; + } +} diff --git a/sass/index.scss b/sass/index.scss new file mode 100755 index 0000000..fdf4f97 --- /dev/null +++ b/sass/index.scss @@ -0,0 +1,14 @@ +@import "board"; +@import "stones"; +@import "head"; + +body { + background-image: $background-image; + background-repeat: no-repeat; + background-size: auto 100%; + background-position: center top; + background-attachment: fixed; + background-color: $background-color; + margin: 0; +} + diff --git a/sass/stones.scss b/sass/stones.scss new file mode 100755 index 0000000..65ad970 --- /dev/null +++ b/sass/stones.scss @@ -0,0 +1,10 @@ +@import "variables"; + +.stone { + position: absolute; + display: block; +} + +.stone img { + width:100%; +} diff --git a/sass/variables.scss b/sass/variables.scss new file mode 100755 index 0000000..2e70aeb --- /dev/null +++ b/sass/variables.scss @@ -0,0 +1,38 @@ +// screen // +$screen-transition-width: 600px; + +$head_top_vw: 20vw; +$head_top_vh: 20vh; + + +// board // +$board-size: 60vh; +$board-border: 5vh; + +$board-size-mob: 80vw; +$board-border-mob: 5vw; + + +// colors // +$background-color: #efd; +$foreground-color: #000; + + +// images // +$background-image: url("assets/dismal.jpg"); +$board-image: url("assets/board.jpg"); + + +// head // +$head-margin-top-mob: 20vw; + +$head_height: 14vh; +$label_height: 4vh; +$label_width: 16vh; + +$head_height_mob: 30vw; +$label_height_mob: 6vw; +$label_width_mob: 26vw; + +$label-margin: 0.6; +$label-margin-mob: 0.3; |