From: elektrischerwalfisch <mail@elektrischerwalfisch.de>
Date: Mon, 14 Apr 2025 08:22:22 +0000 (+0200)
Subject: feat: button
X-Git-Url: https://skyeroc.xyz/gitweb/?a=commitdiff_plain;h=8e7f4922db102f38168942254a66afeafd564115;p=flatmark

feat: button
---

diff --git a/pages-en/examples.md b/pages-en/examples.md
index b433732..662ec81 100644
--- a/pages-en/examples.md
+++ b/pages-en/examples.md
@@ -14,6 +14,10 @@ These shortcodes are available by default in the flatMark-theme:
     Content with backgrond-color
 {/background}
 
+{button}
+    Link inside this shortcode appears as button
+{/button}
+
 {img-rounded}
     Picture with rounded border
 {/img-rounded}
@@ -36,7 +40,7 @@ These shortcodes are available by default in the flatMark-theme:
 {/code}
 
 ### Additional values
-The shortcodes for columns and background accept additional values which are rendered as classes so that the output can be styled directly by css. In the default flatMark-theme these additional values are already styled:
+The shortcodes for columns, background and buttons accept additional values which are rendered as classes so that the output can be styled directly by css. In the default flatMark-theme these additional values are already styled:
 {code}
 {columns 50-50}
 {columns 33-66}
@@ -45,6 +49,9 @@ The shortcodes for columns and background accept additional values which are ren
 
 {background color-01}
 {background color-02}
+
+{button color-01}
+{button color-02}
 {/code}  
 <br>  
 
@@ -103,6 +110,9 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 {/columns}
 <br>
 
+{button color-01}[Button color-01](/en/home){/button}
+
+{button color-02}[Button color-02](/en/home){/button}
 
 
 
diff --git a/theme/css/style.css b/theme/css/style.css
index 9ec897c..0f6ded9 100644
--- a/theme/css/style.css
+++ b/theme/css/style.css
@@ -197,6 +197,12 @@ main .img-rounded {aspect-ratio: 1/1;border-radius: 50%;overflow: hidden;}
 main .background .img-rounded {border: var(--space-below-01) solid var(--colorlight); margin-top: calc(0px - var(--space-below-02));}
 main .img-rounded img {object-fit: cover;width: 100%;height: 100%;display: block;}
 
+main .button {}
+main .button a {display: inline-block;background: var(--colordark);color: var(--colorlight);text-decoration:none;padding: var(--space-below-00) var(--side-space-01);font-weight: 700;}
+main .button a:hover {opacity: 0.5;}
+main .button.bg-color-01 a {background: var(--color-01);}
+main .button.bg-color-02 a {background: var(--color-02);}
+
 main code {font-family: courier 'Courier New', Courier, monospace;font-size: var(--fontsize-m);background: var(--color-gray-01);color: var(--colordark);}
 
 #main pre:has(code) {word-break: normal;word-wrap: normal;overflow: scroll;background: var(--color-gray-01);padding: var(--space-below-01) var(--space-below-01);border-radius: 10px;margin-bottom: var(--space-below-01);}
diff --git a/theme/functions.php b/theme/functions.php
index eb79be0..49da295 100644
--- a/theme/functions.php
+++ b/theme/functions.php
@@ -77,6 +77,24 @@
             return '<div class="background ' . $bgClass . '">' . $bgHtml . '</div>';
         }, $markdown);
 
+    // Shortcode: button with optional class
+        $pattern = '/\{button(.*?)\}(.*?)\{\/button\}/s';
+        $markdown = preg_replace_callback($pattern, function ($matches) use ($Parsedown) {
+            // Capture the additional class (if any exists) directly after {button}
+            $buttonAttributes = trim($matches[1]);  // e.g., "color-01" from {button color-01}
+            $buttonContent = $matches[2];   // Capture the content inside {button} ... {/button}
+
+            // Add prefix to the class
+            $buttonPrefix = 'bg-'; // Define the prefix here
+            $buttonClass = !empty($buttonAttributes) ? $buttonPrefix . $buttonAttributes : '';  // Prefix added to class (e.g., bg-color-01)
+
+            // Convert the inner Markdown content
+            $buttonHtml = $Parsedown->text($buttonContent);
+
+            // Wrap everything in a div and add class if available
+            return '<div class="button ' . $buttonClass . '">' . $buttonHtml . '</div>';
+        }, $markdown);
+
     // Shortcode: img rounded
         $pattern = '/\{img-rounded\}(.*?)\{\/img-rounded\}/s';
         $markdown = preg_replace_callback($pattern, function ($matches) use ($Parsedown) {