diff options
| author | Huy Nguyen <huyb.1991@gmail.com> | 2020-07-01 17:56:13 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-07-01 17:56:13 +0300 |
| commit | 9d4e2a76ec5ea74292f629867de061b77922636f (patch) | |
| tree | a281f19e2a9341e8e35d05689dad03a0ea9f8e86 | |
| parent | 94a2e5db5c123e48a890d93a82fe8e284632fd58 (diff) | |
| parent | 27660a4c9458ec679c9b8095433e600819195601 (diff) | |
Merge pull request #73 from huyb1991/feature/implement-grid-layout
Feature / Implement Grid Layout
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | styles/base/_all.scss | 3 | ||||
| -rw-r--r-- | styles/base/_base.scss | 30 | ||||
| -rw-r--r-- | styles/base/_layout.scss | 33 | ||||
| -rw-r--r-- | styles/partials/_header.scss | 21 | ||||
| -rw-r--r-- | styles/partials/_list.scss | 2 |
6 files changed, 42 insertions, 49 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 54fcd1b..98b619e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -24,7 +24,7 @@ <!-- Shared Head --> {{ partial "head.html" . }} </head> - <body> + <body class="wrapper"> {{ partial "svg-icons.html" . }} {{ partial "header.html" . }} {{ partial "sidebar.html" . }} diff --git a/styles/base/_all.scss b/styles/base/_all.scss index 94c9808..f70832d 100644 --- a/styles/base/_all.scss +++ b/styles/base/_all.scss @@ -1,4 +1,5 @@ @import 'variables', 'reset', - 'base'; + 'base', + 'layout'; diff --git a/styles/base/_base.scss b/styles/base/_base.scss index 3dd8512..30c4dee 100644 --- a/styles/base/_base.scss +++ b/styles/base/_base.scss @@ -4,7 +4,7 @@ body { line-height: 1.618; font-family: $family-sans-serif; color: $text; - background: $white; + background: $main-background; text-rendering: optimizeLegibility; -webkit-overflow-scrolling: touch; // Smoothly on mobile browser } @@ -31,26 +31,12 @@ button:hover { } .main { - margin-left: 20rem; padding: 1rem 2rem; - max-width: 100%; - min-height: 100vh; box-sizing: border-box; - @media screen and (max-width: $widescreen) { - width: calc(100% - 20rem); - } - - @media (min-width: $tablet) and (max-width: $desktop) { - margin-left: 15rem; - width: calc(100% - 15rem); - } - @media screen and (max-width: $tablet) { margin-left: 0; padding: 0 1rem 1rem; - width: 100%; - min-height: initial; border-left: none; border-right: none; border-top: 1px solid $border-color; @@ -59,13 +45,9 @@ button:hover { } .footer { - display: none; - - @media screen and (max-width: $tablet) { - display: block; - padding: 1rem; - font-size: $size-7; - text-align: center; - font-family: $family-monospace; - } + display: block; + padding: 1rem; + font-size: $size-7; + text-align: center; + font-family: $family-monospace; } diff --git a/styles/base/_layout.scss b/styles/base/_layout.scss new file mode 100644 index 0000000..f1eecec --- /dev/null +++ b/styles/base/_layout.scss @@ -0,0 +1,33 @@ +.wrapper { + display: grid; + grid-gap: $space-normal; + min-height: 100vh; + + @media screen and (max-width: $phone) { + grid-template-rows: 100px 1fr 90px; + grid-template-areas: + "header" + "main" + "footer"; + } + + @media screen and (min-width: $phone) { + grid-template-columns: 320px 1fr; + grid-template-rows: 1fr 90px; + grid-template-areas: + "header main" + "header footer"; + } +} + +.header { + grid-area: header; +} + +.main { + grid-area: main; +} + +.footer { + grid-area: footer; +} diff --git a/styles/partials/_header.scss b/styles/partials/_header.scss index f7362a1..d40d405 100644 --- a/styles/partials/_header.scss +++ b/styles/partials/_header.scss @@ -1,22 +1,8 @@ .header { - position: fixed; - left: 0; - top: 0; - bottom: 0; - width: 20rem; padding: 1rem; box-sizing: border-box; text-align: center; background-color: $sidebar-background; - - @media screen and (max-width: $tablet) { - width: 100%; - position: relative; - } - - @media (min-width: $tablet) and (max-width: $desktop) { - width: 15rem; - } } .logo { @@ -165,13 +151,6 @@ margin: 0; padding: 0; list-style: none; - - @media screen and (min-width: $tablet) { - position: absolute; - bottom: 10px; - left: 0; - right: 0; - } } &-item { diff --git a/styles/partials/_list.scss b/styles/partials/_list.scss index f7fddaf..58ca08f 100644 --- a/styles/partials/_list.scss +++ b/styles/partials/_list.scss @@ -1,8 +1,6 @@ // Style for list template .entry { &-list { - background-color: $main-background; - @media screen and (max-width: $tablet) { padding-top: $space-large; } |