mobile-version

content/implementations/_index.md

@@ -17,7 +17,7 @@ color : blue-1
 #### Element
 {{< /implementation >}}
 
-{{< implementation type="client" devs="IndieHosters" link="https://scim2-cli.readthedocs.io/en/latest/#">}}
+{{< implementation type="client" devs="Yaal" link="https://scim2-cli.readthedocs.io/en/latest/#">}}
 #### Cli
 {{< /implementation >}}
 {{< /grid >}}

content/overview/comparison.md

@@ -8,7 +8,10 @@ weight : 4
 {{< switch-box title="Ldap" >}}
 With this LDAP approach **everything is centralized** (except authorization).
 
-![LDAP diagram](media/ldap-diagram.svg)
+<picture>
+    <source srcset="media/small/ldap-diagram.svg" media="(max-width: 768px)">
+    <img src="media/ldap-diagram.svg" alt="LDAP diagram">
+</picture>
 
 **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 >}}
@@ -16,20 +19,29 @@ With this LDAP approach **everything is centralized** (except authorization).
 {{< switch-box title="Ldap+SSO" >}}
 This architecture **tackles the two main drawbacks of the only LDAP approach** : the missing single sign-on and the security vulnerability. **Authentication is delegated to other web protocols** (like OAuth, OIDC or SAML). This way, the user logs in only once to the identity provider.
 
-![LDAP with SSO diagram](media/ldap-sso-diagram.svg)
+<picture>
+    <source srcset="media/small/ldap-sso-diagram.svg" media="(max-width: 768px)">
+    <img src="media/ldap-sso-diagram.svg" alt="LDAP with SSO diagram">
+</picture>
 {{< /switch-box >}}
 
 
 {{< switch-box title="SSO" >}}
 On modern web infrastructure, LDAP started to be abandoned because **loose provisioning can also be done via SSO protocols.**
 
-![SSO only diagram](media/sso-diagram.svg)
+<picture>
+    <source srcset="media/small/sso-diagram.svg" media="(max-width: 768px)">
+    <img src="media/sso-diagram.svg" alt="SSO only diagram">
+</picture>
 {{< /switch-box >}}
 
 {{< switch-box title="SSO+SCIM" >}}
 **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)
+<picture>
+    <source srcset="media/small/sso-scim-diagram.svg" media="(max-width: 768px)">
+    <img src="media/sso-scim-diagram.svg" alt="SSO with SCIM diagram">
+</picture>
 {{< /switch-box >}}
 
 | | LDAP | LDAP & SSO | SSO | SSO & SCIM |

content/overview/identity-management.md

@@ -4,7 +4,13 @@ description : "What we speak about and in **which environment**. We must agree o
 color : yellow
 weight : 1
 ---
-![basics of identity management](media/illus-basics.svg)
+
+<picture>
+    <source srcset="media/small/illus-basics.svg" media="(max-width: 768px)">
+    <img src="media/illus-basics.svg" alt="Illustation of the basics of identity magagment">
+</picture>
+
+
 {{< grid >}}
 {{< card icon="user" >}}
 #### Authentication
@@ -26,7 +32,7 @@ Where are user’s identity & credentials stored?
 How to manage & transfer user’s identity ?
 {{< /card >}}
 {{< /grid >}}
-<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right">
+<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right w-60">
 
 ### 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.

themes/Indiiie/layouts/index.html

@@ -1,7 +1,8 @@
 {{ define "main" }}
 <main class="home flex">
 <section class="main-first flex align-center">
-    {{- partial (printf "svg/illus-home.svg") . -}}
+    {{- partial (printf "svg/illus-home-small.svg") . -}}
+    <!--{{- partial (printf "svg/illus-home.svg") . -}}-->
     <h1>Make identity 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>
   <!--<img class="img-background" src="media/global.png"></img>-->

themes/Indiiie/layouts/partials/footer.html

@@ -5,12 +5,12 @@
     
     <h4>Collaborators</h4>
     <ul class="flex-row">
-    <img src="{{ "media/logo/ih.svg" | absURL }}">
-    <img src="{{ "media/logo/yaal.svg" | absURL }}">
-    <img src="{{ "media/logo/audriga.svg" | absURL }}">
-    <img src="{{ "media/logo/fairkom.svg" | absURL }}">
-    <img src="{{ "media/logo/greenhost.svg" | absURL }}">
-    <img src="{{ "media/logo/ngi.png" | absURL }}">
+    <img src="{{ "media/logo/ih.svg" | relURL }}">
+    <img src="{{ "media/logo/yaal.svg" | relURL }}">
+    <img src="{{ "media/logo/audriga.svg" | relURL }}">
+    <img src="{{ "media/logo/fairkom.svg" | relURL }}">
+    <img src="{{ "media/logo/greenhost.svg" | relURL }}">
+    <img src="{{ "media/logo/ngi.png" | relURL }}">
     </ul>
 
 

themes/Indiiie/layouts/partials/header.html

@@ -1,17 +1,22 @@
 <header id="header">
     {{ $currentPath := .Permalink }} 
-    <div class="flex-row space-between baseline">
-        <div class="flex-row baseline">
+    <div class="flex-row baseline">
         <div id="logo">
             {{- partial (printf "svg/scim.svg") . -}}
         </div>
-            <nav id="menu" class="flex-row">
-                <ul class="flex-row">
-                    <li><a class="{{ if eq $currentPath (absURL "/") }}active{{ end }}" href="{{ "/" | absURL }}">Overview</a></li>
-                    <li><a class="{{ if eq $currentPath (absURL "/implementations/") }}active{{ end }}" href="{{ "/implementations/" | absURL }}">Implementations</a></li>
-                </ul>
-            </nav>
+        <div id="logo-menu">
+            <a>{{- partial (printf "svg/menu.svg") . -}}</a>
         </div>
-        <a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
+        <nav id="menu" class="flex-row space-between baseline w-80">
+            <div>
+            <ul class="flex-row">
+                <li><a class="{{ if eq $currentPath (absURL "/") }}active{{ end }}" href="{{ "/" | absURL }}">Overview</a></li>
+                <li><a class="{{ if eq $currentPath (absURL "/implementations/") }}active{{ end }}" href="{{ "/implementations/" | absURL }}">Implementations</a></li>
+            </ul>
+            </div>
+            <div>
+                <a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
+            </div>
+        </nav>
     </div>
 </header>

themes/Indiiie/layouts/partials/svg/menu.svg

@@ -0,0 +1,5 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H8" stroke="white" stroke-linecap="round"/>
+<path d="M1 4H8" stroke="white" stroke-linecap="round"/>
+<path d="M1 7H8" stroke="white" stroke-linecap="round"/>
+</svg>

themes/Indiiie/static/css/style.css

@@ -37,7 +37,7 @@
 }
 
 p:not(:has(img)), ul, li, mark{
-    font-size: clamp(.875rem, 3.966vw, 1.1875rem);
+    font-size: clamp(.875rem, 3.75vw, 1.1rem);
     max-width: 36em;
     font-weight: normal;
 }
@@ -76,7 +76,7 @@ body{
 
 /* TEXT */
 h1{
-    font-size: 2.5em;
+    font-size: 2.1em;
     font-weight: 1000;
     max-width: 16em;
     padding: 0;
@@ -87,9 +87,10 @@ h1{
 }
 
 h2{
-    font-size: 1.8em;
+    font-size: 1.5em;
     text-transform: uppercase;
     font-weight: 1000;
+    text-align: center;
     padding: 0;
     margin: 0;
     margin-bottom: .5em;
@@ -117,7 +118,7 @@ h4{
     background-color: var(--marked-color);
     color: var(--paper-color);
     margin-bottom: 0;
-    font-size: 1.2em;
+    font-size: 1em;
     font-weight: 500;
     margin-top: 3em;
     width: fit-content;
@@ -173,7 +174,7 @@ figcaption{
 
 
 /* LINK */
-a{color: inherit;cursor:default;}
+a{color: inherit;cursor:default;font-size: inherit;}
 
 a:not(.btn):not(.active):hover{
     color: var(--marked-color);
@@ -213,9 +214,10 @@ svg{
     text-decoration: inherit;
     font-weight: bolder;
     font-size: 1.15rem;
-    padding: .5em 1.2em;
+    padding: 1% 2.5%;
     border-radius: 2px;
     border: 2px solid var(--paper-color);
+    margin-bottom: .5em;
 }
 .btn:not(.active):hover{
     transform:translateY(-2px) scale(1.01);
@@ -278,9 +280,23 @@ svg{
     align-items: baseline;
 }
 
-img, .w-100{
+.w-100{
     width: 100%;
 }
+.w-80{
+    width: 83%;
+}
+
+img{
+    width: 100%;
+    max-width: 720px;
+}
+
+picture{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
 
 .float-right{
     float: right;
@@ -335,7 +351,7 @@ img, .w-100{
 header{
     width: 100%;
     top: 0;
-    padding: .5em 0em;
+    padding:1% 0%;
     position: fixed;
     z-index: 100;
     --paper-color: var(--black-dark);
@@ -364,6 +380,15 @@ header>div{
     height: 100%;
     width: auto;
 }
+#logo-menu{
+    height: 1.2em;
+    display: none;
+}
+
+#logo-menu svg{
+    height: 100%;
+    width: auto;
+}
 
 /* MENU */
 
@@ -391,7 +416,7 @@ header .btn.lv2{
     font-weight : normal;
     padding: .2em .4em;
     border: none;
-    background-color: var(--black);
+    background-color: var(--paper-color);
 }
 
 #menu a.active{
@@ -454,14 +479,14 @@ main{
     width: fit-content;
     margin: 2em auto;
     max-width: 80%;
-    margin-bottom: 8em;
+    margin-bottom: 6em;
 }
 
 .main-first svg{
-    max-width: 32rem;
+    max-width: 50%;
     margin-bottom: 4em;
     overflow: visible;
-    margin-top: 2em;
+    margin-top: 3em;
 }
 
 /* SVG ANIM */
@@ -511,20 +536,18 @@ g.word{
 }
 
 .section-header{
+    width: 90%;
+    padding: 5%;
     padding-top: 4em;
     padding-bottom: 3em;
-    margin-bottom: 6em;
+    margin-bottom: 3.5em;
     margin-top: 3em;
 }
 
-.section-header:first-of-type{
-    margin-top: -.3rem;
-}
-
 .subtitle{
     max-width: 36rem;
     text-align: center;
-    font-size: 1.25rem;
+    font-size: 1.15rem;
 }
 
 /* GRID */
@@ -541,14 +564,16 @@ g.word{
 .card{
     border: .1px var(--text-color) solid;
     border-radius: 2px;
-    width: 80%;
     position: relative;
     padding: .5em 1rem;
 }
 
 .card svg{margin-top: 1em;}
 .card h4{margin-top: 1.5em;}
-.card p{margin-bottom: .5em;}
+.card p{
+    word-break: break-word;
+    margin-bottom: .5em;
+}
 
 /* cards implementation */
 .implementation p{
@@ -560,22 +585,15 @@ g.word{
     margin-top: 1em;
 }
 
-.implementation .lv1{
+.implementation .lv1, .implementation .draft{
     padding: .1em .3em;
     margin-top: .5em;
     margin-bottom: 1em;
     top: 1em;
 }
 
-.implementation .draft{
-    margin-left: -1em;
-}
-
 /* ACTIVABLE TRIGGERS */
 /* Switch-boxes */
-#switch-box-trigger{
-    margin-bottom: .5em;
-}
 
 #switch-box-trigger .btn{
     margin-right: .5rem;
@@ -588,7 +606,7 @@ g.word{
     position: relative;
     z-index: 0;
     border: 2px solid var(--marked-color);
-    padding: .5em 2em;
+    padding: .5em 4%;
     border-radius: 2px;
     background-color: var(--paper-color);
 }
@@ -628,7 +646,7 @@ td svg{
 th, td {
     border: 1px solid var(--text-color);
     padding: 1.5em 1em;
-    text-align: center;
+    text-align: center!important;
   }
 
 td:first-of-type{
@@ -670,6 +688,15 @@ table svg:nth-child(2){
     td em {
         display: none;
     }
+    .content, footer, header>div{
+        width: 85%;
+    }
+    header>div{
+        width: 92%;
+    }
+    .main-first svg{
+        max-width: 60%;
+    }
 }
 
 
@@ -677,6 +704,63 @@ table svg:nth-child(2){
     td, th{
         font-size: .8em;
     }
+    .float-right{
+        float: none;
+        width: 95%;
+        margin-left: 2.5%;
+    }
+    .float-left{
+        float: none;
+        margin-right: 0;
+        width: 95%;
+        margin-left: 2.5%;
+    }
+    .w-60{
+        width: 60%!important;
+        margin: 2% 15%;
+    }
+    .main-first svg{
+        margin-top: 4em;
+    }
+    .content, footer{
+        width: 87%;
+    } 
+    header>div{
+        width: 93%;
+    }
+    .main-first svg{
+        max-width: 66%;
+    }
+    header>div{
+        justify-content: space-between;
+    }
+    #menu{
+        --paper-color: var(--white);
+        --text-color: var(--black);
+        --marked-color:var(--blue-2-dark);
+        color: var(--text-color);
+        display: none;
+        position: absolute;
+        top:3em;
+        right:1em;
+        background-color: var(--paper-color);
+        border: .1px var(--marked-color) solid;
+        border-radius: .1em;
+        flex-direction: column;  
+        width: fit-content;
+        padding:1em;
+        padding-top: .5em;
+    }
+    #menu.open {
+        display: flex;
+    }    
+    #menu ul{
+        flex-direction: column;
+        line-height: 2em;
+    }
+    #logo-menu{
+        display: block;
+    }
 }
 
 @media (max-width: 425px) {
@@ -688,6 +772,15 @@ table svg:nth-child(2){
     td, th{
         font-size: .7em;
     }
+    .content, footer{
+        width: 92%;
+    }
+    header>div{
+        width: 95%;
+    }
+    .main-first svg{
+        max-width: 70%;
+    }
 }
 
 @media (max-width: 375px) {
@@ -699,4 +792,7 @@ table svg:nth-child(2){
     td, th{
         font-size: .6em;
     }
+    .main-first svg{
+        max-width: 80%;
+    }
 }

themes/Indiiie/static/js/script.js

@@ -168,10 +168,36 @@ document.addEventListener('DOMContentLoaded', () => {
       });
 });
 
+// Open Menu
+document.addEventListener('DOMContentLoaded', function () {
+    const logoMenu = document.getElementById('logo-menu');
+    const menu = document.getElementById('menu');
+
+    function toggleMenu() {
+        menu.classList.toggle('open');
+    }
+
+    logoMenu.addEventListener('click', function (event) {
+        event.stopPropagation();
+        toggleMenu();
+    });
+
+    document.addEventListener('click', function (event) {
+        if (!menu.contains(event.target) && !logoMenu.contains(event.target)) {
+            if (menu.classList.contains('open')) {
+                toggleMenu();
+            }
+        }
+    });
+});
+
+
+
 document.querySelectorAll('td').forEach(function(td) {
     var svg = td.querySelector('svg');
     if (svg) {
       var text = td.innerHTML.replace(svg.outerHTML, '');
       td.innerHTML = svg.outerHTML + '<p class="">' + text + '</p>';
     }
-  });
+  });
+