From eabb7dbf6b97c971c1482649735b293ef0053c36 Mon Sep 17 00:00:00 2001
From: konarfil <filip.konarik@ysoft.com>
Date: Tue, 10 Oct 2023 14:14:45 +0200
Subject: [PATCH] Rewrite front page to flexbox

---
 src/css/style.css | 26 +++++++++++++++++---------
 src/index.html    | 33 +++++++++++++++++++++++++++------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index e5f4eae..bc67f5c 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -188,7 +188,7 @@ pre {
 }
 
 .flow-card {
-    height: 550px;
+    height: 100%;
 }
 
 .section-header {
@@ -239,10 +239,22 @@ pre {
     font-weight: bold;
 }
 
-@media screen and (max-width: 1200px) {
-    .flow-card {
-        height: 575px;
-    }
+.flows-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.flows-container .col {
+    display: flex;
+}
+
+.flows-container .col .card {
+    display: flex;
+    flex-direction: column;
+}
+
+.flows-container .col .card .card-content {
+    flex: 1;
 }
 
 @media screen and (max-width: 600px) {
@@ -250,10 +262,6 @@ pre {
         font-size: 1.5rem;
     }
 
-    .flow-card {
-        height: 100%;
-    }
-
     .page-footer .footer-copyright {
         min-height: 0;
     }
diff --git a/src/index.html b/src/index.html
index 9a87c05..f3d34ff 100644
--- a/src/index.html
+++ b/src/index.html
@@ -44,10 +44,10 @@
             <div class="section">
                 <h3 class="header section-header">Flows</h3>
                 <div class="divider" style="margin-bottom: 10px;"></div>
-                <div class="row">
+                <div class="row flows-container">
                     <div class="col xl4 m6 s12">
                         <div class="card horizontal">
-                            <div class="card-stacked flow-card">
+                            <div class="card-stacked">
                                 <div class="card-content">
                                     <h5>Authorization Code Flow</h5>
                                     <p class="justified">
@@ -67,7 +67,7 @@
                     </div>
                     <div class="col xl4 m6 s12">
                         <div class="card horizontal">
-                            <div class="card-stacked flow-card">
+                            <div class="card-stacked">
                                 <div class="card-content">
                                     <h5>PKCE</h5>
                                     <p class="justified">
@@ -87,7 +87,7 @@
                     </div>
                     <div class="col xl4 m6 s12">
                         <div class="card horizontal">
-                            <div class="card-stacked flow-card">
+                            <div class="card-stacked">
                                 <div class="card-content">
                                     <h5>Device Authorization Grant</h5>
                                     <p class="justified">
@@ -108,7 +108,7 @@
                     </div>
                     <div class="col xl4 m6 s12">
                         <div class="card horizontal">
-                            <div class="card-stacked flow-card">
+                            <div class="card-stacked">
                                 <div class="card-content">
                                     <h5>WebAuthn</h5>
                                     <p class="justified">
@@ -128,7 +128,28 @@
                     </div>
                     <div class="col xl4 m6 s12">
                         <div class="card horizontal">
-                            <div class="card-stacked flow-card">
+                            <div class="card-stacked">
+                                <div class="card-content">
+                                    <h5>CIBA</h5>
+                                    <p class="justified">
+                                        Client Initiated Backchannel Authentication is a protocol extension for OAuth 2.0, tailored for scenarios where
+                                        the client, such as a financial institution or IoT device, initiates the authentication process without direct user
+                                        interaction on the client's platform. This is useful for "decoupled" authentication experiences, where, for instance, a
+                                        user might authenticate on their smartphone when prompted by a smart TV app. In CIBA, once the client requests
+                                        authentication, the authorization server prompts the user on a previously registered device, such as their mobile phone.
+                                        Upon successful authentication, the authorization server sends a token back to the client. This flow provides a seamless
+                                        and secure user experience, especially in contexts where traditional OAuth 2.0 interactions might be cumbersome or impractical.
+                                    </p>
+                                </div>
+                                <div class="card-action underConstruction">
+                                    <i class="tiny material-icons">build</i> Under construction
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col xl4 m6 s12">
+                        <div class="card horizontal">
+                            <div class="card-stacked">
                                 <div class="card-content">
                                     <h5>Implicit Flow (deprecated)</h5>
                                     <p class="justified">