diff --git a/styles/App.module.css b/styles/App.module.css index 95c732e..fd129ae 100644 --- a/styles/App.module.css +++ b/styles/App.module.css @@ -5,10 +5,12 @@ } .headerinner { display: grid; - grid-template-columns: 200px 1fr 160px 120px; + grid-template-columns: 180px 1fr 160px 120px; margin-top: var(--spacing-5); padding-bottom: var(--spacing-8); font-family: var(--fontFamily-sans); +} +.borderHeader { border-bottom: 1px solid #ccc; } .sitename { @@ -114,7 +116,7 @@ .footerinner { margin: 0; display: grid; - grid-template-columns: 200px 1fr 200px; + grid-template-columns: 150px 1fr 150px; padding: var(--spacing-6) var(--spacing-10); border: 1px solid var(--color-text); border-radius: 10px; @@ -165,7 +167,7 @@ padding: var(--spacing-2); padding-left: 0; display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 240px; } .siteinfo a { color: var(--color-text); @@ -245,6 +247,15 @@ font-weight: bold; } +@media (max-width: 1200px) { + .globalnav ul { + column-gap: var(--spacing-6); + } + .globalnav li { + font-size: var(--fontSize-0); + } +} + @media (max-width: 820px) { .headerinner { display: block; @@ -329,17 +340,16 @@ .footer { margin-bottom: var(--spacing-32); } -} -@media (max-width: 820px) { .headerinner { margin-top: var(--spacing-2); - padding: 0 0 var(--spacing-5) var(--spacing-5); + padding: 0 0 var(--spacing-5); text-align: center; } .snsnav { margin-right: 20px; } } + @media (max-width: 480px) { .siteinfo { padding: 0;