diff --git a/FoodsharingSiegen.Server/Pages/Prospects.razor b/FoodsharingSiegen.Server/Pages/Prospects.razor index 4470837..da6f7de 100644 --- a/FoodsharingSiegen.Server/Pages/Prospects.razor +++ b/FoodsharingSiegen.Server/Pages/Prospects.razor @@ -25,7 +25,7 @@ @if (activeProspects?.Any() == true) {
-

Aktuell:

+

Aktuell:

@@ -40,7 +40,7 @@ @if (completedProspects?.Any() == true) {
-

Abgeschlossen:

+

Abgeschlossen:

diff --git a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css index bacecfa..0a7eef2 100644 --- a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css +++ b/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; } } diff --git a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss index 5910431..650abbe 100644 --- a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss +++ b/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); } } \ No newline at end of file diff --git a/FoodsharingSiegen.Server/Style/_variables.scss b/FoodsharingSiegen.Server/Style/_variables.scss index 111a660..6a63a40 100644 --- a/FoodsharingSiegen.Server/Style/_variables.scss +++ b/FoodsharingSiegen.Server/Style/_variables.scss @@ -2,4 +2,5 @@ $breakpointS: 768; $breakpointM: 992; $breakpointL: 1200; -$breakpointXL: 1400; \ No newline at end of file +$breakpointXL: 1400; +$breakpointXXL: 1950; \ No newline at end of file