diff --git a/source/styles/article.scss b/source/styles/article.scss index 252a192..ce775cc 100644 --- a/source/styles/article.scss +++ b/source/styles/article.scss @@ -65,6 +65,11 @@ main { padding-left: 48px; padding-right: 48px; + + @media (max-width: 599px) { + padding-left: 24px; + padding-right: 24px; + } } header { @@ -85,6 +90,10 @@ header { font-family: 'Roboto', sans-serif; font-size: 48px; font-weight: bold; + + @media (max-width: 599px) { + margin-top: 32px; + } } .social-media-divider { @@ -153,6 +162,10 @@ header { color: #66DDFF; font-size: 38px; + + @media (max-width: 599px) { + margin-top: 2em; + } } h3 { @@ -160,6 +173,11 @@ header { margin-bottom: 0.5em; color: #66DDFF; + + @media (max-width: 599px) { + margin-top: 2em; + font-size: 32px; + } } p { diff --git a/source/styles/homepage.scss b/source/styles/homepage.scss index c6131a3..783e096 100644 --- a/source/styles/homepage.scss +++ b/source/styles/homepage.scss @@ -18,6 +18,10 @@ padding-bottom: 48px; text-align: center; + + @media (max-width: 599px) { + width: 360px; + } } .logo { @@ -35,6 +39,10 @@ font-size: 42px; font-weight: bold; line-height: 1; + + @media (max-width: 599px) { + font-size: 32px; + } } .divider { @@ -46,12 +54,20 @@ height: 1px; background: $dividerColor; + + @media (max-width: 599px) { + width: 250px; + } } .description { color: #526277; font-size: 30px; line-height: 1.2; + + @media (max-width: 599px) { + font-size: 24px; + } } .material-symbols-outlined { @@ -90,12 +106,22 @@ main { padding-top: 100px; padding-bottom: 100px; + @media (max-width: 599px) { + padding-top: 50px; + padding-bottom: 50px; + } + #catalog { max-width: 896px; margin: auto; padding-left: 48px; padding-right: 48px; + @media (max-width: 599px) { + padding-left: 24px; + padding-right: 24px; + } + h2 { margin-bottom: 0.5em;