responsive header size

Author: simonsteiger

index.qmd

@@ -24,7 +24,7 @@ description: |
 ```{=html}
 <div class="line-graph">
   <div class="upperContent">
-    <h1 style="font-size:6rem;">Turing.jl</h1>
+    <h1 class="responsive-heading">Turing.jl</h1>
   </div>
   <div class="Animation">
     <svg viewBox="0 0 2300 498" xmlns="http://www.w3.org/2000/svg">

theming/rules/_layouts.scss

@@ -10,6 +10,10 @@
     padding-top: $large-y-space;
 }
 
+.responsive-heading {
+    font-size: clamp(2rem, 6vw, 6rem);
+}
+
 .panel {
     border-radius: $border-radius-sm;
     padding: 1rem 1.25rem;

theming/rules/_mixins.scss

@@ -27,7 +27,7 @@
 }
 
 @mixin raw-button {
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 1.25rem;
     border-radius: 25px;
     border: solid $text-muted 1px;
     color: $color-fg;

theming/rules/_svg.scss

@@ -43,7 +43,7 @@ svg {
 .upperContent {
     width: 88%;
     text-align: end;
-    padding-top: 5.5%;
+    padding-top: 7%;
     padding-right: 45%;
     position: absolute;
     z-index: 5;