better alignment

Author: simonsteiger

index.qmd

@@ -30,7 +30,7 @@ description: |
   <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">
+  <div class="d-flex flex-row flex-wrap panel-wrapper gap-2">
     <a href="https://turinglang.org/docs/tutorials/docs-00-getting-started/" class="button--fill btn">
       Tutorials
     </a>
@@ -42,7 +42,7 @@ description: |
     </a>
   </div>
 </div>
-<div class="d-flex flex-row flex-wrap justify-content-center gap-4 section-end-space">
+<div class="d-flex flex-row flex-wrap panel-wrapper gap-4 section-end-space">
   <div class="panel">
     <div class="panel-title">
       Intuitive
@@ -64,7 +64,7 @@ description: |
 </div>
 ```
 
-<div class="d-flex flex-row flex-wrap justify-content-center gap-3 pb-2">
+<div class="d-flex flex-row flex-wrap panel-wrapper 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
@@ -86,7 +86,7 @@ end;
 ```
 </div>
 </div>
-<div class="d-flex flex-row-reverse flex-wrap justify-content-center gap-3 pt-2 section-end-space">
+<div class="d-flex flex-row-reverse flex-wrap panel-wrapper 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

theming/dark.scss

@@ -19,3 +19,5 @@ $theme: "cosmo" !default;
 @import "rules/codeblocks";
 
 @import "old/old-styles";
+
+//

theming/rules/_mixins.scss

@@ -2,7 +2,7 @@
     border-radius: $border-radius-sm;
     padding: 1rem;
     min-height: 120px !important;
-    min-width: 300px !important;
+    //min-width: 300px !important;
 
     --bs-card-spacer-x: 0rem !important;
     --bs-card-spacer-y: 0rem !important;

theming/rules/_panels.scss

@@ -21,3 +21,11 @@
         padding: 0rem;
     }
 }
+
+.panel-wrapper {
+    justify-content: space-between;
+
+    @media screen and (max-width: 992px) {
+        justify-content: center;
+    }
+}