From 8b910e91e11beedbd117599d1f98c810ce4b50f8 Mon Sep 17 00:00:00 2001 From: Mark Macdonald Date: Mon, 2 Oct 2023 18:52:43 +0200 Subject: [PATCH 1/9] First increment of supporting Inkit sponsorship in the header --- src/docgen/docgen.js | 20 ++--- src/docs/files/images/inkit-logo-small.svg | 9 +++ src/include/require/styles/framework.css | 61 ++++++++------ src/include/templates/main.html | 35 ++++++-- src/styles/page.scss | 94 +++++++++++++++++----- 5 files changed, 156 insertions(+), 63 deletions(-) create mode 100644 src/docs/files/images/inkit-logo-small.svg diff --git a/src/docgen/docgen.js b/src/docgen/docgen.js index 66acd3f6..a3e621d7 100644 --- a/src/docgen/docgen.js +++ b/src/docgen/docgen.js @@ -655,18 +655,18 @@ function DocGen(process) { if (templates.hasOwnProperty(key)) { let $ = templates[key]; //logo - if (hasLogo === true) { - let logoUrl = logoPath; - $('#dg-logo').css('background-image', 'url(' + logoUrl + ')'); - $('#dg-logo').css('height', logoHeight + 'px'); - $('#dg-logo').css('line-height', logoHeight + 'px'); - $('#dg-logo').css('padding-left', logoWidth + 25 + 'px'); - } else { - $('#dg-logo').css('padding-left', '0'); - } + // if (hasLogo === true) { + // let logoUrl = logoPath; + // //$('#dg-logo').css('background-image', 'url(' + logoUrl + ')'); + // //$('#dg-logo').css('height', logoHeight + 'px'); + // //$('#dg-logo').css('line-height', logoHeight + 'px'); + // //$('#dg-logo').css('padding-left', logoWidth + 25 + 'px'); + // } else { + // $('#dg-logo').css('padding-left', '0'); + // } //parameters $('title').text(meta.parameters.title); - $('#dg-homelink').attr('href', homelink); + $('.dg-homelink').attr('href', homelink); $('#dg-title').text(meta.parameters.title); $('#dg-owner').html(owner); $('#dg-version').text(releaseVersion); diff --git a/src/docs/files/images/inkit-logo-small.svg b/src/docs/files/images/inkit-logo-small.svg new file mode 100644 index 00000000..da16e201 --- /dev/null +++ b/src/docs/files/images/inkit-logo-small.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/include/require/styles/framework.css b/src/include/require/styles/framework.css index dab1e38a..bb791c17 100644 --- a/src/include/require/styles/framework.css +++ b/src/include/require/styles/framework.css @@ -424,39 +424,54 @@ html body .w-fixed-width { header */ header { - color: rgb(1, 3, 4); background-color: #fff; border-top: 2px solid rgb(1, 3, 4); border-bottom: 2px solid rgb(1, 3, 4); } -header a, -header a:hover, -header a:active, -header a:visited, -header .w-false-link, -header .w-false-link:hover { - color: rgb(1, 3, 4); +header .header { + display: flex; + justify-content: space-between; + align-items: center; + height: 102px; } -header .header-title { - display: table-cell; - vertical-align: middle; - padding: 30px 0 30px 0; +header .left-block { + display: flex; + align-items: center; } -header .header-title > a { - text-decoration: none; +header .left-block > a > img { + display: flex; + align-items: center; + height: 42px; + margin-right: 26px; +} +header .text { + display: flex; + flex-direction: column; font-weight: bold; font-size: 16px; } -header .header-title > a div { - background-repeat: no-repeat; - height: 42px; - line-height: 42px; - padding-left: 115px; +header .text a { + text-decoration: none; } -header .header-extra { - display: table-cell; - vertical-align: middle; - text-align: right; +header .text p { + margin: 0; +} +header .text #sponsorLogo { + height: 12px; +} +header .right-block { + margin-left: auto; /* Pushes the right block to the right edge */ +} +header .right-block a { + text-decoration: none; + color: #fff; + padding: 5px 10px; + background-color: #007bff; + border-radius: 5px; + transition: background-color 0.3s; +} +header .right-block a:hover { + background-color: #0056b3; } /* footer diff --git a/src/include/templates/main.html b/src/include/templates/main.html index f0ee5296..c1e6b826 100644 --- a/src/include/templates/main.html +++ b/src/include/templates/main.html @@ -62,16 +62,35 @@
-
- -
diff --git a/src/styles/page.scss b/src/styles/page.scss index 62a40060..58eb298d 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -27,41 +27,91 @@ html header { - @include fixed-color-text(); - background-color: $content-background; border-top: 2px solid $brand-primary-color; border-bottom: 2px solid $brand-primary-color; - //.header-container { - // display: table; - //} + .header { + display: flex; + justify-content: space-between; + align-items: center; + height: 102px; + } - .header-title { + .left-block { + display: flex; + align-items: center; + } - display: table-cell; - vertical-align: middle; - padding: 30px 0 30px 0; + .left-block > a > img { + display: flex; + align-items: center; + height: 42px; + margin-right: 26px; + } - > a { - text-decoration:none; - font-weight: bold; - font-size: 16px; + .text { + display: flex; + flex-direction: column; - div { - background-repeat: no-repeat; - height: $logo-height; line-height: $logo-height; //'vertical center' - padding-left: $logo-width + 25; - } + font-weight: bold; + font-size: 16px; + + a { + text-decoration: none; + } + + p { + margin: 0; } + + #sponsorLogo { + height: 12px; + } + } + + .right-block { + margin-left: auto; /* Pushes the right block to the right edge */ + } + + .right-block a { + text-decoration: none; + color: #fff; + padding: 5px 10px; + background-color: #007bff; + border-radius: 5px; + transition: background-color 0.3s; } - .header-extra { - display: table-cell; - vertical-align: middle; - text-align: right; + .right-block a:hover { + background-color: #0056b3; } + //.header-title { + // + // display: table-cell; + // vertical-align: middle; + // padding: 30px 0 30px 0; + // + // > a { + // text-decoration:none; + // font-weight: bold; + // font-size: 16px; + // + // div { + // background-repeat: no-repeat; + // height: $logo-height; line-height: $logo-height; //'vertical center' + // padding-left: $logo-width + 25; + // } + // } + //} + // + //.header-extra { + // display: table-cell; + // vertical-align: middle; + // text-align: right; + //} + &::after { @extend .w-clear } From dc1d1b747daec7d37abb14a89915b3d9580cb7d9 Mon Sep 17 00:00:00 2001 From: Mark Macdonald Date: Tue, 3 Oct 2023 17:41:24 +0200 Subject: [PATCH 2/9] Improve styling of header sponorship block --- src/include/require/styles/framework.css | 33 +++++++++++++++++++----- src/include/templates/main.html | 14 +++++----- src/styles/page.scss | 31 +++++++++++++++------- 3 files changed, 56 insertions(+), 22 deletions(-) diff --git a/src/include/require/styles/framework.css b/src/include/require/styles/framework.css index bb791c17..5099fca5 100644 --- a/src/include/require/styles/framework.css +++ b/src/include/require/styles/framework.css @@ -424,40 +424,59 @@ html body .w-fixed-width { header */ header { + color: rgb(1, 3, 4); background-color: #fff; border-top: 2px solid rgb(1, 3, 4); border-bottom: 2px solid rgb(1, 3, 4); } +header a, +header a:hover, +header a:active, +header a:visited, +header .w-false-link, +header .w-false-link:hover { + color: rgb(1, 3, 4); +} header .header { display: flex; justify-content: space-between; align-items: center; height: 102px; } -header .left-block { +header .headerLeftBlock { display: flex; align-items: center; } -header .left-block > a > img { +header #headerLogo { display: flex; align-items: center; height: 42px; margin-right: 26px; } -header .text { +header #headerLeftText { display: flex; flex-direction: column; font-weight: bold; font-size: 16px; } -header .text a { +header #headerLeftText a { text-decoration: none; } -header .text p { - margin: 0; +header #headerLeftText #headerSponsor { + display: flex; + align-items: center; + font-weight: normal; + font-size: 11px; + margin: 5px 0 0 0; + opacity: 0.65; +} +header #headerLeftText #headerSponsor span { + margin-right: 6px; } -header .text #sponsorLogo { +header #headerLeftText #headerSponsor #sponsorLogo { height: 12px; + margin: 0 auto; + display: block; } header .right-block { margin-left: auto; /* Pushes the right block to the right edge */ diff --git a/src/include/templates/main.html b/src/include/templates/main.html index c1e6b826..c921572c 100644 --- a/src/include/templates/main.html +++ b/src/include/templates/main.html @@ -63,18 +63,20 @@
-
+
- Logo + -
+
-

+

Sponsored by - -

+ + + +
diff --git a/src/styles/page.scss b/src/styles/page.scss index 58eb298d..a3ea802e 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -27,6 +27,8 @@ html header { + @include fixed-color-text(); + background-color: $content-background; border-top: 2px solid $brand-primary-color; border-bottom: 2px solid $brand-primary-color; @@ -38,19 +40,19 @@ header height: 102px; } - .left-block { + .headerLeftBlock { display: flex; align-items: center; } - .left-block > a > img { + #headerLogo { display: flex; align-items: center; height: 42px; margin-right: 26px; } - .text { + #headerLeftText { display: flex; flex-direction: column; @@ -61,12 +63,23 @@ header text-decoration: none; } - p { - margin: 0; - } - - #sponsorLogo { - height: 12px; + #headerSponsor { + display: flex; + align-items: center; + font-weight: normal; + font-size: 11px; + margin: 5px 0 0 0; + opacity: 0.65; + + span { + margin-right: 6px; + } + + #sponsorLogo { + height: 12px; + margin: 0 auto; + display: block; + } } } From dd6523fcc6708834a66293f7af03c67236b1592a Mon Sep 17 00:00:00 2001 From: Mark Macdonald Date: Tue, 3 Oct 2023 17:50:46 +0200 Subject: [PATCH 3/9] Clean up new top bar styles --- src/include/require/styles/framework.css | 8 ++-- src/include/templates/main.html | 4 +- src/styles/page.scss | 52 ++++++------------------ 3 files changed, 19 insertions(+), 45 deletions(-) diff --git a/src/include/require/styles/framework.css b/src/include/require/styles/framework.css index 5099fca5..d12ca194 100644 --- a/src/include/require/styles/framework.css +++ b/src/include/require/styles/framework.css @@ -468,7 +468,7 @@ header #headerLeftText #headerSponsor { font-weight: normal; font-size: 11px; margin: 5px 0 0 0; - opacity: 0.65; + opacity: 0.6; } header #headerLeftText #headerSponsor span { margin-right: 6px; @@ -478,10 +478,10 @@ header #headerLeftText #headerSponsor #sponsorLogo { margin: 0 auto; display: block; } -header .right-block { +header #headerRightBlock { margin-left: auto; /* Pushes the right block to the right edge */ } -header .right-block a { +header #headerRightBlock a { text-decoration: none; color: #fff; padding: 5px 10px; @@ -489,7 +489,7 @@ header .right-block a { border-radius: 5px; transition: background-color 0.3s; } -header .right-block a:hover { +header #headerRightBlock a:hover { background-color: #0056b3; } /* diff --git a/src/include/templates/main.html b/src/include/templates/main.html index c921572c..369ed081 100644 --- a/src/include/templates/main.html +++ b/src/include/templates/main.html @@ -79,8 +79,8 @@
-
- Link +
diff --git a/src/styles/page.scss b/src/styles/page.scss index a3ea802e..49299c30 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -69,7 +69,7 @@ header font-weight: normal; font-size: 11px; margin: 5px 0 0 0; - opacity: 0.65; + opacity: 0.6; span { margin-right: 6px; @@ -83,52 +83,26 @@ header } } - .right-block { + #headerRightBlock { margin-left: auto; /* Pushes the right block to the right edge */ - } - .right-block a { - text-decoration: none; - color: #fff; - padding: 5px 10px; - background-color: #007bff; - border-radius: 5px; - transition: background-color 0.3s; - } + a { + text-decoration: none; + color: #fff; + padding: 5px 10px; + background-color: #007bff; + border-radius: 5px; + transition: background-color 0.3s; + } - .right-block a:hover { - background-color: #0056b3; + a:hover { + background-color: #0056b3; + } } - //.header-title { - // - // display: table-cell; - // vertical-align: middle; - // padding: 30px 0 30px 0; - // - // > a { - // text-decoration:none; - // font-weight: bold; - // font-size: 16px; - // - // div { - // background-repeat: no-repeat; - // height: $logo-height; line-height: $logo-height; //'vertical center' - // padding-left: $logo-width + 25; - // } - // } - //} - // - //.header-extra { - // display: table-cell; - // vertical-align: middle; - // text-align: right; - //} - &::after { @extend .w-clear } - } /* From 91eafb295498182e5296500da44dd8a3f71503b2 Mon Sep 17 00:00:00 2001 From: Mark Macdonald Date: Tue, 3 Oct 2023 18:08:44 +0200 Subject: [PATCH 4/9] Finish styling new header --- src/include/require/styles/framework.css | 16 ++++------------ src/include/templates/main.html | 2 +- src/styles/page.scss | 17 ++--------------- 3 files changed, 7 insertions(+), 28 deletions(-) diff --git a/src/include/require/styles/framework.css b/src/include/require/styles/framework.css index d12ca194..b3582015 100644 --- a/src/include/require/styles/framework.css +++ b/src/include/require/styles/framework.css @@ -357,8 +357,7 @@ input[type='submit']:focus { reused entities */ .w-clear-after::after, -.w-clear, -header::after { +.w-clear { clear: both; height: 0; visibility: hidden; @@ -439,9 +438,9 @@ header .w-false-link:hover { } header .header { display: flex; - justify-content: space-between; align-items: center; height: 102px; + padding-right: 40px; } header .headerLeftBlock { display: flex; @@ -479,19 +478,12 @@ header #headerLeftText #headerSponsor #sponsorLogo { display: block; } header #headerRightBlock { - margin-left: auto; /* Pushes the right block to the right edge */ + margin-left: auto; } header #headerRightBlock a { - text-decoration: none; - color: #fff; padding: 5px 10px; - background-color: #007bff; - border-radius: 5px; - transition: background-color 0.3s; -} -header #headerRightBlock a:hover { - background-color: #0056b3; } + /* footer */ diff --git a/src/include/templates/main.html b/src/include/templates/main.html index 369ed081..b3d6ec8a 100644 --- a/src/include/templates/main.html +++ b/src/include/templates/main.html @@ -80,7 +80,7 @@
diff --git a/src/styles/page.scss b/src/styles/page.scss index 49299c30..7ac62d82 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -35,9 +35,9 @@ header .header { display: flex; - justify-content: space-between; align-items: center; height: 102px; + padding-right: 40px; } .headerLeftBlock { @@ -84,25 +84,12 @@ header } #headerRightBlock { - margin-left: auto; /* Pushes the right block to the right edge */ + margin-left: auto; a { - text-decoration: none; - color: #fff; padding: 5px 10px; - background-color: #007bff; - border-radius: 5px; - transition: background-color 0.3s; - } - - a:hover { - background-color: #0056b3; } } - - &::after { - @extend .w-clear - } } /* From dbafe50f6cfd49625bffdbae0fcbbae308dbe926 Mon Sep 17 00:00:00 2001 From: Mark Macdonald Date: Tue, 3 Oct 2023 18:12:15 +0200 Subject: [PATCH 5/9] Header - wire up the pre-existing backlink feature again --- src/docgen/docgen.js | 2 +- src/docs/parameters.json | 4 ++-- src/include/templates/main.html | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/docgen/docgen.js b/src/docgen/docgen.js index a3e621d7..2e528516 100644 --- a/src/docgen/docgen.js +++ b/src/docgen/docgen.js @@ -624,7 +624,7 @@ function DocGen(process) { let backlink = ''; if (meta.parameters.backlink.url !== '') { backlink += - '' + meta.parameters.backlink.name + diff --git a/src/docs/parameters.json b/src/docs/parameters.json index 2092b700..ce77a122 100644 --- a/src/docs/parameters.json +++ b/src/docs/parameters.json @@ -26,8 +26,8 @@ "url": "https://github.com/mtmacdonald/docgen" }, "backlink": { - "name": "", - "url": "" + "name": "Contact Inkit", + "url": "https://www.inkit.com/contact-us" }, "module": "", "id": "", diff --git a/src/include/templates/main.html b/src/include/templates/main.html index b3d6ec8a..3092a134 100644 --- a/src/include/templates/main.html +++ b/src/include/templates/main.html @@ -80,7 +80,7 @@ @@ -91,7 +91,7 @@ - +
From 30b6b8cbd4a2f113c4e52cb7de65a2ce435dc7b1 Mon Sep 17 00:00:00 2001 From: Mark Macdonald Date: Tue, 3 Oct 2023 18:27:56 +0200 Subject: [PATCH 6/9] Remove the header bottom border on the landing page (closer to mockup) --- src/docs/index.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/docs/index.md b/src/docs/index.md index 62ab9649..497e022d 100644 --- a/src/docs/index.md +++ b/src/docs/index.md @@ -1,4 +1,7 @@