New layout proposal

[harasuke]

I would really like to have a new paste layout like in the original games. Here's my take:

I don't know Go so here's my html+css test:

* {
    box-sizing: border-box;
}
body {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 550px) );
    overflow: hidden;
    grid-gap: 15px;
    color: white;
    background-color: black;
}

.entry {
    display: grid;
    grid-template-columns: 350px 5px 300px;
    grid-template-rows: auto;
    padding: 15px;
}
.section1 {
    display:grid;
    grid-column: 1/2;
    grid-row: 1/2;
    grid-template-rows: 1em 1em 1em 1em 1em;
    grid-template-columns: auto auto;
    z-index: 1;
}

img, .img, .divider, .info {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    z-index: 0;
}
.img {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: right;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.pokemon-img {
    width: 140px;
    height: 140px;
    opacity: .8;

    grid-row: 1/2;
    grid-column: 1/2;
    justify-content: center;
    align-items: center;
}
.item-img {
    width: 40px;
    height: 40px;
    grid-row: 1/2;
    grid-column: 1/2;
    justify-self: end;
    align-self: end;
}
.teratype {
    width: 30px;
    height: 30px;
    z-index: 1;
    opacity: 1;
    grid-row: 1/2;
    grid-column: 1/2;
    justify-self: end;
    align-self: start;
}
.divider { 
    grid-column: 2/3;
    grid-row: 1/2;

    margin:1px;
    padding:1px;
    width: .1px;
    height: auto;
    background-color: gray;
    border-radius: 2px;
}

pre {
    white-space: pre-wrap;
    margin: 0px;
    padding-left: 0px;
    font-size: 15px;
}
.info {
    font-size: 10px;
    color: yellow;
}

.name {
    grid-area: 1/1;
}
.item, .clearText {
    color: white;
}
.ability {
    grid-row: 2;
    grid-column: 1/3;
}
.ttype {
    grid-row: 3;
    grid-column: 1/3;
}
.evs {
    grid-row: 4;
    grid-column: 1/3;
}
.ivs {
    grid-row: 5;
    grid-column: 1/3;
}
.nature { 
    grid-row: 6;
    grid-column: 1/3;
}
.moves {
    grid-column: 3/4;
    grid-row: 1/2;
    white-space: pre-line;
    margin: 0px 10px 10px 10px;
    justify-self: start;
    align-self: start;
}

.genderM {
    color: blue;
}
.genderF {
    color: red;
}
.attr {
    color: #A0A0A0;
}
.fire{
    color: #F08030;
}
.flying {
    color: #A890F0;
}
.normal {
    color: #A8A878;
}
.ice {
    color: #98D8D8;
}
.grass {
    color: #78C850;
}
.earth {
    color: #E0C068;
}

[felixphew]

Thanks for the suggestion!

I hope you don't mind that I won't use this directly (or even if I tweaked it a bit) , but I do really appreciate you taking the time to make a prototype - it's very good inspiration and you have several good ideas here.

P.S. you have a few syntax issues here (Atk 0 rather than 0 Atk, and I think Showdown has decided on Tera Type:, not Teratype: - maybe it accepts both, idk).

[harasuke]

Thanks a lot for appreciating the concept and taking it into account! 😊 I don't mind any tweaks at all, feel free to adjust it however you like (if it will be implemented). I slightly changed class names and I rely a lot on CSS-grids but page-structure remains similar to yours and text-selection works correctly.

Concerning IVs/Tera you are right, I miss-typed it.