92 lines
No EOL
1.7 KiB
CSS
92 lines
No EOL
1.7 KiB
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;
|
|
} |