Logos
{% include "./assets/icons/logo.svg" %}
{% include "./assets/icons/logo-footer.svg" %}
{% include "./assets/icons/logo.svg" %}
{% include "./assets/icons/logo-footer.svg" %}
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>
If debugging is the process of removing software bugs, then programming must be the process of putting them in
First, solve the problem. Then, write the code
The only people who have anything to fear from free software are those whose products are worth even less
I think Microsoft named .Net so it wouldn’t show up in a Unix directory listing
Computers are getting smarter all the time. Scientists tell us that soon they will be able to talk to us
Computers are like bikinis. They save people a lot of guesswork
<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;
}
Au commencement : une blague en forme de point d’interrogation sur les boissons chaudes, le colorisme et le colonialisme. Elle devient la fabrication d’une communauté sur scène entamant un voyage initiatique poétique de réappropriation de leur Histoire de femmes noires dans un pays qui n’est pas décolonisé de ses imaginaires.
Ensemble, les huit interprètes multiples mais unifiées, se transforment sans cesse, elles sont des Alices trop souvent inadaptées au monde et glissent dans un long tunnel avec à chaque bout, leur affreux-passé et leur afro-futur. Une tentative d’œuvre performative d’empuissancement qui n’épargne ni les oreilles ni les yeux.
<p class="sl-paragraph"> […] </p>
<p class="sl-lead"> […] </p>
There are two major products that come out of Berkeley: LSD and UNIX. We don’t believe this to be a coincidence. (Jeremy S. Anderson)
Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)
<blockquote class="sl-blockquote"> […] </blockquote>
<blockquote class="sl-blockquote--quoted"> […] </blockquote>
#000000
bg-black
text-black
#FFFFFF
bg-white
text-white
#D3D3D3
bg-gray-100
text-gray-100
#F7FFE5
bg-green-100
text-green-100
#14C150
bg-primary
text-primary
<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>
Navigation icons:
Mobile menu
<i class="sl-icon--mobile-menu"></i>
Close
<i class="sl-icon--close"></i>
Plus
<i class="sl-icon--plus"></i>
Plus
<i class="sl-icon--minus"></i>
Magnifying glass
<i class="sl-icon--search"></i>
Fontawesome icons:
<i class="fa-light fa-globe text-2xl"></i>
<i class="fa-brands fa-facebook-square text-2xl"></i>
<i class="fa-brands fa-linkedin text-2xl"></i>
<i class="fa-brands fa-instagram text-2xl"></i>
<i class="fa-brands fa-pinterest text-2xl"></i>
<i class="fa-brands fa-snapchat text-2xl"></i>
<i class="fa-brands fa-twitter text-2xl"></i>
<i class="fa-brands fa-vimeo-v text-2xl"></i>
<i class="fa-brands fa-yelp text-2xl"></i>
<i class="fa-brands fa-youtube text-2xl"></i>
<i class="fa-brands fa-flickr text-2xl"></i>
<i class="fa-brands fa-dailymotion text-2xl"></i>
<i class="fa-light fa-compress-wide text-2xl"></i>
<i class="fa-light fa-angle-down text-2xl"></i>
<i class="fa-light fa-angle-up text-2xl"></i>
<i class="fa-light fa-angle-right text-2xl"></i>
<i class="fa-light fa-angle-left text-2xl"></i>
<i class="fa-light fa-arrow-right text-2xl"></i>
<i class="fa-light fa-arrow-left text-2xl"></i>
<i class="fa-light fa-file-lines text-2xl"></i>
<i class="fa-solid fa-location-pin text-2xl"></i>
<i class="fa-solid fa-microphone text-2xl"></i>
<i class="fa-solid fa-play text-2xl"></i>
<i class="fa-light fa-lock text-2xl"></i>
<i class="fa-light fa-hat-chef text-2xl"></i>
<i class="fa-light fa-piggy-bank text-2xl"></i>
<i class="fa-light fa-stopwatch text-2xl"></i>
<i class="fa-light fa-newspaper text-6xl"></i>
<i class="fa-light fa-book text-6xl"></i>
<i class="fa-light fa-head-side-mask text-6xl"></i>
<i class="fa-light fa-heart-pulse text-5xl"></i>
<i class="fa-light fa-building text-5xl"></i>
<i class="fa-light fa-lips text-5xl"></i>
<i class="fa-light fa-burger-soda text-5xl"></i>
<i class="fa-light fa-user text-5xl"></i>
<i class="fa-light fa-person-running text-5xl"></i>
<i class="fa-light fa-laptop-code text-5xl"></i>
<i class="fa-light fa-plus text-5xl"></i>
In use:
Socials:
<div class="flex items-center">
<a href="#" target="_blank">
<i class="fa-brands fa-facebook-square text-lg mr-5 text-primary"></i>
</a>
<a href="#" target="_blank">
<i class="fa-brands fa-twitter text-lg mr-5 text-primary"></i>
</a>
<a href="#" target="_blank">
<i class="fa-brands fa-instagram text-lg mr-5 text-primary"></i>
</a>
</div>
Footer navigation:
<a href="#" class="sl-footer-navigation flex items-center">
<i class="fa-light fa-lock text-sm mr-2"></i>
<span class="text-xs uppercase">Espace pro</span>
</a>
Arrows slideshows:
<div class="sl-white-arrow"><i class="fa-light fa-angle-left"></i></div>
<div class="sl-white-arrow"><i class="fa-light fa-angle-right"></i></div>
<div class="sl-rounded-arrow"><i class="fa-light fa-arrow-left"></i></div>
<div class="sl-rounded-arrow"><i class="fa-light fa-arrow-right"></i></div>
<i class="fa-light fa-angle-left text-8xl hover:text-primary"></i>
<i class="fa-light fa-angle-right text-8xl hover:text-primary"></i>
<button class="sl-big-rounded-icon">
<i class="fa-light fa-plus"></i>
</button>
<button class="sl-big-rounded-icon sl-big-rounded-icon--green">
<i class="fa-light fa-book"></i>
</button>
<button class="sl-big-rounded-icon sl-big-rounded-icon--bg-green sl-big-rounded-icon--sm mr-2">
<i class="fa-light fa-lips"></i>
</button>
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>
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;
}
content
<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>
{% include "partials/slider.twig" %}
<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>
Informations importantes & recommAndation covid-19
{% include "partials/sidebar.twig" %}
<div class="sl-container--full-width flex justify-between items-center w-full sl-bg-translucent py-3">
<h5 class="sl-figcaption">Titre de la photo