Template in een dag 1

P201-in-een-dag / V201-01

Het eerste template in een dag. Deze komt met een home pagina layout en één content pagina layout.

Hoe te gebruiken?

In de config onder de optie "templateModules" zet de content module's template op "template-1".

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
/* Header navigation. */
.nav-header > .navbar {
	background-color: var(--secondary) !important;
	color: var(--white);
}
.nav-header > .navbar .nav-link,
.nav-header > .navbar .nav-link.active,
.nav-header > .navbar .nav-link:active,
.nav-header > .navbar .nav-link:focus,
.nav-header > .navbar .nav-link:hover {
	color: inherit;
}
.nav-header > .navbar .nav-link.active .nav-title,
.nav-header > .navbar .nav-link:active .nav-title,
.nav-header > .navbar .nav-link:focus .nav-title,
.nav-header > .navbar .nav-link:hover .nav-title {
	text-decoration: underline;
}
.nav-header > .navbar .navbar-nav {
	justify-content: end !important;
}
/* Links in header */
.nav-header .btn-link,
.nav-languages a {
	color: inherit;
}
.nav-header .btn-link i {
	color: var(--secondary);
}
.nav-header .btn-link:active span,
.nav-header .btn-link:focus span,
.nav-header .btn-link:hover span {
	text-decoration: underline;
}

/* Carousel font size */
[data-partial="image-carousel"] p {
	line-height: 1.25;
	text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5) !important;
	font-size: 1.125rem;
}
[data-partial="image-carousel"] b,
[data-partial="image-carousel"] strong {
	font-size: 1.25em;
}
@media only screen and (min-width: 576px) {
	[data-partial="image-carousel"] p {
		font-size: 1.25rem;
	}
	[data-partial="image-carousel"] .carousel-caption p {
		font-size: 1.5rem;
	}
}
@media only screen and (min-width: 768px) {
	[data-partial="image-carousel"] p {
		font-size: 1.5rem;
	}
	[data-partial="image-carousel"] .carousel-caption p {
		font-size: 2.5rem;
	}
}
@media only screen and (min-width: 992px) {
	[data-partial="image-carousel"] p {
		font-size: 2rem;
	}
	[data-partial="image-carousel"] .carousel-caption p {
		font-size: 2.5rem;
	}
}
@media only screen and (min-width: 1200px) {
	[data-partial="image-carousel"] p {
		font-size: 2.5rem;
	}
	[data-partial="image-carousel"] .carousel-caption p {
		font-size: 3rem;
	}
}
/* Carousel gradient inlay. */
[data-partial="image-carousel"] .carousel-inner::after {
	opacity: 0.5;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: linear-gradient(90deg, var(--primary) 30%, var(--secondary) 80%);
}
/* Add margin to items not in last row. */
[data-partial="image-carousel"] .row > *:not(:last-child) {
	margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
	[data-partial="image-carousel"] .row > *:not(:nth-child(n+2)) {
		margin-bottom: unset !important;
	}
	[data-partial="image-carousel"]
		.row
		> *:not(:last-child):not(:nth-last-child(2)) {
		margin-bottom: 30px;
	}
}

/* Utility for card overlay on top of image. */
@media screen and (min-width: 768px) {
	.row-inset-left > *:nth-child(2n),
	.row-inset-right > *:nth-child(2n + 1) {
		z-index: 1;
	}

	.row-inset-left > *:nth-child(2n + 1) {
		margin-right: -4rem;
	}
	.row-inset-right > *:nth-child(2n) {
		margin-left: -4rem;
	}
	.row-inset-left > *:nth-child(2n + 1),
	.row-inset-left > *:nth-child(2n + 1) > *,
	.row-inset-right > *:nth-child(2n),
	.row-inset-right > *:nth-child(2n) > * {
		max-width: calc(50vw + 4rem);
	}
}
@media screen and (min-width: 992px) {
	.row-inset-left > *:nth-child(2n + 1) {
		margin-right: -6rem;
	}
	.row-inset-right > *:nth-child(2n) {
		margin-left: -6rem;
	}
	.row-inset-left > *:nth-child(2n + 1),
	.row-inset-left > *:nth-child(2n + 1) > *,
	.row-inset-right > *:nth-child(2n),
	.row-inset-right > *:nth-child(2n) > * {
		max-width: calc(50vw + 6rem);
	}
}
@media screen and (min-width: 1200px) {
	.row-inset-left > *:nth-child(2n + 1) {
		margin-right: -8rem;
	}
	.row-inset-right > *:nth-child(2n) {
		margin-left: -8rem;
	}
	.row-inset-left > *:nth-child(2n + 1),
	.row-inset-left > *:nth-child(2n + 1) > *,
	.row-inset-right > *:nth-child(2n),
	.row-inset-right > *:nth-child(2n) > * {
		max-width: calc(50vw + 8rem);
	}
}

/* Center module text in home layout.  */
.content-subtemplate-home [data-partial="module-output"],
.content-subtemplate-home [data-partial="partial-list"] {
	text-align: center;
}

.content-subtemplate-home {
	background: linear-gradient(
		160deg,
		var(--tertiary) calc(50% - 1px),
		var(--tertiary-dark) calc(50% + 1px)
	);
}
.content-subtemplate-content [data-partial="image-carousel"]:not(:has(.image-empty)) {
	padding-bottom: 3rem;
}