IBX-5316 - Front page redesign

docs/css/front-page.css

@@ -1,18 +1,23 @@
-.front-page h1 {
+[dir=ltr] .front-page h1 {
     font-size: 32px;
     font-weight: 600;
     padding-left: 0.7rem;
     margin-bottom: 0.75rem;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .front-page a {
-    color: var(--link);
+    color: black;
+    text-align: center;
+    font-size: 16px;
 }
 
 .front-page a:hover,
 .front-page a:focus {
-    color: var(--ibexa-jazzberry);
-    text-decoration: none;
+    color: #af1164;
+    text-decoration:underline;
 }
 
 .tile {
@@ -34,11 +39,15 @@ h5.tile-title {
 }
 
 .tile-icon {
-    margin-right: 0.6rem;
+    margin-right: 0px;
+    margin-top: 20px;
+    stroke: #FFFFFF;
+    fill: #FFFFFF;
+    stroke-width: 0.3px;
 }
 
 .tile-body {
-    margin-left: 2.6rem;
+    margin-left: 0rem;
 }
 
 .tile-body ul {
@@ -49,37 +58,16 @@ h5.tile-title {
     list-style-type: none;
     background: url(../images/page.svg) no-repeat left top;
     background-size: 15px 18px;
-    padding-left: 1rem;
-    margin-left: 0.25rem;
+    padding-left: 0rem;
+    margin-left: 0rem;
 }
 
 .md-typeset .tile-body ol, .md-typeset .tile-body ul {
     margin-left: 0;
 }
 
-.most-popular h5 {
-    background-color: rgba(216,216,216,0.27);
-    font-size: 13px;
-    font-weight: bold;
-    line-height: 18px;
-    padding: 8px 14px;
-    margin-bottom: 1rem;
-}
-
-.md-typeset .most-popular ul {
-    list-style-position: inside;
-    padding-left: 0;
-    margin-left: 0px;
-}
-
-.md-typeset .most-popular ul li {
-    border-bottom: 1px solid #D8D8D8;
-    margin-left: 0px;
-    padding-left: 0.5rem;
-}
-
 .latest-release h5 {
-    border-bottom: 3px solid #D8D8D8;
+    border-bottom: 1px solid #af1164;
     font-size: 18px;
     font-weight: bold;
     line-height: 24px;
@@ -98,48 +86,246 @@ h5.tile-title {
     margin-bottom: 0;
 }
 
-.announcement {
-    margin-bottom: 1rem;
-    padding: .75rem 1.25rem;
-    background-color: #FFFFFF;
-    border: 1px solid var(--ibexa-jazzberry);
+.info-tile {
+    height: 230px;
+    width: 24%;
+    margin: 0.5%;
+    max-height: 230px;
+    padding-right: 1vw;
+    background: #af1164;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-family: "Noto Sans";
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
     border-radius: 5px;
+}
+
+.info-tile:hover {
+    opacity:0.5;
+}
+
+.info-tile-img {
+    position: absolute;
+    left: 2%;
+    top: 15%;
+    opacity: .4;
+    height: 10vw;
+    font-size:10vw;
+}
+
+.info-tile-up {
+    height: 120px;
+    max-height: 120px;
+    background: white;
+    display: inline-block;
+    text-overflow: ellipsis;
+    text-align: center;
+    justify-content: center;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-family: "Noto Sans";
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 5px;
+    border: 1px solid #af1164;
+    width: 100%;
+    padding: 5px;
+}
+
+[dir=ltr] .info-tile-body ul {
+    margin-left: 0;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+[dir=ltr] .info-tile-body ul li {
+    list-style-type: none;
+    background-size: 15px 18px;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 0px;
+}
+
+.info-tile-title {
+    color: #ffffff;
+    font-family: "Noto Sans";
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 50px;
+    padding-left: 0;
+    text-align: center;
+}
+
+.info-tile-title a {
+  text-align: center;
+  font-size: 18px;
+}
+
+h5.info-tile-title {
+    color: #ffffff;
+    font-family: "Noto Sans";
     font-size: 18px;
-    color: var(--ibexa-jazzberry);
+    font-weight: bold;
+    line-height: 50px;
+    padding-left: 0;
+    text-align: center;
 }
 
-.announcement a.external:after {
-    content: none;
+.info-tile-icon {
+    margin-right: 0px;
+    margin-top: 0px;
+    margin-left: 0px;
+    margin-bottom: 0px;
 }
 
-.announcement .btn {
-    font-size: 0.8rem;
-    padding: .4rem .8rem;
+.info-tile-up:hover {
+    opacity:0.5;
 }
 
-.announcement .tile-icon {
-    flex-shrink: 0;
+a.instruction-tile {
+    display: inline-flex;
+    align-items: center;
+    height: 150px;
+    width: 24%;
+    margin: 0.5%;
+    max-height: 90px;
+    border-radius: 5px;
+    padding-left: 1vw;
+    padding-right: 1vw;
+    background: #af1164;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-family: "Noto Sans";
+    color: white;
+    font-weight: bold;
+    position: relative;
+    margin-bottom: 8px;
+    text-align: center;
+    margin-top: 8px;
+    flex-direction: column;
+    justify-content: center;
+    color: white;
 }
 
-.announcement .btn-announcement {
-    background: var(--ibexa-jazzberry);
-    border: 1px solid var(--ibexa-jazzberry);
-    color: #FFFFFF;
+a.instruction-tile:hover {
+  opacity:0.5;
+  color: white;
 }
 
-.announcement .btn-announcement-outline {
-    background: #FFFFFF;
-    border: 1px solid var(--ibexa-jazzberry);
-    color: var(--ibexa-jazzberry);
+html {
+    height: 100%;
 }
 
-.announcement .btn-announcement-outline:hover,
-.announcement .btn-announcement-outline:focus {
-    background: var(--ibexa-jazzberry);
-    color: #FFFFFF;
+body {
+    margin: 0;
+    font-family: "Noto Sans";
+}
+
+.accordion {
+    margin: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 10px;
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+    opacity: 0.8;
+    font-size: 14px;
+}
+
+.accordion details summary {
+    line-height: 50px;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-weight: 400;
+    cursor: pointer;
+    border-radius: 10px;
+    position: relative;
+    user-select: none;
+}
+
+.accordion details[open] summary,
+.accordion details summary:hover {
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
-.announcement .btn-announcement:hover,
-.announcement .btn-announcement:focus {
-    background: #FFFFFF;
+.accordion details[open] summary{
+    font-weight: bold;
+}
+
+.accordion details ::marker {
+    font-size: 0;
+}
+
+.accordion details ul {
+    margin: 0;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
+}
+
+.accordion details ul li {
+    cursor: pointer;
+    padding: 10px;
+    padding-left: 20px;
+    border-radius: 5px;
 }
+
+.accordion details ul li:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: #af1164;
+    text-decoration:underline;
+}
+
+.md-typeset :is(.admonition,details) {
+    background-color: var(--md-admonition-bg-color);
+    border: 0 solid #af1164;
+    border-radius: 0.1rem;
+    box-shadow: var(--md-shadow-z1);
+    color: var(--md-admonition-fg-color);
+    display: flow-root;
+    font-size: .64rem;
+    margin: 1.5625em 0;
+    padding: 0 0.6rem;
+    page-break-inside: avoid;
+}
+
+.md-typeset .admonition,details {
+  background-color: var(--md-admonition-bg-color);
+  border: 0 solid #af1164;
+  border-radius: 0.1rem;
+  box-shadow: var(--md-shadow-z1);
+  color: var(--md-admonition-fg-color);
+  display: flow-root;
+  font-size: .64rem;
+  margin: 1.5625em 0;
+  padding: 0 0.6rem;
+  page-break-inside: avoid;
+}
+
+.md-typeset :is(.admonition-title,summary):before {
+    background-color: #af1164;
+    height: 1rem;
+    mask-size: contain;
+    position: absolute;
+    top: 0.625em;
+    width: 1rem;
+    display: none;
+}
+
+[dir=ltr] .summary-icon {
+  width: 30px;
+  height: 30px;
+  margin-left: 0px;
+  margin-right: 20px;
+  display: inline;
+}

docs/customer_management/customer_management.md

@@ -0,0 +1,12 @@
+description: Manage customer in Ibexa DXP by learning about the Customer Portal and registration form.
+---
+
+# Customer management
+
+[[= cards([
+    "customer_management/customer_portal",
+    "customer_management/cp_applications",
+    "customer_management/cp_configuration",
+    "customer_management/create_user_registration_form",
+
+], columns=4) =]]