Skip to content
Snippets Groups Projects
Commit 75b36c7f authored by jan.bednarik's avatar jan.bednarik
Browse files

elections2021: Fancy PDF export

parent a0892adf
No related branches found
No related tags found
2 merge requests!304Release,!303Pdf
Show whitespace changes
Inline Side-by-side
elections2021/static/elections2021/pdf/style.css 0 → 100644
+ 1030
− 0
View file @ 75b36c7f
/*template for exporting with WeasyPrint*/
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('font/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-weight: 600;
src: url('font/Roboto-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
src: url(font/BebasNeue-Regular.ttf) format('truetype');
}
/*@font-face {
font-family: 'pirati-ui';
src: url('font/pirati-ui.eot?771b799f40ffd207e5b655696931496d');
src: url('font/pirati-ui.eot?771b799f40ffd207e5b655696931496d#iefix') format('embedded-opentype'), url('font/pirati-ui.ttf?771b799f40ffd207e5b655696931496d') format('truetype'), url('font/pirati-ui.woff?771b799f40ffd207e5b655696931496d') format('woff'), url('font/pirati-ui.svg?771b799f40ffd207e5b655696931496d#pirati-ui') format('svg');
font-weight: 400;
font-style: normal;
}*/
@page {
size: A4; /* Change from the default size of A4 */
margin: 14.4mm 14.2mm 20.4mm 14.2mm; /* Set margin on each page */
@bottom-left{
background-color: #ffe501;
background-image: url("img/logomini.svg");
background-repeat: no-repeat;
background-position: center;
width: 100%;
content: string(chapter);
height: 5.5mm;
text-align: left;
padding: 2.2mm 3mm 1.8mm;
box-sizing: border-box;
font-family: 'Bebas Neue', Helvetica, Arial, sans-serif;
font-size: 9pt;
letter-spacing: 0.2pt;
}
@bottom-right{
width: 100%;
content: counter(page);
height: 5.5mm;
text-align: right;
z-index: 99;
padding: 2mm 3mm;
box-sizing: border-box;
font-size: 8pt;
font-family: 'Roboto', Arial, sans-serif;
}
}
@page ideal{
background-color: #ffe501;
}
td{
margin: 0!important;
}
table,tr{
border-spacing: 0!important;
}
#chaptertitle{
string-set: chapter content();
font-size: 16.5mm;
line-height: 1.1;
}
.contentsrow{
display: flex;
width: 100%;
padding: 2mm 0;
}
.contentsrow a:first-child{
white-space: nowrap;
text-decoration: none;
}
.contentsnum{
text-decoration: none;
}
.contentsnum::after{
content: target-counter(attr(href), page);
}
.contentsline{
border-bottom:1px solid rgba(0,0,0,0.1);
width: 100%;
margin-left: 20mm;margin-right: 2mm;
}
.static-clock{
display: block;
padding-top: 1.5mm;
width: 33.569mm;
height: 33.569mm;
line-height: 32.069mm;
text-align: center;
background-image: url("img/staticclock.svg");
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
}
.static-clock div{
width: 100%;
position: relative;
top: -14mm;
line-height: normal;
}
[class^=ico--] {
/*font-family: 'pirati-ui'!important;*/
speak: never;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico--thincross:before {
content: "\e940";
}
.ico--check:before {
content: "";
width: 28px;
height: 34px;
background-image: url('img/greentick.svg');
background-size: 100% auto;
background-repeat: no-repeat;
}
.ico--chevron-right:before {
content: "\e923";
}
.ico--chevron-down:before {
content: "\e925";
}
*,
::after,
::before {
box-sizing: border-box;
}
html{
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
}
body {
margin: 0;
}
b {
font-weight: bolder;
}
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
button {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button {
text-transform: none;
}
[type=button],
button {
-webkit-appearance: button;
}
blockquote,
figure,
h1,
h2,
h3,
h4,
p {
margin: 0;
}
button {
background-color: transparent;
background-image: none;
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
body {
font-family: inherit;
line-height: inherit;
}
*,
::after,
::before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
}
img {
border-style: solid;
}
button {
cursor: pointer;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
}
button {
padding: 0;
line-height: inherit;
color: inherit;
}
img {
display: block;
vertical-align: middle;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.btn {
display: inline-block;
text-align: center;
font-weight: 400;
max-width: 20rem;
text-decoration: none;
}
.btn__body {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
padding: .75em 2em;
}
.btn__icon {
display: flex;
align-items: center;
border-left-width: 1px;
padding: 0 1rem;
border-color: #4c4c4c;
}
.btn__body,
.btn__icon {
transition-property: color, background-color, border-color;
transition-duration: .2s;
color: #fff;
}
.btn__body,
.btn__icon {
background-color: #000;
}
.btn--icon .btn__body-wrap {
display: flex;
}
.card__body {
padding: 2rem;
}
.card-headline {
/*font-family: Roboto Condensed, Helvetica, Arial, sans-serif;*/
font-weight: 700;
font-size: 1.3rem;
line-height: 1.25;
overflow-wrap: break-word;
}
.icon-card {
background-repeat: no-repeat;
background-position: 90% 13%;
background-size: 60px;
}
.icon-card h1 {
max-width: 75%;
word-wrap: normal;
}
[data-archetype=zemedelstvi] {
background-image: url(http://localhost:3000/images/archetype/zemedelstvi.svg);
}
.accordeon-row {
background-color: rgba(240, 240, 240, 1);
margin-bottom: 4mm;
}
.accordeon-row-head {
cursor: pointer;
padding: 2rem;
position: relative;
}
.accordeon-row-head .accordeon-row-heading {
margin: 0;
padding-top: 1px;
}
.accordeon-row--fadeout .accordeon-row-head {
padding-bottom: 1rem;
}
.accordeon-row--fadeout .accordeon-row-head i {
--tw-translate-y: 0px;
}
.accordeon-row-body {
line-height: 1;
overflow: hidden;/*removing this breaks fonts for some reason!*/
}
.accordeon-row-body>div {
box-sizing: border-box;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 2.5rem;
}
.accordeon-row.accordeon-row--fadeout .accordeon-row-body>div {
padding-top: 0;
padding-bottom: 0;
}
.accordeon-row:not(.accordeon-row--open):not(.accordeon-row--preview):not(.accordeon-row--fadeout) .accordeon-row-body {
max-height: 0!important;
}
.accordeon-row.accordeon-row--fadeout:not(.accordeon-row--open) {
position: relative;
}
.accordeon-row.accordeon-row--fadeout:not(.accordeon-row--open) .accordeon-row-body {
max-height: 220px!important;
overflow: hidden;
}
.accordeon-row.accordeon-row--fadeout:not(.accordeon-row--open) .accordeon-row-body::after {
content: "";
background-image: linear-gradient(to top, #f0f0f0 4rem, rgba(240, 240, 240, 0) 220px);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: inherit;
}
.accordeon-row.accordeon-row--fadeout:not(.accordeon-row--open) .btn {
display: block;
}
.container-collapsible:not(.container-collapsible-open) .container-collapsible-content {
overflow: hidden;
}
.container-collapsible:not(.container-collapsible-open) .container-collapsible-content::after {
content: "";
background-image: linear-gradient(to top, #fff 4.5rem, rgba(255, 255, 255, 0) 20rem);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: inherit;
}
.container-collapsible:not(.container-collapsible-open) .container-collapsible-button {
transform: translateY(-50%);
}
.figure {
position: relative;
}
.figure img {
width: 100%;
}
.figure figcaption {
display: flex;
align-items: flex-end;
height: 100%;
font-size: .875rem;
line-height: 1.25;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
position: absolute;
bottom: 0;
left: 0;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, 1);
width: 100%;
z-index: 10;
}
.figure figcaption:before {
display: block;
opacity: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: -1;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .8));
}
.figure:focus figcaption:before,
.figure:hover figcaption:before {
opacity: 0;
}
.head-alt-lg {
/*font-family: Bebas Neue, Helvetica, Arial, sans-serif;*/
font-weight: 400;
font-size: 4rem;
}
.head-alt-lg {
line-height: .96;
}
.head-alt-md {
font-family: 'Bebas Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 2.45rem;
}
.head-alt-md {
line-height: .96;
}
.head-alt-base {
font-weight: 400;
font-size: 1.875rem;
}
.head-alt-base {
line-height: .96;
}
.content-block .head-alt-sm,
.head-alt-sm {
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.6rem;
}
.content-block .head-alt-sm,
.head-alt-sm {
line-height: .96;
}
.content-block .head-alt-xs,
.head-alt-xs {
/*font-family: Bebas Neue, Helvetica, Arial, sans-serif;*/
font-weight: 400;
font-size: 1.3rem;
}
.content-block .head-alt-xs,
.head-alt-xs {
line-height: .96;
}
.head-heavy-base {
/*font-family: Roboto Condensed, Helvetica, Arial, sans-serif;*/
font-weight: 700;
font-size: 1.875rem;
line-height: 1.25;
}
.ordered-list {
padding-left: 1rem;
}
.unordered-list li {
list-style-type: none;
position: relative;
padding-left: 1em;
font-size: 1.1rem;
line-height: 1.5rem;
}
.unordered-list li:before {
position: absolute;
left: 0;
--tw-text-opacity: 1;
color: rgba(0, 0, 0, 1);
/*font-family: 'pirati-ui';*/
content: "";
height: 6pt;
width: 6pt;
margin-top: 7pt !important;
background: #adc90e;
}
.ordered-list {
list-style-type: decimal;
}
.ordered-list-squared {
list-style-type: none;
margin-bottom: 5rem;
padding-left: 0;
}
.ordered-list-squared {
counter-reset: ol-counter;
}
.ordered-list-squared>li {
font-weight: 700;
font-size: 1.3rem;
line-height: 1.5rem;
counter-increment: ol-counter;
}
.ordered-list-squared>li:last-child .unordered-list-colored {
border-left-width: 0;
}
.ordered-list-squared>li:last-child .unordered-list-colored li:last-child {
margin-bottom: 0;
}
.ordered-list-squared>li::before {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
height: 10mm;
margin-right: 1.25rem;
width: 10mm;
padding-top: 2px;
/*font-family: Bebas Neue, Helvetica, Arial, sans-serif;*/
font-weight: 400;
font-size: .8rem;
content: counter(ol-counter);
background-color: #adc90e;
color: #000;
vertical-align: top;
position: relative;
top: -2mm;
z-index: 99;
}
.ordered-list-squared .unordered-list.unordered-list-colored li:before {
margin-top: .6ex;
}
.ordered-list-squared .unordered-list-colored {
border-left-width: 1px;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
margin-left: 4.5mm;
border-color: #f5f5f5;
min-height: .5rem;
position: relative;
top: -2mm;
}
.ordered-list-squared .unordered-list-colored li {
margin-left: 12mm;
padding-left: 1.25rem;
}
.ordered-list-squared .unordered-list-colored li:first-child {
padding-top: 1mm;
}
.ordered-list-squared .unordered-list-colored li:last-child {
padding-bottom: 10mm;
}
.unordered-list-colored li {
padding-left: 2rem;
}
.unordered-list-colored li::before {
color: #adc90e;
}
.unordered-list-checks li {
line-height: 1.1;
padding-left: 2.75rem;
padding-bottom: 4mm;
}
.unordered-list-checks li {
padding-top: .65rem;
}
.unordered-list-checks li::before {
top: 0;
}
.unordered-list-checks li::before {
content: "";
width: 28px;
height: 34px;
background-image: url('img/greentick.svg');
background-size: 100% auto;
background-repeat: no-repeat;
margin-top: 12pt;
background-color: transparent;
}
.content-block p,
.para {
/*font-family: Roboto, Helvetica, Arial, sans-serif;*/
font-weight: 400;
line-height: 1.5;
}
p a {
text-decoration: underline;
}
.content-block a:not(.contact-line):not(.content-block--nostyle) sup,
.content-block a:not(.contact-line):not(.content-block--nostyle)[id^=reference],
a sup,
a[id^=reference] {
text-decoration: none;
font-size: 10pt;
/*font-weight: 600;*/ /*destroys font export*/
}
.content-block a:not(.contact-line):not(.content-block--nostyle) sup,
.content-block a:not(.contact-line):not(.content-block--nostyle)[id^=reference],
a sup,
a[id^=reference] {
color: #adc90e;
}
.bg-acidgreen a sup {
--tw-text-opacity: 1;
color: rgba(0, 0, 0, 1);
}
.quote {
border-color: rgba(0, 0, 0, 1);
border-left-width: 2px;
line-height: 1.625;
margin-left: 1.5rem;
padding-top: .5rem;
padding-bottom: .5rem;
padding-left: 1rem;
font-style: italic;
}
.quote {
width: 80%;
max-width: 60em;
}
.quote-pirati-stan {
--tw-border-opacity: 1!important;
border-color: rgba(173, 201, 14, 1)!important;
border-left-width: 4px!important;
margin-left: 0!important;
padding-left: 1.25rem!important;
}
.content-block h2,
.content-block h3 {
/*font-family: Roboto Condensed, Helvetica, Arial, sans-serif;*/
font-weight: 700;
line-height: 1.25;
}
.content-block h2,
.content-block h3 {
margin-bottom: .4em;
}
.content-block h2 {
font-size: 1.6rem;
}
.content-block h3 {
font-size: 1.3rem;
}
.content-block a:not(.contact-line):not(.content-block--nostyle) {
text-decoration: underline;
}
.content-block p {
line-height: 1.5;
}
.content-block p:not(:last-child) {
margin-bottom: 1em;
}
.program-detail-benefity .card{
display: inline-block;
width: 48%;
margin-bottom: 4mm;
vertical-align: top;
min-height: 70mm;
}
.program-detail-benefity .card:nth-child(even){
margin-left: 4mm;
}
.program-detail-benefity h3{
width: 100%;
display: inline-block;
}
.benefit {
display: inline-block;
vertical-align: top;
width: 48%;
margin-bottom: 4mm;
}
.benefit:nth-child(even){
margin-left: 4mm;
}
.benefit img {
width: 100%;
}
.benefit .text-sm {
line-height: 20px;
margin-top: 6px;
}
.benefit .head-heavy-base {
line-height: 1.8rem;
font-size: 1.5rem;
}
.benefit .benefit-detail {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1.75rem;
padding-bottom: 1.75rem;
min-height: 70mm;
}
.problem-cross {
background-color: rgba(0, 0, 0, 1);
height: 2.5rem;
width: 2.5rem;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.ideal-check {
background-color: rgba(173, 201, 14, 1);
height: 2.5rem;
width: 2.5rem;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.problem-inner {
padding-bottom: 2rem;
margin-left: 19px;
border-left: 2px solid #000;
padding-left: 2.75rem;
padding-top: 10px;
}
.problem-inner .accordeon-row-body>div,
.problem-inner .accordeon-row-head {
padding-left: 1rem;
padding-right: 1rem;
}
.problem-inner .text-base {
padding-right: 37px;
}
.ideal-inner {
page: ideal;
padding-bottom: 2rem;
padding-left: 37px;
padding-right: 37px;
padding-top: 20px;
}
.bg-black {
background-color: rgba(0, 0, 0, 1);
}
.bg-lemon {
background-color: #ffe501;
}
.bg-acidgreen {
background-color: #99cf16;
}
.bg-grey-125 {
background-color: rgba(240, 240, 240, 1);
}
.bg-grey-800 {
background-color: rgba(31, 31, 31, 1);
}
.border-grey-500 {
border-color: rgba(48, 49, 50, 1);
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.flex-grow {
flex-grow: 1;
}
.font-alt {
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
}
.font-bold {
font-weight: 700;
}
.h-full {
height: 100%;
}
.text-xs {
font-size: .75rem;
}
.text-sm {
font-size: .875rem;
}
.text-base {
font-size: 1rem;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.3rem;
}
.text-2xl {
font-size: 1.6rem;
}
.text-3xl {
font-size: 1.875rem;
}
.leading-4 {
line-height: 1rem;
}
.leading-tight {
line-height: 1.25;
}
.leading-loose {
line-height: 2;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-0 {
margin-bottom: 0;
}
.mt-1 {
margin-top: .25rem;
}
.mb-3 {
margin-bottom: .75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-8 {
margin-top: 2rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mt-9 {
margin-top: 2.25rem;
}
.mb-9 {
margin-bottom: 2.25rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mt-20 {
margin-top: 5rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.mt-24 {
margin-top: 6rem;
}
.max-w-2xl {
max-width: 42rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.pt-4 {
padding-top: 1rem;
}
.pr-8 {
padding-right: 2rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pl-11 {
padding-left: 2.75rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.bottom-8 {
bottom: 2rem;
}
.left-8 {
left: 2rem;
}
.-bottom-20 {
bottom: -5rem;
}
* {
--tw-shadow: 0 0 #0000;
}
* {
--tw-ring-inset: var(--tw-empty, );
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.text-center {
text-align: center;
}
.text-black {
--tw-text-opacity: 1;
color: rgba(0, 0, 0, 1);
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, 1);
}
.text-acidgreen {
--tw-text-opacity: 1;
color: rgba(173, 201, 14, 1);
}
.text-fxactivecolor {
--tw-text-opacity: 1;
color: rgba(173, 201, 14, 1);
}
.underline {
text-decoration: underline;
}
.hover\:no-underline:hover {
text-decoration: none;
}
.align-top {
vertical-align: top;
}
.w-9 {
width: 2.25rem;
}
.w-full {
width: 100%;
}
body {
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1rem;
}
.source .inline-block {
display: inline;
}
/*! CSS Used from: http://localhost:3000/styleguide/css/styleguide.min.css?1623160844365 ; media=all */
@media all {
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
/*! CSS Used fontfaces */
/*
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2) format('woff2');
}
*/
/*
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCkYb8td.woff2) format('woff2');
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCkYb8td.woff2) format('woff2');
}
*/
elections2021/templates/elections2021/export_program_fancy.html 0 → 100644
+ 21
− 0
View file @ 75b36c7f
<!DOCTYPE html>
<html class="" lang="cs">
<head>
<title>Program koalice Piráti a Starostové</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width" />
</head>
<body>
{# two empty pages which will be replaced by beginning.pdf #}
<div style="page-break-after: always;">&nbsp;</div>
<div style="page-break-after: always;">&nbsp;</div>
{% for point in points %}
{{ point|safe }}
{% endfor %}
</body>
</html>
elections2021/templates/elections2021/export_program_point_fancy.html 0 → 100644
+ 216
− 0
View file @ 75b36c7f
{% load wagtailcore_tags elections2021_extras %}
<div>
<div class="w-full">
<div>
<table style="width:100%" cellpadding="0" cellspacing="0">
<tr>
<td class="px-8 py-8 bg-lemon" rowspan="2" style="width:120mm;">
<h1 id="chaptertitle" class="head-alt-md md:head-alt-lg" style="font-family: 'Bebas Neue';">{{ page.title }}</h1>
</td>
<td class="px-4 bg-acidgreen" style="font-family: 'Bebas Neue';padding-top: 6.5mm;padding-bottom: 5.5mm;font-size: 14pt;">2021</td>
</tr>
<tr>
<td class="px-4 py-4 text-center" style="background: #000;"><img src="file://./img/logo-koalicni.svg" style="height: 17mm;margin:0 auto;" /></td>
</tr>
</table>
<h2 class="head-alt-sm md:head-alt-md mb-20 mt-9" style="font-size:40pt; line-height: 1.3;">
{{ page.annotation|richtext|format_sources }}
</h2>
</div>
<div class="px-4 py-4 bg-acidgreen" style="display:inline-block;">
<div style="font-family: 'Bebas Neue';">Obsah</div>
</div>
<div style="padding-left: 2rem;border-left:1px solid #ccc;">
<br><br>
<div class="contentsrow">
<a href="#takhle-to-dal-nejde">Takhle to dál nejde</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#takhle-to-dal-nejde"></a>
</div>
<div class="contentsrow">
<a href="#v-cem-je-problem">V čem je problém</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#v-cem-je-problem"></a>
</div>
<div class="contentsrow">
<a href="#nase-vize">Naše vize</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#nase-vize"></a>
</div>
<div class="contentsrow">
<a href="#jak-to-chceme-udelat">Jak to chceme udělat?</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#jak-to-chceme-udelat"></a>
</div>
<div class="contentsrow">
<a href="#kolik-potrebujeme-casu">Kolik na to chceme času?</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#kolik-potrebujeme-casu"></a>
</div>
<div class="contentsrow">
<a href="#co-to-prinese">Pro koho to chceme hlavně</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#co-to-prinese"></a>
</div>
<div class="contentsrow">
<a href="#co-jsme-uz-odpracovali">Co pro to už děláme</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#co-jsme-uz-odpracovali"></a>
</div>
<div class="contentsrow">
<a href="#casto-kladene-otazky">Na co se nás často ptáte</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#casto-kladene-otazky"></a>
</div>
<div class="contentsrow">
<a href="#zdroje">Klidně si to ověřte</a>
<div class="contentsline"></div>
<a class="contentsnum" href="#zdroje"></a>
</div>
</div>
</div>
</div>
<!--page problem -->
<div style="page-break-before: always;">
<div class="problem-pack">
<section id="takhle-to-dal-nejde" class="program-detail-problem-solution mb-20">
<img src="file://./img/cross.svg" style="margin-bottom: 16mm;" />
<div class="content-block">
<h2 class="head-alt-sm md:head-alt-md mb-9" style="font-size:30pt;">Takhle to dál nejde</h2>
<p class="text-base mb-8 para" style="font-size: 17pt;line-height: 1.2;">
{{ page.problem|richtext|format_sources }}
</p>
<div id="v-cem-je-problem">
<div class="accordeon-row accordeon-row--open h-full">
<div class="accordeon-row-head">
<h3 class="accordeon-row-heading head-alt-xs mb-0 font-alt" style="font-size:19pt;">V čem je problém</h3>
</div>
<div class="accordeon-row-body accordeon-row-body--fadeout">
<div>
{{ page.context|richtext|format_sources }}
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!--page ideál -->
<div id="nase-vize" style="page-break-before: always;">
<div class="problem-pack">
<section class="program-detail-problem-solution mb-20">
<div class="ideal-inner content-block text-center">
<h2 class="head-alt-sm md:head-alt-md mb-9" style="margin-top:50mm; font-size: 36pt;">Ideál</h2>
<div class="font-alt" style="font-size: 20pt; max-width: 160mm; margin-left:auto; margin-right: auto;">
{{ page.ideal|richtext|format_sources }}
</div>
</div>
</section>
<img src="file://./img/tick.svg" style="display:block;margin: 0 auto;">
</div>
</div>
<!--page opatreni-->
<div style="page-break-before: always;">
<h3 id="jak-to-chceme-udelat" class="head-alt-md mb-8 leading-tight">Jak to chceme udělat?</h3>
<div class="content-block">
{{ page.proposal|richtext|format_sources|style_h4 }}
</div>
<div id="kolik-potrebujeme-casu" class="grid grid-cols-1 gap-8 mt-20">
{% if page.time_horizon_number %}
<table class="bg-grey-125 text-black px-8 py-4 lg:px-10 countdown-small" style="width:100%;">
<tr>
<td style="text-align:left;">
<h1 class="head-alt-sm flex-grow lg:text-left mb-0 mt-1 text-left" style="font-size:30pt">Kolik na to chceme času?</h1>
</td>
<td style="text-align:right;">
<div class="static-clock">
<span class="font-alt" style="font-size:46pt;">{{ page.time_horizon_number }}</span>
<div class="font-alt" style="font-size:16pt;">{{ page.time_horizon_unit }}</div>
</div>
</td>
</tr>
</table>
{% endif %}
{% if page.time_horizon_text %}
<div class="card shadow-none bg-grey-125" style="margin-top: 4mm;">
<div class="card__body">
<h1 class="card-headline mb-8 head-alt-sm">Kolik na to chceme času?</h1>
<div class="card-body-text para">
{{ page.time_horizon_text|richtext|format_sources }}
</div>
</div>
</div>
{% endif %}
</div>
</div>
<!--page benefity-->
<div style="page-break-before: always;">
<div class="program-detail-benefity">
<h3 id="co-to-prinese" class="head-alt-base mb-8 font-alt" style="font-size:30pt;">Pro koho to chceme hlavně</h3><br>
{% for block in page.benefits_main %}
<div class="benefit">
<img src="file://./img/benefits/{{ block.value.variant }}.jpg" />
<div class="benefit-detail bg-acidgreen">
<p class="head-heavy-base w-full mb-4">{{ benefits_titles|dictitem:block.value.variant }}</p>
<div class="content-block">
{{ block.value.text|richtext|format_sources }}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="program-detail-benefity">
{% for block in page.benefits %}
<div class="card shadow-none bg-acidgreen text-black card--hoveractive">
<div class="card__body">
<h1 class="card-headline mb-4">{{ block.value.title }}</h1>
<div class="card-body-text content-block">
{{ block.value.text|richtext|format_sources }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!--page starting with quote-->
<div style="page-break-before: always;">
{% if page.benefit_for_all %}
<h3 class="head-alt-lg mb-20 text-3xl md:text-5xl leading-tight font-alt" style="font-size:30pt;">{{ page.benefit_for_all|richtext|format_sources }}</h3>
{% endif %}
<h3 id="co-jsme-uz-odpracovali" class="head-alt-base mb-10 font-alt" style="font-size:30pt;">Co pro to už děláme</h3>
<div class="content-block">
{{ page.already_done|richtext|format_sources|style_h4 }}
</div>
</div>
<div style="page-break-before: always;">
<h3 id="casto-kladene-otazky" class="head-alt-base mb-8 mt-8 font-alt" style="font-size:30pt;">Na co se nás často ptáte</h3>
{% for block in page.faq %}
<div class="accordeon-row accordeon-row--open">
<div class="accordeon-row-head">
<h3 class="accordeon-row-heading head-alt-xs font-alt" style="font-size:19pt;">{{ block.value.question }}</h3>
</div>
<div class="accordeon-row-body accordeon-row-body--classic content-block">
<div>{{ block.value.answer|richtext|format_sources }}</div>
</div>
</div>
{% endfor %}
</div>
<!--page zdroje -->
<div style="page-break-before: always; page-break-after: always;">
<h3 id="zdroje" class="head-alt-base mb-8 mt-8 font-alt" style="font-size:30pt;">Klidně si to ověřte</h3>
<div class="content-block text-sm">
{{ page.sources|richtext|format_sources_block }}
</div>
</div>
requirements/base.in
+ 1
− 0
View file @ 75b36c7f
......@@ -19,3 +19,4 @@ beautifulsoup4
bleach
ipython
weasyprint
pypdf2
requirements/base.txt
+ 5
− 3
View file @ 75b36c7f
......@@ -139,9 +139,9 @@ pillow==8.2.0
# weasyprint
pirates==0.5.0
# via -r base.in
prompt-toolkit==3.0.18
prompt-toolkit==3.0.19
# via ipython
psycopg2-binary==2.8.6
psycopg2-binary==2.9.1
# via -r base.in
ptyprocess==0.7.0
# via pexpect
......@@ -153,6 +153,8 @@ pyopenssl==20.0.1
# via josepy
pyparsing==2.4.7
# via packaging
pypdf2==1.26.0
# via -r base.in
pyphen==0.10.0
# via weasyprint
python-dateutil==2.8.1
......@@ -208,7 +210,7 @@ urllib3==1.26.5
# sentry-sdk
wagtail-metadata==3.4.0
# via -r base.in
wagtail==2.13.1
wagtail==2.13.2
# via
# -r base.in
# wagtail-metadata
......
requirements/dev.txt
+ 1
− 1
View file @ 75b36c7f
......@@ -10,7 +10,7 @@ coverage==5.5
# via pytest-cov
factory-boy==3.2.0
# via pytest-factoryboy
faker==8.6.0
faker==8.8.1
# via factory-boy
fastdiff==0.3.0
# via snapshottest
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft