From bf40a4a396ada15135c52004b203705d4c7b89ea Mon Sep 17 00:00:00 2001 From: vjeantet Date: Tue, 25 Aug 2020 22:22:40 +0200 Subject: refactor layout --- archetypes/default.md | 8 + assets/sass/layout.scss | 314 ++++++++++++--------- assets/sass/main.scss | 29 +- assets/sass/menu.scss | 2 +- exampleSite/content/_layout/footer/_index.md | 2 +- .../content/create-page/page-slide/_index.md | 9 + ...t.scss_f300667da4f5b5f84e1a9e0702b2fdde.content | 225 ++++++++------- ...n.scss_9fd32d87d247ca96761d3cae485087fe.content | 24 +- ...u.scss_11ec87c0e45b1a85c098a07257dc0c80.content | 2 +- layouts/_default/baseof.html | 13 +- layouts/partials/body-header.html | 12 +- 11 files changed, 360 insertions(+), 280 deletions(-) diff --git a/archetypes/default.md b/archetypes/default.md index 4df35dc..83bd3d3 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -4,6 +4,14 @@ date= {{ .Date }} description = "" draft = true subpage = false + + +hide_header=false +hide_nav=false +hide_breadcrumb=false +hide_toc=false +hide_footer=false + +++ Lorem Ipsum. diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index ed5d4a5..016a32c 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -1,71 +1,107 @@ -body { - header { +* { + box-sizing: border-box; +} +a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { + border: 0; + vertical-align: baseline; +} +body { + margin: 0px 0px ; + display: -webkit-box; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; - } + min-height: 100vh; + text-rendering: optimizeLegibility; - article aside { - transition: max-height .2s ease-out; + header { + flex-shrink: 0; + min-height: 45px; + max-height: 45px; + padding: 8px 0; + position: fixed; + width: 100%; + z-index: 9999; + -webkit-transform: translateZ(0); + transform: translateZ(0); + + > * { + max-width: 1400px; + width: 100%; + padding: 0 20px; + margin: 0 auto; + } - &.responsive{ - display: block; - width: 100%; - max-width: 20em; - z-index: 100; - } + div.burger { + display: none; + } } + + article { -} + -webkit-box-flex: 1; + flex-grow: 1; + display: -webkit-box; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + min-height: calc(100vh - 45px); + + left: 0; + min-height: 100%; + padding-top: 100px; + position: relative; + z-index: 99; -body { - margin:0px; - header { + + -webkit-box-flex: 1; + flex-grow: 1; display: -webkit-box; - display: -ms-flexbox; display: flex; - height: 3.5rem; - line-height: 3.5rem; - margin-bottom: .35rem; - padding: 0 2rem; - position: fixed; - left: 0; right: 0; top: 0; - z-index: 10; - div.burger { - display: none; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-flow: row nowrap; + + padding: 0 20px; + padding-top: 45px; + margin: 0 auto; + width: 100%; + max-width: 1400px; + + > * { + margin: 0 24px; } - } - article { - padding-top: 3.5rem; - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - align-items: flex-start; - min-height: calc(100vh - 3.5rem); - aside { - margin-top: 3.5rem; - position: fixed; - top: 0; left: 0; right: 0; bottom: 0; - width: 20em; - overflow-y: auto; overflow-x: hidden; - - /*transition: transform .5s ease-out;*/ - &.full{ - display: none; - } - + transition: max-height .2s ease-out; + + -webkit-box-flex: 0; + flex: 0 0 20em; + margin-left: 0; + + -webkit-box-flex: 0; + flex: 0 0 20em; + height: calc(100vh - 45px); + position: -webkit-sticky; + position: sticky; + overflow-y: auto; + top: 45px; } section.page{ - padding-left: 1.5rem!important; - padding-right: 1.5rem!important; - margin-left: 20em; - width:calc(100% - 20em - 15em - 1.1em); + + -webkit-box-flex: 1; + flex: 1 auto; + max-width: 100%; + min-width: 0; + .jump-to-section{ display:none; @@ -87,120 +123,126 @@ body { box-shadow: 0 5px 8px rgba(0,0,0,.25); } } - - &.simple{ - width:calc(100% - 20em - 1.1em); - } - &.full{ - width: 100%; - margin-left: 0em; - } - } section.right-menu{ - position: fixed; - width: 15em; - top: 3.5rem; - right: 0px; - bottom: 0px; - overflow-y: auto; - overflow-x: hidden; - - transition: transform .5s ease-in-out; - &.simple,&.full,{ - display: none; - } + margin-right: 0; + align-self: flex-start; + display: block; + -webkit-box-flex: 0; + flex: 0 0 240px; + max-height: calc(100vh - 45px); + overflow-y: auto; + position: -webkit-sticky; + position: sticky; + top: 45px; + margin-bottom: 40px; } } footer { - display: table-row; - position: relative; - overflow: auto; - display: block; - z-index: 100; + > * { + max-width: 1400px; + width: 100%; + padding: 0 20px; + margin: 0 auto; + } } } -@media(max-width:1200px) { - body{ +/* hideheader hidenav hidebreadcrumb hidetoc hidefooter */ +body { + &.hidenav{ + article{ + aside{ + display:none!important; + } + } + } + &.hidebreadcrumb{ + article section.page nav#breadcrumb{ + display: none!important; + } + } + &.hidetoc{ + article section.right-menu { + display: none!important; + } + } + &.hidefooter{ + footer{ + display: none!important; + } + } + &.hideheader{ header { - div.burger { - /*display: inline;*/ - &.full{ - display: none ; - } - } + display:none!important; } - article { - aside { - /*transform: translate(100vw,0);*/ - /*display: none;*/ - } - - section.page{ - /*margin-left: 0px; */ - width:calc(100% - 1.1em); - &.simple{ - width:100%; + article{ + padding-top: 0px ; + aside{ + top:0px; + height: calc(100vh); + } + section.right-menu{ + top:0px; + max-height: calc(100vh); } - .jump-to-section{display: block;} - } - - section.right-menu{ - display: none; - } } } } -@media(max-width:930px) { +@media(max-width:1160px) { body{ - header { - div.burger { - display: inline; - &.full{ - display: none ; - } - } - nav.shortcuts li{ - + header{ + div.burger{ display: none; } } - article { - aside { - /*transform: translate(-100vw,0);*/ - display: none; - } - - section.page{ - width: 100%; - margin-left: 0px; - - } - - section.right-menu{ - /*transform: translate(100vw,0);*/ - display: none; - } - } + padding-left: 0px ; + aside{ + margin-right: 0px; + } + aside.responsive{ + display: block; + } + section.page{ + .jump-to-section{display: block;} + } + section.right-menu{ + display: none; + } + + } } } @media(max-width:600px) { body{ + header{ + div.burger{ + display: block; + } + } article { - section.page{ - width: 100%; - margin-left: 0px; - } + padding: 0px 0px; + aside{ + display: none; + flex: 0 0 100%; + } aside.responsive{ - width: 100%; - max-width: 100%; - + display: block; + } + section.page{ + .jump-to-section{display: block;} } + section.right-menu{ + display: none; + } + } } -} \ No newline at end of file +} + + + diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 55812a5..e3f20a7 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -51,9 +51,6 @@ body{ border-bottom: 2px solid gray ; box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2); - display: flex; - flex-direction: row; - flex-wrap: nowrap; justify-content: space-between; align-items: stretch ; @@ -61,21 +58,15 @@ body{ a { color:invert($c_dark2); } - .logo { + > div { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch ; - font-size: 100%; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - *{ - vertical-align: middle; - } + img { height: 32px; @@ -91,12 +82,15 @@ body{ nav.shortcuts { - margin-left: 24px; + margin-left: auto; + position: relative; + display: flex; justify-content: flex-start; list-style-type: none; flex-direction: row; flex-wrap: nowrap; + li { margin: 0px; @@ -292,9 +286,6 @@ article section.page { div.chevrons { - &.simple, &.full{ - display: none ; - } margin-top: 3rem; border-top: 1px solid $c_light2; border-bottom: 1px solid $c_light2; @@ -302,15 +293,15 @@ article section.page { display: flex; flex-direction: row; align-items: stretch; - -webkit-box-pack: end!important; - justify-content: flex-end!important; + -webkit-box-pack: end!important; + justify-content: flex-end!important; a{ display: flex; align-items: center!important; -webkit-box-align: center!important; justify-content: flex-end!important; - width: 50%; + max-width: 22.5rem; padding: 24px; @@ -346,7 +337,7 @@ article section.page { h1:first-of-type { font-size: 2.6rem; - margin-top: 3rem!important; + margin-top: 1.5rem!important; color:$c_dark2; margin-bottom: 0px; line-height: 1.05; diff --git a/assets/sass/menu.scss b/assets/sass/menu.scss index 0ea7189..c1c03e2 100644 --- a/assets/sass/menu.scss +++ b/assets/sass/menu.scss @@ -24,7 +24,7 @@ article>aside { position: absolute; left: 0px; top: 0px; - width: calc(100% - 25px - 25px ); + width: calc(100%); input { padding: 3px 25px; width: 100%; diff --git a/exampleSite/content/_layout/footer/_index.md b/exampleSite/content/_layout/footer/_index.md index d0fc98a..08a41d6 100644 --- a/exampleSite/content/_layout/footer/_index.md +++ b/exampleSite/content/_layout/footer/_index.md @@ -12,7 +12,7 @@ description: Footer .footer-custom { font: normal normal 12px/1.4 sans-serif; - max-width: 1008px; + /*max-width: 1008px;*/ box-sizing: border-box; margin: 0 auto; padding: 24px; diff --git a/exampleSite/content/create-page/page-slide/_index.md b/exampleSite/content/create-page/page-slide/_index.md index 1bf47d0..cbbf50e 100644 --- a/exampleSite/content/create-page/page-slide/_index.md +++ b/exampleSite/content/create-page/page-slide/_index.md @@ -4,6 +4,15 @@ description = "" date = "2017-04-24T18:36:24+02:00" weight = 90 subpage = true + + + +hide_header=false +hide_nav=false +hide_breadcrumb=false +hide_toc=false +hide_footer=false + +++ A basic md content page can be rendered as a reveal.js presentation full screen. diff --git a/exampleSite/resources/_gen/assets/scss/sass/layout.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/exampleSite/resources/_gen/assets/scss/sass/layout.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index 62f5278..7dc9ab9 100644 --- a/exampleSite/resources/_gen/assets/scss/sass/layout.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/exampleSite/resources/_gen/assets/scss/sass/layout.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -1,54 +1,81 @@ -body article aside { - transition: max-height .2s ease-out; } - body article aside.responsive { - display: block; - width: 100%; - max-width: 20em; - z-index: 100; } +* { + box-sizing: border-box; } + +a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { + border: 0; + vertical-align: baseline; } body { - margin: 0px; } + margin: 0px 0px; + display: -webkit-box; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + min-height: 100vh; + text-rendering: optimizeLegibility; } body header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 3.5rem; - line-height: 3.5rem; - margin-bottom: .35rem; - padding: 0 2rem; + flex-shrink: 0; + min-height: 45px; + max-height: 45px; + padding: 8px 0; position: fixed; - left: 0; - right: 0; - top: 0; - z-index: 10; } + width: 100%; + z-index: 9999; + -webkit-transform: translateZ(0); + transform: translateZ(0); } + body header > * { + max-width: 1400px; + width: 100%; + padding: 0 20px; + margin: 0 auto; } body header div.burger { display: none; } body article { - padding-top: 3.5rem; + -webkit-box-flex: 1; + flex-grow: 1; + display: -webkit-box; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + min-height: calc(100vh - 45px); + left: 0; + min-height: 100%; + padding-top: 100px; + position: relative; + z-index: 99; + -webkit-box-flex: 1; + flex-grow: 1; + display: -webkit-box; display: flex; - flex-direction: row; - flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-flow: row nowrap; + padding: 0 20px; + padding-top: 45px; + margin: 0 auto; width: 100%; - align-items: flex-start; - min-height: calc(100vh - 3.5rem); } + max-width: 1400px; } + body article > * { + margin: 0 24px; } body article aside { - margin-top: 3.5rem; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 20em; + transition: max-height .2s ease-out; + -webkit-box-flex: 0; + flex: 0 0 20em; + margin-left: 0; + -webkit-box-flex: 0; + flex: 0 0 20em; + height: calc(100vh - 45px); + position: -webkit-sticky; + position: sticky; overflow-y: auto; - overflow-x: hidden; - /*transition: transform .5s ease-out;*/ } - body article aside.full { - display: none; } + top: 45px; } body article section.page { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; - margin-left: 20em; - width: calc(100% - 20em - 15em - 1.1em); } + -webkit-box-flex: 1; + flex: 1 auto; + max-width: 100%; + min-width: 0; } body article section.page .jump-to-section { display: none; margin-top: 0.5em; @@ -65,68 +92,74 @@ body { min-width: 25%; max-width: 50%; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25); } - body article section.page.simple { - width: calc(100% - 20em - 1.1em); } - body article section.page.full { - width: 100%; - margin-left: 0em; } body article section.right-menu { - position: fixed; - width: 15em; - top: 3.5rem; - right: 0px; - bottom: 0px; + margin-right: 0; + align-self: flex-start; + display: block; + -webkit-box-flex: 0; + flex: 0 0 240px; + max-height: calc(100vh - 45px); overflow-y: auto; - overflow-x: hidden; - transition: transform .5s ease-in-out; } - body article section.right-menu.simple, body article section.right-menu.full { - display: none; } - body footer { - display: table-row; - position: relative; - overflow: auto; - display: block; - z-index: 100; } + position: -webkit-sticky; + position: sticky; + top: 45px; + margin-bottom: 40px; } + body footer > * { + max-width: 1400px; + width: 100%; + padding: 0 20px; + margin: 0 auto; } -@media (max-width: 1200px) { - body header div.burger { - /*display: inline;*/ } - body header div.burger.full { - display: none; } - body article aside { - /*transform: translate(100vw,0);*/ - /*display: none;*/ } - body article section.page { - /*margin-left: 0px; */ - width: calc(100% - 1.1em); } - body article section.page.simple { - width: 100%; } - body article section.page .jump-to-section { - display: block; } - body article section.right-menu { - display: none; } } +/* hideheader hidenav hidebreadcrumb hidetoc hidefooter */ +body.hidenav article aside { + display: none !important; } + +body.hidebreadcrumb article section.page nav#breadcrumb { + display: none !important; } + +body.hidetoc article section.right-menu { + display: none !important; } + +body.hidefooter footer { + display: none !important; } -@media (max-width: 930px) { +body.hideheader header { + display: none !important; } + +body.hideheader article { + padding-top: 0px; } + body.hideheader article aside { + top: 0px; + height: calc(100vh); } + body.hideheader article section.right-menu { + top: 0px; + max-height: calc(100vh); } + +@media (max-width: 1160px) { body header div.burger { - display: inline; } - body header div.burger.full { - display: none; } - body header nav.shortcuts li { display: none; } - body article aside { - /*transform: translate(-100vw,0);*/ - display: none; } - body article section.page { - width: 100%; - margin-left: 0px; } - body article section.right-menu { - /*transform: translate(100vw,0);*/ - display: none; } } + body article { + padding-left: 0px; } + body article aside { + margin-right: 0px; } + body article aside.responsive { + display: block; } + body article section.page .jump-to-section { + display: block; } + body article section.right-menu { + display: none; } } @media (max-width: 600px) { - body article section.page { - width: 100%; - margin-left: 0px; } - body article aside.responsive { - width: 100%; - max-width: 100%; } } + body header div.burger { + display: block; } + body article { + padding: 0px 0px; } + body article aside { + display: none; + flex: 0 0 100%; } + body article aside.responsive { + display: block; } + body article section.page .jump-to-section { + display: block; } + body article section.right-menu { + display: none; } } diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content index 4286365..4f9c630 100644 --- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content +++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content @@ -12,33 +12,26 @@ body { background-color: #333333; border-bottom: 2px solid gray; box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); - display: flex; - flex-direction: row; - flex-wrap: nowrap; justify-content: space-between; align-items: stretch; color: #e6e6e6; } body header a { color: #cccccc; } - body header .logo { + body header > div { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; - font-size: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - body header .logo * { - vertical-align: middle; } - body header .logo img { + white-space: nowrap; } + body header > div img { height: 32px; margin-right: 0.5rem; } - body header .logo .burger { + body header > div .burger { margin-right: 1rem; } body header nav.shortcuts { - margin-left: 24px; + margin-left: auto; + position: relative; display: flex; justify-content: flex-start; list-style-type: none; @@ -173,14 +166,11 @@ article section.page div.chevrons { align-items: stretch; -webkit-box-pack: end !important; justify-content: flex-end !important; } - article section.page div.chevrons.simple, article section.page div.chevrons.full { - display: none; } article section.page div.chevrons a { display: flex; align-items: center !important; -webkit-box-align: center !important; justify-content: flex-end !important; - width: 50%; max-width: 22.5rem; padding: 24px; } article section.page div.chevrons a.prev { @@ -203,7 +193,7 @@ article section.page { line-height: 24px; } article section.page h1:first-of-type { font-size: 2.6rem; - margin-top: 3rem !important; + margin-top: 1.5rem !important; color: #333333; margin-bottom: 0px; line-height: 1.05; diff --git a/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content b/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content index 043091a..caa7589 100644 --- a/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content +++ b/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content @@ -11,7 +11,7 @@ article > aside { position: absolute; left: 0px; top: 0px; - width: calc(100% - 25px - 25px); } + width: calc(100%); } article > aside div.search input { padding: 3px 25px; width: 100%; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index c806d53..befda08 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,7 +4,16 @@ {{ block "title" . }}{{ end }} {{ partial "html-head.html" . }} - +