WIP layouts section

_quarto.yml

@@ -11,6 +11,7 @@ project:
     - inputs
     - outputs
     - display-messages
+    - layouts
     - docs
     - in-depth
     - development
@@ -46,12 +47,12 @@ website:
   open-graph:
     site-name: Shiny for Python
     locale: es_ES
-    image: images/shiny-for-python.jpg
+    image: https://shiny.posit.co/py/images/shiny-for-python.jpg
     description: Build interactive web applications easily with the power of Python’s data and scientific stack.
   twitter-card:
     title: "Shiny for Python"
     description: "Build interactive web applications easily with the power of Python’s data and scientific stack."
-    image: "images/shiny-for-python.jpg"
+    image: https://shiny.posit.co/py/images/shiny-for-python.jpg
     image-width: 1200
     image-height: 630
     card-style: "summary_large_image"
@@ -74,6 +75,8 @@ website:
           - docs/shinylive.qmd
       - text: "Components"
         file: components/index.qmd
+      - text: "Layouts"
+        file: layouts/index.qmd
       - text: "Gallery"
         file: gallery/index.qmd
       - text: "Examples"

layouts/_partials/components-list.css → layouts/_partials/layouts-list.css

@@ -11,14 +11,14 @@ body {
   background: linear-gradient(175deg,
   rgba(250, 250, 250, 1),
   rgba(248, 248, 248, 1),
-  rgba(193, 0, 0, .04), /* red */
-  rgba(193, 0, 0, .05), /* red */
-  rgba(191, 0, 127, .04), /* pink */
-  rgba(191, 0, 127, .04), /* pink */
+  rgba(75, 0, 193, .05), /* indigo */
+  rgba(75, 0, 193, .05), /* indigo */
   rgba(116, 20, 156, .04), /* purple */
   rgba(116, 20, 156, .04), /* purple */
-  rgba(75, 0, 193, .05), /* indigo */
-  rgba(75, 0, 193, .05) /* indigo */
+  rgba(191, 0, 127, .04), /* pink */
+  rgba(191, 0, 127, .04), /* pink */
+  rgba(193, 0, 0, .04), /* red */
+  rgba(193, 0, 0, .05) /* red */
   100%);
 }
 

layouts/_partials/layouts.css

@@ -163,7 +163,7 @@ pre.console code {
 }
 
 /* Tab styling */
-/*
+
 .panel-tabset .nav-tabs {
   display: flex !important;
   align-items: flex-end !important;
@@ -213,7 +213,7 @@ a.nav-link:hover {
 .panel-tabset .nav-tabs .nav-link {
   padding: 0.35rem 1.25rem;
   margin-bottom: 0px;
-}*/
+}
 
 .iframe-border {
   border: 1px solid #E9ECEF;