Adjust responsive font sizes

This commit is contained in:
Ondřej 2022-10-27 19:01:55 +02:00
parent e186960cd1
commit f73305aa4a
3 changed files with 88 additions and 3 deletions

View file

@ -871,6 +871,33 @@ video {
line-height: 2.25rem; line-height: 2.25rem;
} }
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-\[2\.4vw\] {
font-size: 2.4vw;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-\[20px\] {
font-size: 20px;
}
.text-\[24px\] {
font-size: 24px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.font-bold { .font-bold {
font-weight: 700; font-weight: 700;
} }
@ -1106,10 +1133,41 @@ html:not(.dark) .light\:hidden {
} }
} }
@media (min-width: 640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.sm\:leading-normal {
line-height: 1.5;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:grid-cols-3 { .md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-\[22px\] {
font-size: 22px;
}
}
@media (min-width: 1000px) {
.min-\[1000px\]\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@ -1169,6 +1227,10 @@ html:not(.dark) .light\:hidden {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:flex-row { .lg\:flex-row {
flex-direction: row; flex-direction: row;
} }
@ -1185,7 +1247,30 @@ html:not(.dark) .light\:hidden {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.lg\:text-\[24px\] {
font-size: 24px;
}
.dark .dark\:lg\:bg-transparent { .dark .dark\:lg\:bg-transparent {
background-color: transparent; background-color: transparent;
} }
} }
@media (min-width: 1280px) {
.xl\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xl\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.xl\:text-\[24px\] {
font-size: 24px;
}
.xl\:leading-normal {
line-height: 1.5;
}
}

View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="font-main leading-normal text-xl" lang="{{ site.LanguageCode | default site.Language.Lang }}" dir="{{ site.Language.LanguageDirection | default "ltr" }}"> <html class="font-main leading-normal text-[20px] md:text-[22px] lg:text-[24px]" lang="{{ site.LanguageCode | default site.Language.Lang }}" dir="{{ site.Language.LanguageDirection | default "ltr" }}">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />

View file

@ -1,9 +1,9 @@
<ul class="grid grid-cols-1 md:grid-cols-3 gap-6"> <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{{ range (where site.RegularPages.ByWeight "Type" "services") }} {{ range (where site.RegularPages.ByWeight "Type" "services") }}
<li> <li>
<article> <article>
{{ .Params.iconSvg | safeHTML }} {{ .Params.iconSvg | safeHTML }}
<div class="flex items-center gap-3 mb-2"> <div class="flex items-center gap-2 mb-2">
{{ if isset .Params "icon" }} {{ if isset .Params "icon" }}
<i class="ri-{{ .Params.icon }} block text-3xl"></i> <i class="ri-{{ .Params.icon }} block text-3xl"></i>
{{ end }} {{ end }}