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,10 +1,10 @@
|
||||||
---
|
---
|
||||||
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).
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
|
|
@ -19,18 +19,18 @@ Its intent is to **reduce the cost and complexity** of user management operation
|
||||||
|
|
||||||
{{< 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 >}}
|
||||||
|
|
||||||
|
|
|
@ -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"
|
|
||||||
|
|
||||||
|
|