Final changes to admonitions and adding back the iframes.

eLearning/playground-e-commerce/README.md

@@ -10,7 +10,6 @@ permalink: /playground-e-commerce/
 
 This playground environment provides a controlled and secure platform to explore and experiment with a pre-configured Fusion application. The application is specifically designed for e-commerce functionalities, including an expansive data source of electronics products and accessories and a library of query rewrites. 
 
-
 ### Datasources
 
 There is one data source in the e-commerce playground: **Electronics**. The data source contains over 40,000 products, from televisions to printers, speakers, and home appliances. 
@@ -39,8 +38,8 @@ Try adding some index pipeline stages to manipulate the fields and values in the
 * **Field Mapping**. The field mapping stage is a powerful stage commonly used to delete, add, set, copy, or move fields on a document. It allows you to perform small or bulk operations, such as deleting all unmapped fields.
 * **Regex Field Extraction**. The RegEx field extraction stage is used to pull out information from one field and place it in another. For example, if you have a field with the minimum and maximum temperatures stored in one string, but you wanted to separate the values, you can use this field to do so. 
 
-> [!IMPORTANT]  
 > The final stage in the index pipeline, **Solr Indexer** is crucial for getting documents to Solr. Turning it off, moving it, or removing it may break the pipeline.
+{:.important}
 
 
 #### Query pipeline
@@ -49,8 +48,8 @@ Head to the Query Workbench by navigating to **Querying > Query Workbench**.
 
 From here, you can enter a query and view the results. Try turning stages on and off, then investigate what changed in the results. You can also customize the facets in this view. 
 
-> [!TIP]
 > This query pipeline makes use of facet fields and range facet fields. A range facet is already created for the regular price. Try creating a range facet for the sales price, `salePrice_d`. 
+{:.tip}
 
 ### Create signals
 
@@ -77,8 +76,8 @@ Navigate to **Relevance > Rules**, to reach the rules editor. Make sure you're o
 
 Some examples are already set up for you. 
 
-> [!TIP]
 > You can test these rules in Predictive Merchandiser. View the condition and the action of a rule. Replicate the action in Predictive Merchandiser, and the action will fire. 
+{:.tip}
 
 ### Create rewrites
 
@@ -90,18 +89,19 @@ Add new rewrites, modify the existing ones, or delete everything to start over.
 
 Now that you've created some business rules and rewrites, navigate to Predictive Merchandiser to see how to create them from a natural search experience. 
 
-> [!NOTE]  
+
 > Click the **Start task** button, if you want to start curating the search experience. 
+{:.tip}
 
 Begin by entering a search term in the search box. From the results list, you can choose to block a document from appearing, pin a document in its current position, bury a document lower in the result, or boost a document higher in the result. If you want to pin a document in a specific position, you can drag it where you want it.
 
-<!-- <div style="position: relative; padding-bottom: calc(51.78125% + 42px); height: 0;"><iframe src="https://app.supademo.com/embed/ft9Rms9EBaqQFnduqRt5P" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> -->
+<div style="position: relative; padding-bottom: calc(51.78125% + 42px); height: 0;"><iframe src="https://app.supademo.com/embed/ft9Rms9EBaqQFnduqRt5P" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
 
 Rules are created automatically from your interactions, and they are available to edit, delete, or publish in the **Rules** screen.
 
 To create query rewrites, enter a search term in the search box, and click the **Add** button that appears next to the term. Select any of the query rewrite options to create a new query rewrite. 
 
-<!-- <div style="position: relative; padding-bottom: calc(51.78125% + 42px); height: 0;"><iframe src="https://app.supademo.com/embed/V82C_bR_syCuDPuK48-PB" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> -->
+<div style="position: relative; padding-bottom: calc(51.78125% + 42px); height: 0;"><iframe src="https://app.supademo.com/embed/V82C_bR_syCuDPuK48-PB" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
 
 Like rules, query rewrites you create in Predictive Merchandiser are available in the **Rewrites** screen.
 

eLearning/playground-site-search/README.md

@@ -12,40 +12,26 @@ permalink: /playground-site-search/
 
 **Useful admonitions**
 
-> [!NOTE]  
-> Highlights information that users should take into account, even when skimming.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.note}
 
-> [!TIP]
-> Optional information to help a user be more successful.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.tip}
 
-> [!IMPORTANT]  
-> Crucial information necessary for users to succeed.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.important}
 
-> [!WARNING]  
-> Critical content demanding immediate user attention due to potential risks.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.caution}
 
-> [!CAUTION]
-> Negative potential consequences of an action.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.warning}
 
 **Images** 
 
 ![Test image](images/IMAGE_NAME.png "Example image placeholder")
 
 -->
-> Some text about whatever just about long enough now. 
-{:.note}
-
-> Some text about whatever just about long enough now. 
-{:.tip}
-
-> Some text about whatever just about long enough now. 
-{:.important}
-
-> Some text about whatever just about long enough now. 
-{:.caution}
-
-> Some text about whatever just about long enough now. 
-{:.warning}
 
 ## About this playground
 

eLearning/scratchpad.md

@@ -4,20 +4,20 @@ A quick resource for writing playgrounds.
 
 ## Useful admonitions
 
-> [!NOTE]  
-> Highlights information that users should take into account, even when skimming.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.note}
 
-> [!TIP]
-> Optional information to help a user be more successful.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.tip}
 
-> [!IMPORTANT]  
-> Crucial information necessary for users to succeed.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.important}
 
-> [!WARNING]  
-> Critical content demanding immediate user attention due to potential risks.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.caution}
 
-> [!CAUTION]
-> Negative potential consequences of an action.
+> Esse tempor dolor veniam deserunt ex proident. Occaecat sint nisi magna aliqua incididunt dolor consequat minim incididunt consectetur. Dolore proident est minim tempor. Cupidatat amet deserunt non reprehenderit mollit elit esse ea ea.
+{:.warning}
 
 ## Images
 

lib/public/global-training.css

@@ -12,7 +12,7 @@
     --dark-pink: rgba(197, 37, 116, 1.0);
     --pink: rgba(237, 48, 136, 1.0);
     --light-pink: rgba(244, 153, 193, 1.0);
-    --dark-gray: rgba(93, 107, 120, 1.0);
+    --dark-gray: rgb(61, 70, 78);
     --medium-gray: rgba(125, 139, 153, 1.0);
     --gray: rgba(193, 203, 214, 1.0);
     --light-gray: rgba(228, 234, 240, 1.0);
@@ -214,20 +214,26 @@ blockquote {
     margin-left: 1em;
     margin-right: 1em;
     border-width: 1px;
-    border-style: solid;
+    border-style: none;
     border-color: var(--gray);
     padding: 1.5em 1.25em;
     background-color: var(--light-gray);
     border-radius: 5px;
     box-shadow: var(--shadow-2);
 }
 
+/* Admonition styles */
+
+blockquote p {
+    color: rgb(61, 70, 78);
+    font-style: normal; 
+}
+
 blockquote.note {
     @extend .alert-note;
     border-color: var(--gray);
     background-color: var(--light-gray);
 }
-
 blockquote.note p:before {
     content: "Note: ";
     font-weight: bold;
@@ -239,7 +245,6 @@ blockquote.tip {
     border-color: var(--teal);
     background-color: var(--light-teal);
 }
-
 blockquote.tip p:before {
     content: "Tip: ";
     font-weight: bold;
@@ -251,7 +256,6 @@ blockquote.important {
     border-color: var(--blue);
     background-color: var(--light-blue);
 }
-
 blockquote.important p:before {
     content: "Important: ";
     font-weight: bold;
@@ -263,7 +267,6 @@ blockquote.caution {
     border-color: var(--gold);
     background-color: var(--light-gold);
 }
-
 blockquote.caution p:before {
     content: "Caution: ";
     font-weight: bold;
@@ -275,7 +278,6 @@ blockquote.warning {
     border-color: var(--pink);
     background-color: var(--light-pink);
 }
-
 blockquote.warning p:before {
     content: "Warning: ";
     font-weight: bold;