CC
/
octomode
12
0
Fork 0
Code Issues 18 Pull Requests Projects Releases Wiki Activity
Browse Source

the pagedjs template is fixed now (not editable anymore in the interface) + other changes to the templates

pull/30/head
manetta 3 years ago
parent
ba7a87ebc9
commit
27e4dd82de
12 changed files with 234 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 180
      static/pagedjs.css
  2. 3
      templates/base.html
  3. 32
      templates/default-pandoc-template.html
  4. 10
      templates/default.css
  5. 2
      templates/default.md
  6. 2
      templates/iframe.html
  7. 4
      templates/index.html
  8. 5
      templates/pad.html
  9. 20
      templates/pagedjs.html
  10. 32
      templates/pandoc-template.html
  11. 2
      templates/pdf.html
  12. 18
      templates/preview.html

180
static/pagedjs.css
View File

@ -0,0 +1,180 @@
/* CSS for Paged.js interface – v0.2 */
/* Change the look */
:root {
--color-background: whitesmoke;
--color-pageSheet: #cfcfcf;
--color-pageBox: violet;
--color-paper: white;
--color-marginBox: transparent;
--pagedjs-crop-color: black;
--pagedjs-crop-shadow: white;
--pagedjs-crop-stroke: 1px;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 1px var(--color-pageSheet);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: var(--pagedjs-width);
}
.pagedjs_page:last-of-type {
margin-bottom: 10mm;
}
.pagedjs_pagebox{
box-shadow: 0 0 0 1px var(--color-pageBox);
}
.pagedjs_left_page{
z-index: 20;
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
border-color: transparent;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: 0;
}
.pagedjs_right_page{
z-index: 10;
position: relative;
left: calc(var(--pagedjs-bleed-left)*-1);
}
/* show the margin-box */
.pagedjs_margin-top-left-corner-holder,
.pagedjs_margin-top,
.pagedjs_margin-top-left,
.pagedjs_margin-top-center,
.pagedjs_margin-top-right,
.pagedjs_margin-top-right-corner-holder,
.pagedjs_margin-bottom-left-corner-holder,
.pagedjs_margin-bottom,
.pagedjs_margin-bottom-left,
.pagedjs_margin-bottom-center,
.pagedjs_margin-bottom-right,
.pagedjs_margin-bottom-right-corner-holder,
.pagedjs_margin-right,
.pagedjs_margin-right-top,
.pagedjs_margin-right-middle,
.pagedjs_margin-right-bottom,
.pagedjs_margin-left,
.pagedjs_margin-left-top,
.pagedjs_margin-left-middle,
.pagedjs_margin-left-bottom {
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* uncomment this part for recto/verso book : ------------------------------------ */
/*
.pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
.pagedjs_left_page{
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
border-color: var(--pagedjs-crop-color);
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: var(--pagedjs-cross-size)!important;
}
.pagedjs_right_page{
left: 0;
}
*/
/*--------------------------------------------------------------------------------------*/
/* uncomment this par to see the baseline : -------------------------------------------*/
/*
.pagedjs_pagebox {
--pagedjs-baseline: 22px;
--pagedjs-baseline-position: 5px;
--pagedjs-baseline-color: cyan;
background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
background-size: 100% var(--pagedjs-baseline);
background-repeat: repeat-y;
background-position-y: var(--pagedjs-baseline-position);
} */
/*--------------------------------------------------------------------------------------*/
}
/* Marks (to delete when merge in paged.js) */
.pagedjs_marks-crop{
z-index: 999999999999;
}
.pagedjs_bleed-top .pagedjs_marks-crop,
.pagedjs_bleed-bottom .pagedjs_marks-crop{
box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
}
.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
}
.pagedjs_bleed-left .pagedjs_marks-crop,
.pagedjs_bleed-right .pagedjs_marks-crop{
box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
}
.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
}

3
templates/base.html
View File

@ -26,8 +26,7 @@ window.addEventListener('load', function () {
<div id="buttons">
<a href="/${ name }/pad/"><button>pad</button></a>: <input type="text" name="pad" value="https://pad.vvvvvvaria.org/${ name }.md">
<a href="/${ name }/stylesheet/"><button>stylesheet</button></a>: <input type="text" name="pad" value="https://pad.vvvvvvaria.org/${ name }.css">
<a href="/${ name }/template/"><button>template</button></a>: <input type="text" name="pad" value="https://pad.vvvvvvaria.org/${ name }.template">
<!-- <a href="/${ name }/html/"><button>html</button></a> -->
<a href="/${ name }/html/"><button>html</button></a>
<a href="/${ name }/pdf/"><button>pdf</button></a>
</div>`;

32
templates/default-pandoc-template.html
View File

@ -1,32 +0,0 @@
<!doctype html>
<html lang="$language$">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/static/paged.js" type="text/javascript"></script>
<script src="/static/paged.polyfill.js" type="text/javascript"></script>
<link href="/static/pagedjs.css" rel="stylesheet" type="text/css" media="screen">
<link href="/{{ name }}/print.css" rel="stylesheet" type="text/css" media="print">
<title>$title$</title>
</head>
<body>
<section id="cover">
<h1>$title$</h1>
</section>
$if(toc)$
<section id="TOC" role="doc-toc">
$if(toc-title)$
<h2 id="$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</section>
$endif$
$body$
</body>
</html>

10
templates/default.css
View File

@ -1,10 +1,16 @@
@charset "utf-8";
/* ADD SHORT TEXT HERE: THIS DOCUMENT SPEAKS CSS */
@page{
size: A5;
}
@page:first{
background-color: pink;
}
section#cover,
section#TOC{
body{
color: green;
}
section#cover{
page-break-after: always;
}

2
templates/default.md
View File

@ -3,4 +3,6 @@ title: hello!
language: en
---
<!-- ADD SHORT TEXT HERE: THIS DOCUMENT SPEAKS MARKDOWN -->
# Hello?

2
templates/html.html → templates/iframe.html
View File

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block content %}
{{ html | safe }}
<iframe src="{{ url }}"></iframe>
{% endblock %}

4
templates/index.html
View File

@ -1,4 +0,0 @@
{% extends "base.html" %}
{% block content %}
{% endblock %}

5
templates/pad.html
View File

@ -1,5 +0,0 @@
{% extends "base.html" %}
{% block content %}
<iframe src="{{ pad_url }}{{ name }}{{ ext }}"></iframe>
{% endblock %}

20
templates/pagedjs.html
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/static/paged.polyfill.js" type="text/javascript"></script>
<link href="/static/pagedjs.css" rel="stylesheet" type="text/css" media="screen">
<link href="/{{ name }}/stylesheet.css" rel="stylesheet" type="text/css" media="print">
<title>{{ name }}</title>
</head>
<body>
<section id="cover">
<h1>{{ name }}</h1>
</section>
<section id="main">
<div id="wrapper">{{ pad_content | safe }}</div>
</section>
</body>
</html>

32
templates/pandoc-template.html
View File

@ -1,32 +0,0 @@
<!doctype html>
<html lang="$language$">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/static/paged.js" type="text/javascript"></script>
<script src="/static/paged.polyfill.js" type="text/javascript"></script>
<link href="/static/pagedjs.css" rel="stylesheet" type="text/css" media="screen">
<link href="/h3e3e3llo/print.css" rel="stylesheet" type="text/css" media="print">
<title>$title$</title>
</head>
<body>
<section id="cover">
<h1>$title$</h1>
</section>
$if(toc)$
<section id="TOC" role="doc-toc">
$if(toc-title)$
<h2 id="$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</section>
$endif$
$body$
</body>
</html>

2
templates/pdf.html
View File

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
<iframe id="pdf" name="pdf" src="/{{ name }}/pagedjs.html"></iframe>
<iframe id="pdf" name="pdf" src="{{ url }}"></iframe>
{% endblock %}
{% block footer %}

18
templates/preview.html
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/{{ name }}/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<title>{{ name }}</title>
</head>
<body>
<section id="cover">
<h1>{{ name }}</h1>
</section>
<section id="main">
<div id="wrapper">{{ pad_content }}</div>
</section>
</body>
</html>
Write Preview
Loading…
Cancel
Save