global review
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: Implementations
|
title: Implementations
|
||||||
description : Non-exaustiv list of implementation of SCIM protocol in server and client applications
|
description : Non-exhaustive list of implementation of SCIM protocol in server and client applications
|
||||||
color : blue-2
|
color : blue-1
|
||||||
---
|
---
|
||||||
|
|
||||||
{{< grid >}}
|
{{< grid >}}
|
||||||
|
@ -16,4 +16,8 @@ color : blue-2
|
||||||
{{< implementation type="client" devs="IndieHosters" link="https://indiehosters.net/">}}
|
{{< implementation type="client" devs="IndieHosters" link="https://indiehosters.net/">}}
|
||||||
#### Element
|
#### Element
|
||||||
{{< /implementation >}}
|
{{< /implementation >}}
|
||||||
|
|
||||||
|
{{< implementation type="client" devs="IndieHosters" link="https://indiehosters.net/">}}
|
||||||
|
#### Cli
|
||||||
|
{{< /implementation >}}
|
||||||
{{< /grid >}}
|
{{< /grid >}}
|
|
@ -1,5 +0,0 @@
|
||||||
---
|
|
||||||
title: test implementation
|
|
||||||
description : Non-exaustiv list of implementation of SCIM protocol in server and client applications
|
|
||||||
color : blue-dark
|
|
||||||
---
|
|
|
@ -1,16 +1,16 @@
|
||||||
---
|
---
|
||||||
title: Why SCIM is better ?
|
title: Why is SCIM better ?
|
||||||
description : Differences between several centralized user management protocols in a world of web application hosting that show **SCIM is an upgrade.**
|
description : Differences between several centralized user management protocols in a world of web application hosting that show **SCIM is an upgrade.**
|
||||||
color : green
|
color : green
|
||||||
weight : 4
|
weight : 4
|
||||||
---
|
---
|
||||||
### Others managmeent protocols
|
### Others management protocols
|
||||||
{{< switch-box title="Ldap" >}}
|
{{< switch-box title="Ldap" >}}
|
||||||
With this LDAP approach **everything is centralized** (except authorization).
|
With this LDAP approach **everything is centralized** (except authorization).
|
||||||
|
|
||||||
![LDAP diagram](media/ldap-diagram.svg)
|
![LDAP diagram](media/ldap-diagram.svg)
|
||||||
|
|
||||||
**Everything speaks the LDAP protocol langage.** Identities are stored in an LDAP directory, which is provisioned via LDAP protocol. Authentication is done by the application that asks the user’s credentials and validates them against the directory via LDAP protocol.
|
**Everything speaks the LDAP protocol langage.** Identities are stored in an LDAP directory, which is provisioned via LDAP protocol. Authentication is done by the application that asks the user’s credentials and validates them against the directory via LDAP protocol.
|
||||||
{{< /switch-box >}}
|
{{< /switch-box >}}
|
||||||
|
|
||||||
{{< switch-box title="Ldap+SSO" >}}
|
{{< switch-box title="Ldap+SSO" >}}
|
||||||
|
@ -27,18 +27,17 @@ On modern web infrastructure, LDAP started to be abandoned because **loose provi
|
||||||
{{< /switch-box >}}
|
{{< /switch-box >}}
|
||||||
|
|
||||||
{{< switch-box title="SSO+SCIM" >}}
|
{{< switch-box title="SSO+SCIM" >}}
|
||||||
**SCIM to solve the remaining problems** via a simple standard web api. This infrastructure is **event driven, a provisioning action on the IdP is quickly pass on all applications.**
|
**SCIM solve the remaining problems** via a simple standard web api. This infrastructure is **event driven, a provisioning action on the IdP is quickly passed on all applications.**
|
||||||
|
|
||||||
![SSO with SCIM diagram](media/sso-scim-diagram.svg)
|
![SSO with SCIM diagram](media/sso-scim-diagram.svg)
|
||||||
{{< /switch-box >}}
|
{{< /switch-box >}}
|
||||||
|
|
||||||
| | LDAP | LDPA & SSO | SSO | SSO & SCIM |
|
| | LDAP | LDAP & SSO | SSO | SSO & SCIM |
|
||||||
| -------- | -------- | -------- | -------- | -------- |
|
| -------- | -------- | -------- | -------- | -------- |
|
||||||
| Easy to implement | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} {{< svg-render check >}} <br> *Simple and web native, but non-standard IdP* | {{< svg-render check >}} <br> *Cli or ui could be used on IdP or on apps* |
|
| Easy to implement | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} {{< svg-render check >}} <br> *Simple and web native, but non-standard IdP* | {{< svg-render check >}} <br> *Cli or UI could be used on IdP or on apps* |
|
||||||
| Many implementations | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render cross >}} <br> *Not a lot of implementations yet* |
|
| Many implementations | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render cross >}} <br> *Not a lot of implementations yet* |
|
||||||
| Single sign-on | {{< svg-render cross >}} <br> *User must sign-on each application* | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} |
|
| Single sign-on | {{< svg-render cross >}} <br> *User must sign-on each application* | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} |
|
||||||
| No trust issues | {{< svg-render cross >}} <br> *Expose user’s credentials to each application* | {{< svg-render cross >}} <br> ***???????*** | {{< svg-render check >}} <br> *Zero trust in applications* | {{< svg-render check >}} <br> *Zero trust in applications* |
|
| No trust issues | {{< svg-render cross >}} <br> *Expose user’s credentials to each application* | {{< svg-render cross >}} <br> ***???????*** | {{< svg-render check >}} <br> *Zero trust in applications* | {{< svg-render check >}} <br> *Zero trust in applications* |
|
||||||
| Scalable provisioning | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render check >}} <br> *No diffing, modern storage, SQL database can be used* | {{< svg-render check >}} <br> *Real time atomic provisioning* |
|
| Scalable provisioning | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render check >}} <br> *No diffing, modern storage, SQL database can be used* | {{< svg-render check >}} <br> *Real time atomic provisioning* |
|
||||||
| Scalable provisioning | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *No way to remove a user from the application* | {{< svg-render check >}} |
|
| Scalable provisioning | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *No way to remove a user from the application* | {{< svg-render check >}} |
|
||||||
| GDPR Compliant | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render check >}} |
|
| GDPR Compliant | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render check >}} |
|
||||||
|
|
||||||
|
|
|
@ -1,32 +1,32 @@
|
||||||
---
|
---
|
||||||
title: Identity Management
|
title: Identity Management
|
||||||
description : "What we speak about and in **which environment**. We must agree on some **different problematics** that exist to better understand why we use SCIM."
|
description : "What we speak about and in **which environment**. We must agree on some **different problematics** that exists to better understand why we use SCIM."
|
||||||
color : yellow
|
color : yellow
|
||||||
weight : 1
|
weight : 1
|
||||||
---
|
---
|
||||||
![basics of identity managment](media/illus-basics.svg)
|
![basics of identity management](media/illus-basics.svg)
|
||||||
{{< grid >}}
|
{{< grid >}}
|
||||||
{{< card icone="user" >}}
|
{{< card icon="user" >}}
|
||||||
#### Authentication
|
#### Authentication
|
||||||
Who is this user ?
|
Who is this user ?
|
||||||
{{< /card >}}
|
{{< /card >}}
|
||||||
|
|
||||||
{{< card icone="lock" >}}
|
{{< card icon="lock" >}}
|
||||||
#### Authorization
|
#### Authorization
|
||||||
Is this user allowed to access this resource ?
|
Is this user allowed to access this resource ?
|
||||||
{{< /card >}}
|
{{< /card >}}
|
||||||
|
|
||||||
{{< card icone="cloud" >}}
|
{{< card icon="cloud" >}}
|
||||||
#### Storage
|
#### Storage
|
||||||
Where are user’s identity & credentials stored?
|
Where are user’s identity & credentials stored?
|
||||||
{{< /card >}}
|
{{< /card >}}
|
||||||
|
|
||||||
{{< card icone="prov" >}}
|
{{< card icon="prov" >}}
|
||||||
#### Provisioning
|
#### Provisioning
|
||||||
How to manage & transfer user’s identity ?
|
How to manage & transfer user’s identity ?
|
||||||
{{< /card >}}
|
{{< /card >}}
|
||||||
{{< /grid >}}
|
{{< /grid >}}
|
||||||
<img alt="illustration of loosing datas" src="media/illus-loose-data.svg" class="float-right">
|
<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right">
|
||||||
|
|
||||||
### Our environment
|
### Our environment
|
||||||
Our digital work environment is composed of **many applications** and web services. We want a **seamless user experience** for our free software based collaboration platform. With a **Single Sign-on (SSO)** system users get a unified login and logout experience but there is a catch.
|
Our digital work environment is composed of **many applications** and web services. We want a **seamless user experience** for our free software based collaboration platform. With a **Single Sign-on (SSO)** system users get a unified login and logout experience but there is a catch.
|
||||||
|
@ -38,4 +38,4 @@ Traditional SSO protocols like OpenID Connect do **not support syncing user prof
|
||||||
* So its **not GDPR compliant** (by default)
|
* So its **not GDPR compliant** (by default)
|
||||||
|
|
||||||
#### In essence
|
#### In essence
|
||||||
<mark>Current existing protocols are **difficult to implement or/and to use** or are **custom for specific usecase** then **non-standardized**.</mark>
|
<mark>Current existing protocols are **difficult to implement or/and to use** or are **custom for specific use case** then **non-standardized**.</mark>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: How we use SCIM
|
title: How do we use SCIM ?
|
||||||
description : Our focus is around **collaborative tooling**. Thus, information to provision are only email, first name, last name and display name for users and name and membership for group.
|
description : Our focus is around **collaborative tooling**. Thus, information to provision are only email, first name, last name and display name for users and name and membership for group.
|
||||||
color : blue-2
|
color : blue-2
|
||||||
weight : 3
|
weight : 3
|
||||||
|
@ -28,4 +28,4 @@ And, when a resource is modified in the user database of the Identity Provider,
|
||||||
|
|
||||||
|
|
||||||
#### In essence
|
#### In essence
|
||||||
<mark>SCIM compliant **open source Web SSO providers** and, **Applications with SCIM API** for user provisioning.</mark>
|
<mark>SCIM compliant **open source Web SSO providers** and, **Applications with SCIM API** for user provisioning.</mark>
|
||||||
|
|
|
@ -15,26 +15,26 @@ Its intent is to **reduce the cost and complexity** of user management operation
|
||||||
* **Applying existing models** (authentication, authorization, and privacy)
|
* **Applying existing models** (authentication, authorization, and privacy)
|
||||||
* Binding documents to provide **patterns for exchanging this schema using standard protocols**
|
* Binding documents to provide **patterns for exchanging this schema using standard protocols**
|
||||||
* Easily improve **GDPR compliance**
|
* Easily improve **GDPR compliance**
|
||||||
* **Consolidate the user experience** across multiple FOSS applications as one platform
|
* **Consolidate the user experience** across multiple FOSS applications as one platform
|
||||||
|
|
||||||
{{< grid >}}
|
{{< grid >}}
|
||||||
{{< card >}}
|
{{< card >}}
|
||||||
#### Model
|
#### Resource based
|
||||||
SCIM 2.0 is built on an object model where **a Resource is the common denominator** and all SCIM objects are derived from it.
|
In SCIM 2.0 **a Resource is the common denominator** and all SCIM objects are derived from it.
|
||||||
{{< /card >}}
|
{{< /card >}}
|
||||||
|
|
||||||
{{< card >}}
|
{{< card >}}
|
||||||
#### Rest API
|
#### Rest API
|
||||||
For manipulation of resources, with a set of operations, which **support everything** from **patching a specific attribute on a specific user** to doing **massive bulk updates**.
|
**An api to manipulate resources**, from patching a specific attribute to doing massive bulk updates.
|
||||||
{{< /card >}}
|
{{< /card >}}
|
||||||
|
|
||||||
{{< card >}}
|
{{< card >}}
|
||||||
#### Discover
|
#### Ends points
|
||||||
To **simplify interoperability**, SCIM provides **three end points** to discover supported features and specific attribute details.
|
SCIM provides **three end points** to **simplify interoperability** and discover features and details.
|
||||||
{{< /card >}}
|
{{< /card >}}
|
||||||
{{< /grid >}}
|
{{< /grid >}}
|
||||||
|
|
||||||
<a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
|
<a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
|
||||||
|
|
||||||
#### In essence
|
#### In essence
|
||||||
<mark>Make it **fast**, **cheap**, and **easy** to **move users in to**, **out of**, and **around the cloud**.</mark>
|
<mark>Make it **fast**, **cheap**, and **easy** to **move users in to**, **out of**, and **around the cloud**.</mark>
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
Hello world, this is a default list
|
|
|
@ -7,9 +7,9 @@
|
||||||
<article class="flex article">
|
<article class="flex article">
|
||||||
<section class="article-header flex">
|
<section class="article-header flex">
|
||||||
<h1>{{ .Params.title }}</h1>
|
<h1>{{ .Params.title }}</h1>
|
||||||
<p class="sous-titre">{{ .Params.description }}</p>
|
<!--<p class="">{{ .Params.description }}</p>-->
|
||||||
</section>
|
</section>
|
||||||
<section class="article-text">
|
<section class="article-content">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<main class="home flex">
|
<main class="home flex">
|
||||||
<section class="main-first flex align-center">
|
<section class="main-first flex align-center">
|
||||||
<!--{{- partial (printf "svg/illus-main.svg") . -}}-->
|
{{- partial (printf "svg/illus-home.svg") . -}}
|
||||||
{{- partial (printf "svg/illus-home2.svg") . -}}
|
<h1>Make identity managing <span class="mark">fast</span>, <span class="mark">simple</span> and <span class="mark">interoperable</span></h1>
|
||||||
<h1>Make identities managing <span class="mark">fast</span>, <span class="mark">simple</span> and <span class="mark">interoperable</span></h1>
|
|
||||||
<a class="btn lv1" href="#content">Discover SCIM ↓</a>
|
<a class="btn lv1" href="#content">Discover SCIM ↓</a>
|
||||||
<!--<img class="img-background" src="media/global.png"></img>-->
|
<!--<img class="img-background" src="media/global.png"></img>-->
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -1,4 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.34 56.69">
|
|
||||||
<polygon class="fill-yellow-color" points="28.34 28.35 0 56.69 0 40.94 12.59 28.35 28.34 28.35"/>
|
|
||||||
<polygon class="fill-orange-color" points="28.34 28.35 12.59 28.35 0 15.75 0 0 28.34 28.35"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 279 B |
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 48 KiB |
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.51 43.48">
|
|
||||||
<path d="M39.06,0H6.44C2.89,0,0,2.89,0,6.44v30.59c0,3.55,2.89,6.44,6.44,6.44H39.06c3.55,0,6.44-2.89,6.44-6.44V6.44c0-3.55-2.89-6.44-6.44-6.44ZM17.34,28.89v-7.09h11.4v7.09h-11.4Zm11.4,3v8.59h-11.4v-8.59h11.4ZM3,21.8H14.34v7.09H3v-7.09ZM28.74,11.19v7.62h-11.4v-7.62h11.4Zm3,0h10.77v7.62h-10.77v-7.62Zm-17.4,0v7.62H3v-7.62H14.34Zm17.4,10.62h10.77v7.09h-10.77v-7.09ZM3,37.04v-5.15H14.34v8.59H6.44c-1.9,0-3.44-1.54-3.44-3.44Zm36.06,3.44h-7.32v-8.59h10.77v5.15c0,1.9-1.54,3.44-3.44,3.44Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 563 B |
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.25 43.47">
|
|
||||||
<path d="M2.83,43.47c-.38,0-.76-.08-1.12-.23-1.04-.45-1.71-1.47-1.71-2.6V7.5C0,3.37,3.37,0,7.5,0H39.75c4.14,0,7.5,3.37,7.5,7.5V26.44c0,4.14-3.37,7.5-7.5,7.5H14.06l-9.28,8.75c-.54,.51-1.23,.77-1.94,.77ZM7.5,3c-2.48,0-4.5,2.02-4.5,4.5V40.25l9.86-9.3h26.88c2.48,0,4.5-2.02,4.5-4.5V7.5c0-2.48-2.02-4.5-4.5-4.5H7.5Z"/>
|
|
||||||
<path d="M37.26,11.11H11.05c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h26.21c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
<path d="M37.26,18.03H11.05c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h26.21c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
<path d="M24.9,24.96H11.05c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h13.86c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 750 B |
|
@ -1,14 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.81 43.48">
|
|
||||||
<path d="M29.56,43.48H6.44c-3.55,0-6.44-2.89-6.44-6.44V6.44C0,2.89,2.89,0,6.44,0H29.56c3.55,0,6.44,2.89,6.44,6.44v30.59c0,3.55-2.89,6.44-6.44,6.44ZM6.44,3c-1.9,0-3.44,1.55-3.44,3.44v30.59c0,1.9,1.54,3.44,3.44,3.44H29.56c1.9,0,3.44-1.54,3.44-3.44V6.44c0-1.9-1.54-3.44-3.44-3.44H6.44Z"/>
|
|
||||||
<rect x="25.49" y="12.07" width="21.73" height="8.71" transform="translate(-.97 30.52) rotate(-45)"/>
|
|
||||||
<polygon points="28.62 27.97 24.81 27.97 24.81 24.17 28.62 27.97"/>
|
|
||||||
<path d="M48.91,10.19l-6.16-6.16,2.1-2.1c.53-.53,1.21-.8,2.03-.8s1.5,.27,2.03,.8l2.1,2.1c.53,.53,.8,1.21,.8,2.03s-.27,1.5-.8,2.03l-2.1,2.1Z"/>
|
|
||||||
<path d="M14.82,26.97c-.13-.12-.25-.2-.36-.26-.12-.06-.25-.09-.4-.09-.17,0-.3,.03-.39,.1-.09,.07-.13,.18-.13,.34,0,.11,.05,.21,.14,.28,.09,.08,.21,.15,.34,.22,.14,.07,.29,.14,.44,.22,.16,.07,.31,.17,.45,.27s.25,.24,.34,.39c.09,.15,.14,.34,.14,.56,0,.34-.09,.62-.27,.86s-.46,.4-.82,.48v.73h-.68v-.7c-.21-.02-.42-.08-.65-.17s-.42-.21-.58-.36l.45-.69c.18,.14,.35,.24,.51,.3,.16,.07,.33,.1,.49,.1,.2,0,.34-.04,.43-.12,.09-.08,.14-.2,.14-.36,0-.12-.05-.22-.14-.31s-.21-.16-.34-.24c-.14-.08-.29-.15-.44-.23-.16-.08-.31-.17-.44-.28-.14-.11-.25-.23-.34-.38-.09-.14-.14-.32-.14-.53,0-.35,.09-.63,.28-.86,.19-.23,.45-.37,.78-.44v-.72h.68v.71c.22,.03,.42,.1,.59,.2,.17,.1,.32,.23,.45,.37l-.52,.59Z"/>
|
|
||||||
<path d="M18.52,26.97c-.13-.12-.25-.2-.36-.26-.12-.06-.25-.09-.4-.09-.17,0-.3,.03-.39,.1-.09,.07-.13,.18-.13,.34,0,.11,.05,.21,.14,.28,.09,.08,.21,.15,.34,.22,.14,.07,.29,.14,.44,.22,.16,.07,.31,.17,.45,.27s.25,.24,.34,.39c.09,.15,.14,.34,.14,.56,0,.34-.09,.62-.27,.86s-.46,.4-.82,.48v.73h-.68v-.7c-.21-.02-.42-.08-.65-.17s-.42-.21-.58-.36l.45-.69c.18,.14,.35,.24,.51,.3,.16,.07,.33,.1,.49,.1,.2,0,.34-.04,.43-.12,.09-.08,.14-.2,.14-.36,0-.12-.05-.22-.14-.31s-.21-.16-.34-.24c-.14-.08-.29-.15-.44-.23-.16-.08-.31-.17-.44-.28-.14-.11-.25-.23-.34-.38-.09-.14-.14-.32-.14-.53,0-.35,.09-.63,.28-.86,.19-.23,.45-.37,.78-.44v-.72h.68v.71c.22,.03,.42,.1,.59,.2,.17,.1,.32,.23,.45,.37l-.52,.59Z"/>
|
|
||||||
<path d="M22.22,26.97c-.13-.12-.25-.2-.36-.26-.12-.06-.25-.09-.4-.09-.17,0-.3,.03-.39,.1-.09,.07-.13,.18-.13,.34,0,.11,.05,.21,.14,.28,.09,.08,.21,.15,.34,.22,.14,.07,.29,.14,.44,.22,.16,.07,.31,.17,.45,.27s.25,.24,.34,.39c.09,.15,.14,.34,.14,.56,0,.34-.09,.62-.27,.86s-.46,.4-.82,.48v.73h-.68v-.7c-.21-.02-.42-.08-.65-.17s-.42-.21-.58-.36l.45-.69c.18,.14,.35,.24,.51,.3,.16,.07,.33,.1,.49,.1,.2,0,.34-.04,.43-.12,.09-.08,.14-.2,.14-.36,0-.12-.05-.22-.14-.31s-.21-.16-.34-.24c-.14-.08-.29-.15-.44-.23-.16-.08-.31-.17-.44-.28-.14-.11-.25-.23-.34-.38-.09-.14-.14-.32-.14-.53,0-.35,.09-.63,.28-.86,.19-.23,.45-.37,.78-.44v-.72h.68v.71c.22,.03,.42,.1,.59,.2,.17,.1,.32,.23,.45,.37l-.52,.59Z"/>
|
|
||||||
<path d="M10.75,34.86h-2.97c-.84,0-1.52-.68-1.52-1.52v-2.97c0-.55,.45-1,1-1s1,.45,1,1v2.49h2.49c.55,0,1,.45,1,1s-.45,1-1,1Z"/>
|
|
||||||
<path d="M28.21,34.86h-2.97c-.55,0-1-.45-1-1s.45-1,1-1h2.49v-2.49c0-.55,.45-1,1-1s1,.45,1,1v2.97c0,.84-.68,1.52-1.52,1.52Z"/>
|
|
||||||
<path d="M7.27,27.25c-.55,0-1-.45-1-1v-2.97c0-.84,.68-1.52,1.52-1.52h2.97c.55,0,1,.45,1,1s-.45,1-1,1h-2.49v2.49c0,.55-.45,1-1,1Z"/>
|
|
||||||
<path d="M27.76,11H8.72c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H27.76c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
<path d="M25.08,17.93H8.72c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H25.08c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 3.3 KiB |
|
@ -1,10 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.81 43.48">
|
|
||||||
<path d="M28.41,11.11H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H28.41c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
<path d="M28.41,18.03H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H28.41c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
<path d="M25.73,24.96H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H25.73c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
<path d="M19.44,31.89H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h10.06c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
|
|
||||||
<path d="M29.56,43.48H6.44c-3.55,0-6.44-2.89-6.44-6.44V6.44C0,2.89,2.89,0,6.44,0H29.56c3.55,0,6.44,2.89,6.44,6.44v30.59c0,3.55-2.89,6.44-6.44,6.44ZM6.44,3c-1.9,0-3.44,1.55-3.44,3.44v30.59c0,1.9,1.54,3.44,3.44,3.44H29.56c1.9,0,3.44-1.54,3.44-3.44V6.44c0-1.9-1.54-3.44-3.44-3.44H6.44Z"/>
|
|
||||||
<rect x="23.49" y="21.37" width="21.73" height="8.71" transform="translate(-8.13 31.83) rotate(-45)"/>
|
|
||||||
<polygon points="26.61 37.27 22.81 37.27 22.81 33.47 26.61 37.27"/>
|
|
||||||
<path d="M46.91,19.49l-6.16-6.16,2.1-2.1c.53-.53,1.21-.8,2.03-.8s1.5,.27,2.03,.8l2.1,2.1c.53,.53,.8,1.21,.8,2.03s-.27,1.5-.8,2.03l-2.1,2.1Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.1 KiB |
|
@ -1,4 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.33 43.72">
|
|
||||||
<path d="M2.55,34.93c-.34,0-.68-.07-1.01-.21-.94-.4-1.54-1.32-1.54-2.34V6.24C0,2.8,2.8,0,6.24,0H31.68c3.44,0,6.24,2.8,6.24,6.24v14.94c0,3.44-2.8,6.24-6.24,6.24H11.53l-7.23,6.82c-.48,.46-1.11,.7-1.75,.7ZM6.24,3c-1.78,0-3.24,1.45-3.24,3.24V31.34l7.34-6.92H31.68c1.78,0,3.24-1.45,3.24-3.24V6.24c0-1.78-1.45-3.24-3.24-3.24H6.24Z"/>
|
|
||||||
<path d="M44.6,11.79h-3.7v13.97c0,1.99-1.86,4.88-3.93,4.88H14.42v.82c0,2.62,2.12,4.74,4.74,4.74h20.74l7.66,7.23c.67,.63,1.77,.16,1.77-.76V16.52c0-2.62-2.12-4.74-4.74-4.74Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 586 B |
|
@ -1,10 +0,0 @@
|
||||||
<svg width="43" height="43" viewBox="0 0 43 43" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M24.2958 13.6368L12.0859 25.8467L16.98 30.7407L29.1899 18.5309L24.2958 13.6368Z" />
|
|
||||||
<path d="M15 31H12V28L15 31Z" />
|
|
||||||
<path d="M30.7594 17L26 12.2406L27.6225 10.6181C28.032 10.2086 28.5574 10 29.1909 10C29.8245 10 30.3499 10.2086 30.7594 10.6181L32.3819 12.2406C32.7914 12.6501 33 13.1755 33 13.8091C33 14.4426 32.7914 14.968 32.3819 15.3775L30.7594 17Z" />
|
|
||||||
<circle cx="38.5" cy="4.5" r="4.5" />
|
|
||||||
<circle cx="4.5" cy="4.5" r="4.5" />
|
|
||||||
<circle cx="38.5" cy="38.5" r="4.5" />
|
|
||||||
<circle cx="4.5" cy="38.5" r="4.5" />
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M37 6H6V37H37V6ZM4 4V39H39V4H4Z" />
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 694 B |
|
@ -1,5 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.49 43.48">
|
|
||||||
<path d="M13.37,33.31c-3.63,0-6.78-1.12-9.37-3.34C1.35,27.69,0,24.85,0,21.53,0,18.71,.98,16.16,2.91,13.96c1.73-1.97,3.95-3.3,6.62-3.98,1.07-2.85,2.99-5.21,5.71-7.03,2.94-1.96,6.3-2.95,10.01-2.95,4.56,0,8.5,1.42,11.7,4.23,2.91,2.56,4.54,5.65,4.85,9.23,2.26,.45,4.21,1.48,5.79,3.05,1.92,1.91,2.9,4.19,2.9,6.77,0,2.81-1.12,5.22-3.34,7.17-2.16,1.9-4.81,2.86-7.86,2.86H13.37ZM25.25,3c-3.1,0-5.91,.82-8.34,2.45-2.42,1.62-3.99,3.66-4.8,6.25l-.26,.86-.88,.17c-2.42,.48-4.32,1.53-5.8,3.21-1.46,1.66-2.16,3.49-2.16,5.59,0,2.44,.97,4.45,2.96,6.15,2.06,1.76,4.49,2.62,7.42,2.62h25.91c2.34,0,4.26-.69,5.88-2.11,1.56-1.37,2.32-2.98,2.32-4.91,0-1.78-.66-3.3-2.01-4.64-1.4-1.39-3.12-2.17-5.28-2.39l-1.35-.14v-1.36c0-3.27-1.27-5.98-3.89-8.27-2.67-2.35-5.86-3.49-9.72-3.49Z"/>
|
|
||||||
<path d="M25.65,25.75l-6.13-6.13-6.13,6.13c-.59,.59-.59,1.54,0,2.12s1.54,.59,2.12,0l2.51-2.51v16.62c0,.83,.67,1.5,1.5,1.5s1.5-.67,1.5-1.5V25.36l2.51,2.51c.29,.29,.68,.44,1.06,.44s.77-.15,1.06-.44c.59-.59,.59-1.54,0-2.12Z"/>
|
|
||||||
<path d="M37.69,35.19c-.59-.59-1.54-.59-2.12,0l-2.51,2.51V21.08c0-.83-.67-1.5-1.5-1.5s-1.5,.67-1.5,1.5v16.62l-2.51-2.51c-.59-.59-1.54-.59-2.12,0-.59,.59-.59,1.54,0,2.12l6.13,6.13,6.13-6.13c.59-.59,.59-1.54,0-2.12Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.3 KiB |
|
@ -1,4 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.26 43.77">
|
|
||||||
<path d="M20.33,28.48c-.66,0-1.3-.28-1.74-.78l-6.1-6.87c-1.34-1.51-1.67-3.61-.85-5.48,.79-1.8,2.48-2.94,4.42-2.98h.12c1.63,0,3.12,.69,4.16,1.82,1.04-1.13,2.54-1.82,4.16-1.82h.12c1.94,.04,3.63,1.18,4.42,2.98,.82,1.87,.49,3.97-.85,5.48l-6.1,6.87c-.44,.5-1.07,.78-1.74,.78Zm-4.16-13.11c-1.16,.02-1.63,.84-1.78,1.19-.27,.61-.32,1.54,.35,2.29l5.6,6.3,5.6-6.3c.67-.75,.62-1.67,.35-2.29-.15-.35-.63-1.16-1.73-1.19l.03-1.5-.08,1.5c-1.22,0-2.28,.83-2.58,2.01-.19,.73-.84,1.23-1.58,1.23s-1.39-.5-1.58-1.22c-.3-1.19-1.36-2.02-2.59-2.02Z"/>
|
|
||||||
<path d="M39.01,0c-2.29,0-4.33,1.07-5.66,2.73H3.86C1.73,2.73,0,4.46,0,6.59V31.99c0,2.13,1.73,3.86,3.86,3.86h4.58v6.11l.03,1.01,1.81,.8,9.09-7.91h17.43c2.13,0,3.86-1.73,3.86-3.86V14.31c3.21-.75,5.61-3.62,5.61-7.06,0-4.01-3.25-7.25-7.25-7.25Zm-1.35,31.99c0,.48-.39,.86-.86,.86H18.23s-6.79,5.92-6.79,5.92v-4.37l-.05-1.55H3.86c-.48,0-.86-.39-.86-.86V6.59c0-.48,.39-.86,.86-.86H31.91c-.11,.49-.16,1-.16,1.53,0,3.54,2.54,6.49,5.9,7.12V31.99Zm1.35-23.25c-.82,0-1.49-.67-1.49-1.49s.67-1.49,1.49-1.49,1.49,.67,1.49,1.49-.67,1.49-1.49,1.49Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.1 KiB |
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.56 43.56">
|
|
||||||
<path d="M43.56,21.78C43.56,9.77,33.79,0,21.78,0S0,9.77,0,21.78s9.77,21.78,21.78,21.78h0c12.01,0,21.78-9.77,21.78-21.78Zm-3.08-1.5h-7.42c-.46-6.21-2.97-12.13-7.08-16.79,7.86,1.81,13.84,8.55,14.5,16.79Zm-20.2,0h-6.78c.47-5.7,2.88-11.12,6.78-15.31v15.31Zm0,3v15.6c-4.16-3.95-6.62-9.48-6.85-15.6h6.85Zm3,15.6v-15.6h6.85c-.23,6.12-2.69,11.65-6.85,15.6Zm0-18.6V4.97c3.9,4.18,6.31,9.61,6.78,15.31h-6.78ZM17.57,3.49c-4.1,4.65-6.62,10.58-7.08,16.79H3.08C3.73,12.04,9.71,5.3,17.57,3.49ZM3.08,23.28h7.36s0,.05,0,.08c.23,6.38,2.62,12.2,6.69,16.6-7.64-1.96-13.4-8.59-14.05-16.67Zm23.36,16.67c4.07-4.39,6.46-10.21,6.69-16.6,0-.03,0-.05,0-.08h7.36c-.64,8.08-6.41,14.71-14.05,16.67Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 749 B |
|
@ -1,5 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.24 43.48">
|
|
||||||
<path d="M27.66,25.22c-5.19,0-9.41-4.22-9.41-9.41s4.22-9.41,9.41-9.41,9.41,4.22,9.41,9.41-4.22,9.41-9.41,9.41Zm0-15.82c-3.53,0-6.41,2.88-6.41,6.41s2.88,6.41,6.41,6.41,6.41-2.88,6.41-6.41-2.88-6.41-6.41-6.41Z"/>
|
|
||||||
<circle cx="12.92" cy="10.45" r="2.42"/>
|
|
||||||
<path d="M53.24,15.81c0-8.72-7.09-15.81-15.81-15.81H15.81C7.09,0,0,7.09,0,15.81s7.09,15.81,15.81,15.81h4.64l-4.34,8.85h-4.75c-.83,0-1.5,.67-1.5,1.5s.67,1.5,1.5,1.5h5.68s0,0,0,0c0,0,0,0,0,0h21.45s0,0,0,0c0,0,0,0,0,0h5.45c.83,0,1.5-.67,1.5-1.5s-.67-1.5-1.5-1.5h-4.52l-4.34-8.85h2.33c8.72,0,15.81-7.09,15.81-15.81ZM3,15.81C3,8.75,8.75,3,15.81,3h21.61c7.07,0,12.81,5.75,12.81,12.81s-5.75,12.81-12.81,12.81h-4.47c-.19-.04-.38-.04-.57,0h-9.23c-.19-.04-.39-.04-.58,0h-6.77c-7.07,0-12.81-5.75-12.81-12.81Zm33.09,24.67H19.45l4.34-8.85h7.96l4.34,8.85Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 885 B |
|
@ -1,6 +1,6 @@
|
||||||
<div class="card flex">
|
<div class="card flex">
|
||||||
{{ if .Get "icone" }}
|
{{ if .Get "icon" }}
|
||||||
{{ partial (printf "svg/%s.svg" (.Get "icone")) . }}
|
{{ partial (printf "svg/%s.svg" (.Get "icon")) . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ .Inner | markdownify }}
|
{{ .Inner | markdownify }}
|
||||||
</div>
|
</div>
|
|
@ -1,4 +1,5 @@
|
||||||
<div class="card flex implementation" data-type="{{ .Get "type" }}">
|
<div class="space-between card flex implementation {{ if .Get "type"}}{{ .Get "type" }}{{ end }}" data-type="{{ if .Get "type"}}{{ .Get "type" }}{{ end }}">
|
||||||
|
<div class="flex">
|
||||||
{{ .Inner | markdownify }}
|
{{ .Inner | markdownify }}
|
||||||
|
|
||||||
{{ if .Get "type" }}
|
{{ if .Get "type" }}
|
||||||
|
@ -14,7 +15,10 @@
|
||||||
{{ if .Get "devs" }}
|
{{ if .Get "devs" }}
|
||||||
<p class="devs">Devs: {{ .Get "devs" }}</p>
|
<p class="devs">Devs: {{ .Get "devs" }}</p>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
{{ if .Get "link" }}
|
{{ if .Get "link" }}
|
||||||
<a class="btn lv1" target="_blank" href="{{ .Get "link" }}">specs ↗</a>
|
<a class="btn lv1" target="_blank" href="{{ .Get "link" }}">specs ↗</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -2,7 +2,7 @@
|
||||||
/* GENERAL */
|
/* GENERAL */
|
||||||
/****************************/
|
/****************************/
|
||||||
|
|
||||||
/* Global */
|
/* GLOBAL */
|
||||||
:root {
|
:root {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
|
@ -10,7 +10,6 @@
|
||||||
--black:#102a2d;
|
--black:#102a2d;
|
||||||
--black-dark:#102a2d;
|
--black-dark:#102a2d;
|
||||||
--white:#FFFDEA;
|
--white:#FFFDEA;
|
||||||
/* --yellow:#FFF78C; */
|
|
||||||
--yellow:#FFF468;
|
--yellow:#FFF468;
|
||||||
--yellow-dark:#FCBC3F;
|
--yellow-dark:#FCBC3F;
|
||||||
--green:#D5E052;
|
--green:#D5E052;
|
||||||
|
@ -49,7 +48,6 @@ body{
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TYPO */
|
/* TYPO */
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Source Code Pro';
|
font-family: 'Source Code Pro';
|
||||||
src: url("../fonts/SourceCodePro-Light.ttf") format('truetype');
|
src: url("../fonts/SourceCodePro-Light.ttf") format('truetype');
|
||||||
|
@ -128,51 +126,7 @@ body{
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* block */
|
/* TEXT */
|
||||||
.flex{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.align-center{
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.space-between{
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
img, .w-100{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
figcaption{
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-right{
|
|
||||||
float: right;
|
|
||||||
margin-left: 2em;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
.float-left{
|
|
||||||
float: left;
|
|
||||||
margin-right: 2em;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Texte */
|
|
||||||
h1{
|
h1{
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
font-weight: 1000;
|
font-weight: 1000;
|
||||||
|
@ -238,6 +192,7 @@ mark strong{
|
||||||
color: var(--marked-color);
|
color: var(--marked-color);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.mark{
|
span.mark{
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
background-color: var(--marked-color);
|
background-color: var(--marked-color);
|
||||||
|
@ -258,11 +213,14 @@ li{
|
||||||
max-width: 32em;
|
max-width: 32em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.underline{
|
figcaption{
|
||||||
text-decoration: underline;
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* lien */
|
|
||||||
|
/* LINK */
|
||||||
a{color: inherit;cursor:default;}
|
a{color: inherit;cursor:default;}
|
||||||
|
|
||||||
a:not(.btn):not(.active):hover{
|
a:not(.btn):not(.active):hover{
|
||||||
|
@ -271,7 +229,7 @@ a:not(.btn):not(.active):hover{
|
||||||
text-decoration: underline!important;
|
text-decoration: underline!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Svg */
|
/* SVG */
|
||||||
svg{
|
svg{
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
@ -283,61 +241,22 @@ svg{
|
||||||
.fill-marked-color{
|
.fill-marked-color{
|
||||||
fill: var(--marked-color);
|
fill: var(--marked-color);
|
||||||
}
|
}
|
||||||
|
/* Arrow */
|
||||||
|
|
||||||
.blue-1{
|
|
||||||
--marked-color:var(--blue-1);
|
|
||||||
--marked-color-dark:var(--blue-1-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-2{
|
|
||||||
--marked-color:var(--blue-2);
|
|
||||||
--marked-color-dark:var(--blue-2-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.white{
|
|
||||||
--marked-color:var(--white);
|
|
||||||
--marked-color-dark:var(--blue-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.green{
|
|
||||||
--marked-color:var(--green);
|
|
||||||
--marked-color-dark:var(--green-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow{
|
|
||||||
--marked-color:var(--yellow);
|
|
||||||
--marked-color-dark:var(--yellow-dark);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*[class*="bck-"]{
|
|
||||||
color: var(--black);
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.bck-marked{
|
|
||||||
background-color: var(--marked-color);
|
|
||||||
color: var(--black);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.arrow svg{
|
.arrow svg{
|
||||||
width: 1.2em;
|
width: 1.2em;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
.arrow-left svg{
|
||||||
/* Arrow */
|
|
||||||
.arrow-left{
|
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
.arrow-up svg{
|
.arrow-up svg{
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
}
|
}
|
||||||
.arrow-down{
|
.arrow-down svg{
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button */
|
/* BUTTON */
|
||||||
.btn, button{
|
.btn, button{
|
||||||
text-decoration: inherit;
|
text-decoration: inherit;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
|
@ -348,7 +267,7 @@ svg{
|
||||||
}
|
}
|
||||||
.btn:not(.active):hover{
|
.btn:not(.active):hover{
|
||||||
transform:translateY(-2px) scale(1.01);
|
transform:translateY(-2px) scale(1.01);
|
||||||
transition: 0.5s;
|
transition: 0.35s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -380,11 +299,87 @@ svg{
|
||||||
border: 2px solid var(--marked-color);
|
border: 2px solid var(--marked-color);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
/****************************/
|
|
||||||
/* BODY */
|
|
||||||
/****************************/
|
|
||||||
|
|
||||||
/* HEADER */
|
/* TO USE CLASSES */
|
||||||
|
.flex{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center{
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-between{
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseline{
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
img, .w-100{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right{
|
||||||
|
float: right;
|
||||||
|
margin-left: 2em;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.float-left{
|
||||||
|
float: left;
|
||||||
|
margin-right: 2em;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.underline{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-1{
|
||||||
|
--marked-color:var(--blue-1);
|
||||||
|
--marked-color-dark:var(--blue-1-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-2{
|
||||||
|
--marked-color:var(--blue-2);
|
||||||
|
--marked-color-dark:var(--blue-2-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.white{
|
||||||
|
--marked-color:var(--white);
|
||||||
|
--marked-color-dark:var(--yellow-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.green{
|
||||||
|
--marked-color:var(--green);
|
||||||
|
--marked-color-dark:var(--green-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow{
|
||||||
|
--marked-color:var(--yellow);
|
||||||
|
--marked-color-dark:var(--yellow-dark);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bck-marked{
|
||||||
|
background-color: var(--marked-color);
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/****************************/
|
||||||
|
/* HEADER */
|
||||||
|
/****************************/
|
||||||
header{
|
header{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -418,6 +413,8 @@ header>div{
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* MENU */
|
||||||
|
|
||||||
#menu ul {
|
#menu ul {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
@ -451,8 +448,48 @@ header .btn.lv2{
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/****************************/
|
||||||
|
/* FOOTER */
|
||||||
|
/****************************/
|
||||||
|
footer{
|
||||||
|
border-top: 0.2px dashed var(--text-color);
|
||||||
|
width: 80%;
|
||||||
|
margin-right:auto;
|
||||||
|
margin-left:auto;
|
||||||
|
padding-top: 2em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
/* MAIN */
|
footer img{
|
||||||
|
height: 1.5rem;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer ul{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer h4{
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.up-page{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2em;
|
||||||
|
right: 2em;
|
||||||
|
padding: 0.5em;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/****************************/
|
||||||
|
/* BODY */
|
||||||
|
/****************************/
|
||||||
main{
|
main{
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 3.4em;
|
margin-top: 3.4em;
|
||||||
|
@ -474,7 +511,6 @@ main{
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* SVG ANIM */
|
/* SVG ANIM */
|
||||||
g.app{
|
g.app{
|
||||||
transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
|
transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
|
||||||
|
@ -506,54 +542,12 @@ g.server.svg-active rect:first-of-type {
|
||||||
fill: var(--marked-color);
|
fill: var(--marked-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
g.word{
|
g.word{
|
||||||
border: solid 1px var(--paper-color);
|
border: solid 1px var(--paper-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FOOTER */
|
|
||||||
footer{
|
|
||||||
border-top: 0.2px dashed var(--text-color);
|
|
||||||
width: 80%;
|
|
||||||
margin-right:auto;
|
|
||||||
margin-left:auto;
|
|
||||||
padding-top: 2em;
|
|
||||||
font-size: 0.8em;
|
|
||||||
padding-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer img{
|
/* CONTENT */
|
||||||
height: 1.5rem;
|
|
||||||
width: auto;
|
|
||||||
margin-right: 1rem;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer ul{
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer h4{
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.baseline{
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.up-page{
|
|
||||||
position: fixed;
|
|
||||||
bottom: 2em;
|
|
||||||
right: 2em;
|
|
||||||
padding: 0.5em;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Section */
|
|
||||||
.section-home {
|
.section-home {
|
||||||
padding-bottom: 3rem;
|
padding-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
@ -590,6 +584,7 @@ footer h4{
|
||||||
margin-bottom: 4em;
|
margin-bottom: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* cards default */
|
||||||
.card{
|
.card{
|
||||||
border: .1px var(--text-color) solid;
|
border: .1px var(--text-color) solid;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
@ -602,6 +597,25 @@ footer h4{
|
||||||
.card h4{margin-top: 1.5em;}
|
.card h4{margin-top: 1.5em;}
|
||||||
.card p{margin-bottom: .5em;}
|
.card p{margin-bottom: .5em;}
|
||||||
|
|
||||||
|
/* cards implementation */
|
||||||
|
.implementation p{
|
||||||
|
margin-top: .3em;
|
||||||
|
margin-bottom: .3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.implementation h4{
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.implementation .lv1{
|
||||||
|
padding: .1em .3em;
|
||||||
|
margin-top: .5em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ACTIVABLE TRIGGERS */
|
||||||
|
/* Switch-boxes */
|
||||||
#switch-box-trigger{
|
#switch-box-trigger{
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
@ -622,7 +636,30 @@ footer h4{
|
||||||
background-color: var(--paper-color);
|
background-color: var(--paper-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Implementation type */
|
||||||
|
.type{
|
||||||
|
font-weight: 1000;
|
||||||
|
font-size: .75em;
|
||||||
|
}
|
||||||
|
.server{
|
||||||
|
color: var(--blue-2);
|
||||||
|
--marked-color: var(--blue-2);
|
||||||
|
--marked-color-dark:var(--blue-2-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client{
|
||||||
|
color: var(--yellow);
|
||||||
|
--marked-color: var(--yellow);
|
||||||
|
--marked-color-dark:var(--yellow-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.server.client{
|
||||||
|
color: var(--blue-1);
|
||||||
|
--marked-color: var(--blue-1);
|
||||||
|
--marked-color-dark:var(--blue-1-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TABLE */
|
||||||
table{
|
table{
|
||||||
table-layout: auto;
|
table-layout: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -671,37 +708,6 @@ table svg:nth-child(2){
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.implementation p{
|
|
||||||
margin-top: .3em;
|
|
||||||
margin-bottom: .3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.implementation h4{
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.implementation .lv1{
|
|
||||||
padding: .1em .3em;
|
|
||||||
margin-top: .5em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type{
|
|
||||||
font-weight: 1000;
|
|
||||||
font-size: .75em;
|
|
||||||
}
|
|
||||||
.server{
|
|
||||||
color: var(--blue-2);
|
|
||||||
--marked-color: var(--blue-2)
|
|
||||||
}
|
|
||||||
|
|
||||||
.client{
|
|
||||||
color: var(--yellow);
|
|
||||||
--marked-color: var(--yellow)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************/
|
/*********************/
|
||||||
/* MOBILE */
|
/* MOBILE */
|
||||||
/*********************/
|
/*********************/
|
||||||
|
|
|
@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Activate button
|
// Select implementation type
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const triggerButtons = document.querySelectorAll('button.activable.implementationtype');
|
const triggerButtons = document.querySelectorAll('button.activable.implementationtype');
|
||||||
const implementationCards = document.querySelectorAll('.implementation');
|
const implementationCards = document.querySelectorAll('.implementation');
|
||||||
|
@ -152,7 +152,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Scroll menu
|
// Scroll menu
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
let lastScrollTopForMenu = 0;
|
let lastScrollTopForMenu = 0;
|
||||||
|
|
||||||
|
|
|
@ -4,5 +4,4 @@ description = "Hugo theme"
|
||||||
tags = ["hugo", "hugo-theme", "markdown"]
|
tags = ["hugo", "hugo-theme", "markdown"]
|
||||||
[author]
|
[author]
|
||||||
Name = "Timothé Jeanne"
|
Name = "Timothé Jeanne"
|
||||||
Website = "timothejeanne.net"
|
|
||||||
|
|
||||||
|
|