GirlLife/qsrc2tw/tools/QSRC2TW/resources/defaultStyle.css

#interface{
    display: grid;
    grid-template-columns: 80vw 20vw;
    grid-template-rows: 20px 70vh calc(100vh - 20px - 70vh);
    grid-template-areas:
        "top  top"
        "main side"
        "act debugTools";
    position: absolute;
    width: 100vw;
    height: 100vh;

}

#interface > *{
    overflow: auto;
}

#interface #actions {
    grid-area: act;
    background: white;
}

#interface #actions > a {
    color: black;
    display: block;
    font-weight: bold;
    text-align: center;
    border: 1px solid;
    padding: 0.25em;
    text-decoration: none;
    background: white;
}

#interface #actions>a:hover {
    background: #aaa;
}

#interface #debugTools {
    grid-area: debugTools;
    color: white;
    background: #111;
}

#interface #passages {
    grid-area: main;
}

#interface #sidebar{
    grid-area: side;
}

#interface #topbar {
    grid-area: top;
}

#interface #topbar button {
    border: 0px;
    padding: 0;
}

@media (orientation: portrait) {
    #interface {
        grid-template-columns: auto;
        grid-template-rows: initial;
        grid-template-areas:
            "top"
            "main"
            "act"
            "side"
            "debugTools";
        position: absolute;
        height: initial;

    }

    .passage img{
        max-width: 90vw;
    }
}