From 588aa1b58f49eb7eee453ffba6c7aa2d33171912 Mon Sep 17 00:00:00 2001 From: "David T. Sadler" Date: Wed, 26 Feb 2020 20:22:39 +0000 Subject: Add responsive grid layout --- source/_assets/sass/_blog.scss | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'source/_assets/sass/_blog.scss') diff --git a/source/_assets/sass/_blog.scss b/source/_assets/sass/_blog.scss index e69de29..c54a038 100644 --- a/source/_assets/sass/_blog.scss +++ b/source/_assets/sass/_blog.scss @@ -0,0 +1,22 @@ +#main-sidebar-container { + display: grid; + grid-template-columns: auto; + grid-template-areas: "main" "sidebar"; + grid-row-gap: 1rem; +} + +#main-sidebar-container article { + grid-area: main; +} + +#main-sidebar-container aside { + grid-area: sidebar; +} + +@media (min-width: 1024px) { + #main-sidebar-container { + grid-template-columns: 224px auto; + grid-template-areas: "sidebar main"; + grid-column-gap: 1rem; + } +} -- cgit v1.2.3-13-gbd6f