From a85f2360df1b7359d5575b802b55ac31367805fb Mon Sep 17 00:00:00 2001 From: Bryan Mikaelian Date: Tue, 23 Jul 2019 16:55:55 -0400 Subject: [PATCH 1/5] Initial topnav --- _includes/sidenav.html | 6 +++++- _includes/topnav.html | 2 ++ _layouts/default.html | 3 ++- _layouts/page.html | 34 ++++++++++++++++++---------------- _sass/segment.scss | 4 ++-- _sass/segment/_layout.scss | 36 ++++++++++++++++++++++++++---------- 6 files changed, 55 insertions(+), 30 deletions(-) create mode 100644 _includes/topnav.html diff --git a/_includes/sidenav.html b/_includes/sidenav.html index b030d180d6..26ff056a9f 100644 --- a/_includes/sidenav.html +++ b/_includes/sidenav.html @@ -1 +1,5 @@ -

+ +

diff --git a/_includes/topnav.html b/_includes/topnav.html new file mode 100644 index 0000000000..b2085c1353 --- /dev/null +++ b/_includes/topnav.html @@ -0,0 +1,2 @@ +

\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 361a4145aa..488016f22d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -4,7 +4,8 @@

{% include sidenav.html %} -

+ {% include topnav.html %} {{ content }}

diff --git a/_layouts/page.html b/_layouts/page.html index 53d6e28533..1b5eea0887 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,24 +2,26 @@ layout: default --- -

- {% include breadcrumb.html %} +

+ {% include breadcrumb.html %} - {%- if page.title -%} -

- {%- endif -%} - - {{ content }} -

{%- endif -%} - {% include toc.html html=content h_max=2 %} + + {{ content }} +

+ \ No newline at end of file diff --git a/_sass/segment.scss b/_sass/segment.scss index 736f05779d..4628457a62 100644 --- a/_sass/segment.scss +++ b/_sass/segment.scss @@ -31,9 +31,9 @@ $border-radius-unit: 5px !default; $content-padding: 47px !default; // Width of the content areas -$content-width: 1000px !default; +$content-width: 930px !default; $topnav-height: 60px !default; -$sidenav-width: 270px !default; +$sidenav-width: 250px !default; $on-palm: 600px !default; diff --git a/_sass/segment/_layout.scss b/_sass/segment/_layout.scss index a8946bddce..9e140c9857 100644 --- a/_sass/segment/_layout.scss +++ b/_sass/segment/_layout.scss @@ -4,8 +4,8 @@ display: flex; display: grid; - grid-template-columns: minmax(252px, calc(50% - 405px)) 1010px 1fr; - grid-template-columns: minmax(252px, calc((100% - 1262px) / 2 + 226px)) 1010px 1fr; + grid-template-columns: minmax(252px, calc(50% - 405px)) 1fr; + grid-template-columns: minmax(252px, calc((100% - 1262px) / 2 + 226px)) 1fr; } #sidenav { @@ -16,23 +16,37 @@ position: sticky; top: 0; height: 100vh; - margin-right: $content-padding; + min-width: $sidenav-width; background-color: $grey-color; } +#sidenav > nav { + margin-left: 226px; +} + +#topnav { + height: $topnav-height; + box-shadow: $elevated-shadow; + padding-left: $content-padding; +} + +#doc-content { + background: $background-color; +} + #doc-content { overflow-x: visible; - min-width: $content-width - 10; + min-width: $content-width; } + #doc-toc { padding-left: 44px; - min-width: $content-width / 5; + min-width: $sidenav-width - 40px; } .l-breadcrumb-wrapper { display: flex; - margin-top: 25px; margin-bottom: 32px; margin-left: -5px; color: $text-color-breadcrumb; @@ -43,15 +57,16 @@ padding: 0 5px; } -.l-docs-wrapper { - outline: none; +.l-doc-container { display: flex; - background: $background-color; + margin-left: $content-padding; + margin-top: 25px; } .l-doc-toc-wrapper { position: -webkit-sticky; position: sticky; + margin-top: 60px; top: 81px; color: $text-color-grey; } @@ -89,9 +104,10 @@ display: flex; align-items: center; color: $text-color; - width: $grid-gutter-unit * 14; + width: $grid-gutter-unit * 13; height: 84px; padding: 22px $grid-gutter-unit; + padding-right: $grid-gutter-unit; margin-bottom: $grid-gutter-unit; margin-left: $grid-gutter-unit; border-radius: $border-radius-unit; From 5e89c5d8ec7efacb7a35731b9cd1bf12ec887813 Mon Sep 17 00:00:00 2001 From: Bryan Mikaelian Date: Tue, 23 Jul 2019 17:27:56 -0400 Subject: [PATCH 2/5] Search WIP --- _includes/topnav.html | 7 +++++++ _sass/segment/_layout.scss | 30 ++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/_includes/topnav.html b/_includes/topnav.html index b2085c1353..d7b03f8e45 100644 --- a/_includes/topnav.html +++ b/_includes/topnav.html @@ -1,2 +1,9 @@

+ +

+ Support + Sign In +

\ No newline at end of file diff --git a/_sass/segment/_layout.scss b/_sass/segment/_layout.scss index 9e140c9857..42dcad0642 100644 --- a/_sass/segment/_layout.scss +++ b/_sass/segment/_layout.scss @@ -28,6 +28,12 @@ height: $topnav-height; box-shadow: $elevated-shadow; padding-left: $content-padding; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 18px; + padding: 0px 30px; + padding-left: $content-padding; } #doc-content { @@ -137,3 +143,27 @@ margin-bottom: 0; } } + +.l-topnav-search { + height: 100%; + display: flex; + align-items: center +} + +.l-topnav-search > input { + height: inherit; + font-size: 16px; + margin: 0; + padding: 0; + border: 0; + outline: none; +} + +.l-topnav-links { + display: flex; + justify-content: flex-end; +} + +.l-topnav-links > a { + margin-left: 30px; +} \ No newline at end of file From 1816312a41b1e2a59fa5b65cb02dc0f729620e77 Mon Sep 17 00:00:00 2001 From: Bryan Mikaelian Date: Tue, 23 Jul 2019 17:52:47 -0400 Subject: [PATCH 3/5] Swifttype --- _includes/topnav.html | 4 ++-- _layouts/default.html | 8 ++++++++ _sass/segment/_layout.scss | 4 +++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/_includes/topnav.html b/_includes/topnav.html index d7b03f8e45..508af4c9b5 100644 --- a/_includes/topnav.html +++ b/_includes/topnav.html @@ -1,8 +1,8 @@

- +

Support Sign In

diff --git a/_layouts/default.html b/_layouts/default.html index 488016f22d..d200f688e2 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -9,5 +9,13 @@ {{ content }}

+ diff --git a/_sass/segment/_layout.scss b/_sass/segment/_layout.scss index 42dcad0642..944b020b6f 100644 --- a/_sass/segment/_layout.scss +++ b/_sass/segment/_layout.scss @@ -147,10 +147,12 @@ .l-topnav-search { height: 100%; display: flex; - align-items: center + align-items: center; + flex: 1; } .l-topnav-search > input { + width: 100%; height: inherit; font-size: 16px; margin: 0; From 21585504f96cf606eb59bada38f48a41b810f948 Mon Sep 17 00:00:00 2001 From: Bryan Mikaelian Date: Wed, 24 Jul 2019 10:48:11 -0400 Subject: [PATCH 4/5] Search icon --- Makefile | 4 ++-- _includes/topnav.html | 1 + _sass/segment/_layout.scss | 5 +++++ assets/icons/nav/search.svg | 5 +++++ 4 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 assets/icons/nav/search.svg diff --git a/Makefile b/Makefile index a6514c3579..4694d03e66 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,5 @@ -.PHONY: run -run: +.PHONY: docs +docs: make build && \ docker build . -t segment-docs:latest && \ echo "Running segment docs at http://localhost:4000/docsv2/" && \ diff --git a/_includes/topnav.html b/_includes/topnav.html index 508af4c9b5..146b6cd004 100644 --- a/_includes/topnav.html +++ b/_includes/topnav.html @@ -1,5 +1,6 @@

diff --git a/_sass/segment/_layout.scss b/_sass/segment/_layout.scss index 944b020b6f..aae85c4a7d 100644 --- a/_sass/segment/_layout.scss +++ b/_sass/segment/_layout.scss @@ -151,6 +151,11 @@ flex: 1; } +.l-topnav-search > img { + margin-right: 10px; + opacity: 0.5; +} + .l-topnav-search > input { width: 100%; height: inherit; diff --git a/assets/icons/nav/search.svg b/assets/icons/nav/search.svg new file mode 100644 index 0000000000..4499fd7f43 --- /dev/null +++ b/assets/icons/nav/search.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file From 89f039fddd825871cb3b85cbbfa584be7107b67b Mon Sep 17 00:00:00 2001 From: Bryan Mikaelian Date: Wed, 24 Jul 2019 12:12:44 -0400 Subject: [PATCH 5/5] Finish up top nav --- _layouts/default.html | 8 +++++--- _sass/segment.scss | 4 ++-- _sass/segment/_layout.scss | 22 ++++++++++++++-------- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index d200f688e2..64761dd3df 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -4,10 +4,12 @@

{% include sidenav.html %} -

{% include topnav.html %} - {{ content }} -

+ {{ content }} +

{{ page.title }}

On this page

{{ page.title }}

On this page