From 02973c5e8388431eb076f220cf8ff2a6b89e435f Mon Sep 17 00:00:00 2001 From: Lettre Enfants Date: Thu, 3 Oct 2024 21:43:59 +0200 Subject: [PATCH] mobile-version --- content/implementations/_index.md | 2 +- content/overview/comparison.md | 20 +- content/overview/identity-management.md | 10 +- static/media/illus-home.svg | 153 ++++++++++ static/media/small/illus-basics.svg | 288 ++++++++++++++++++ static/media/small/illus-home-small.svg | 152 +++++++++ static/media/small/ldap-diagram.svg | 209 +++++++++++++ static/media/small/ldap-sso-diagram.svg | 210 +++++++++++++ static/media/small/sso-diagram.svg | 245 +++++++++++++++ static/media/small/sso-scim-diagram.svg | 216 +++++++++++++ themes/Indiiie/layouts/index.html | 3 +- themes/Indiiie/layouts/partials/footer.html | 12 +- themes/Indiiie/layouts/partials/header.html | 23 +- .../layouts/partials/svg/illus-home-small.svg | 152 +++++++++ themes/Indiiie/layouts/partials/svg/menu.svg | 5 + themes/Indiiie/static/css/style.css | 156 ++++++++-- themes/Indiiie/static/js/script.js | 28 +- 17 files changed, 1830 insertions(+), 54 deletions(-) create mode 100644 static/media/illus-home.svg create mode 100644 static/media/small/illus-basics.svg create mode 100644 static/media/small/illus-home-small.svg create mode 100644 static/media/small/ldap-diagram.svg create mode 100644 static/media/small/ldap-sso-diagram.svg create mode 100644 static/media/small/sso-diagram.svg create mode 100644 static/media/small/sso-scim-diagram.svg create mode 100644 themes/Indiiie/layouts/partials/svg/illus-home-small.svg create mode 100644 themes/Indiiie/layouts/partials/svg/menu.svg diff --git a/content/implementations/_index.md b/content/implementations/_index.md index bdd761b..78c3a26 100644 --- a/content/implementations/_index.md +++ b/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 >}} \ No newline at end of file diff --git a/content/overview/comparison.md b/content/overview/comparison.md index ee433d0..a441afa 100644 --- a/content/overview/comparison.md +++ b/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) + + + LDAP diagram + **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) + + + LDAP with SSO diagram + {{< /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) + + + SSO only diagram + {{< /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) + + + SSO with SCIM diagram + {{< /switch-box >}} | | LDAP | LDAP & SSO | SSO | SSO & SCIM | diff --git a/content/overview/identity-management.md b/content/overview/identity-management.md index 9d1b42c..27f5921 100644 --- a/content/overview/identity-management.md +++ b/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) + + + + Illustation of the basics of identity magagment + + + {{< 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 >}} -illustration of losing data +illustration of losing data ### 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. diff --git a/static/media/illus-home.svg b/static/media/illus-home.svg new file mode 100644 index 0000000..cce19ca --- /dev/null +++ b/static/media/illus-home.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/media/small/illus-basics.svg b/static/media/small/illus-basics.svg new file mode 100644 index 0000000..5402a5e --- /dev/null +++ b/static/media/small/illus-basics.svg @@ -0,0 +1,288 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/media/small/illus-home-small.svg b/static/media/small/illus-home-small.svg new file mode 100644 index 0000000..a54fe15 --- /dev/null +++ b/static/media/small/illus-home-small.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/media/small/ldap-diagram.svg b/static/media/small/ldap-diagram.svg new file mode 100644 index 0000000..201bdb9 --- /dev/null +++ b/static/media/small/ldap-diagram.svg @@ -0,0 +1,209 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/media/small/ldap-sso-diagram.svg b/static/media/small/ldap-sso-diagram.svg new file mode 100644 index 0000000..cd80b1d --- /dev/null +++ b/static/media/small/ldap-sso-diagram.svg @@ -0,0 +1,210 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/media/small/sso-diagram.svg b/static/media/small/sso-diagram.svg new file mode 100644 index 0000000..71b1e00 --- /dev/null +++ b/static/media/small/sso-diagram.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/media/small/sso-scim-diagram.svg b/static/media/small/sso-scim-diagram.svg new file mode 100644 index 0000000..671a359 --- /dev/null +++ b/static/media/small/sso-scim-diagram.svg @@ -0,0 +1,216 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/Indiiie/layouts/index.html b/themes/Indiiie/layouts/index.html index b3f2db1..683852a 100644 --- a/themes/Indiiie/layouts/index.html +++ b/themes/Indiiie/layouts/index.html @@ -1,7 +1,8 @@ {{ define "main" }}
- {{- partial (printf "svg/illus-home.svg") . -}} + {{- partial (printf "svg/illus-home-small.svg") . -}} +

Make identity managing fast, simple and interoperable

Discover SCIM ↓ diff --git a/themes/Indiiie/layouts/partials/footer.html b/themes/Indiiie/layouts/partials/footer.html index 55ec0ee..2cd0839 100644 --- a/themes/Indiiie/layouts/partials/footer.html +++ b/themes/Indiiie/layouts/partials/footer.html @@ -5,12 +5,12 @@

Collaborators

    - - - - - - + + + + + +
diff --git a/themes/Indiiie/layouts/partials/header.html b/themes/Indiiie/layouts/partials/header.html index edad1a4..bf1160c 100644 --- a/themes/Indiiie/layouts/partials/header.html +++ b/themes/Indiiie/layouts/partials/header.html @@ -1,17 +1,22 @@ diff --git a/themes/Indiiie/layouts/partials/svg/illus-home-small.svg b/themes/Indiiie/layouts/partials/svg/illus-home-small.svg new file mode 100644 index 0000000..a54fe15 --- /dev/null +++ b/themes/Indiiie/layouts/partials/svg/illus-home-small.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/Indiiie/layouts/partials/svg/menu.svg b/themes/Indiiie/layouts/partials/svg/menu.svg new file mode 100644 index 0000000..5423b80 --- /dev/null +++ b/themes/Indiiie/layouts/partials/svg/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/themes/Indiiie/static/css/style.css b/themes/Indiiie/static/css/style.css index 56222d6..d62c7b8 100644 --- a/themes/Indiiie/static/css/style.css +++ b/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%; + } } \ No newline at end of file diff --git a/themes/Indiiie/static/js/script.js b/themes/Indiiie/static/js/script.js index 00ae37f..3c436ac 100644 --- a/themes/Indiiie/static/js/script.js +++ b/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 + '

' + text + '

'; } - }); \ No newline at end of file + }); +