Commit 7647a6e5 authored by Sam Muirhead's avatar Sam Muirhead

add layout for printable noun project credits page

- relevant issue: #21 Making credits takes a long time
- tested with reasonable results printing from Beaker (huge margins from Firefox)
- scaled for both A7 and A5
parent c35034fe
Copyright 2012 The Cutive Project Authors (vern@newtypography.co.uk)
Copyright 2016 Google Inc. All Rights Reserved.
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
......
This diff is collapsed.
const page = document.getElementById('page')
const panel1 = document.getElementById('panel-1')
const image1 = document.getElementById('image-1')
const number1 = document.getElementById('number-1')
const license1 = document.getElementById('license-1')
image = "https://d30y9cdsu7xlg0.cloudfront.net/attribution/9437-600.png"
id = "1234"
license = "cc0"
function setIdNumber (input) {
number1.textContent = input
}
function linkImage (input) {
image1.setAttribute("href", input)
}
function setLicense (input) {
license1.setAttribute("href", "#" + input)
}
setIdNumber(id)
linkImage(image)
setLicense(license)
console.log(number1.textContent)
console.log(image1)
console.log(license1)
// const container = document.createElement('div')
// container.setAttribute('class', 'container')
// app.appendChild(container)
fetch('https://gitlab.com/cameralibre/cut-copy-and-paste/raw/master/Animation-Workshop/api-response')
.then(function(response) {
// delete response.generated_at
response.json()
console.log(response)
})
// .then(function(myJson) {
// console.log(JSON.stringify(myJson));
// });
// if "license_description": "creative-commons-attribution",
// const image = document.createElement('div')
// card.setAttribute('class', 'card')
// const h1 = document.createElement('h1')
// h1.textContent = movie.title
// image = icon.attribution_preview_url
// const p = document.createElement('p')
// movie.description = movie.description.substring(0,300)
// p.textContent = `${movie.description}...`
// container.appendChild(card)
// card.appendChild(h1)
// card.appendChild(p)
const page = document.getElementById('page')
const panelB = document.getElementById('panel-b')
const panel1 = document.getElementById('panel-1')
const imageB = document.getElementById('image-b')
const image1 = document.getElementById('image-1')
const numberB = document.getElementById('number-b')
const number1 = document.getElementById('number-1')
const licenseB = document.getElementById('license-b')
const license1 = document.getElementById('license-1')
image = "https://d30y9cdsu7xlg0.cloudfront.net/attribution/9437-600.png"
id = "1234"
license = "cc0"
function setIdNumber (input) {
numberB.textContent = input
number1.textContent = input
}
function linkImage (input) {
imageB.setAttribute("href", input)
image1.setAttribute("href", input)
}
function setLicense (input) {
licenseB.setAttribute("href", "#" + input)
license1.setAttribute("href", "#" + input)
}
setIdNumber(id)
......@@ -30,9 +30,9 @@ setLicense(license)
console.log(numberB.textContent)
console.log(imageB)
console.log(licenseB)
console.log(number1.textContent)
console.log(image1)
console.log(license1)
// const container = document.createElement('div')
......
......@@ -33,6 +33,11 @@
<line id="vertical-gridline" x1="0" y1="0" x2="0" y2="794"/>
<line id="horizontal-gridline" y1="0" x1="0" y2="0" x2="1123"/>
<clipPath id="thumbnail-clip">
<rect x="140" y="330" width="60" height="50" fill="red"/>
</clipPath>
</defs>
<use class="cutting-grid" href="#vertical-gridline" x="280.75" y="0" />
......@@ -40,94 +45,131 @@
<use class="cutting-grid" href="#vertical-gridline" x="842.25" y="0" />
<use class="cutting-grid" href="#horizontal-gridline" x="0" y="397" />
<svg id="panel-a" width="280.75" height="397">
<svg id="panel-0" width="280.75" height="397">
<defs>
<clipPath id="clip-rect">
<rect x="140" y="330" width="60" height="50" fill="red"/>
</clipPath>
<image id="image-a" width="270" height="270"
<image id="image-0" width="270" height="270"
href="5673-600.png"/>
</defs>
<use href="#image-a" x="0" y="50" width="270" height="270"
<use href="#image-0" x="0" y="50" width="270" height="270"
/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<use class="license" href="#cc-by" width="50" x="210" y="338"/>
<g clip-path="url(#clip-rect)">
<use href="#image-a" id="thumbnail-a" class="image" transform="scale(0.25)" x="550" y="1310"/>
<text id="number-0" x="18" y="360">5673</text>
<use id="license-0" href="#cc-by" width="50" x="210" y="338"/>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-0" id="thumbnail-0" transform="scale(0.25)" x="550" y="1310"/>
</g>
<text id="license-a" id="number-a" class="number" x="18" y="360">5673</text>
<!-- <rect transform="scale(0.25)" x="560" y="1310" width="240" height="200" fill="red"/> -->
</svg>
<svg x="280.75" y="0" id="panel-b" width="280.75" height="397">
<svg x="280.75" y="0" id="panel-1" width="280.75" height="397">
<defs>
<image id="image-b" class="image" width="270" height="270"
href="5673-600.png"/>
<image id="image-1" width="270" height="270"
href=""/>
</defs>
<use class="image" x="0" y="50" width="270" height="270"
href="#image-b"/>
<use x="0" y="50" width="270" height="270"
href="#image-1"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-b" class="number" x="18" y="360">5673</text>
<g clip-path="url(#clip-rect)">
<use href="#image-b" id="thumbnail-a" class="image" transform="scale(0.25)" x="550" y="1310"/>
<text id="number-1" x="18" y="360">5673</text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-1" id="thumbnail-1" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-b" class="license" href="#cc-by" width="50" x="210" y="338"/>
</svg>
<use id="license-1" href="#cc-by" width="50" x="210" y="338"/>
</svg>
<svg x="562.5" y="0" id="panel-c" width="280.75" height="397">
<image id="image-c" class="image" x="0" y="50" width="270" height="270"
href="5673-600.png"/>
<svg x="562.5" y="0" id="panel-2" width="280.75" height="397">
<defs>
<image id="image-2" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-2"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<use id="license-c" class="license" href="#cc0" width="50" x="210" y="338"></use>
<text id="number-c" class="number" x="18" y="360">5673</text>
<text id="number-2" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-2" id="thumbnail-2" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-2" href="" width="50" x="210" y="338"/>
</svg>
<svg x="842.25" y="0" id="panel-d" width="280.75" height="397">
<image id="image-d" class="image" x="0" y="50" width="270" height="270"
href="5673-600.png"/>
<svg x="842.25" y="0" id="panel-3" width="280.75" height="397">
<defs>
<image id="image-3" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-3"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<use id="license-d" class="license" href="#cc-by" width="50" x="210" y="338"></use>
<text id="number-d" class="number" x="18" y="360">5673</text>
<text id="number-3" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-3" id="thumbnail-3" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-3" href="" width="50" x="210" y="338"/>
</svg>
<svg x="0" y="397" id="panel-e" width="280.75" height="397">
<image id="image-e" class="image" x="0" y="50" width="270" height="270"
href="5673-600.png"/>
<svg x="0" y="397" id="panel-4" width="280.75" height="397">
<defs>
<image id="image-4" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-4"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<use id="license-e" class="license" href="#cc-by" width="50" x="210" y="338"></use>
<text id="number-e" class="number" x="18" y="360">5673</text>
<text id="number-4" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-4" id="thumbnail-4" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-4" href="" width="50" x="210" y="338"/>
</svg>
<svg x="280.75" y="397" id="panel-f" width="280.75" height="397">
<image id="image-f" class="image" x="0" y="50" width="270" height="270"
href="5673-600.png"/>
<svg x="280.75" y="397" id="panel-5" width="280.75" height="397">
<defs>
<image id="image-5" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-5"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<use id="license-f" class="license" href="#cc-by" width="50" x="210" y="338"></use>
<text id="number-f" class="number" x="18" y="360">5673</text>
<text id="number-5" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-5" id="thumbnail-5" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-5" href="" width="50" x="210" y="338"/>
</svg>
<svg x="562.5" y="397" id="panel-g" width="280.75" height="397">
<image id="image-g" class="image" x="0" y="50" width="270" height="270"
href="5673-600.png"/>
<svg x="562.5" y="397" id="panel-6" width="280.75" height="397">
<defs>
<image id="image-6" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-6"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<use class="license" href="#cc-by" width="50" x="210" y="338"></use>
<text id="number-g" class="number" x="18" y="360">5673</text>
<text id="number-6" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-6" id="thumbnail-6" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-6" href="" width="50" x="210" y="338"/>
</svg>
<svg x="842.25" y="397" id="panel-h" width="280.75" height="397">
<image id="license-h" id="image-h" class="image" x="0" y="50" width="270" height="270"
href="5673-600.png"/>
<svg x="842.25" y="397" id="panel-7" width="280.75" height="397">
<defs>
<image id="image-7" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-7"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<use class="license" href="#cc-by" width="50" x="210" y="338"></use>
<text id="number-h" class="number" x="18" y="360">5673</text>
<text id="number-7" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-7" id="thumbnail-4" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-7" href="" width="50" x="210" y="338"/>
</svg>
</svg>
</body>
<script type="application/javascript" src="./script.js"></script>
<script type="application/javascript" src="./populate-search-results.js"></script>
</html>
......@@ -3,26 +3,30 @@
* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
*/
#fade {
opacity: 0.4;
visibility: hidden;
}
body {
font-family: Cutive, monospace;
font-family: 'Space Mono', monospace;
margin: 5px;
}
svg {
/* svg {
border: 2px solid #666;
border-radius: 1px;
overflow: visible;
}
} */
svg line {
stroke: #333;
stroke-width: 1;
}
.number {
font-size: 1.5em;
}
.name, .from-noun-project {
font-family: 'Futura Renner', monospace;
font-size: 1em;
}
.cutting-grid {
......@@ -32,6 +36,30 @@ svg line {
stroke-dasharray: 5 4;
}
.credits {
font-size: 0.35em;
}
.title {
font-size: 0.75em;
font-style: italic;
font-weight: bold;
}
.header {
font-size: 0.6em;
}
.author {
font-size: 0.58em;
}
.id {
font-size: 0.72em;
}
@font-face {
font-family: 'Futura Renner';
src: url('FuturaRenner-Regular.otf');
......@@ -40,8 +68,48 @@ svg line {
}
@font-face {
font-family: 'Cutive';
src: url('CutiveMono-Regular.ttf');
font-family: 'Space Mono';
src: url('SpaceMono-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Space Mono';
src: url('SpaceMono-Italic.ttf');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Space Mono';
src: url('SpaceMono-Bold.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Space Mono';
src: url('SpaceMono-italic.ttf');
font-weight: bold;
font-style: italic;
}
@media print{
html,body{
height:100%;
width:100%;
margin:0;
padding:0;
}
@page {
size: A4 landscape;
max-height:100%;
max-width:100%
}
svg {
width: 100%;
height:100%;
display: block;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment