diff --git a/requirements/base.txt b/requirements/base.txt index df08e24..94cf8a0 100644 --- a/requirements/base.txt +++ b/requirements/base.txt @@ -20,7 +20,7 @@ djangorestframework==3.10.2 # https://github.com/encode/django-rest-framework coreapi==2.3.3 # https://github.com/core-api/python-client django-markdownx==2.0.28 -WeasyPrint==48 +WeasyPrint==49 django-weasyprint==0.5.4 whitenoise==4.1.3 Pygments==2.4.2 diff --git a/schickmacher/static/images/banner.jpg b/schickmacher/static/images/banner.jpg new file mode 100644 index 0000000..8d7aab8 Binary files /dev/null and b/schickmacher/static/images/banner.jpg differ diff --git a/schickmacher/static/images/banner.svg b/schickmacher/static/images/banner.svg new file mode 100644 index 0000000..d5d62ef --- /dev/null +++ b/schickmacher/static/images/banner.svg @@ -0,0 +1,700 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/schickmacher/static/images/logo.png b/schickmacher/static/images/logo.png new file mode 100644 index 0000000..1c1086a Binary files /dev/null and b/schickmacher/static/images/logo.png differ diff --git a/schickmacher/static/sass/render.scss b/schickmacher/static/sass/render.scss index 961addc..1017fff 100644 --- a/schickmacher/static/sass/render.scss +++ b/schickmacher/static/sass/render.scss @@ -5,13 +5,43 @@ font-family: 'Source Sans Pro', sans-serif; color: #333; font-size: 15px; - margin: 70pt 60pt 70pt; -} + margin: 120pt 60pt 70pt 60pt; -@page { @bottom-right { content: counter(page) " / " counter(pages); } + + @bottom-center { + content: 'qabel.de'; + font-weight: bold; + } + + @top-center { + content: ''; + background-image: url('/static/images/banner.jpg'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + display: block; + width:100%; + height:120pt; + padding: 0pt 30pt; + } + + @top-right { + z-index: 10; + color:white; + white-space: nowrap; + /*content filled in template*/ + } + + @top-left { + z-index: 10; + white-space: nowrap; + color:white; + padding-left: 50pt; + /*content filled in template*/ + } } body { @@ -62,21 +92,39 @@ p { widows: 2; } -ul { - page-break-inside: avoid; +a { + color: inherit; +} + +img { + max-width: 100%; } +ul, ol { + page-break-inside: avoid; + + > ::marker { + color: $orange; + font-weight: bold; + } +} + +hr{ + border: none; + border-top: 1px solid black; +} + +/* ul { - margin: 0.75em 0; - padding: 0 3em; list-style: none; - li:before { + > li:before { content: ""; border-color: transparent $orange; border-style: solid; border-width: 0.35em 0 0.35em 0.6em; + margin-top: -0.7em; display: block; height: 0; width: 0; @@ -84,6 +132,55 @@ ul { top: 1em; position: relative; } +}*/ + +ul { + list-style: none; + + > li { + &::marker { + font-family: 'Material Icons'; + content: 'play_arrow'; + font-weight: normal; + font-style: normal; + display: inline-block; + line-height: 1.1; + font-size: 1.2em; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + } + + ul { + list-style: none; + + > li::marker { + font-family: 'Material Icons Outlined'; + content: 'play_arrow'; + font-weight: normal; + font-style: normal; + display: inline-block; + line-height: 1.1; + font-size: 1.2em; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + } + } + } } - +@media screen { + body{ + background: #333333; + } + .container{ + max-width: 800px; + margin: 0 auto; + padding: 30px 100px; + } +} diff --git a/schickmacher/templates/renderer/rendered.html b/schickmacher/templates/renderer/rendered.html index a51ed63..ed003ac 100644 --- a/schickmacher/templates/renderer/rendered.html +++ b/schickmacher/templates/renderer/rendered.html @@ -7,7 +7,7 @@ {% endcompress %} - +