Bicyles

P202-21

Hoe te gebruiken?

Geef de website toegang tot de "bicycles" template. Selecteer vervolgens het template in de website en voeg de nodige extra velden toe mocht het niet samen met de CycleSoftware koppeling geïntegreerd worden.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren/* Layout of blog collection page. */
.vertical-layout {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.vertical-layout > * {
	box-sizing: content-box;
	padding-left: calc(((100vw - var(--container-width)) / 2) + 7.5px);
	padding-right: calc(((100vw - var(--container-width)) / 2) + 7.5px);
	padding-bottom: 1.5rem;
	padding-top: 1.5rem;
	width: calc(var(--container-width) - 30px);
}
@media screen and (min-width: 992px) {
	.horizontal-layout-lg {
		box-sizing: content-box;
		display: flex;
		flex-direction: row;
		gap: 30px;
		padding-left: calc(((100vw - var(--container-width)) / 2) + 7.5px);
		padding-right: calc(((100vw - var(--container-width)) / 2) + 7.5px);
		width: calc(var(--container-width) - 30px);
	}
	.horizontal-layout-lg > * {
		box-sizing: border-box;
		padding: 0;
		width: auto;
	}
}

/* Blog bicycles template  */

.blog-section-collection.vertical-layout {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

@media screen and (min-width: 992px) {
	.blog-section-collection.horizontal-layout-lg {
		padding-bottom: 3rem;
		padding-top: 3rem;
	}
}

.blog-template-bicycles .btn-back {
	display: none;
}

.blog-template-bicycles .breadcrumb {
	background-color: transparent;
	padding-left: 0;
}

.blog-template-bicycles.blog-collection
	.blog-section-collection
	.btn.btn-tertiary {
	width: 100%;
}

.blog-template-bicycles.blog-item .blog-content .btn.btn-link {
	margin-bottom: 1rem;
}

.blog-template-bicycles .blog-field-price {
	font-weight: bold;
	font-size: 1.75em;
}

.blog-template-bicycles .blog-content,
.blog-template-bicycles [class^="blog-section-"],
.blog-template-bicycles [class*=" blog-section-"] {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.blog-template-bicycles
	.blog-section-fields
	[data-shorten-text-to][data-shorten-text-clone="true"] {
	position: relative;
}

.blog-template-bicycles
	.blog-section-fields
	[data-shorten-text-to][data-shorten-text-clone="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(1em + 1.5rem);
	width: 100%;
	background: linear-gradient(to top, var(--primary-bg, white), transparent);
	height: 8rem;
}

.blog-template-bicycles .blog-usps .fa {
	font-size: 2em;
	margin-right: 0.5rem;
}

.blog-template-bicycles.blog-collection .blog-content,
.blog-template-bicycles.blog-item [class^="blog-section-"]:nth-child(2n),
.blog-template-bicycles.blog-item [class*=" blog-section-"]:nth-child(2n) {
	background-color: var(--primary-bg);
}

.blog-template-bicycles.blog-item p + a.btn.btn-tertiary {
	padding: calc(var(--button-padding) / 4) calc(var(--button-padding) / 2);
}

/* Blog bicycle filters */

@media screen and (min-width: 992px) {
	.blog-template-bicycles .blog-filters-wrapper:first-child {
		max-width: 25%;
	}
}

.blog-filters-wrapper {
	position: relative;

	margin-top: -1.5rem;
}
.blog-filters {
	position: sticky;
	top: 0;
	padding-top: 1.5rem;
	padding-bottom: 1rem;
}
.blog-filters > * {
	max-height: 100vh;
	overflow-y: scroll;
	scrollbar-width: none;
}
.blog-filters > *::-webkit-scrollbar {
	display: none;
}

.blog-template-bicycles .blog-filters legend,
.blog-template-bicycles .blog-filters summary {
	font-weight: bold;
	margin-bottom: 0.5rem;
}
.blog-template-bicycles .blog-filters legend > label {
	margin-bottom: 0;
}

.blog-template-bicycles
	.blog-filters
	.filter-field-collection
	input[type="radio"],
.blog-template-bicycles
	.blog-filters
	.filter-field-collection
	input[type="checkbox"] {
	display: none;
}
.blog-template-bicycles
	.blog-filters
	.filter-field-collection
	input[type="radio"]
	+ label,
.blog-template-bicycles
	.blog-filters
	.filter-field-collection
	input[type="checkbox"]
	+ label {
	padding-left: 1rem !important;
}
.blog-template-bicycles
	.blog-filters
	.filter-field-collection
	input[type="radio"]
	+ label:hover,
.blog-template-bicycles
	.blog-filters
	.filter-field-collection
	input[type="checkbox"]
	+ label:hover {
	cursor: pointer;
	text-decoration: underline;
}
.blog-template-bicycles.blog-collection
	.filter-field-collection
	input[type="radio"]:checked
	+ label,
.blog-template-bicycles.blog-collection
	.filter-field-collection
	input[type="checkbox"]:checked
	+ label {
	font-weight: bold;
}

/* Blog previews items */

.blog-template-bicycles.blog-item-preview {
	box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.5);
	margin-bottom: 30px;
}

.blog-template-bicycles.blog-item-preview a.blog-item-link {
	color: inherit;
}

.blog-template-bicycles.blog-item-preview .image img {
	height: 100%;
	object-fit: contain;
}

.blog-template-bicycles.blog-item-preview .blog-item-preview-title {
	font-size: 1.5rem;
	color: white;
	margin-bottom: 0.5rem;
}

.blog-template-bicycles.blog-item-preview .blog-field-price {
	font-weight: bold;
	font-size: 1.5em;
	text-align: right;
}

.blog-template-bicycles.blog-item-preview .blog-item-preview-content {
	background-color: var(--secondary);
	padding: 0.75rem 1rem;
	color: white;
}