Add news (#3)

* quickfix alignment

* add news and clean up scss

Author: simonsteiger

index.qmd

@@ -1,66 +1,77 @@
 ---
 # pagetitle: "Turing"
 toc: false
-page-layout: custom
+page-layout: full
 section-divs: false
 hide-description: true
+listing:
+- id: news
+  contents:
+    - "news/posts/*/index.qmd"
+  sort: date desc
+  type: grid
+  grid-columns: 3
+  categories: false
+  sort-ui: false
+  filter-ui: false
+  fields: [title, description, date]
+  max-items: 3
+  image-height: "200"
 description: |
   Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language.
 ---
 
 ```{=html}
-<div class="content-panel">
-  <div class="d-flex flex-column align-items-center gap-0" style="padding:6rem 0;">
-    <image src="assets/images/turing-logo.svg" width="150px" alt="Three normal probability distributions">
-    <span style="font-size:4rem;font-weight:700;">
-      Turing.jl
-    </span>
-    <span class="display-6 d-block text-center pb-4 display-md-5 display-lg-4">
-      Bayesian inference with probabilistic programming
-    </span>
-    <div class="d-flex flex-row flex-wrap justify-content-center gap-2">
-      <a href="https://turinglang.org/docs/tutorials/docs-00-getting-started/" class="button--fill btn">
-        Tutorials
-      </a>
-      <a href="/library" class="button btn">
-        Ecosystem
-      </a>
-      <a href="https://github.com/TuringLang" class="button btn">
-        View on GitHub
-      </a>
-    </div>
+<div class="d-flex flex-column align-items-center gap-0" style="padding:6rem 0;">
+  <image src="assets/images/turing-logo.svg" width="150px" alt="Three normal probability distributions">
+  <span style="font-size:4rem;font-weight:700;">
+    Turing.jl
+  </span>
+  <span class="display-6 d-block text-center pb-4 display-md-5 display-lg-4">
+    Bayesian inference with probabilistic programming
+  </span>
+  <div class="d-flex flex-row flex-wrap justify-content-center gap-2">
+    <a href="https://turinglang.org/docs/tutorials/docs-00-getting-started/" class="button--fill btn">
+      Tutorials
+    </a>
+    <a href="/library" class="button btn">
+      Ecosystem
+    </a>
+    <a href="https://github.com/TuringLang" class="button btn">
+      View on GitHub
+    </a>
   </div>
-  <div class="d-flex flex-row flex-wrap justify-content-center gap-3" style="padding-bottom:6rem;">
-    <div class="card">
-      <div class="card-title">
-        Intuitive
-      </div>
-      Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+</div>
+<div class="d-flex flex-row flex-wrap justify-content-center gap-4 section-end-space">
+  <div class="panel">
+    <div class="panel-title">
+      Intuitive
     </div>
-    <div class="card">
-      <div class="card-title">
-        General-purpose
-      </div>
-      Turing supports models with discrete parameters and stochastic control flow. 
+    Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+  </div>
+  <div class="panel">
+    <div class="panel-title">
+      General-purpose
     </div>
-    <div class="card">
-      <div class="card-title">
-        Modular & composable
-      </div>
-      Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
+    Turing supports models with discrete parameters and stochastic control flow. 
+  </div>
+  <div class="panel">
+    <div class="panel-title">
+      Modular & composable
     </div>
+    Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
   </div>
 </div>
 ```
-<div class="content-panel">
-<div class="d-flex flex-row flex-wrap justify-content-center gap-3">
-<div style="min-width:420px; max-width:420px;text-align:right;padding:0.5rem;">
-  <div style="font-size:x-large;font-weight:700;padding-bottom:0.5rem;">
+
+<div class="d-flex flex-row flex-wrap justify-content-center gap-3 pb-2">
+<div class="example-text" style="text-align:right;padding:0.5rem;">
+  <div class="fs-4 fw-bold pb-1">
   Hello, World in Turing
   </div>
   Some text about how easy it is to [get going](https://turinglang.org/docs/tutorials/00-introduction/).
 </div>
-<div style="min-width:500px;">
+<div class="example-code">
 ```julia
 @model function coinflip(; N::Int)
     # Prior belief about the probability of heads
@@ -75,8 +86,14 @@ end;
 ```
 </div>
 </div>
-<div class="d-flex flex-row flex-wrap justify-content-center gap-3">
-<div style="min-width:500px;">
+<div class="d-flex flex-row-reverse flex-wrap justify-content-center gap-3 pt-2 section-end-space">
+<div class="example-text" style="padding:0.5rem;">
+  <div class="fs-4 fw-bold pb-1">
+  Goodbye, World in Turing
+  </div>
+  Some text about how easy it is to interface with external packages like AbstractGPs. Learn more about modelling [Gaussian Processes](https://turinglang.org/docs/tutorials/15-gaussian-processes/) with Turing.jl.
+</div>
+<div class="example-code">
 ```julia
 @model function putting_model(d, n; jitter=1e-4)
     v ~ Gamma(2, 1)
@@ -89,60 +106,15 @@ end;
 end
 ```
 </div>
-<div style="min-width:420px; max-width:420px;padding:0.5rem;">
-  <div style="font-size:x-large;font-weight:700;padding-bottom:0.5rem;">
-  Goodbye, World in Turing
-  </div>
-  Some text about how easy it is to interface with external packages like AbstractGPs. Learn more about modelling [Gaussian Processes](https://turinglang.org/docs/tutorials/15-gaussian-processes/) with Turing.jl.
-</div>
 </div>
-</div>
-
-
-<!--
-::: {.hero-banner}
-::: {.grid}
-::: {.g-col-1}
-:::
-::: {.g-col-8}
-
-# Turing.jl: Bayesian inference with probabilistic programming. 
-
-### Intuitive
-Turing models are easy to write and communicate — syntax is close to mathematical notations. 
 
-### General-purpose
-Turing supports models with discrete parameters and stochastic control flow. 
-
-### Modular and composable 
-Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. 
-
-
-::: {.hero-buttons style="position: relative; display: flex; justify-content: center;"}
-[Get Started]({{< meta get-started >}}){.btn-action-primary .btn-action .btn .btn-lg role="button" style="background-color: #073c44; color: white"}
-:::
-
-::: {.g-col-3}
-:::
-:::
-:::
-
-:::
+```{=html}
+<div class="pb-3 fs-2 fw-bold">
+  News
+</div>
+```
+::: {#news}
 
-::: {style="position: relative; display: flex; justify-content: center;"}
-::: {.grid}
-::: {.g-col-1}
 :::
-::: {.g-col-8}
-## Community Resources
-
-The Turing.jl [discourse forum](https://discourse.julialang.org/c/domain/probprog) provides support and discussion for all user levels.
-The [Turing.jl documentation]({{< meta get-started >}}) and [official tutorials]({{< meta tutorials-intro >}}) help users learn and use Turing.jl!
-There's also a [tutorial in Bayesian Statistics using Julia and Turing.jl](https://storopoli.io/Bayesian-Julia).
 
-:::
-::: {.g-col-3}
-:::
-:::
-:::
--->
+[See all news &rarr;](news/)

theming/dark.scss

@@ -3,15 +3,19 @@
 // Bootswatch
 
 $theme: "cosmo" !default;
+@import "variables/greys";
 @import "variables/colorsdark";
 @import "variables/borders";
+@import "variables/spacers";
 
 /*-- scss:rules --*/
 
+@import "rules/mixins";
+
 @import "rules/layouts";
-@import "rules/cards";
-@import "rules/buttons";
+@import "rules/hoverables-dark";
+@import "rules/panels";
 @import "rules/navbar";
-@import "rules/sourceCode";
+@import "rules/codeblocks";
 
-//
+@import "old/old-styles";

theming/light.scss

@@ -1,13 +1,19 @@
 /*-- scss:defaults --*/
 
+@import "variables/greys";
 @import "variables/colorslight";
 @import "variables/borders";
+@import "variables/spacers";
 
 /*-- scss:rules --*/
 
+@import "rules/mixins";
+
 @import "rules/layouts";
-@import "rules/cards";
-@import "rules/buttons";
+@import "rules/hoverables-light";
+@import "rules/panels";
 @import "rules/navbar";
-@import "rules/sourceCode";
+@import "rules/codeblocks";
+
+@import "old/old-styles";
 

theming/old/_old-styles.scss

@@ -0,0 +1,47 @@
+/* css styles */
+/* .cell-output {
+    background-color: #f1f3f5;
+} */
+
+/* .cell-output img {
+    max-width: 100%;
+    height: auto;
+} */
+
+/* .cell-output-display pre {
+    word-break: break-wor !important;
+    white-space: pre-wrap !important;
+}
+ */
+
+/* now included in _navbar.scss
+ .navbar a:hover {
+    text-decoration: none;
+}
+*/
+
+.cell-output {
+    border: 1px dashed;
+}
+
+.cell-output-stdout code {
+    word-break: break-wor !important;
+    white-space: pre-wrap !important;
+}
+
+
+.cell-output-display svg {
+    height: fit-content;
+    width: fit-content;
+}
+
+.cell-output-display img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.nav-footer-center {
+    display: flex;
+    justify-content: center;
+}

theming/rules/_buttons.scss

@@ -0,0 +1,25 @@
+$hover-border: lighten($color-secondary, 5%);
+
+.button {
+    @include button($hover-border)
+}
+
+.card {
+    @include card($hover-border)
+}
+
+.example-code {
+    flex: 0 1 45%;
+    
+    @media screen and (max-width: 992px) {
+        flex: 0 1 100%;
+    }
+}
+
+.example-text {
+    flex: 0 1 53%;
+    
+    @media screen and (max-width: 992px) {
+        flex: 0 1 100%;
+    }
+}

theming/rules/_sourceCode.scss renamed to theming/rules/_codeblocks.scss

@@ -0,0 +1,25 @@
+$hover-border: darken($color-secondary, 15%);
+
+.button {
+    @include button($hover-border)
+}
+
+.card {
+    @include card($hover-border)
+}
+
+.example-code {
+    flex: 0 1 45%;
+    
+    @media screen and (max-width: 992px) {
+        flex: 0 1 100%;
+    }
+}
+
+.example-text {
+    flex: 0 1 53%;
+    
+    @media screen and (max-width: 992px) {
+        flex: 0 1 100%;
+    }
+}

theming/rules/_hoverables-dark.scss

@@ -1,3 +1,7 @@
 .content-panel {
     padding: 1.5rem;
 }
+
+.section-end-space {
+    padding-bottom: $large-y-space;
+}