+
+
+
+
+
+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/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 + '
{{- partial (printf "svg/scim.svg") . -}}
-
+
- See the official spec ↗
+
' + text + '
'; } - }); \ No newline at end of file + }); +