Multiple fixes in Stipple.jl/Reference/Styling section. Wrong figure,…

… add GB reference, open external links in new window, fix wrong link for Quasar Spacing)

content/2.framework/3.stipple.jl/0.docs/4.styling.md

@@ -8,7 +8,7 @@ toc: true
 
 Cascading Style Sheets (CSS) is a language for styling HTML documents, enabling developers to separate design from content. CSS enhances websites with visually appealing layouts, improved loading times, responsive design, and cross-browser compatibility.
 
-In a Genie app you can use inline CSS [style attributes](https://www.w3schools.com/cssref/index.php) or define your own stylesheets in the `public/` folder and import them with 
+In a Genie app you can use inline CSS <a href="https://www.w3schools.com/cssref/index.php" target="blank">style attributes</a> or define your own stylesheets in the `public/` folder and import them with 
 
 ```julia
 Stipple.Layout.add_css("froop.css", "bootstrap.css")
@@ -51,12 +51,18 @@ cell(class="q-pa-sm col-12",
     p("This paragraph has small padding and takes the full width of the container."))
 ```
 
-Check the official Quasar documentation for a comprehensive list of available classes: [Quasar CSS Helpers](https://quasar.dev/style/typography).
+Check the official Quasar documentation for a comprehensive list of available classes: <a href="https://quasar.dev/style/typography" target="_blank">Quasar CSS Helpers</a>.
 
 
 ## Using Stipple Classes
 
-Stipple extends Quasar's Layout classes, offering utility classes that simplify organizing app content. Instead of individually assigning styles to elements (which could produce hard-to-mantain results), we encourage you to use these classes so that space distribution and spacing is consistent across your whole app. At your disposal you have classes for defining layouts (rows and columns), spacing (padding, margin, gap) and more.
+Stipple extends Quasar's Layout classes, offering utility classes that simplify organizing app content. Instead of individually assigning styles to elements (which could produce hard-to-mantain results), we encourage you to use these classes so that space distribution and spacing is consistent across your whole app. At your disposal you have classes for defining layouts (rows and columns), spacing (padding, margin, gap) and more. 
+
+This document only shows classes applied in HTML. In order to do this in [Genie Builder](/geniebuilder/docs) all you need to do is to select the element, open the Styles pane and apply the same classes, as in this screenshot below:
+<div style="background: #ccccdc30; padding: 10px;">
+    <img style="display:block;width:100%;max-width:320px;margin-left:auto;margin-right:auto; box-shadow: 4px 6px 20px #00000060; border: solid 1px #00000070;" src="/assets/framework/stipple/guidelines/fig1.jpg">
+</div>
+
 
 ### Layout
 
@@ -72,7 +78,7 @@ Organize your content layout with the Flex Grid system using rows and columns. R
     <div class="col">Row 2, Col 2</div>
 </div>
 ```
-<img style="display:block;width:100%;max-width:100%;margin-left:auto;margin-right:auto" src="/assets/framework/stipple/guidelines/fig2.jpg">
+<img style="display:block;width:100%;max-width:100%;margin-left:auto;margin-right:auto" src="/assets/framework/stipple/guidelines/fig5.jpg">
 
 
 #### Space Distribution
@@ -110,7 +116,7 @@ Create adaptive layouts using size-specific classes applied per screen size. For
 
 
 ### Spacing
-Rows and columns, by default, do not display padding or margins, so that inner content is aligned exactly at their boundaries. Margin and padding can be easily added using [Quasar's spacing classes](~https://v1.quasar.dev/style/spacing~). Let's see some examples.
+Rows and columns, by default, do not display padding or margins, so that inner content is aligned exactly at their boundaries. Margin and padding can be easily added using <a href="https://v1.quasar.dev/style/spacing" target="_blank">Quasar's spacing classes</a>. Let's see some examples.
 
 #### Padding
 
@@ -208,7 +214,7 @@ By using Stipple's utility classes and layout structure, you ensure a cohesive d
 
 ## Using Tailwind CSS
 
-Tailwind CSS is a popular framework providing a set of utility classes to style a page. With it you can customize almost every aspect of your app's design without having to define your own stylesheets. See [this page](https://tailwind.build/classes) for a list of available classes. To use Tailwind, include the necessary JavaScript with
+Tailwind CSS is a popular framework providing a set of utility classes to style a page. With it you can customize almost every aspect of your app's design without having to define your own stylesheets. See <a href="https://tailwind.build/classes" target="_blank">this page</a> for a list of available classes. To use Tailwind, include the necessary JavaScript with
 
 ```julia
 Stipple.Layout.add_script("https://cdn.tailwindcss.com")