From e9fe633c0686ad136c8390ab290a83db52ffe514 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 09:40:10 +0700 Subject: Add wrapper class to body --- layouts/_default/baseof.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 @@ {{ partial "head.html" . }} - + {{ partial "svg-icons.html" . }} {{ partial "header.html" . }} {{ partial "sidebar.html" . }} -- cgit v1.2.3 From e15083d53912d45af5fe0684ca30b5f07219e95e Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 09:40:33 +0700 Subject: Add layout styles --- styles/base/_base.scss | 2 +- styles/base/_layout.scss | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 styles/base/_layout.scss diff --git a/styles/base/_base.scss b/styles/base/_base.scss index 3dd8512..8807989 100644 --- a/styles/base/_base.scss +++ b/styles/base/_base.scss @@ -59,7 +59,7 @@ button:hover { } .footer { - display: none; + // display: none; @media screen and (max-width: $tablet) { display: block; diff --git a/styles/base/_layout.scss b/styles/base/_layout.scss new file mode 100644 index 0000000..6a43466 --- /dev/null +++ b/styles/base/_layout.scss @@ -0,0 +1,40 @@ +.wrapper { + display: grid; + grid-gap: $space-normal; + + // @media screen and (max-width: $phone) { + // grid-template-rows: $header-height 1fr auto $footer-height; + // grid-template-areas: + // "header" + // "main" + // "sidebar" + // "footer"; + // } + + @media screen and (min-width: $phone) { + grid-template-columns: 320px 1fr; + grid-template-areas: + "header main" + "header footer"; + } +} + +.header { + grid-area: main; +} + +.main { + grid-area: main; +} + +.footer { + grid-area: footer; +} + +.content { + grid-area: content; +} + +.sidebar { + grid-area: sidebar; +} -- cgit v1.2.3 From ce7f5e08f40e4c02072cdec7d15c49dfb6ed6789 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 09:40:43 +0700 Subject: Import layout --- styles/base/_all.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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'; -- cgit v1.2.3 From 5c829f362a13333411416d987d372469be569388 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 10:42:43 +0700 Subject: Reduce Header spacing --- styles/partials/_header.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/styles/partials/_header.scss b/styles/partials/_header.scss index f7362a1..d0cd9fc 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 { -- cgit v1.2.3 From 9dc2db0037f1461875cde4120437ff81db192d96 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 10:42:53 +0700 Subject: Update background color --- styles/base/_base.scss | 16 ++++++---------- styles/base/_layout.scss | 2 +- styles/partials/_list.scss | 2 -- 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/styles/base/_base.scss b/styles/base/_base.scss index 8807989..b7dd5bb 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 } @@ -59,13 +59,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 index 6a43466..478ace9 100644 --- a/styles/base/_layout.scss +++ b/styles/base/_layout.scss @@ -20,7 +20,7 @@ } .header { - grid-area: main; + grid-area: header; } .main { 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; } -- cgit v1.2.3 From 5f6d84b32395151ef07d8ece4389f424a95dac03 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 14:05:10 +0700 Subject: Implement layout grid on Desktop --- styles/base/_base.scss | 14 -------------- styles/base/_layout.scss | 2 ++ 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/styles/base/_base.scss b/styles/base/_base.scss index b7dd5bb..30c4dee 100644 --- a/styles/base/_base.scss +++ b/styles/base/_base.scss @@ -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; diff --git a/styles/base/_layout.scss b/styles/base/_layout.scss index 478ace9..237769c 100644 --- a/styles/base/_layout.scss +++ b/styles/base/_layout.scss @@ -1,6 +1,7 @@ .wrapper { display: grid; grid-gap: $space-normal; + min-height: 100vh; // @media screen and (max-width: $phone) { // grid-template-rows: $header-height 1fr auto $footer-height; @@ -13,6 +14,7 @@ @media screen and (min-width: $phone) { grid-template-columns: 320px 1fr; + grid-template-rows: 1fr 90px; grid-template-areas: "header main" "header footer"; -- cgit v1.2.3 From c3d20528ac9d03eaec709297bf6f694fbdc037cf Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 20:28:09 +0700 Subject: Update grid layout mobile --- styles/base/_layout.scss | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/styles/base/_layout.scss b/styles/base/_layout.scss index 237769c..f1eecec 100644 --- a/styles/base/_layout.scss +++ b/styles/base/_layout.scss @@ -3,14 +3,13 @@ grid-gap: $space-normal; min-height: 100vh; - // @media screen and (max-width: $phone) { - // grid-template-rows: $header-height 1fr auto $footer-height; - // grid-template-areas: - // "header" - // "main" - // "sidebar" - // "footer"; - // } + @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; @@ -32,11 +31,3 @@ .footer { grid-area: footer; } - -.content { - grid-area: content; -} - -.sidebar { - grid-area: sidebar; -} -- cgit v1.2.3 From 27660a4c9458ec679c9b8095433e600819195601 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Wed, 1 Jul 2020 20:30:46 +0700 Subject: Update social icons section --- styles/partials/_header.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/styles/partials/_header.scss b/styles/partials/_header.scss index d0cd9fc..d40d405 100644 --- a/styles/partials/_header.scss +++ b/styles/partials/_header.scss @@ -151,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 { -- cgit v1.2.3