From 80fbc259aa10beb6fa3d9177e228074564422f35 Mon Sep 17 00:00:00 2001
From: nevfy <yaver4.0.0.0@gmail.com>
Date: Tue, 30 Jan 2024 15:07:44 +0400
Subject: [PATCH] feat: add color block shortcode

---
 assets/scss/_styles_project.scss        | 32 +++++++++++++++++++++++++
 layouts/shortcodes/docs-colorblock.html | 17 +++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 layouts/shortcodes/docs-colorblock.html

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 6c06960..05801be 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -204,4 +204,36 @@ a.nav-link.sp-coming-soon::after {
   margin-left: .5rem;
   padding: .1rem;
   border-radius: .1rem;
+}
+
+.sp-docs-colorblock-card {
+  background: #FFFFFF;
+  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
+  border: none;
+}
+
+.sp-colorblock {
+  display: block;
+  height: 6rem;
+  width: auto;
+}
+
+.sp-colorblock-text {
+  margin: 1rem;
+}
+
+.sp-colorblock-text h4 {
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.sp-colorblock-text p {
+  margin-bottom: .5rem;
+}
+
+.sp-colorblock-hex {
+  font-weight: 600;
+  font-size: x-large;
+  margin-left: .5rem;
+  color: $white
 }
\ No newline at end of file
diff --git a/layouts/shortcodes/docs-colorblock.html b/layouts/shortcodes/docs-colorblock.html
new file mode 100644
index 0000000..e8562d8
--- /dev/null
+++ b/layouts/shortcodes/docs-colorblock.html
@@ -0,0 +1,17 @@
+{{ $name := .Get 0 }}
+{{ $hex := .Get 1 }}
+{{ $rgb := .Get 2 }}
+{{ $cmyk := .Get 3 }}
+<div class="sp-docs-colorblock-card d-flex flex-column">
+    <div class="sp-colorblock d-flex align-items-end" style="background-color: {{ $hex }}">
+        <h3 class="sp-colorblock-hex">{{ $hex }}</h3>
+    </div>
+    <div class="sp-colorblock-text">
+        <h4>{{ $name }}</h4>
+        <h5>RGB: </h5>
+        <p>{{ $rgb }}<p></p>
+        <h5>CMYK: </h5>
+        <p>{{ $cmyk }}<p>
+        {{ .Inner }}
+    </div>
+</div>
\ No newline at end of file