troogs/FoodsharingOnboarding
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive heading sizes

Browse Source
This commit is contained in:
Andre Beging
2022-06-01 09:56:00 +02:00
parent 9f89d8ff50
commit 4a9fe8bed4
4 changed files with 107 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss
View File

@@ -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);
}
}