I have put together a CSS poker table design that I am quite happy with at the moment:
https://jsfiddle.net/78fcs01m/3/
CSS:
.poker-container {
display: grid;
width: 100vw;
height: 100vh;
.poker-table {
justify-self: center;
align-self: center;
max-width: 800px;
width: 100%;
max-height: 360px;
height: 100%;
background-color: $poker-table-outside-ring-color;
border-radius: 180px;
position: relative;
display: grid;
.outside-ring {
max-width: 740px;
max-height: 300px;
width: 100%;
height: 100%;
background: $poker-table-color-light;
background: radial-gradient(circle, $poker-table-color-light -30%, $poker-table-color-dark 90%);
position: absolute;
border-radius: 180px;
justify-self: center;
align-self: center;
border: 5px $poker-table-outside-ring-border-color solid;
}
.inside-ring {
max-width: 640px;
max-height: 200px;
width: 100%;
height: 100%;
border: 5px rgba($white-color, 0.5) solid;
position: absolute;
justify-self: center;
align-self: center;
border-radius: 180px;
}
}
}
HTML:
<div class="poker-container">
<div class="poker-table">
<div class="outside-ring"></div>
<div class="inside-ring"></div>
</div>
</div>
One challenge I am facing is making this design responsive to different window sizes. When resizing the window, you will notice that the outer ring shrinks first, followed by the next ring, and so on. Ideally, I want everything to resize proportionally so that the table's aspect ratio remains consistent, only scaled down.
What could be missing in my approach here?