Graphical chart and credits
🔗Website
List of the people who contributed developing the website. Authors who published in the blog section are not included in this list.
- Neil: development (HTML/CSS, Rust), design, prototyping, creation of vector graphics, content writing, import from old website, software development (Rust) of ancillary tools and translation.
- Brume: UX/UI feedbacks, complete proofreading, creation of artistic and vector graphics content.
- Alex: translation and proofreading of all service pages and the Graphical chart and credits page, contribution to development (HTML/CSS)
- Aldec: translation and proofreading of the pages Discover our activities, Workshops and Booths.
- Théo: tranlsation and proofreading of homepage and Activities/Conferences page.
- n2r: translation of the Association page.
- Denise: translation of the FAQ page.
🔗Logo
The design of our logo is based on an origami crane. The image of the bird was chosen to evoke take-off and freedom. It also echoes the original name of the association, 42l (pronounced [kaʁɑ̃tdø zɛl]): the two wings of a bird.
An alternative “outlined” version also exists, where the white outlines are reinforced and the colours are removed.
Our logo is available in SVG format / « outline » version.
We also use a version of the logo with the name of our association and our slogan. You can also find some variations without shadow, in black on white and with the outline version of the logo:
🔗Banner
For social networks and our communication tools, we have designed a banner with multiple variants:
If you need a vector or higher resolution version, please contact us.
🔗Typeface
We use the Contre-Aller font, a modified version of the Aller font created by Dalton Maag and released under the Aller Font License v1.00.
This version includes a modification of the x, k and t characters (lower and upper case) for better readability and support for non-breaking spaces.
🔗Colours
We choosed to use a dark theme for a comfort reading.
Unlike the previous version of the site where we used many colours in the logo, we decided to limit the number of colours to a few shades.
// Blue palette: tinted on part of our pages
$blue-2: #6EA2F4;
$blue-3: #3C80EC;
$blue-4: #1B66DB;
$blue-5: #1251B3;
$blue-6: #0B4092;
$blue-7: #063378;
$blue-8: #032862;
// Grey: used as background color on all pages
$dark-2: #28292b;
// Transparent black: used to darken the background grey resulting
// in a darker grey, used on several containers on each page
$dark-3: #00000042;
// Navigation bar
$navbar-1: #9f2e45;
$navbar-2: #5d3067;
// Contrast reduced version for a use of these colours on
// other elements of the page
$navbar-like-1: #972e49;
$navbar-like-2: #653063;
$magenta-navbar: #852f53;
// Link and text colours
$text: whitesmoke;
$link: #FF459C;
🔗CSS
We have abandoned the Bulma CSS framework, which we used on the old site. This version has CSS stylesheets entirely handwritten in Sass. You can find the sources here.
🔗Rendering engine
We use the Zola static site generator to generate our pages from templates.
🔗Credits for graphic resources
List of icons and various graphic resources used on the website.
🔗Icons
- Most of the icons used on the website, especially in the navigation bar and the home page, comes from Tabler Icons.
- The icons
assets/svg/wrench.svgandassets/svg/mic.svgwere created by Online Web Fonts. - Our services icons generally comes from the software used for the services (for instance: Nextcloud, Git, Nitter…). Other icons are vector images we made or based on a set of emoticons (for instance: Links, Forms…).
- Such icons were modified by ourselves to meet our graphical charter.
- The RSS, Twitter, PeerTube, Mastodon icons and the CHATONS logo are the property of their respective owners.