Projecten

P202-07 / V202-07

Projecten blog voor de projecten. Het veld "Categorie" is verplicht. Enige extra velden worden automatisch in het artikel getoont onder de foto.

Hoe te gebruiken?

Geef toestemming om het template te gebruiken in NASA en selecteer het template in de instellingen van de blog.

Neem daarnaast onderstaande CSS op in jouw eingen stylesheet om met dezelfde opmaak te beginnen.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren/* Item preview */
.blog-item-preview a.blog-item-link {
	color: inherit;
}
.blog-item-preview .content p.intro {
	margin-bottom: 0;
}

/* Inset the card and overlay onto the image. */
.blog-item-preview .content {
	background-color: var(--white);
	margin-right: 2rem;
	padding: calc(var(--panel-padding) / 2) var(--panel-padding);
	border-top-right-radius: var(--panel-radius);
	position: relative;
	z-index: 1;
}

/* Reduce padding on tags. */
.blog-item .btn.btn-tag,
.blog-item-preview .btn.btn-tag {
	padding: 0 calc(var(--button-padding) / 1.5);
}

/* Separate the read more button from the text. */
.blog-item-preview .readmore {
	display: table;
	margin-top: 1rem;
}

/* Blog article */
/* Inset the card and overlay onto the image. */
.blog-item .blog-fields {
	background-color: var(--white);
	padding: 1.5rem;
	position: relative;
	z-index: 1;
	margin-left: 2rem;
	border-top-left-radius: var(--panel-radius);
}
@media screen and (min-width: 768px) {
	.blog-item .blog-fields {
		margin-left: 0;
	}
}

.blog-item .blog-fields table {
	margin-bottom: 0;
}

.blog-collection
	.breadcrumb-item
	+ .breadcrumb-item::before
	.blog-item
	.breadcrumb-item
	+ .breadcrumb-item::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 700;
	font-size: 0.75em;
	line-height: 1.65rem;
	content: "\f054";
}

/* Don't show table borders. */
.blog-item .table th,
.blog-item .table td {
	border-top: 0px;
}

/* Image album - indicators*/
html:not([data-logged="true"]) .blog-item [data-partial="image-album"]>.d-flex:last-child,
html[data-logged="true"] .blog-item [data-partial="image-album"]>div>.d-flex:last-child {
	align-items: center;
	margin-right: 1.5rem;
}

.blog-item [data-partial="image-album"] .slider-indicators {
	display: flex;
	align-items: center;
	flex-grow: 0;
	width: auto;
}
html:not([data-logged="true"]) .blog-item [data-partial="image-album"],
html[data-logged="true"] .blog-item [data-partial="image-album"]>div {
	align-items: end;
	display: flex;
	flex-direction: column;
}

html:not([data-logged="true"]) .blog-item [data-partial="image-album"]>*:last-child,
html[data-logged="true"] .blog-item [data-partial="image-album"]>div>*:last-child {
	background: var(--white);
	margin-top: -2rem;
	padding: calc(var(--panel-padding) / 3) calc(var(--panel-padding) / 1.5);
	box-shadow: 0px 0px 12px -4px #0004;
}

.blog-item [data-partial="image-album"] .slider-indicators li {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.blog-item [data-partial="image-album"] .slider-indicators li.disabled {
	display: none;
}

.blog-item [data-partial="image-album"] .slider-indicators li::after {
	content: "\f111";
}

.blog-item [data-partial="image-album"] .slider-indicators li.active {
	font-size: 1.25em;
	line-height: 1;
	transition-property: font-size, color;
	transition-duration: 250ms;
}

.blog-item [data-partial="image-album"] .slider-control-next-icon,
.blog-item [data-partial="image-album"] .slider-control-prev-icon {
	font-size: 1.25em;
	line-height: 1;
}

.blog-item [data-partial="image-album"] .slider-control-prev,
.blog-item [data-partial="image-album"] .slider-control-next {
	line-height: 1;
	opacity: 1;
}
.blog-item [data-partial="image-album"] .slider-control-prev {
	margin-left: 0;
	margin-right: 1rem;
}

.blog-item [data-partial="image-album"] .slider-control-next {
	margin-right: 0;
	margin-left: 1rem;
}

.blog-item [data-partial="image-album"] .slider-control-prev-icon::after {
	content: "\f060";
}

.blog-item [data-partial="image-album"] .slider-control-next-icon::after {
	content: "\f061";
}

/* Image slider */
.blog-item [data-partial="image-album"] .flex-auto-responsive > * {
	min-width: 320px;
}

@media (min-width: 768px) {
	.blog-item [data-partial="image-album"] .flex-auto-responsive > * {
		min-width: 400px;
	}
}

@media (min-width: 992px) {
	.blog-item [data-partial="image-album"] .flex-auto-responsive > * {
		min-width: 420px;
	}
}

@media (min-width: 1200px) {
	.blog-item [data-partial="image-album"] .flex-auto-responsive > * {
		min-width: 500px;
	}
}

/* Breadcrumbs. */
.blog-collection .breadcrumb,
.blog-item .breadcrumb {
	background-color: transparent;
	padding: 0;
	margin: 0;
}

/* Remove back button. */
.blog-item .btn-back {
	display: none;
}

.blog-item .image + * .blog-fields {
	margin-top: calc(0px - var(--panel-radius));
}

@media screen and (min-width: 768px) {
	.blog-item .image + * .blog-fields {
		margin-top: -8rem;
	}
}
.blog-item .image:not(:has(img)) + .blog-fields {
	margin-top: 0;
}

/* Move panels on top of images. */
.blog-item-preview .image + .content {
	margin-top: -3rem;
}
/* Reset on browser that support "has". */
.blog-item-preview .image:not(:has(img)) + .content {
	margin-top: 2rem;
}

/* Variables! */

/* Give contact different background. */
.blog-item .background-contact {
	background-color: var(--tertiary);
	color: var(--white);
}
/* Slider colors. */
.blog-item [data-partial="image-album"] .slider-indicators li.active {
	color: var(--secondary);
}
.blog-item [data-partial="image-album"] .slider-control-prev-icon::after {
	content: "\f060";
	color: var(--secondary);
}
.blog-item [data-partial="image-album"] .slider-control-next-icon::after {
	color: var(--secondary);
}
.blog-item-preview a.blog-item-link:hover {
	color: var(--primary);
}
/* Make tags round and like secondary buttons. */
.blog-item .btn.btn-tag,
.blog-item-preview .btn.btn-tag {
	background-color: var(--secondary);
	border-color: var(--secondary);
	border-radius: 999px;
	color: var(--white);
}
.blog-collection .blog-filters {
	background-color: var(--primary-bg);
}
.blog-collection .blog-filters .blog-filter-label {
	margin-bottom: 0;
}
.blog-collection
	.blog-filters
	input[checked="checked"]
	+ label.blog-filter-label {
	background-color: var(--white);
	color: var(--primary);
}

.blog-collection .breadcrumb .breadcrumb-item a,
.blog-item .breadcrumb .breadcrumb-item a {
	color: var(--secondary);
}
.blog-collection .breadcrumb .breadcrumb-item a:active,
.blog-collection .breadcrumb .breadcrumb-item a:hover,
.blog-collection .breadcrumb .breadcrumb-item a:focus,
.blog-item .breadcrumb .breadcrumb-item a:active,
.blog-item .breadcrumb .breadcrumb-item a:hover,
.blog-item .breadcrumb .breadcrumb-item a:focus {
	color: var(--secondary-light);
}