Add code-block in What is Turing.jl? Section

Author: shravanngoswamii

index.qmd

@@ -31,33 +31,105 @@ listing:
 :::
 <!-- Header End Here -->
 
-<!-- Feature Boxes -->
-:::: {.section-start-space}
+<!-- What is Turing.jl Section -->
+:::: {.section-start-space .section-end-space}
 
+::: {.text-center}
 ### What is Turing.jl?
-<p>Turing.jl is a Julia library for general-purpose probabilistic programming.</p>
+Turing.jl is a Julia library for general-purpose probabilistic programming.
+:::
 
-::::
+::: {.what-is-turing-grid .section-start-space}
 
-::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-4 .section-end-space}
+::: {.feature-text-column}
+
+::: {.feature-item}
+::: {.feature-item-header}
+
+```{=html}
+<span class="feature-icon icon-expressive"></span>
+```
+
+##### Expressive
+
+:::
 
-::: {.panel .box}
-##### Expressive {.panel-title .pb-1}
 Turing models are easy to write and communicate, with syntax that is close to the mathematical specification of the model.
+
+:::
+
+::: {.feature-item}
+::: {.feature-item-header}
+
+```{=html}
+<span class="feature-icon icon-general-purpose"></span>
+```
+
+##### General-purpose
+
 :::
 
-::: {.panel .box}
-##### General-purpose {.panel-title .pb-1}
 Turing supports models with discrete parameters and stochastic control flow.
+
+:::
+
+::: {.feature-item}
+::: {.feature-item-header}
+
+```{=html}
+<span class="feature-icon icon-composable"></span>
+```
+
+##### Composable
+
 :::
 
-::: {.panel .box}
-##### Composable {.panel-title .pb-1}
 Turing is written entirely in Julia, and is interoperable with its powerful ecosystem.
+
 :::
 
-:::::
-<!-- Feature Boxes Ends Here -->
+:::
+
+::: {.code-example-column}
+::: {.code-window .box}
+::: {.code-window-header}
+::: {.code-window-dots}
+
+```{=html}
+<span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
+```
+
+:::
+:::
+
+```{.julia .code-overflow-scroll}
+using Turing
+
+@model function linear_regression(x)
+    # Priors
+    α ~ Normal(0, 1)
+    β ~ Normal(0, 1)
+    σ² ~ truncated(Normal(0, 1), lower=0)
+
+    # Likelihood
+    μ = α .+ β .* x
+    y ~ MvNormal(μ, σ² * I)
+
+    return (; y, α, β, σ², μ)
+end
+
+x, y = rand(10), rand(10)
+posterior = linear_regression(x) | (;y = y)
+chains = sample(posterior, NUTS(), 1000, progress=false)
+```
+
+:::
+:::
+
+:::
+::::
+<!-- What is Turing.jl Section Ends Here -->
+
 
 <!-- Start Your Journey Section -->
 :::: {.section-header .section-start-space}

theming/rules/_layouts.scss

@@ -33,7 +33,7 @@
     flex-wrap: wrap;
 }
 
-// Not hoverable? Maybe have to move? Maybe not.
+/* General Layout Styles */
 .btn-lg {
     padding: 14px 32px;
     font-size: 1.1rem;
@@ -59,14 +59,6 @@
     min-width: 300px;
     max-width: 31%;
 
-    /* Does this bit achieve anything? I think it's inherited?
-  p {
-    color: $text-muted;
-    font-size: 17px;
-    font-weight: 400;
-  }
-  */
-
     .panel-title {
         color: $text-color !important;
         font-size: 1.4rem;
@@ -116,15 +108,121 @@
     padding-right: 4rem;
 }
 
-.example-code {
-    flex: 0 1 45%;
+/* What is Turing.jl Section */
+.what-is-turing-grid {
+    display: grid;
+    grid-template-columns: 1fr 1.25fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.feature-text-column {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.feature-item-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+}
+
+/* Base styles for all feature icons */
+.feature-icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+/* background image for each icon */
+.icon-expressive {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21C7 21 7 17 8 12C9 7 9 3 11 3C11.5304 3 12.0391 3.21071 12.4142 3.58579C12.7893 3.96086 13 4.46957 13 5' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9999 12L19.9999 18' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9999 18L19.9999 12' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon-general-purpose {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99988 8H15.9999V16H7.99988V8Z' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00012 6C4.00012 5.46957 4.21084 4.96086 4.58591 4.58579C4.96098 4.21071 5.46969 4 6.00012 4H18.0001C18.5306 4 19.0393 4.21071 19.4143 4.58579C19.7894 4.96086 20.0001 5.46957 20.0001 6V18C20.0001 18.5304 19.7894 19.0391 19.4143 19.4142C19.0393 19.7893 18.5306 20 18.0001 20H6.00012C5.46969 20 4.96098 19.7893 4.58591 19.4142C4.21084 19.0391 4.00012 18.5304 4.00012 18V6Z' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
-.example-text {
-    flex: 0 1 53%;
+.icon-composable {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9999 3L7.99988 10H15.9999L11.9999 3Z' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9999 17C13.9999 17.7956 14.3159 18.5587 14.8786 19.1213C15.4412 19.6839 16.2042 20 16.9999 20C17.7955 20 18.5586 19.6839 19.1212 19.1213C19.6838 18.5587 19.9999 17.7956 19.9999 17C19.9999 16.2044 19.6838 15.4413 19.1212 14.8787C18.5586 14.3161 17.7955 14 16.9999 14C16.2042 14 15.4412 14.3161 14.8786 14.8787C14.3159 15.4413 13.9999 16.2044 13.9999 17Z' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00012 15C4.00012 14.7348 4.10548 14.4804 4.29302 14.2929C4.48055 14.1054 4.73491 14 5.00012 14H9.00012C9.26534 14 9.51969 14.1054 9.70723 14.2929C9.89477 14.4804 10.0001 14.7348 10.0001 15V19C10.0001 19.2652 9.89477 19.5196 9.70723 19.7071C9.51969 19.8946 9.26534 20 9.00012 20H5.00012C4.73491 20 4.48055 19.8946 4.29302 19.7071C4.10548 19.5196 4.00012 19.2652 4.00012 19V15Z' stroke='%234DB6AC' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+
+.feature-item {
+    h5 {
+        font-weight: 700;
+        font-size: 1.2rem;
+        color: $text-color;
+        margin-bottom: 0;
+    }
+    p {
+        font-size: 1rem;
+        line-height: 1.6;
+        margin-bottom: 0;
+    }
+}
+
+.code-example-column {
+  .code-window {
+    padding: 0;
+    overflow: hidden; 
+    
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 22px darken($box-shadow-color, 40%);
+        border: 1px solid $btn-border-color;
+    }
+  }
+  
+  .code-window-header {
+    background-color: $panel-bg;
+    padding: 0.9rem 1.2rem;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid lighten($btn-border-color, 5%);
+    position: relative;
+  }
+  
+  .code-window-dots {
+    display: flex;
+    gap: 0.55rem;
+  }
+  
+  .dot {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    display: inline-block;
+    &.red { background-color: #ff5f56; }
+    &.yellow { background-color: #ffbd2e; }
+    &.green { background-color: #27c93f; }
+  }
+
+  .sourceCode {
+    border: none !important;
+    border-radius: 0 0 $border-radius-sm $border-radius-sm !important;
+    margin: 0 !important;
+    background-color: $code-block-bg !important;
+    
+    pre {
+      padding: 1.5rem !important;
+      margin: 0;
+    }
+  }
+
+  .quarto-code-tools {
+    background-color: transparent !important;
+    top: 0.5rem !important;
+    right: 0.5rem !important;
+  }
 }
 
-/* === Core Packages Section === */
+/* Core Packages Section */
 .core-packages-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -161,7 +259,7 @@
     display: none;
 }
 
-// UNIFIED CARD GRID
+/* Unified Card Grid Layout */
 .unified-card-grid {
     display: flex;
     flex-wrap: wrap;

theming/rules/_responsive.scss

@@ -5,6 +5,16 @@
 }
 
 @media (max-width: 992px) {
+    .what-is-turing-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    /* This prevents the code block's column from overflowing the page on mobile */
+    .code-example-column {
+        min-width: 0;
+    }
+
     .custom-footer {
         .footer-links-wrapper {
             flex-basis: 100%;
@@ -50,7 +60,6 @@
         display: block;
         margin-top: 0.3rem;
         text-align: center;
-
         .button {
             display: inline-block;
             width: auto;

theming/variables/_colors-dark.scss

@@ -1,19 +1,20 @@
 $teal: #4db6ac;
 $green: #229954;
-
-// This is very similar to the "normal" teal. Can we collapse those into the same?
 $teal-license: #34b8bf;
 
 $links: $teal-license;
 $links-hover: lighten($links, 10%);
 
 $box-shadow-color: rgba(0, 0, 0, 0.4);
 
-$code-block-bg: #212529;
+// Set the main page background color
+$background-body: #1c2128;
 
-$panel-bg: $gray-900;
+// Use the main page background for code blocks to ensure consistency
+$code-block-bg: $background-body;
 
-$background-body: #1c2128;
+// Define the background for panels, making them stand out slightly
+$panel-bg: $gray-900;
 
 $body-bg: $background-body;
 $navbar-bg: lighten($background-body, 2%);