/**
* Visual style
*/
/***** most outer div (wraps the whole page); general styles *****/
.hp {
box-sizing: border-box;
background-color: #ffffff;
color: #333333;
}
.hp-afbeelding {
float: right;
}
.hp-afbeelding img,
.hp-afbeelding video {
margin: 10px;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45);
background: #ffffff;
}
.hp > div:not(.hp-portalen) > div {
padding: 10px;
border-top: 2px solid #ffffff;
}
.hp p {
margin: 0.5em 0;
}
.hp-portalen,
.hp-footer {
margin: 10px 0;
}
.wikipedia-w { /* for the stylized W of Wikipedia */
font-feature-settings: 'ss05';
}
.hp-header {
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
padding: 10px;
text-align: center;
vertical-align: middle;
}
.hp-welkom {
font-family: 'Linux Libertine G', 'Linux Libertine', 'Linux Libertine O', 'Libertinus Serif', Georgia, serif;
font-size: 1.3em;
line-height: 150%;
}
.hp-welkom-1 {
font-variant: small-caps;
font-size: 185%;
}
.hp-welkom a {
color: #333333;
}
.hp-statistieken {
display: flex;
justify-content: space-around;
}
.hp-statistieken-1 {
text-align: left;
}
.hp-date {
color: white;
padding: 3px;
margin: 1px 10px 1px 1px;
float: left;
border-radius:3px;
width: 45px;
text-align :center;
font-size :0.9em;
}
.hp-date a:link {
color:white;
}
/** segments */
.hp-segment-title {
margin: 0;
padding: 10px 10px 10px 15px;
white-space: nowrap;
border-bottom: 1px solid #555555;
font-family: unset;
font-size: 1.6rem;
font-variant: small-caps;
line-height: unset;
}
.hp-segment-title a {
background-color: #ffffff;
color: #555555;
}
.hp-segment-content::after {
display: block;
content: "";
clear: both;
}
.segment-Uitgelicht > div,
.segment-Etalage > div,
.segment-Over_Wikipedia > div {
background-color: #F0F9F0;
}
.segment-Wist_je_dat > div,
.segment-Afbeelding > div {
background-color: #F9F4E9;
}
.segment-Actueel > div,
.segment-Recent_overleden > div {
background-color: #F0F0F9;
}
.segment-Recent_overleden .hp-date {
background: #336699;
}
.segment-In_het_nieuws .hp-segment-subgrid > div {
background-color: #F2F4E2;
}
.segment-In_het_nieuws .hp-date {
background: #889933;
}
.segment-In_de_geschiedenis .hp-segment-subgrid > div {
background-color: #F9F0F0;
}
.segment-In_de_geschiedenis .hp-date {
background: #993333;
}
.segment-Zusterprojecten > div {
background-color: #F2F2F2;
}
.segment-Etalage .hp-segment-content > div {
border-bottom: 1px solid #cccccc;
font-weight: bold;
padding: 5px;
}
.segment-Etalage .hp-segment-content > div:last-child {
border-bottom: 0;
}
.hp-footer {
font-size: 0.95rem;
text-align: center;
}
/** portalen */
.hp-portalen {
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
font-size: 0.8rem;
padding: 2px 0;
}
.hp-portalen > div {
padding: 0;
border-width: 5px 0 0 0;
border-style: solid;
text-align: center;
}
.hp-portalen a {
display: block;
padding: 3px 0.25em;
color: #000000;
}
.hp-portaal-biologie {
background-color: #F9F4F0;
border-color: #996633;
}
.hp-portaal-geschiedenis {
background-color: #F9F9F0;
border-color: #999933;
}
.hp-portaal-kunstencultuur {
background-color: #F4F9F0;
border-color: #669933;
}
.hp-portaal-landenenvolken {
background-color: #F0F9F0;
border-color: #339933
}
.hp-portaal-mensenmaatschappij {
background-color: #F0F9F9;
border-color: #339999;
}
.hp-portaal-wetenschapentechnologie {
background-color: #F0F4F9;
border-color: #336699;
}
.hp-portaal-politiek {
background-color: #F0F0F9;
border-color: #333399;
}
.hp-portaal-religie {
background-color: #F9F0F9;
border-color: #993399;
}
.hp-portaal-sport {
background-color: #F9F0F4;
border-color: #993366;
}
.hp-portaal-taal {
background-color: #F9F0F0;
border-color: #993333;
}
/**
* Subgrids binnen 1 sectie
*/
.hp-segment-subgrid {
display: grid;
gap: 2px;
padding: 0 !important;
}
.hp-segment-subgrid.hp-segment-subgrid > div {
padding: 10px;
}
/**
* Base layout (narrow screens)
*/
.hp-portalen {
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.hp-portalen > div {
align-items: center;
display: flex;
justify-content: center;
flex: auto;
}
.hp-header,
.hp-portalen,
.segment-Over_Wikipedia,
.segment-Uitgelicht,
.segment-Etalage {
/* these go first */
order: -1;
}
@media screen and (max-width:899px) {
.segment-Over_Wikipedia .hp-segment-title {
display: none;
}
.segment-Over_Wikipedia .hp-segment-content.hp-segment-content {
background-color: unset;
padding: 5px 0;
}
}
@media screen and (min-width:900px) {
/* 6 column layout, so that we can use both a 1-1-1 and a 1-1 split */
.hp {
display: grid;
grid-template-columns: repeat(6, minmax(min-content,1fr));
gap: 2px;
}
.hp-segment {
display: flex;
flex-direction: column;
}
.hp-segment-content {
flex: 1 0;
}
.hp-segment-title {
padding-left: 25px;
}
/* full width */
.hp-header,
.hp-portalen,
.segment-In_het_nieuws,
.segment-In_de_geschiedenis,
.segment-Zusterprojecten,
.hp-footer {
grid-column: 1 / -1;
}
.segment-Uitgelicht {
grid-column: 1 / span 4;
}
.segment-Etalage {
grid-column: 5 / span 2;
}
.segment-Over_Wikipedia {
grid-column: 1 / -1;
}
/* span first two/thirds */
.hp-welkom,
.segment-Wist_je_dat,
.segment-Actueel {
grid-column: 1 / span 4;
}
/* span last third */
.hp-statistieken,
.segment-Afbeelding,
.segment-Recent_overleden {
grid-column: 5 / span 2;
}
/**
* Subgrids binnen 1 sectie
*/
.hp-segment-subgrid.hp-segment-subgrid {
grid-template-columns: repeat(6, 1fr);
/* grid-template-columns: subgrid; not yet supported by templatestyles */
}
.hp-segment-subgrid.hp-segment-subgrid > div {
grid-column-end: span 2;
}
.hp-portalen > div {
flex: 1 1 auto;
}
.hp-header {
display: grid;
grid-template-columns: repeat(6, 1fr);
/* grid-template-columns: subgrid; not yet supported by templatestyles */
}
.hp-statistieken {
border-left: 1px solid #cccccc;
}
}
@media screen and (min-width:1200px) {
.segment-Uitgelicht {
grid-column: 1 / span 3;
}
.segment-Etalage {
grid-column: 4 / span 1;
}
.segment-Over_Wikipedia {
grid-column: 5 / span 2;
order: 0;
}
}
/* [[Categorie:Wikipedia:TemplateStyles-pagina's]] [[Categorie:Wikipedia:Sjablonen hoofdpagina|2023]] */
