diff --git a/styles/header.css b/styles/header.css index 28368d7..3282fa5 100644 --- a/styles/header.css +++ b/styles/header.css @@ -260,7 +260,12 @@ button:active { /* Responsive Design */ @media (max-width: 768px) { :root { - --header-height: 180px; + --header-height: 140px; + --space-xs: 0.2rem; + --space-sm: 0.4rem; + --space-md: 0.75rem; + --space-lg: 1rem; + --space-xl: 1.25rem; } .header { @@ -272,23 +277,48 @@ button:active { padding: var(--space-md); } + .dictionary-section h3 { + font-size: 1.25rem; + } + + .dictionary-section p { + font-size: 0.875rem; + } + input[type=text] { max-width: 100%; } } @media (max-width: 480px) { + :root { + --header-height: 120px; + --space-xs: 0.15rem; + --space-sm: 0.35rem; + --space-md: 0.65rem; + --space-lg: 0.85rem; + --space-xl: 1rem; + } + .header a { - font-size: 0.9rem; + font-size: 0.85rem; padding: var(--space-xs); } + .dictionary-section h3 { + font-size: 1.1rem; + } + + .dictionary-section p { + font-size: 0.8rem; + } + input[type=button], input[type=submit], input[type=reset], button { padding: var(--space-sm) var(--space-md); - font-size: 0.9rem; + font-size: 0.85rem; } }