Comment utiliser l'API ?
Cet API se décline en 2 utilisations :
-
L'ajout de menus pour votre site.
-
L'ajout de code dans votre site.
Généralité
Pour utiliser l'API, il faut intégrer le code suivant dans votre site :
<42>
/* Importations */
@import url(https://fonts.googleapis.com/css?family=Philosopher);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Fira+Mono);
/* Main style */
body {
overflow-x: hidden;
}
#title {
/* Positioning */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3.5em;
padding: 10px 0;
/* Visual */
background-color: #333533;
vertical-align: center;
}
#title > h1 {
/* Positioning */
margin: auto auto 0 20px;
/* Visual */
font-family: Philosopher;
color: #f5cb5c;
}
#title > p {
/* Positioning */
margin: 0 auto auto 20px;
/* Visual */
font-family: Roboto;
font-size: 0.8em;
color: #d9d9d9;
}
#launch {
/* Positioning */
position: absolute;
right: 5%;
bottom: 0;
padding: 10px;
z-index: 9;
/* Visual */
color: white;
background-color: #f5cb5c;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
vertical-align: center;
text-align: middle;
font-family: Roboto;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
}
#editor {
/* Variable */
counter-reset: lines;
/* Positioning */
position: absolute;
left: 0;
top: calc(3.5em + 20px);
padding: 10px 0;
width: 100%;
height: calc(100% - 3.5em - 40px);
/* Visual */
outline: none;
overflow-x: auto;
overflow-y: auto;
background-color: #242423;
font-family: "Fira Mono";
font-size: 1em;
color: #cfdbd5;
}
.code-line::before {
/* Variable */
counter-increment: lines;
/* Positioning */
position: absolute;
left: -40px;
bottom: 0;
z-index: 2;
/* Visual */
font-size: 0.8em;
content: counter(lines);
}
.code-line {
/* Positioning */
position: relative;
left: 50px;
width: calc(100% - 50px);
z-index: 2;
}
[id*="constructor"] {
/* Variable */
counter-reset: lines;
/* Positioning */
position: absolute;
left: 30%;
transform: translate(100%, 0);
top: calc(3.5em + 20px);
padding: 10px 0;
width: 70%;
height: calc(100% - 3.5em - 40px);
z-index: -1;
/* Visual */
outline: none;
overflow-x: auto;
overflow-y: auto;
opacity: 0%;
background-color: #000000;
font-family: "Fira Mono";
font-size: 1em;
color: greenyellow;
/* Animation */
transition: transform 1s, opacity 1s, z-index 1.3s;
}
[id$=".visible"] {
transform: translate(0, 0);
opacity: 100%;
z-index: 3;
}