Logos
{% include "./assets/icons/logo.svg" %}
{% include "./assets/icons/logo.svg" %}
body's font :
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)
mono's font :
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-normal"> […] </p>
<p class="font-medium"> […] </p>
<p class="font-mono font-normal"> […] </p>
<p class="font-mono font-medium"> […] </p>
<p class="font-mono 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-p"> […] </p>
<p class="sl-lead"> […] </p>
<figure>
<blockquote class="sl-blockquote">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)</blockquote>
<figcaption class="sl-blockquote--figcaption">Aldous Huxley, Brave New World</figcaption>
</figure>
<figure>
<blockquote class="sl-blockquote sl-blockquote--quoted">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)</blockquote>
<figcaption class="sl-blockquote--figcaption">Aldous Huxley, Brave New World</figcaption>
</figure>
#000000
bg-black
text-black
#FFFFFF
bg-white
text-white
#707070
bg-gray-100
text-gray-100
#D0D0D0
bg-gray-500
text-gray-500
#303030
bg-gray-900
text-gray-900
#F00E0E
bg-primary
text-primary
three shapes:
<button class="sl-button sl-button"> […] </button>
<button class="sl-button sl-button--circled"> […] </button>
<button class="sl-button sl-button--bg-translucent"> […] </button>
two background colors:
<button class="sl-button sl-button--primary"> […] </button>
<button class="sl-button sl-button--filled"> […] </button>
Button text content:
<button class="sl-button sl-button--lowercase"> […] </button>
<button class="sl-button sl-button--uppercase"> […] </button>
Button show more:
<button class="sl-button sl-button--rounded sl-button--show-more">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</button>
Customs icons:
Sticker
Cursors
tag {
cursor: url("../icons/cursor-default.svg") 17 17, auto;
}
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:
Header search and burger:
<div class="flex items-center">
<button class="mr-4 hover:text-primary">
<i class="fa-regular fa-magnifying-glass text-xl relative -top-[2px]"></i>
</button>
<button id="burger-icon" class="mr-4 hover:text-primary">
<i class="fa-regular fa-bars text-2xl"></i>
</button>
</div>
Socials:
<div class="flex items-center">
<a href="#" target="_blank" class="hover:text-primary text-black">
<i class="fa-brands fa-facebook-square text-lg mr-5"></i>
</a>
<a href="#" target="_blank" class="hover:text-primary text-black">
<i class="fa-brands fa-twitter text-lg mr-5"></i>
</a>
<a href="#" target="_blank" class="hover:text-primary text-black">
<i class="fa-brands fa-instagram text-lg mr-5"></i>
</a>
</div>
Footer navigation:
<div class="flex items-baseline">
<a href="#" class="sl-footer-navigation flex items-center">
// add include "home.svg" './assets/icons/home.svg'
<span class="ml-6">Accès / Contact</span>
</a>
<a href="#" class="sl-footer-navigation flex items-center" target="_blank">
<i class="fa-light fa-ticket text-2xl"></i>
<span class="ml-6">Billeterie</span>
</a>
</div>
<div class="flex items-baseline">
<a href="#" class="sl-footer-navigation flex items-center">
<i class="fa-light fa-lock text-xl"></i>
<span class="ml-6">enseignants</span>
</a>
<a href="#" class="sl-footer-navigation flex items-center">
<i class="fa-light fa-lock text-xl"></i>
<span class="ml-6">professionnels</span>
</a>
</div>
Arrows slideshows:
<div>
<i class="fa-thin fa-chevron-right text-6xl"></i>
<i class="fa-thin fa-chevron-right text-6xl"></i>
</div>
Calendar:
<div class="sl-home-accordion--title">
<a class="hover:text-primary">
<h2>Agenda
<i class="fa-thin fa-arrow-up-right text-5xl"></i>
</a>
<div>
<i class="fa-thin fa-calendar text-5xl"></i>
<i class="fa-thin fa-xmark text-6xl"></i>
</div>
</div>
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 class="overflow-hidden">
<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>
<div class="sl-grid sl-masonry">
<div class="sl-masonry-item">
<div>
<picture>
<img src="{{ theme.path }}/assets/news/ […] .jpg" alt=" […] "/>
</picture>
</div>
</div>
<div">
<div class="sl-masonry-item">
<picture>
<img src="{{ theme.path }}/assets/news/ […] .jpg" alt=" […] "/>
</picture>
</div>
</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>
Fake select (+ modal later with alpine):
font-size: 1.5rem; (24px) line-height: 2rem; (32px)
<button class="sl-select"> […] <i class="fa-light fa-angle-down text-2xl ml-4"></i></button>
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;
}
Théâtre
28 oct > 12 nov
Metteuse en scène
row
list
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.