Refine visuals of systems thinking kata

content/projects_vs_product.md

@@ -70,10 +70,10 @@ elements that make up the base system:
 * **Alignment between product and customer needs:** The degree to which the product meets the needs of the customer.
 * **Length of the feedback loop:** The time it takes to get feedback from the customer.
 
-### Exercise
-
+{{< exercise text=`
 Using the provided base elements, create a causal loop diagram that shows the relationships between the
 elements. Focus on the primary relationships between the elements, and aim to map out the key interactions between the elements.
+` >}}
 
 {{< image src="/images/kata/base_elements_CONNECT-US.png" alt="Core elements" size="50%">}}
 
@@ -105,11 +105,12 @@ The organizational elements we will consider are:
 * **# of Handovers:** The number of times a piece of work is handed over from one team to another.
 * **Lead Time:** The time it takes to deliver a piece of work from start (concept) to finish (delivered value in hands of end-users).
 
-#### Exercise
 
+{{< exercise text=`
 Add the organizational elements to the diagram and identify the relationships between the elements.
 Focus on the primary relationships between the elements, and aim to map out the key interactions between the existing and new elements.
 There are no right or wrong answers, but the goal is to have a conversation about how the organizational elements impact the base system.
+` >}}
 
 {{< image src="/images/kata/organizational_elements_CONNECT-US.png" alt="Connect the organizational elements" size="100%" >}}
 
@@ -124,6 +125,12 @@ There are no right or wrong answers, but the goal is to have a conversation abou
 
 ### **Step 3:** Add Timeliness Elements
 
+{{< stub >}}
+
 ### **Step 4:** Add Risk Mitigation Elements
 
+{{< stub >}}
+
 ## **Round-Up:** Conclusions and Learnings
+
+{{< stub >}}

layouts/shortcodes/exercise.html

@@ -0,0 +1,8 @@
+{{ $text := .Get "text" }}
+
+<div class="alert-container">
+    <blockquote class="groucho action">
+        <span class="action-title">Exercise:</span>
+        {{ $text | markdownify }}
+    </blockquote>
+</div>

layouts/shortcodes/stub.html

@@ -3,9 +3,7 @@
 <div class="alert-container">
     <blockquote class="groucho stub">
         Due to its online nature, this work in in perpetual motion. This section has not yet been completed. If you are
-        interested in adding content here, please refer to the <a
-            href="https://github.com/sddevelopment-be/penguin-pragmatic-patterns/blob/content/software_patterns/CONTRIBUTING.md"
-            target="_blank">“How to contribute”</a> guide on GitHub.
+        interested in adding content here, please refer to the <a href="/contributing" target="_blank">“How to contribute”</a> guide.
 
         {{ $text | markdownify }}
     </blockquote>

static/css/quotes.css

@@ -176,6 +176,37 @@
     margin-right: 0.75rem;
 }
 
+.action-title {
+    color: #471a8b;
+    text-transform: uppercase;
+    font-style: normal;
+    font-weight: 350;
+    margin-right: 0.75rem;
+}
+
+.action {
+    color: #1f2226;
+    border-left: 4px solid #471a8b !important;
+    padding-right: 4.75rem !important;
+}
+
+.action:after {
+    content: '📝';
+    position: absolute;
+    top: 0.28em;
+    right: 0;
+    font-size: 2.75em;
+    font-style: italic;
+    color: #471a8b85;
+    z-index: -1;
+    box-sizing: border-box;
+    opacity: 0.65;
+}
+
+.action footer {
+    color: #190735;
+}
+
 @media (max-width: 800px) {
     .alert-container {
         padding: 0.75rem;