change color palettes layout

noi-techpark · Jan 15, 2025 · f202e01 · f202e01
1 parent dd3276f
commit f202e01
Showing 1 changed file with 47 additions and 13 deletions.
diff --git a/src/themes/odh-fbe/layouts/community/design-guidelines/list.html b/src/themes/odh-fbe/layouts/community/design-guidelines/list.html
@@ -16,22 +16,56 @@ <h3 type="button" data-bs-toggle="collapse" data-bs-target="#colors-content" ari
         <i class="fa fa-caret-up ms-1" aria-hidden="false"></i>
     </h3>
     <div class="video collapse" id="colors-content">
-        <p> The font color is #212529 </p>    
-    <div class="col-lg-4 col-md-6 col-12">
-        <div class="bg-primary-subtle border-5 px-4 pt-5 pb-4 h-100 d-flex flex-row align-items-start">
-            <h5 class="fw-bold">Primary color <br> #f3f3f3</h5>
+        <p style="display: flex; align-items: center; gap: 4px;">
+            The font color is #212529 
+            <span style="width: 16px; height: 16px; background-color: #212529; border: 1px solid #ccc;"></span>
+        </p>
+    <div class="row">
+        <h4 class="fw-bold ">Open Data Hub color palette</h4>
+        <div class="col-md-3 col-sm-6 col-12 mb-3">
+            <div class="bg-white border  text-center py-3">
+                <h5 class="fw-bold">Primary Color</h5>
+                <p>#FFFFFF</p>
+            </div>
         </div>
-        <br>
-        <div class="bg-secondary border-5 px-4 pt-5 pb-4 h-100 d-flex flex-row align-items-start">
-            <h5 class="fw-bold">Secondary color <br> rgb(108, 117, 125)</h5>
+        <div class="col-md-3 col-sm-6 col-12 mb-3">
+            <div class="bg-black  text-center py-3">
+                <h5 class="fw-bold">Secondary Color</h5>
+                <p>#000000</p>
+            </div>
         </div>
-        <br>
-        <div class="bg-secondary-subtle border-5 px-4 pt-5 pb-4 h-100 d-flex flex-row align-items-start">
-            <h5 class="fw-bold">Tertiary color <br> rgba(33, 37, 41, 0.5)</h5>
+        <div class="col-md-3 col-sm-6 col-12 mb-3">
+            <div class="bg-primary-subtle  text-center py-3">
+                <h5 class="fw-bold">Tertiary Color</h5>
+                <p>f3f3f3</p>
+            </div>
         </div>
-        <br>
-        <div class="bg-black border-5 px-4 pt-5 pb-4 h-100 d-flex flex-row align-items-start">
-            <h5 class="fw-bold">Quaternary color <br> #000 </h5>
+        <div class="col-md-3 col-sm-6 col-12 mb-3">
+            <div class="text-center py-3" style="background-color: #565e64; color: white;">
+                <h5 class="fw-bold">Quaternary Color</h5>
+                <p>#565e64</p>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <h4 class="fw-bold ">Events color palette</h4>
+        <div class="col-md-3 col-sm-6 col-12 mb-3">
+            <div class="bg-white border  text-center py-3">
+                <h5 class="fw-bold">Primary Color</h5>
+                <p>#FFFFFF</p>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-6 col-12 mb-3">
+            <div class="bg-black  text-center py-3">
+                <h5 class="fw-bold">Secondary Color</h5>
+                <p>#000000</p>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-6 col-12 mb-3">
+            <div class="text-center py-3" style="background-color: #50742f; color: white;">
+                <h5 class="fw-bold">Tertiary Color</h5>
+                <p>#50742f</p>
+            </div>
         </div>
     </div>
     </div>