From: Skullheadx Date: Wed, 6 May 2026 04:16:45 +0000 (-0400) Subject: grid X-Git-Url: http://git.skullheadx.com/nixos/README?a=commitdiff_plain;h=450f8268fcecdb6c7d505751486c443510b35618;p=skullheadx.com.git grid --- diff --git a/index.html b/index.html index 0250241..41b255d 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,13 @@ -

Skullheadx

+ -

diff --git a/style.css b/style.css index 8b13789..3d71bf4 100644 --- a/style.css +++ b/style.css @@ -1 +1,55 @@ +.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.main-aside { + grid-area: aside; +} +.main-footer { + grid-area: footer; +} +.wrapper { + display: grid; + gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "aside" + "footer"; +} + +@media (width >= 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "aside content" + "footer footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} + +@media (width >= 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content aside" + "nav content aside" + "footer footer footer"; + } + nav ul { + flex-direction: column; + } +}