Commit cd2323c6 authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

initialize the project using Eleventy

parent d7443ead
root = true
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2
'use strict'
const ospath = require('path')
const asciidoctor = require('@asciidoctor/core')()
const documentModelConverter = require(`${__dirname}/lib/document-model-converter.js`)
module.exports = function (eleventyConfig, rest) {
eleventyConfig.ignores.add("pages/examples/**");
eleventyConfig.addPassthroughCopy('pages/**/*.{jpg,png,gif,svg,ico,css,txt,json,js}');
eleventyConfig.addPassthroughCopy('assets/**/*.{jpg,png,gif,svg,ico,css,txt,json,js}');
eleventyConfig.addExtension('adoc', {
compile: function (fileContents, path) {
return function (data) {
const registry = asciidoctor.Extensions.create()
const documentModel = asciidoctor.convert(fileContents, {
safe: 'unsafe',
extension_registry: registry,
template_dirs: ospath.join(__dirname, 'templates'),
attributes: {
'skip-front-matter': '',
'showtitle': '',
'syntax-highlighter': 'highlight.js',
'includedir': `${__dirname}/pages/examples`
},
backend: 'json'
})
return documentModel
}
}
})
return {
templateFormats: ['njk', 'adoc', 'css'],
dir: {
output: '_site',
input: 'pages',
includes: '_includes',
layouts: '_layouts',
data: '_data',
},
}
}
/_site/
/node_modules/
# asciidoc.org
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Urbanist:wght@400;500;700;900&display=swap');
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/* asciidoc.org style */
:root {
--brand-color-50: #f1fcfe;
--brand-color-100: #d2f4fd;
--brand-color-200: #abebfc;
--brand-color-300: #7ad7ec;
--brand-color-400: #55bcd4;
--brand-color-500: #379fb6;
--brand-color-600: #1f8197;
--brand-color: var(--brand-color-600); /* alias */
--brand-color-700: #196d80;
--brand-color-800: #195866;
--brand-color-900: #194954;
--brand-color-1000: #033844;
--gray-color-200: #E5E7EB;
--gray-color-500: #6B7280;
--gray-color-600: #202020;
}
body {
font-family: "Inter", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
color: var(--gray-color-600);
background: linear-gradient(#e5e5e5 0%, #F9FAFB 35%);
/* fallback */
background-color: #F9FAFB;
}
.header {
position: relative;
background-color: var(--brand-color);
padding-bottom: 1rem;
padding-top: 1rem;
margin-left: 0;
margin-right: 0;
z-index: 1;
}
@media screen and (min-width: 769px) {
.header::before {
content: "";
position: absolute;
display: block;
height: 380px;
width: 200px;
top: 10px;
right: 20px;
background-image: url("../img/dot-watermark.svg");
background-repeat: repeat-y;
z-index: -1;
}
}
.header > nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding-right: 3rem;
padding-left: 3rem;
}
@media screen and (min-width: 1024px) {
.header > nav {
padding-right: 7rem;
padding-left: 7rem;
}
}
.header .menu {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 1rem;
}
@media screen and (min-width: 769px) {
.header .menu {
flex-direction: row;
gap: 1rem;
padding: 0.75rem;
margin-left: auto;
}
}
.header .menu a {
color: white;
text-decoration: none;
}
.header .menu a:hover {
text-decoration: underline;
}
.logo {
font-size: 1.75em;
margin-top: 1em;
margin-bottom: 1em;
display: flex;
gap: 0.35em;
}
.logo > img {
max-height: 1em;
}
.main > .hero {
background-color: var(--brand-color);
color: white;
text-align: center;
background-image: url("../img/dot-watermark.svg");
background-repeat: repeat-y;
background-origin: border-box;
}
.main > .hero .content {
max-width: 1110px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.main > .hero p {
font-size: 1.25rem;
text-align: center;
position: relative;
z-index: 10;
}
.main > .hero .imageblock {
padding-top: 3rem;
}
.main > .hero .imageblock > .content {
height: 200px;
overflow: hidden;
}
@media screen and (min-width: 769px) {
.main > .hero .imageblock > .content {
height: 360px;
}
}
.main h1 {
font-family: "Urbanist", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 2.25em;
font-weight: 900;
max-width: 1150px;
padding-top: 5.5rem;
padding-bottom: 2rem;
display: flex;
margin: auto;
z-index: 10;
position: relative;
}
@media (min-width: 640px) {
.main h1 {
font-size: 2.5rem;
}
}
@media (min-width: 1024px) {
.main h1 {
font-size: 3rem;
}
}
.main .paragraph {
text-align: justify;
hyphens: auto;
}
.main h2 {
color: var(--brand-color-600);
font-size: 0.9em;
text-transform: uppercase;
font-weight: 600;
padding-top: 2em;
padding-bottom: .75em;
line-height: 1.15rem;
letter-spacing: .025em;
font-weight: 600;
}
section {
padding-left: 2rem;
padding-right: 2rem;
}
section.users {
background-color: #323232;
}
section.users > h2 {
font-size: 2.25rem;
font-style: normal;
font-weight: 700;
letter-spacing: 0em;
text-align: center;
color: white;
padding-top: 3rem;
text-transform: none;
line-height: normal;
}
section.about {
color: #272e3b;
padding-top: 5rem;
padding-bottom: 3rem;
background-image: url(../img/grid-watermark.png);
background-repeat: no-repeat;
background-position: right;
}
@media screen and (min-width: 1024px) {
section.about .columns {
display: flex;
justify-content: flex-end;
}
}
@media screen and (min-width: 1408px) {
section.about .columns > .column:first-child {
margin: auto;
}
}
@media screen and (min-width: 1100px) {
section.about .columns > .column:first-child {
padding-left: 1rem;
}
}
section.about .columns > .column:first-child {
display: flex;
flex-direction: column;
justify-content: center;
flex: 0 0 40%;
}
section.about .columns > .column:nth-child(2) {
flex: 0 0 60%;
margin-top: 3rem;
margin-right: -2rem;
display: flex;
justify-content: flex-end;
}
section.about .imageblock {
overflow: clip;
}
section.about .imageblock img {
width: 125%;
max-width: none;
margin-top: 0.5rem;
margin-left: 1.5rem;
}
section.about h2 {
display: flex;
align-items: flex-end;
}
section.about h2 {
grid-column: 1;
max-width: 650px;
}
section.about h3 {
max-width: 440px;
}
section h2 {
font-family: "Urbanist", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
section.try h2 {
color: white;
padding-top: 7rem;
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
section.try {
color: white;
background-color: var(--brand-color);
padding-bottom: 2rem;
}
section.try > .container {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
section.try h3 {
max-width: 600px;
}
section.try .paragraph {
max-width: 925px;
}
section.try img {
box-shadow: 0px 4px 30px 0px #00000026;
}
section.compare {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
padding-bottom: 4rem;
}
section.compare h2 {
padding-top: 7rem;
}
section.compare .sectionbody > .paragraph {
max-width: 800px;
}
section.compare > .content > .tabset {
padding-top: 4rem;
}
section.compare > .content > .tabset > .content {
padding-left: 0.25rem;
}
section.compare .tabset h4 {
padding-top: 2rem;
}
@media screen and (min-width: 920px) {
section.compare .tabset .tab-pane {
display: grid;
grid-template-rows: min-content max-content 1fr;
grid-auto-flow: column;
gap: 0 1rem;
}
}
section.compare .tabset .tab-pane > * {
min-width: 350px;
}
section.compare .tabset .tab-pane h4 {
font-family: "Urbanist", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 1.75rem;
line-height: 36px;
padding-bottom: 0.75rem;
}
section.compare .tabset .paragraph {
color: rgb(17 24 39 / 85%);
padding: 0 0.5em;
}
section.compare .tabset > .content .title {
font-family: "Urbanist", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
line-height: 1.5rem;
font-size: 1.9rem;
letter-spacing: .015em;
font-weight: 700;
padding-bottom: 1.5rem;
}
@media screen and (min-width: 769px) {
section.specifications {
padding-left: 8rem;
padding-right: 8rem;
border-radius: 1rem;
}
}
section.specifications {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
color: white;
background-color: var(--brand-color);
padding-bottom: 4rem;
}
section.specifications h2 {
color: white;
font-size: 2.25rem;
font-style: normal;
font-weight: 700;
letter-spacing: 0em;
color: white;
padding-top: 4rem;
text-transform: none;
line-height: normal;
max-width: 600px;
}
section.specifications a {
padding-top: 1.5rem;
color: white;
display: block;
}
section.specifications .paragraph:not(:last-child) {
padding-bottom: 1.5rem;
}
section.tools {
margin-top: 7rem;
max-width: 1360px;
margin-left: auto;
margin-right: auto;
padding-bottom: 6rem;
background-color: #F9FAFB;
}
section.tools h2 {
padding-bottom: 1.5rem;
text-align: center;
}
section.tools a.explore {
color: var(--brand-color);
border: 1px solid var(--brand-color);
border-radius: 5px;
padding: 1rem;
text-decoration: none;
width: fit-content;
margin: auto;
}
section a.action:hover {
text-decoration: underline;
}
section a.action:hover::after {
text-decoration: none;
}
section a.action {
display: block;
text-decoration: none;
}
section a.action::after {
content: "→";
display: inline-block;
font-size: 2em;
margin-left: 1rem;
vertical-align: sub;
}
section.tools h3 {
text-align: center;
padding-bottom: 5rem;
}
section.tools .cards > .card {
grid-row: 1;
background: #FFFFFF;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 3rem 2rem;
margin-bottom: 2rem;
font-size: 0.9rem;
z-index: 1;
overflow: hidden;
position: relative;
}
@media screen and (min-width: 950px) {
section.tools .cards {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: row;
grid-gap: 0.25rem 1rem;
}
}
@media screen and (max-width: 949px) and (min-width: 769px) {
section.tools .cards > .card {
padding: 3rem 4rem;
margin-left: 3rem;