Responsive heading sizes

FoodsharingSiegen.Server/Pages/Prospects.razor

@@ -25,7 +25,7 @@
 @if (activeProspects?.Any() == true)
 {
     <hr />
-    <h4>Aktuell:</h4>
+    <h3>Aktuell:</h3>
     <div class="row m-0">
         <Repeater Items="@activeProspects">
             <ProspectContainer Prospect="context" InteractionModal="InteractionModal" ProspectModal="ProspectModal" RemoveInteraction="RemoveInteraction"></ProspectContainer>
@@ -40,7 +40,7 @@
 @if (completedProspects?.Any() == true)
 {
     <hr />
-    <h4>Abgeschlossen:</h4>
+    <h3>Abgeschlossen:</h3>
     <div class="row m-0">
         <Repeater Items="@completedProspects">
             <ProspectContainer Prospect="context" InteractionModal="InteractionModal" ProspectModal="ProspectModal" RemoveInteraction="RemoveInteraction"></ProspectContainer>

FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css

@@ -87,17 +87,94 @@ input:checked ~ #menu-toggler-label span:nth-child(3) {
 }
 
 ::deep h2 {
-  font-size: 7.8vw;
+  font-size: 1.8rem;
 }
 
 @media screen and (min-width: 576px) {
   ::deep h2 {
-    font-size: 4.8vw;
+    font-size: 3.2rem;
+    line-height: 3.2rem;
   }
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 768px) {
   ::deep h2 {
-    font-size: 3.6vw;
+    font-size: 3.8rem;
+    line-height: 3.8rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  ::deep h2 {
+    font-size: 3.8rem;
+    line-height: 3.8rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  ::deep h2 {
+    font-size: 3.8rem;
+    line-height: 3.8rem;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  ::deep h2 {
+    font-size: 3.8rem;
+    line-height: 3.8rem;
+  }
+}
+
+@media screen and (min-width: 1950px) {
+  ::deep h2 {
+    font-size: 3.2rem;
+    line-height: 3.2rem;
+  }
+}
+
+::deep h3 {
+  font-size: 1.4rem;
+  font-weight: 300;
+}
+
+@media screen and (min-width: 576px) {
+  ::deep h3 {
+    font-size: 2.4rem;
+    line-height: 2.4rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  ::deep h3 {
+    font-size: 2.8rem;
+    line-height: 2.8rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  ::deep h3 {
+    font-size: 2.8rem;
+    line-height: 2.8rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  ::deep h3 {
+    font-size: 2.8rem;
+    line-height: 2.8rem;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  ::deep h3 {
+    font-size: 2.8rem;
+    line-height: 2.8rem;
+  }
+}
+
+@media screen and (min-width: 1950px) {
+  ::deep h3 {
+    font-size: 2.4rem;
+    line-height: 2.4rem;
   }
 }

FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss

@@ -88,10 +88,29 @@ input:checked ~ #menu-toggler-label span {
 }
 
 
+@mixin mediaFont($breakpoint, $fontsize) {
+    @media screen and (min-width: #{$breakpoint}px) { font-size: #{$fontsize}; line-height: #{$fontsize}; }
+}
+
 ::deep {
     h2 {
-        font-size: 7.8vw;
-        @media screen and (min-width: #{$breakpointXS}px) { font-size: 4.8vw; }
-        @media screen and (min-width: #{$breakpointXS}px) { font-size: 3.6vw; }
+        font-size: 1.8rem;
+        @include mediaFont($breakpointXS, 3.2rem);
+        @include mediaFont($breakpointS, 3.8rem);
+        @include mediaFont($breakpointM, 3.8rem);
+        @include mediaFont($breakpointL, 3.8rem);
+        @include mediaFont($breakpointXL, 3.8rem);
+        @include mediaFont($breakpointXXL, 3.2rem);
+    }
+
+    h3 {
+        font-size: 1.4rem;
+        font-weight: 300;
+        @include mediaFont($breakpointXS, 2.4rem);
+        @include mediaFont($breakpointS, 2.8rem);
+        @include mediaFont($breakpointM, 2.8rem);
+        @include mediaFont($breakpointL, 2.8rem);
+        @include mediaFont($breakpointXL, 2.8rem);
+        @include mediaFont($breakpointXXL, 2.4rem);
     }
 }

FoodsharingSiegen.Server/Style/_variables.scss

@@ -2,4 +2,5 @@
 $breakpointS: 768;
 $breakpointM: 992;
 $breakpointL: 1200;
-$breakpointXL: 1400;
+$breakpointXL: 1400;
+$breakpointXXL: 1950;