– Logos
{% include "./assets/icons/logo.svg" %}
Style Guide
Elements
– Fonts
Font Regular
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
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)
<p class="> […] </p>
<p class="font-medium"> […] </p>
<p class="font-bold"> […] </p>
– Typography
Headings
h1
If debugging is the process of removing software bugs, then programming must be the process of putting them in
h2
First, solve the problem. Then, write the code
h3
The only people who have anything to fear from free software are those whose products are worth even less
h4
I think Microsoft named .Net so it wouldn’t show up in a Unix directory listing
h5
Computers are getting smarter all the time. Scientists tell us that soon they will be able to talk to us
h6
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-color];
}
Paragraphs
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>
Paragraphs two colums
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus dapibus mauris, ultricies posuere justo ultrices quis. Nunc ligula lectus, accumsan sit amet lectus at, vehicula porttitor lectus. Nunc tristique nec nulla et tempor. Nullam dapibus auctor urna, eu interdum risus. Pellentesque in erat nulla. Maecenas eget ultrices dolor. Curabitur consequat ipsum vitae finibus sagittis. Nullam sollicitudin pretium arcu nec convallis. Nunc nulla nibh, fringilla ut dictum dictum, congue ac sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec nisl lectus. Praesent nec mauris id nulla tempor aliquam eget sed nunc. Fusce consequat dignissim felis ac imperdiet. Nam nunc sem, posuere sit amet ex non, fermentum tincidunt libero.
Duis non maximus leo. Suspendisse tortor metus, consectetur sed velit id, mattis placerat tellus. Cras viverra non sapien at gravida. Phasellus imperdiet nec ante vitae tempor. Nulla a sem sed felis placerat lobortis in vitae risus. Duis gravida neque diam. Morbi ultrices elit a erat accumsan posuere. Etiam rhoncus sapien eget orci vulputate, non viverra neque mollis. Vestibulum ligula mauris, vestibulum non tincidunt quis, imperdiet in nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Praesent sit amet dolor auctor, aliquam augue sit amet, vulputate lectus. Nam vehicula vitae turpis vel laoreet. Nam neque augue, interdum et metus et, faucibus accumsan dolor. Cras hendrerit magna vel sodales posuere. Fusce tempor ultricies ante, et venenatis arcu pulvinar ac. Etiam turpis diam, bibendum quis risus vel, pellentesque dignissim justo. Maecenas eget egestas tortor, nec sodales justo. Pellentesque eleifend, orci id sodales placerat, ex eros ultricies libero, sed commodo est turpis vitae mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque dictum arcu est, eget porttitor nibh luctus a. Etiam dignissim augue ut arcu rhoncus lobortis. Nam nec risus eget lectus imperdiet pellentesque et sit amet risus. In hac habitasse platea dictumst. Etiam rhoncus neque et mauris elementum venenatis. Duis tincidunt diam eu pharetra cursus. Vivamus vestibulum, justo eu pellentesque egestas, dui nulla congue risus, et ullamcorper nibh ante et ex.
Etiam semper magna id felis placerat semper. Maecenas in lorem tellus. Duis viverra odio arcu, non laoreet magna suscipit eget. Quisque id fermentum lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean auctor elit at tellus placerat, id luctus nulla ullamcorper. Proin sodales eros ipsum. Maecenas vitae enim at orci dapibus placerat eget dignissim arcu. Quisque convallis tempus egestas. Etiam commodo aliquet justo, ut placerat nunc fringilla sit amet. Pellentesque semper, libero nec tempor molestie, dolor nulla sagittis ante, eget convallis justo nisi ac lacus. Nam non metus nulla.
Curabitur sit amet ultricies lacus. Pellentesque eleifend lobortis erat, vel luctus lectus varius eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum bibendum nibh egestas, fermentum leo in, rhoncus lectus. Suspendisse urna nulla, blandit id sollicitudin non, dictum sed turpis. Pellentesque libero dui, ultrices sit amet dapibus a, molestie quis lorem. Aliquam enim leo, commodo tincidunt tincidunt pulvinar, pellentesque at nisi. Cras non erat vel mi laoreet pretium iaculis sed nunc. Curabitur congue, tortor laoreet pharetra placerat, eros est dictum ante, sed condimentum neque ipsum vitae ante.
<p class="sl-columns--2"> […] </p>
Paragraphs three colums
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus dapibus mauris, ultricies posuere justo ultrices quis. Nunc ligula lectus, accumsan sit amet lectus at, vehicula porttitor lectus. Nunc tristique nec nulla et tempor. Nullam dapibus auctor urna, eu interdum risus. Pellentesque in erat nulla. Maecenas eget ultrices dolor. Curabitur consequat ipsum vitae finibus sagittis. Nullam sollicitudin pretium arcu nec convallis. Nunc nulla nibh, fringilla ut dictum dictum, congue ac sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec nisl lectus. Praesent nec mauris id nulla tempor aliquam eget sed nunc. Fusce consequat dignissim felis ac imperdiet. Nam nunc sem, posuere sit amet ex non, fermentum tincidunt libero.
Duis non maximus leo. Suspendisse tortor metus, consectetur sed velit id, mattis placerat tellus. Cras viverra non sapien at gravida. Phasellus imperdiet nec ante vitae tempor. Nulla a sem sed felis placerat lobortis in vitae risus. Duis gravida neque diam. Morbi ultrices elit a erat accumsan posuere. Etiam rhoncus sapien eget orci vulputate, non viverra neque mollis. Vestibulum ligula mauris, vestibulum non tincidunt quis, imperdiet in nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Praesent sit amet dolor auctor, aliquam augue sit amet, vulputate lectus. Nam vehicula vitae turpis vel laoreet. Nam neque augue, interdum et metus et, faucibus accumsan dolor. Cras hendrerit magna vel sodales posuere. Fusce tempor ultricies ante, et venenatis arcu pulvinar ac. Etiam turpis diam, bibendum quis risus vel, pellentesque dignissim justo. Maecenas eget egestas tortor, nec sodales justo. Pellentesque eleifend, orci id sodales placerat, ex eros ultricies libero, sed commodo est turpis vitae mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque dictum arcu est, eget porttitor nibh luctus a. Etiam dignissim augue ut arcu rhoncus lobortis. Nam nec risus eget lectus imperdiet pellentesque et sit amet risus. In hac habitasse platea dictumst. Etiam rhoncus neque et mauris elementum venenatis. Duis tincidunt diam eu pharetra cursus. Vivamus vestibulum, justo eu pellentesque egestas, dui nulla congue risus, et ullamcorper nibh ante et ex.
Etiam semper magna id felis placerat semper. Maecenas in lorem tellus. Duis viverra odio arcu, non laoreet magna suscipit eget. Quisque id fermentum lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean auctor elit at tellus placerat, id luctus nulla ullamcorper. Proin sodales eros ipsum. Maecenas vitae enim at orci dapibus placerat eget dignissim arcu. Quisque convallis tempus egestas. Etiam commodo aliquet justo, ut placerat nunc fringilla sit amet. Pellentesque semper, libero nec tempor molestie, dolor nulla sagittis ante, eget convallis justo nisi ac lacus. Nam non metus nulla.
Curabitur sit amet ultricies lacus. Pellentesque eleifend lobortis erat, vel luctus lectus varius eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum bibendum nibh egestas, fermentum leo in, rhoncus lectus. Suspendisse urna nulla, blandit id sollicitudin non, dictum sed turpis. Pellentesque libero dui, ultrices sit amet dapibus a, molestie quis lorem. Aliquam enim leo, commodo tincidunt tincidunt pulvinar, pellentesque at nisi. Cras non erat vel mi laoreet pretium iaculis sed nunc. Curabitur congue, tortor laoreet pharetra placerat, eros est dictum ante, sed condimentum neque ipsum vitae ante.
<p class="sl-columns--3"> […] </p>
Paragraphs four colums
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus dapibus mauris, ultricies posuere justo ultrices quis. Nunc ligula lectus, accumsan sit amet lectus at, vehicula porttitor lectus. Nunc tristique nec nulla et tempor. Nullam dapibus auctor urna, eu interdum risus. Pellentesque in erat nulla. Maecenas eget ultrices dolor. Curabitur consequat ipsum vitae finibus sagittis. Nullam sollicitudin pretium arcu nec convallis. Nunc nulla nibh, fringilla ut dictum dictum, congue ac sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec nisl lectus. Praesent nec mauris id nulla tempor aliquam eget sed nunc. Fusce consequat dignissim felis ac imperdiet. Nam nunc sem, posuere sit amet ex non, fermentum tincidunt libero.
Duis non maximus leo. Suspendisse tortor metus, consectetur sed velit id, mattis placerat tellus. Cras viverra non sapien at gravida. Phasellus imperdiet nec ante vitae tempor. Nulla a sem sed felis placerat lobortis in vitae risus. Duis gravida neque diam. Morbi ultrices elit a erat accumsan posuere. Etiam rhoncus sapien eget orci vulputate, non viverra neque mollis. Vestibulum ligula mauris, vestibulum non tincidunt quis, imperdiet in nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Praesent sit amet dolor auctor, aliquam augue sit amet, vulputate lectus. Nam vehicula vitae turpis vel laoreet. Nam neque augue, interdum et metus et, faucibus accumsan dolor. Cras hendrerit magna vel sodales posuere. Fusce tempor ultricies ante, et venenatis arcu pulvinar ac. Etiam turpis diam, bibendum quis risus vel, pellentesque dignissim justo. Maecenas eget egestas tortor, nec sodales justo. Pellentesque eleifend, orci id sodales placerat, ex eros ultricies libero, sed commodo est turpis vitae mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque dictum arcu est, eget porttitor nibh luctus a. Etiam dignissim augue ut arcu rhoncus lobortis. Nam nec risus eget lectus imperdiet pellentesque et sit amet risus. In hac habitasse platea dictumst. Etiam rhoncus neque et mauris elementum venenatis. Duis tincidunt diam eu pharetra cursus. Vivamus vestibulum, justo eu pellentesque egestas, dui nulla congue risus, et ullamcorper nibh ante et ex.
Etiam semper magna id felis placerat semper. Maecenas in lorem tellus. Duis viverra odio arcu, non laoreet magna suscipit eget. Quisque id fermentum lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean auctor elit at tellus placerat, id luctus nulla ullamcorper. Proin sodales eros ipsum. Maecenas vitae enim at orci dapibus placerat eget dignissim arcu. Quisque convallis tempus egestas. Etiam commodo aliquet justo, ut placerat nunc fringilla sit amet. Pellentesque semper, libero nec tempor molestie, dolor nulla sagittis ante, eget convallis justo nisi ac lacus. Nam non metus nulla.
Curabitur sit amet ultricies lacus. Pellentesque eleifend lobortis erat, vel luctus lectus varius eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum bibendum nibh egestas, fermentum leo in, rhoncus lectus. Suspendisse urna nulla, blandit id sollicitudin non, dictum sed turpis. Pellentesque libero dui, ultrices sit amet dapibus a, molestie quis lorem. Aliquam enim leo, commodo tincidunt tincidunt pulvinar, pellentesque at nisi. Cras non erat vel mi laoreet pretium iaculis sed nunc. Curabitur congue, tortor laoreet pharetra placerat, eros est dictum ante, sed condimentum neque ipsum vitae ante.
<p class="sl-columns--4"> […] </p>
Blockquotes
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)
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)
<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>
– Formats
Headings
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
Paragrah without padding/margin
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.
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.
.sl-p
Paragrah with padding/margin
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.
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.
.sl-p--mb
buttons
button
.sl-button .sl-button--filled
.sl-button .sl-button--primary
lead
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.
.sl-lead
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)
.sl-blockquote .sl-blockquote--quoted
.sl-blockquote--figcaption
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)
.sl-blockquote
.sl-blockquote--figcaption
Epigraph
There are two major products that come out of Berkeley: LSD and UNIX. We don’t believe this to be a coincidence.
.sl-epigraph
Press + author
There are two major products that come out of Berkeley: LSD and UNIX. We don’t believe this to be a coincidence.
.sl-press
.sl-press--author
– Colors
bg-[--primary-color]
text-[--primary-color]
bg-[--dark-color]
text-[--dark-color]
bg-[--light-color]
text-[--light-color]
– Buttons
Shapes
<button class="sl-button"> […] </button>
<button class="sl-button sl-button--rounded"> […] </button>
<button class="sl-button sl-button--circled"> […] </button>
Colored buttons
<button class="sl-button sl-button--filled"> […] </button>
<button class="sl-button sl-button--primary"> […] </button>
– Shapes
16/9
<div>
<picture>
<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-aspect--screen"/>
</picture>
</div>
Layout
– Custom grid
<div class="sl-grid">
<img src="/wp-content/themes/sl-theme-child/assets/img/image-1.jpg" class="sl-aspect--screen border-r border-b" alt=""/>
– Custom grid
– Vertical grid
Projects
– 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>
Select
font-size: 1.5rem; (24px) line-height: 2rem; (32px)
<button class="sl-select"> […] <i class="fa-light fa-angle-down text-base ml-4"></i></button>
Search
font-size: 1.25rem; (20px) line-height: 1.75rem; (28px)
<form enctype="multipart/form-data" action="javascript:;" role="search" novalidate="" class="sl-searchform">
<input class="sl-searchform--input" type="search" placeholder="que cherchez-vous ?">
</form>
Components
– Accordion
Title1
dropdown1
Title2
dropdown2
Title3
dropdown3
– Slideshow home
– Half Slider
title
subtitle
author
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed vulputate mi. Proin at ullamcorper nunc. Vestibulum ut nulla mi. Praesent gravida ornare eros, vitae tristique erat blandit non. In magna diam, tristique consequat laoreet vel, placerat ac arcu. Vivamus tempor magna id lorem dictum, non condimentum felis finibus. Nunc ultricies nunc in arcu accumsan, eu volutpat sapien gravida. Suspendisse urna arcu, pharetra at tempus eu, fermentum ac lorem. Curabitur fermentum elit erat, et bibendum magna faucibus tristique. Cras id condimentum lectus, id bibendum nisi. Sed tincidunt blandit neque, ut molestie enim laoreet non.
– Card
– Gallery mosaic
– Related
– Marquee
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
discipline 1
discipline 2
discipline 3
discipline 4
discipline 5
discipline 6
discipline 7
discipline 8
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
