artabro/site/templates/css/main.css

:root
{
    --separacion: 1rem;
    --contido-max: 60rem;
    --destacado-max: 75rem;
    --destacado: calc((var(--destacado-max) - var(--contido-max)) / 2);
}

.grella
{
    display: grid;
    grid-template-columns:
        [completo-start] minmax(var(--separacion), 1fr)
            [destacado-start] minmax(0, var(--destacado))
                [contido-start] min(100% - (var(--separacion) * 2), var(--contido-max)) [contido-end]
            minmax(0, var(--destacado)) [destacado-end]
        minmax(var(--separacion), 1fr) [completo-end]
    ;
}

.grella > :not(.destacado, .completo),
.completo > :not(.destacado, .completo)
{
    grid-column: contido;
}

.grella > .completo
{
    display: grid;
    grid-column: completo;
    grid-template-columns: inherit;
}

.grella > .destacado,
.completo > .destacado
{
    grid-column: destacado;
}

html, body
{
    height: 100%;
}

body
{
    display: grid;
    grid-template-rows: auto 1fr auto;

    color: #6666ff;
    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    font-weight: normal;

    background: #f7feb6;
    background: linear-gradient(180deg, #6666ff 0%, #6666ff 10%, #f7feb6 100%);
    background-repeat: no-repeat;
}

header#cabeceira
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    min-height: 80px;

    margin-bottom: var(--separacion);

    padding: var(--separacion);

    border: 1px solid #6666ff;
    border-top: 0;
    border-radius: 0 0 20px 20px;

    outline: 1px solid #f7feb6;

    box-shadow: 0px var(--separacion) var(--separacion) 0px #00000080;

    background-color: #f7feb6;
}

nav#menu ul
{
    display: flex;

    margin: 0;

    padding: 0;

    list-style: none;
}