improve colors

Author: simonsteiger

index.qmd

@@ -44,19 +44,19 @@ description: |
 </div>
 <div class="d-flex flex-row flex-wrap panel-wrapper gap-4 section-end-space">
   <div class="panel">
-    <div class="panel-title">
+    <div class="panel-title pb-1">
       Intuitive
     </div>
     Turing models are easy to write and communicate — syntax is close to mathematical notations. 
   </div>
   <div class="panel">
-    <div class="panel-title">
+    <div class="panel-title pb-1">
       General-purpose
     </div>
     Turing supports models with discrete parameters and stochastic control flow. 
   </div>
   <div class="panel">
-    <div class="panel-title">
+    <div class="panel-title pb-1">
       Modular & composable
     </div>
     Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
@@ -109,9 +109,9 @@ end
 </div>
 
 ```{=html}
-<div class="pb-3 fs-2 fw-bold">
+<h3 class="pb-3">
   News
-</div>
+</h3>
 ```
 ::: {#news}
 
@@ -120,57 +120,57 @@ end
 [See all news &rarr;](news/)
 
 ```{=html}
-<div class="section-start-space pb-3 fs-2 fw-bold">
+<h3 class="pb-3 section-start-space">
   Learn more
-</div>
+</h3>
 <div class="list grid quarto-listing-cols-3">
   <a class="pseudolisting" href="https://discourse.julialang.org/c/domain/probprog/48">
     <div class="card-title h5">
       Discourse
     </div>
-    <div class="card-text quarto-grid-item">
+    <p class="quarto-grid-item">
       Get support from and discuss with other users.
-    </div>
+    </p>
   </a>
   <a class="pseudolisting" href="https://turinglang.org/docs/tutorials/docs-00-getting-started/">
     <div class="card-title h5">
       Documentation
     </div>
-    <div class="card-text quarto-grid-item">
+    <p class="quarto-grid-item">
       Familiarize yourself with the Turing.jl API.
-    </div>
+    </p>
   </a>
   <a class="pseudolisting" href="https://turinglang.org/docs/tutorials/00-introduction/">
     <div class="card-title h5">
       Official tutorials
     </div>
-    <div class="card-text quarto-grid-item">
+    <p class="quarto-grid-item">
       Learn to tackle specific problems with Turing.jl.
-    </div>
+    </p>
   </a>
   <a class="pseudolisting" href="resources/content/inofficial_tutorials.qmd">
     <div class="card-title h5">
       Inofficial tutorials
     </div>
-    <div class="card-text quarto-grid-item">
+    <p class="quarto-grid-item">
       A list of inofficial tutorials using Turing.jl.
-    </div>
+    </p>
   </a>
   <a class="pseudolisting" href="resources/content/talks.qmd">
     <div class="card-title h5">
       Talks
     </div>
-    <div class="card-text quarto-grid-item">
+    <p class="quarto-grid-item">
       A list of talks on the Turing.jl ecosystem.
-    </div>
+    </p>
   </a>
   <a class="pseudolisting" href="">
     <div class="card-title h5">
       Workshop
     </div>
-    <div class="card-text quarto-grid-item">
+    <p class="quarto-grid-item">
       Placeholder for Turing-Workshop repo link.
-    </div>
+    </p>
   </a>
 </div>
 ```

theming/dark.scss

@@ -14,10 +14,8 @@ $theme: "cosmo" !default;
 
 @import "rules/layouts";
 @import "rules/hoverables-dark";
-@import "rules/panels";
 @import "rules/navbar";
-@import "rules/codeblocks";
+@import "rules/quarto-tweaks";
 
 @import "old/old-styles";
 
-//

theming/light.scss

@@ -11,9 +11,8 @@
 
 @import "rules/layouts";
 @import "rules/hoverables-light";
-@import "rules/panels";
 @import "rules/navbar";
-@import "rules/codeblocks";
+@import "rules/quarto-tweaks";
 
 @import "old/old-styles";
 

theming/rules/_codeblocks.scss

@@ -1,11 +1,13 @@
-$hover-border: lighten($color-secondary, 5%);
-
 .button {
-    @include button($hover-border)
+    @include button($border-hover);
 }
 
 .card {
-    @include card($hover-border)
+    @include card($border-hover);
+
+    .card-text {
+        color: $text-muted;
+    }
 }
 
 .example-code {

theming/rules/_hoverables-dark.scss

@@ -1,11 +1,9 @@
-$hover-border: darken($color-secondary, 15%);
-
 .button {
-    @include button($hover-border)
+    @include button($border-hover)
 }
 
 .card {
-    @include card($hover-border)
+    @include card($border-hover)
 }
 
 .example-code {

theming/rules/_hoverables-light.scss

@@ -9,3 +9,34 @@
 .section-start-space {
     padding-top: $large-y-space;
 }
+
+.panel {
+    border-radius: $border-radius-sm;
+    padding: 1rem 1.25rem;
+    min-height: 150px;
+    min-width: 300px;
+    max-width: 31%;
+
+    color: $text-muted !important;
+    background-color: $color-mute-bg !important;
+    border: solid $color-mute-bg 0px !important;
+
+    .panel-title {
+        color: $color-fg !important;
+        font-size: x-large;
+        font-weight: 700;
+    }
+
+    &--nopad {
+        @extend .panel;
+        padding: 0rem;
+    }
+}
+
+.panel-wrapper {
+    justify-content: space-between;
+
+    @media screen and (max-width: 992px) {
+        justify-content: center;
+    }
+}

theming/rules/_layouts.scss

@@ -20,10 +20,6 @@
         font-weight: 700;
     }
 
-    .card-text {
-        color: $text-muted !important;
-    }
-
     &:hover {
         background-color: $color-highlight !important;
         border-color: $hover-border !important;

theming/rules/_mixins.scss

@@ -5,4 +5,13 @@
     a:hover {
         text-decoration: none;
     }
+
+    .nav-link:hover {
+        color: $links-hover !important;
+    }
+
+    .navbar-brand:hover {
+        color: $links-hover !important;
+        transition: color 0.15s ease-in-out !important;
+    }
 }