From 7f95cf3c4e29deab71e9a352fc950207cf1d3aa0 Mon Sep 17 00:00:00 2001 From: sikoramichal Date: Mon, 9 Dec 2019 09:50:53 +0100 Subject: [PATCH] EZDNXTGEN-12300: Footnotes showing up at the top of published doc --- styles/base/block-elements.css | 13 ++++++++--- styles/base/typography.css | 18 ++++++++++++++- styles/blue-theme/blue-theme.css | 33 +++++++++++++++++++++++----- styles/minimalist/block-elements.css | 30 +++++++++++++++---------- styles/minimalist/typography.css | 19 +++++++++++++++- 5 files changed, 92 insertions(+), 21 deletions(-) diff --git a/styles/base/block-elements.css b/styles/base/block-elements.css index a289cae..1e9eca1 100644 --- a/styles/base/block-elements.css +++ b/styles/base/block-elements.css @@ -183,10 +183,10 @@ div.blue_note span{font-weight: bold; } /* COVER PAGE *********/ -html, body { height: 100%; width: 100%;} +html, body { width: 100%;} * {font-family: "'Roboto", Helvetica, Arial !important;} html {margin-right: 2000px;} -.coverPageContainer {width: 100%; height: 100%} +.coverPageContainer {width: 100%; height: 100%; page-break-after:always} .centeredContainer {height: 100%; width: 100%; display: table; margin:0px; padding: 0px; } .centeredContainer .centered { display: table-cell; vertical-align: middle; } @@ -220,7 +220,14 @@ nav li>ul li{margin-left: 0px;} font-family: "Roboto", Helvetica, Arial; size: a4; /* marks: crop cross; */ - margin: 80px 55px; + margin: 80px 55px; + counter-reset: footnote; + @footnotes { + margin-top:10px; + border-top: solid black thin; + border-clip: 200px; + padding: 0px 10px 0px 12px; + } } /* FIRST PAGE- start on right *********/ @page:first { margin: 0px; border: solid 15px #f1f2f3; diff --git a/styles/base/typography.css b/styles/base/typography.css index d5113a6..7eedb5c 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -28,10 +28,26 @@ table ul{margin: 0px; font-size: 0.9rem;} table ul li{padding-left: 5px; margin: 0px;} .context{font-weight: bold; font-size: 1.3rem; margin-bottom: 15px;} article{clear: both;} -p{margin: 10px 0px 0px 0px; display: block;} +p{margin: 10px 0px 0px 0px; display: block; prince-footnote-policy: keep-with-line;} div .p{ margin: 10px 0px 0px 0px; clear: both;} img{padding: 10px auto; width: 100%; left:5px; position: relative; } + +.fn { + float: footnote; + font-size: 83%; +} + +.fn::footnote-call { + content: "[" counter(footnote) "]"; + font-size: 83%; + vertical-align: super; + line-height: none; +} + +.fn::footnote-marker { + font-weight: bold; +} /* END GLOBAL Typography setting *********/ /*---------------------------------------- END DEFAULT STYLE ------------------------------------------- */ diff --git a/styles/blue-theme/blue-theme.css b/styles/blue-theme/blue-theme.css index 52076cb..8caee13 100644 --- a/styles/blue-theme/blue-theme.css +++ b/styles/blue-theme/blue-theme.css @@ -1,4 +1,4 @@ -@import "../base/base.css") +@import "../base/base.css"); @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400'); @@ -28,7 +28,7 @@ table ul{margin: 0px; font-size: 0.9rem;} table ul li{padding-left: 5px; margin: 0px;} .context{font-weight: bold; font-size: 1.3rem; margin-bottom: 15px;} article{clear: both;} -p{margin: 10px 0px 0px 0px; display: block; padding-bottom: 10px;} +p{margin: 10px 0px 0px 0px; display: block; padding-bottom: 10px; prince-footnote-policy: keep-with-line;} div .p{ margin: 10px 0px 0px 0px; clear: both;} img{padding: 10px auto; width: 100%; left:5px; position: relative; } @@ -236,10 +236,10 @@ nav li>ul li{margin-left: 0px;} /* COVER PAGE *********/ -html, body { height: 100%; width: 100%;} +html, body { width: 100%;} * {font-family: "'Roboto", Helvetica, Arial !important;} html {margin-right: 2000px;} -.coverPageContainer {width: 100%; height: 100%; } +.coverPageContainer {width: 100%; height: 100%; page-break-after: always;} .centeredContainer {height: 100%; width: 100%; display: table; margin:0px; padding: 0px; } .centeredContainer .centered { display: table-cell; vertical-align: top; } @@ -252,11 +252,34 @@ html {margin-right: 2000px;} /* HEADER AND FOOTER *********/ +.fn { + float: footnote; + font-size: 83%; +} + +.fn::footnote-call { + content: "[" counter(footnote) "]"; + font-size: 83%; + vertical-align: super; + line-height: none; +} + +.fn::footnote-marker { + font-weight: bold; +} + @page { font-family: "Roboto", Helvetica, Arial; size: a4; /* marks: crop cross; */ - margin: 80px 55px; + margin: 80px 55px; + counter-reset: footnote; + @footnotes { + margin-top:10px; + border-top: solid black thin; + border-clip: 200px; + padding: 0px 10px 0px 12px; + } } /* FIRST PAGE- start on right *********/ @page:first { margin: 0px; border-top: solid 50px rgba(0, 131, 185, .5); border-bottom: solid 80px rgba(0, 131, 185, .5); diff --git a/styles/minimalist/block-elements.css b/styles/minimalist/block-elements.css index a289cae..dd1e4cc 100644 --- a/styles/minimalist/block-elements.css +++ b/styles/minimalist/block-elements.css @@ -183,10 +183,10 @@ div.blue_note span{font-weight: bold; } /* COVER PAGE *********/ -html, body { height: 100%; width: 100%;} +html, body { width: 100%;} * {font-family: "'Roboto", Helvetica, Arial !important;} html {margin-right: 2000px;} -.coverPageContainer {width: 100%; height: 100%} +.coverPageContainer {width: 100%; height: 100%; page-break-after: always;} .centeredContainer {height: 100%; width: 100%; display: table; margin:0px; padding: 0px; } .centeredContainer .centered { display: table-cell; vertical-align: middle; } @@ -220,8 +220,16 @@ nav li>ul li{margin-left: 0px;} font-family: "Roboto", Helvetica, Arial; size: a4; /* marks: crop cross; */ - margin: 80px 55px; + margin: 80px 55px; + counter-reset: footnote; + @footnotes { + margin-top:10px; + border-top: solid black thin; + border-clip: 200px; + padding: 0px 10px 0px 12px; + } } + /* FIRST PAGE- start on right *********/ @page:first { margin: 0px; border: solid 15px #f1f2f3; } @@ -286,15 +294,15 @@ nav li>ul li{margin-left: 0px;} text-transform: uppercase; letter-spacing: 1px; } @bottom-left { - font-size:1.2rem; font-weight: bold; border-top: solid 1px #d8d8d8; - margin-left:-15mm; - content: counter(page); - background-color:#fff; - color: #7c8d99; - padding-left:20px; - } + font-size:1.2rem; font-weight: bold; border-top: solid 1px #d8d8d8; + margin-left:-15mm; + content: counter(page); + background-color:#fff; + color: #7c8d99; + padding-left:20px; +} @bottom-right{ - font-size:.9rem; border-top: solid 1px #ccc; + font-size:.9rem; border-top: solid 1px #ccc; margin-right:-15mm; content: "Copyright © yyyy-yyyy Business Name."; background-color: #fff; diff --git a/styles/minimalist/typography.css b/styles/minimalist/typography.css index d5113a6..5755724 100644 --- a/styles/minimalist/typography.css +++ b/styles/minimalist/typography.css @@ -28,10 +28,27 @@ table ul{margin: 0px; font-size: 0.9rem;} table ul li{padding-left: 5px; margin: 0px;} .context{font-weight: bold; font-size: 1.3rem; margin-bottom: 15px;} article{clear: both;} -p{margin: 10px 0px 0px 0px; display: block;} +p{margin: 10px 0px 0px 0px; display: block; prince-footnote-policy: keep-with-line;} div .p{ margin: 10px 0px 0px 0px; clear: both;} img{padding: 10px auto; width: 100%; left:5px; position: relative; } + +.fn { + float: footnote; + font-size: 83%; +} + +.fn::footnote-call { + content: "[" counter(footnote) "]"; + font-size: 83%; + vertical-align: super; + line-height: none; +} + +.fn::footnote-marker { + font-weight: bold; +} + /* END GLOBAL Typography setting *********/ /*---------------------------------------- END DEFAULT STYLE ------------------------------------------- */