documentation: #30 changed style code blocks from documents

documentation/components/buttons.md

@@ -15,7 +15,7 @@ Colors in buttons are also related to communicating messages to the users about
 
 Use the `btn` class for a default button, and combine it with other colors if a color different than `gnome-blue` is needed. The `btn` class should always be used on the buttons variants described on the next topics, except for the `links`.
 
-{{< example >}}
+~~~html
 <div class="container flex-grow">
     <button class="btn mr-2 my-2">GNOME Blue</button>
     <button class="btn red mr-2 my-2">Red</button>
@@ -23,13 +23,13 @@ Use the `btn` class for a default button, and combine it with other colors if a
     <button class="btn yellow mr-2 my-2">Yellow</button>
     <button class="btn green my-2">Green</button>
 </div>
-{{< /example >}}
+~~~
 
 ## Outline
 
 Outline buttons are used for secondary or tertiary actions. To use this variation, add `outline` class to the button and combine it with other colors.
 
-{{< example >}}
+~~~html
 <div class="container flex-grow">
     <button class="btn outline mr-2 my-2">GNOME Blue</button>
     <button class="btn outline-red mr-2 my-2">Red</button>
@@ -37,13 +37,13 @@ Outline buttons are used for secondary or tertiary actions. To use this variatio
     <button class="btn outline-yellow mr-2 my-2">Yellow</button>
     <button class="btn outline-green mr-2 my-2">Green</button>
 </div>
-{{< /example >}}
+~~~
 
 ## Squared
 
 Usually, squared buttons give a more serious feeling to the website. It can be used by default on the website (even combined with other variants like outlined) or it can be used in specific spots, but it is not recommended to be used next to a rounded button - it may cause inconsistency. Use `squared` class to produce this variant.
 
-{{< example >}}
+~~~html
 <div class="container flex-grow">
     <button class="btn squared mr-2 my-2">GNOME Blue</button>
     <button class="btn red squared mr-2 my-2">Red</button>
@@ -51,13 +51,13 @@ Usually, squared buttons give a more serious feeling to the website. It can be u
     <button class="btn outline-yellow squared mr-2 my-2">Yellow</button>
     <button class="btn outline-green squared mr-2 my-2">Green</button>
 </div>
-{{< /example >}}
+~~~
 
 ## Other sizes
 
 Larger buttons can be used to draw user attention, while smaller buttons can be used to fit inside smaller spaces. Add `small` or `large` classes to produce buttons in different sizes, but be careful not to create inconsistency by placing buttons with different sizes close to each other.
 
-{{< example >}}
+~~~html
 <div class="container flex-grow">
     <button class="btn small mr-2 my-2">Small</button>
     <button class="btn red small mr-2 my-2">Small</button>
@@ -73,13 +73,13 @@ Larger buttons can be used to draw user attention, while smaller buttons can be
     <button class="btn outline-yellow large squared mr-2 my-2">Large</button>
     <button class="btn outline-green large mr-2 my-2">Large</button>
 </div>
-{{< /example >}}
+~~~
 
 ## Disabled
 
 When the user is forbidden to click some button, like when they need to fill a form before being able to click "Continue", it makes sense to show the user they can't click there. The disabled state can be added by using the `disabled` class.
 
-{{< example >}}
+~~~html
 <div class="container flex-grow">
     <button class="btn disabled small mr-2 my-2">Disabled</button>
     <button class="btn disabled small mr-2 my-2">Disabled</button>
@@ -87,13 +87,13 @@ When the user is forbidden to click some button, like when they need to fill a f
     <button class="btn disabled large squared mr-2 my-2">Disabled</button>
     <button class="btn disabled large mr-2 my-2">Disabled</button>
 </div>
-{{< /example >}}
+~~~
 
 ## Customized width
 
 Buttons placed in columns instead of next to each other need to have the same width, otherwise, they'll look disharmonious. You may want to change the width to make the button look aligned with the text or form above it too. For spacing references, check the [spacing](#spacing) page on this documentation.
 
-{{< example >}}
+~~~html
 <div class="container flex-grow">
     <div class="flex-col w-64 mx-auto">
         <button class="btn mr-2 my-2 w-full">GNOME Blue</button>
@@ -103,13 +103,12 @@ Buttons placed in columns instead of next to each other need to have the same wi
         <button class="btn green my-2 w-full">Green</button>
     </div>
 </div>
-{{< /example >}}
-
+~~~
 ## Links
 
 link buttons behave like regular anchors but they have a special look - they are buttons with no background, borders, or shadows, but they respect buttons colors and have an underline hover effect. Use the `link` class combined with colors.
 
-{{< example >}}
+~~~html
 <div class="container flex-grow">
     <button class="link mr-2 my-2">Link</button>
     <button class="link gnome-blue mr-2 my-2">Link</button>
@@ -119,4 +118,4 @@ link buttons behave like regular anchors but they have a special look - they are
     <button class="link green mr-2 my-2">Link</button>
     <button class="link white mr-2 my-2">Link</button>
 </div>
-{{< /example >}}
+~~~
\ No newline at end of file

documentation/components/inputs.md

@@ -11,67 +11,67 @@ nav_order: 3
 
 For single line inputs.
 
-{{< example >}}
+~~~html
 <div class="flex flex-col w-1/2">
     <label for="first-name" >First Name</label>
     <input type="text" id="first-name" class="mt-2" placeholder="Write your first name here">
 </div>
-{{< /example >}}
+~~~
 
 ## Text area
 
 For multiline inputs.
 
-{{< example >}}
+~~~html
 <div class="flex flex-col">
     <label for="message" >Biography</label>
     <textarea id="message" class="mt-2"></textarea>
 </div>
-{{< /example >}}
+~~~
 
 ## Date
 
-{{< example >}}
+~~~html
 <div class="flex flex-col w-1/2">
     <label for="date">Birthday</label>
     <input type="date" class="mt-2" id="date">
 </div>
-{{< /example >}}
+~~~
 
 ## Email
 
-{{< example >}}
+~~~html
 <div class="flex flex-col w-1/2">
     <label for="email" >Email</label>
     <input type="email" class="mt-2" id="email" placeholder="your@email.com">
 </div>
-{{< /example >}}
+~~~
 
 ## Password
 
-{{< example >}}
+~~~html
 <div class="flex flex-col w-1/2">
     <label for="password" >Password</label>
     <input type="password" class="mt-2" id="password">
 </div>
-{{< /example >}}
+~~~
 
 ## Invalid inputs
 
 When some input has invalid data or is not filled, apply the `danger` class.
 
-{{< example >}}
+~~~html
 <div class="flex flex-col w-1/2">
     <label for="invalid">Invalid input</label>
     <input type="email" class="mt-2 danger" id="invalid">
 </div>
-{{< /example >}}
+~~~
 
 ## Select
 
 For predetermined options.
 
-{{< example >}}
+~~~html
 <label for="select" class="mt-6">Select language</label>
 <div class="flex-shrink w-1/3 inline-block relative mt-2">
     <select class="form-select cursor-pointer">
@@ -80,11 +80,11 @@ For predetermined options.
         <option>Spanish</option>
     </select>
 </div>
-{{< /example >}}
+~~~
 
 ## Checkbox
 
-{{< example >}}
+~~~html
 <div class="flex flex-col">
     <div class="inline-flex items-center">
         <input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
@@ -99,11 +99,11 @@ For predetermined options.
         <span class="ml-2">Checkbox 3</span>
     </div>
 </div>
-{{< /example >}}
+~~~
 
 ## Radio button
 
-{{< example >}}
+~~~html
 <div class="flex flex-col">
     <div class="inline-flex items-center">
         <input type="radio" class="form-radio cursor-pointer" name="radio-group">
@@ -118,12 +118,12 @@ For predetermined options.
         <span class="ml-2">Radio 3</span>
     </div>
 </div>
-{{< /example >}}
+~~~
 
 ## Toggle/ switch
 Refers to enabling or disabling options.
 
-{{< example >}}
+~~~html
 <div>
     <div class="toggle">
         <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox" />
@@ -131,7 +131,7 @@ Refers to enabling or disabling options.
     </div>
     <label for="toggle">Toggle</label>
 </div>
-{{< /example >}}
+~~~
 
 ## Search
 
@@ -139,7 +139,7 @@ Refers to enabling or disabling options.
 
 ![Regular search](/assets/regular-search.gif)
 
-{{< example >}}
+~~~html
 <label for="search">Regular search</label>
 <div id="search" class="search mr-6 mb-8">
     <input type="search" onfocus="addBlueToSearchIcon('search-icon')"
@@ -162,13 +162,13 @@ Refers to enabling or disabling options.
         searchIcon.classList.remove("text-gnome-blue-500");
     }
 </script>
-{{< /example >}}
+~~~
 
 ### Collapsable search
 
 ![Collapsable search](/assets/collapsable-search.gif)
 
-{{< example >}}
+~~~html
 <label for="search" class="mt-8">Collapsed search</label>
 <div id="search" class="search mr-6 mb-8">
     <input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
@@ -223,4 +223,4 @@ Refers to enabling or disabling options.
         searchIcon.classList.remove("text-gnome-blue-500");
     }
 </script>
-{{< /example >}}
+~~~

documentation/index.md

@@ -41,9 +41,10 @@ The project documentation is developed using Jekyll and Gitlab pages, and it use
 1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/).
 2. Install dependencies:
 > $ bundle install
-3. Copy the **generated styles from the previous steps** into the custom styles of the documentation:
-> $ mkdir documentation/_sass/custom/ # Only needed in the first time
+3. Copy the **generated styles from the previous steps** into the custom styles of the documentation: # Only needed in the first time
+> $ mkdir documentation/_sass/custom/ 
+
 > $ cp dist/index.css "documentation/_sass/custom/custom.scss"
 4. Run the documentation server:
 > $ bundle exec jekyll build -s documentation/
-5. Navigate to http://127.0.0.1:4000/ in your browser to see it running.
\ No newline at end of file
+5. Navigate to http://127.0.0.1:4000/Engagement/websites/general-website-resources/ in your browser to see it running.
\ No newline at end of file

documentation/preflight/typography.md

@@ -7,9 +7,9 @@ nav_order: 2
 
 # Typography
 
-{{< example >}}
+~~~html
 <h1>Heading 1</h1>
 <h2>Heading 2</h2>
 <h3>Heading 3</h3>
 <h4>Heading 4</h4>
-{{< /example >}}
+~~~

documentation/samples/buttons.md

@@ -7,7 +7,7 @@ permalink: /samples/buttons
 has_children: true
 ---
 
-{{< example >}}
+~~~html
 <body class="bg-gray-100">
     <div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
         <h2 class="mb-4">Buttons</h2>
@@ -80,4 +80,4 @@ has_children: true
         </div>
     </div>
 </body>
-{{< /example >}}
+~~~

documentation/samples/colors.md

@@ -7,7 +7,7 @@ permalink: /samples/colors
 has_children: true
 ---
 
-{{< example >}}
+~~~html
 <body class="bg-gray-100">
     <div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
         <h2 class="mb-4">Colors</h2>
@@ -544,4 +544,4 @@ has_children: true
         </div>
     </div>
 </body>
-{{< /example >}}
+~~~

documentation/samples/index.md

@@ -6,7 +6,7 @@ permalink: /samples/
 has_children: true
 ---
 
-{{< example >}}
+~~~html
 <body class="bg-gray-100">
     <div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
         <h2 class="mx-auto">GNOME UI Samples</h2>
@@ -34,4 +34,4 @@ has_children: true
         </ul>
     </div>
 </body>
-{{< /example >}}
+~~~

documentation/samples/inputs.md

@@ -7,7 +7,7 @@ permalink: /samples/inputs
 has_children: true
 ---
 
-{{< example >}}
+~~~html
 <div class="bg-gray-100">
     <div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
         <h2 class="mb-4">Inputs</h2>
@@ -156,4 +156,4 @@ has_children: true
         searchIcon.classList.remove("text-gnome-blue-500");
     }
 </script>
-{{< /example >}}
+~~~

documentation/samples/typography.md

@@ -7,7 +7,7 @@ permalink: /samples/typography
 has_children: true
 ---
 
-{{< example >}}
+~~~html
 <body class="bg-gray-100">
     <div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
         <h2 class="mb-4">Typography</h2>
@@ -21,4 +21,4 @@ has_children: true
         <p class="text-sm">Small text</p>
     </div>
 </body>
-{{< /example >}}
+~~~