diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 0000000..fced0d0 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,29 @@ +@import './media-queries.scss'; + +body { + font-family: Arial; +} + +.title { + text-align: center; + width: 100vw; + text-align: center; + font-family: knowit; + margin-top: 3.8rem; + font-weight: 600; + + @include mobile { + margin-top: 1.5rem; + font-size: 1.6rem; + } +} + +.subtext { + margin-top: 0.5rem; + font-size: 1.22rem; + + @include mobile { + margin-top: 0; + font-size: 1.15rem; + } +} diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss new file mode 100644 index 0000000..0f7f91a --- /dev/null +++ b/src/styles/media-queries.scss @@ -0,0 +1,18 @@ +$phone-xs-width: 480px; +$tablet-p-width: 768px; +$tablet-l-width: 1024px; +$desktop-width: 1200px; +$desktop-l-width: 1600px; +$mobile-width: 768px; + +@mixin desktop { + @media (min-width: #{$mobile-width + 1px}) { + @content; + } +} + +@mixin mobile { + @media (max-width: #{$mobile-width}) { + @content; + } +}