Style Guide

Logos

{% include "./assets/icons/logo.svg" %}
{% include "./assets/icons/logo-footer.svg" %}

Fonts

heading's font :

body's font :

Font Light

The city’s central computer told you? R2D2, you know better than to trust a strange computer! (C3PO)

Font Regular

Writing code has a place in the human hierarchy worth somewhere above grave robbing and beneath managing. (Gerald Weinberg)

Font Semibold

It would appear that we have reached the limits of what it is possible to achieve with computer technology, although one should be careful with such statements, as they tend to sound pretty silly in 5 years. (John Von Neumann, circa 1949)

Font Bold

Programmers are in a race with the Universe to create bigger and better idiot-proof programs, while the Universe is trying to create bigger and better idiots. So far the Universe is winning. (Rich Cook)

<p class="font-light"> […] </p>
<p class="font-normal"> […] </p>
<p class="font-semibold"> […] </p>
<p class="font-bold"> […] </p>

Typography

<h1 class="sl-h1"> […] </h1>
<h1 class="sl-h1"><em> […] </em></h1>
<h1 class="sl-h1"><strong> […] </strong></h1>
<h1 class="sl-h1"><b><i> […] </i></b></h1>

<h2 class="sl-h2"> […] </h2>

<h3 class="sl-h3 text-red"> […] </h3>

.sl-section-title {
	@apply sl-h3 text-primary;
}

<p class="sl-paragraph"> […] </p>
<p class="sl-lead"> […] </p>

<blockquote class="sl-blockquote"> […] </blockquote>

<blockquote class="sl-blockquote--quoted"> […] </blockquote>

Colors

Buttons

<button class="sl-button sl-button--rounded"> […] </button>

<button class="sl-button sl-button--rounded sl-button--lowercase sl-button--primary"> […] </button>
<button class="sl-button sl-button--rounded sl-button--uppercase sl-button--bg-primary"> […] </button>

Shapes

Images in squares + half squares responsive:

	<div class="sl-shape--square">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
			</picture>
		</div>
	</div>
	

Images in circles:

	<div class="sl-shape--circle">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
			</picture>
		</div>
	</div>
	

Images in 16/9:

	<div class="sl-shape--screen">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
			</picture>
		</div>
	</div>
	

Custom format (banner):

	<div class="sl-shape--banner">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
			</picture>
		</div>
	</div>

Ninja Form

Filters

choices

radio

<label class="sl-filter">
	<span class="sl-filter--label"> […] </span>
	<input type="radio" checked="checked" name="radio_choice">
	<span class="sl-filter--checkbox"></span>
</label>

checkbox

<label class="sl-filter">
	<span class="sl-filter--label"> […] </span>
	<input type="checkbox" checked="checked" name="checkbox_choice">
	<span class="sl-filter--checkbox"></span>
</label>

Search:

font-size: 1.25rem; (20px) line-height: 1.75rem; (28px)

<input type="search" name="" id="" placeholder="Rechercher" class="sl-search">
<button>
	<i class="fa-light fa-magnifying-glass text-xl"></i>
</button>

.sl-search{
	@apply border-0 px-0 py-3 font-normal text-gray-500 placeholder:uppercase text-xl;
}

<div class="sl-accordion sl-accordion--simple mt-8">
	<div x-data="{ open: false }">
		<div class="group" x-on:click="open = ! open">
			<h4 class="group-hover:text-primary" :class="open ? 'text-primary' : ''">accordion</h4>
			<i class="sl-icon--plus transition duration-500 group-hover:text-primary" :class="open ? 'text-primary rotate-45' : ''"></i>
		</div>
		<div x-show="open" class="pb-4 sl-customizable-content">
			<p>content</p>
		</div>
	</div>
</div>

Slider

{% include "partials/slider.twig" %}

Card

Atelier

02 Avr > 02 Mars

Atelier & discussion d’Initiation à la Citoyenneté

Pour une bonne connaissance de votre corps de votre corps

<a href="#" class="sl-card group">
	<div class="sl-card--thumbnail sl-shape--square">
		<div>
			<picture>
				<img src="https://www.f-q-s.be/wp-content/themes/fqs-theme-child/assets/img/image-8.jpg" alt="" class="sl-img-fit--cover"/>
			</picture>
			<button class="sl-absolute-center"><i class="fa-solid fa-play text-white text-6xl"></i></button>
			<button class="sl-absolute-center"><i class="fa-solid fa-microphone text-white text-6xl"></i></button>
		</div>
	</div>
	<div class="sl-prevent-link-behaviour sl-card--content">
		<div class="flex justify-between mb-3">
			<h6 class="sl-card-category">Atelier</h6>
			<h6 class="sl-card-date">02 Avr > 02 Mars </h6>
		</div>
		<h2 class="sl-card-title">Atelier & discussion d’Initiation à la Citoyenneté</h2>
		<h3 class="sl-card-subtitle">Pour une bonne connaissance de votre corps de votre corps</h3>
	</div>
</a>

Gallery

layout.title

slide.legende 1© slide.copyright

slide.legende 2© slide.copyright

slide.legende 3© slide.copyright

slide.legende 4© slide.copyright

Marquee

Sidebar

{% include "partials/sidebar.twig" %}