~bfiedler/website

e0755091f2e59ca1db20ca4601b19d7e3253c24f — Ben Fiedler 1 year, 9 months ago 3077a90 
Add html chess board
patch browse .tar.gz 
1 files changed, 262 insertions(+), 0 deletions(-)

A static/chess.html

A static/chess.html => static/chess.html +262 -0
@@ 0,0 1,262 @@
<html>
    <head>
        <style>
:root {
    font-size: 16px;
    --cell-size: 4.4rem;
    --border-size: 1.8rem;

    --background-color: #fffae0;
    --border: #654321;
    --label: #ffffff;
    --white: #f0d9b5;
    --black: #b58863;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #131313;
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    margin: 0;
    padding: 0;

    background-color: var(--background-color);
}

#chessboard {
    margin: auto;
}

.row {
    display: flex;
    width: calc(8 * var(--cell-size) + 2 * var(--border-size));
}

.cell {
    height: var(--cell-size);
    width: var(--cell-size);
}

.row:nth-child(2n) .cell:nth-child(2n), 
.row:nth-child(2n+1) .cell:nth-child(2n+1) {
    background-color: var(--white);
}

.row:nth-child(2n+1) .cell:nth-child(2n), 
.row:nth-child(2n) .cell:nth-child(2n+1) {
    background-color: var(--black);
}

.border {
    color: var(--label);
    font-family: monospace;
    background-color: var(--border);
}

.row-label {
    width: var(--border-size);
    height: var(--cell-size);

    display: flex;
    align-items: center;
    justify-content: center;
}

.padding {
    height: var(--border-size);
    width: var(--border-size);
}

.col-label {
    height: var(--border-size);
    width: var(--cell-size);

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--border);
}

.row:first-child .padding:first-child {
    border-radius: var(--border-size) 0px 0px 0px;
}

.row:first-child .padding:last-child {
    border-radius: 0px var(--border-size) 0px 0px;
}

.row:last-child .padding:first-child {
    border-radius: 0px 0px 0px var(--border-size);
}

.row:last-child .padding:last-child {
    border-radius: 0px 0px var(--border-size) 0px;
}

        </style>
    </head>
    <body>
        <div id="chessboard">
            <div class="row">
                <div class="border padding"></div>
                <div class="border col-label"></div>
                <div class="border col-label"></div>
                <div class="border col-label"></div>
                <div class="border col-label"></div>
                <div class="border col-label"></div>
                <div class="border col-label"></div>
                <div class="border col-label"></div>
                <div class="border col-label"></div>
                <div class="border col-padding"></div>
                <div class="border padding">
                </div>
            </div>
            <div class="row">
                <div class="border row-label">8</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border row-label">7</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border row-label">6</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border row-label">5</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border row-label">4</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border row-label">3</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border row-label">2</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border row-label">1</div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="border row-label"></div>
            </div>

            <div class="row">
                <div class="border padding">
                </div>
                <div class="border col-label">
                    A
                </div>
                <div class="border col-label">
                    B
                </div>
                <div class="border col-label">
                    C
                </div>
                <div class="border col-label">
                    D
                </div>
                <div class="border col-label">
                    E
                </div>
                <div class="border col-label">
                    F
                </div>
                <div class="border col-label">
                    G
                </div>
                <div class="border col-label">
                    H
                </div>
                <div class="border col-padding">
                </div>
                <div class="border padding">
                </div>
            </div>

        </div>
    </body>
</html>