Commit 6492edff authored by Unknown's avatar Unknown
Browse files

switch for the illustration + switch for the tint

parent 1777c2ec
......@@ -186,7 +186,6 @@
width: 100%;
height: 100%;
background: var(--color-front);
opacity: 0.5;
background-color: #269;
background: none;
background-position-y: var(--background-Y);
......@@ -236,7 +235,6 @@
background-position-x: calc(var(--background-X) - var(--spine-width));
background-position-y: calc(var(--background-Y) - var(--spine-width));
background-origin: border-box;
opacity: 0.7;
z-index: 4;
display: -webkit-box;
display: -webkit-flex;
......@@ -399,7 +397,6 @@
.buttons input {
margin-left: 1em;
margin-right: 0em;
margin-top: 1px;
vertical-align: middle;
width: 20px;
height: 20px;
......@@ -474,6 +471,10 @@
top: 0;
right: 0; }
.color {
margin-top: 1em;
margin-left: 0; }
.hide *,
.hide {
display: none !important; }
......@@ -487,6 +488,9 @@
.repeat {
background-repeat: repeat; }
.tint {
opacity: 0.5; }
:root {
--color-back: #1aa4cf;
--color-spine: white;
......
......@@ -10,3 +10,7 @@
.repeat {
background-repeat: repeat; }
.tint {
opacity: 0.5;
}
\ No newline at end of file
.buttons {
font-size: 0.8em;
padding: 1em 0.6em;
z-index: 100000;
background: white;
color: black;
position: fixed;
top: 10em;
left: 10em;
min-width: 120px;
border: 5px solid black;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.buttons .handle {
position: absolute;
background: black;
color: white;
text-transform: uppercase;
top: -2em;
width: 100%;
left: -0.4em;
padding: 0.4em;
padding-bottom: 0;
cursor: -webkit-grab;
cursor: grab; }
.buttons label {
display: block; }
.buttons h2 {
margin: 0;
font-family: 'overpass';
padding: 1em;
font-size: 0.8em; }
.buttons input[type="color"] {
float: left;
margin-top: 1em;
margin-left: 2em !important; }
.buttons button, .buttons #imgback {
background: black;
border: 2px solid white;
-webkit-box-shadow: 0;
box-shadow: 0;
color: white;
padding: 1em;
display: block;
margin: 0 auto !important;
margin-bottom: 1em !important;
min-width: 80%; }
.buttons input[type="color"],
.buttons input {
margin-left: 1em;
margin-right: 0em;
vertical-align: middle;
width: 10px;
height: 10px;
display: inline-block;
padding: 0;
border: 4px solid transparent;
display: block; }
.buttons input[type="color"]::-webkit-color-swatch-wrapper,
.buttons input::-webkit-color-swatch-wrapper {
padding: 0; }
.buttons input[type="color"]::-webkit-color-swatch,
.buttons input::-webkit-color-swatch {
border: none; }
.buttons input[type="color"]:hover, .buttons input[type="color"]:focus, .buttons input[type="color"]:active,
.buttons input:hover,
.buttons input:focus,
.buttons input:active {
border: 4px solid black; }
.buttons input[type="text"] {
width: 100px;
font-size: 1.3em;
margin-top: 0;
border: 0;
border-bottom: 2px solid black;
background: transparent; }
.buttons input[type="range"] {
width: 80%; }
.buttons label {
margin-left: 1em;
text-transform: uppercase;
margin-top: 1em;
display: inline-block; }
.buttons #fc {
margin-left: 3em;
text-transform: uppercase;
margin-top: 3em;
margin-bottom: 3em; }
#back-demo {
width: 100px;
margin-left: 20px; }
.pattern {
background-repeat: repeat; }
.icon-bar {
position: absolute;
top: 1em;
left: 1em;
z-index: 5000; }
.icon-bar .icon {
display: inline-block;
padding: 0.1em 0.5em 0em;
background: lightgrey;
margin: 0;
font-size: 1.5em;
border: 2px solid black; }
.icon-bar .active {
background: black;
color: white; }
.backcover .logos .logo {
position: relative; }
.remove {
background: black;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
top: 0;
right: 0; }
.color {
margin-top: 1em; }
<div class="page" id="page">
<div class="spread">
<div class="background"></div>
<div class="backcover" id="back">
<div class="logos draggable" id="drag-logos"></div>
<p contenteditable="true" spellcheck="false">This is where you can add some stuff on the back cover</p>
</div>
<div class="spinecover" id="spine">
<p id="spinetitle" contenteditable="true" spellcheck="false">TITLE</p>
</div>
<div class="frontcover" id="front">
<hgroup id="drag-titles">
<h1 class="draggable" id="booktitle" contenteditable="true" spellcheck="false">TITLE!</h1>
<p class="draggable" contenteditable="true" spellcheck="false">Authors?</p>
</hgroup>
</div>
</div>
</div>
\ No newline at end of file
.page#page
.spread
//- background image that would run on the spread
.background(style="background-image: url('img/11121355345_3797d16e6b_o.jpg')")
.background(style="background-image: url(img/11121355345_3797d16e6b_o.jpg)")
.backcover#back
.logos.draggable#drag-logos
//- include logos
......
<div class="buttons">
<div id="size">
<label for="width">page width</label>
<input class="size" id="width" type="text" name="page-width" value="148mm"/>
<label for="height">page height</label>
<input class="size" id="height" type="text" name="page-height" value="210mm"/>
<label for="spine">spine width</label>
<input class="size" id="spine" type="text" name="spine-width" value="20mm"/>
</div>
<hr/>
<div class="colors" style="margin-top: 2em;">
<div class="color" id="text-area">
<label for="color-text">Text color</label>
<input id="text" type="color" name="color-text" value="#ffffff"/>
</div>
<div class="color" id="back-area">
<label for="color-back">Back color</label>
<input id="back" type="color" name="color-back" value="#c4e3f3"/>
</div>
<div class="color" id="front-area">
<label for="color-front">Spine color</label>
<input id="front" type="color" name="color-front" value="#495776"/>
</div>
</div>
<hr/>
<h2>cover image</h2>
<input id="imgback" type="file" accept="image/*"/>
<hr/>
<h2>size and positions</h2>
<label for="position horizontal">horizontal</label>
<input id="imgX" type="range" name="position horizontal" max="200" min="-200" step="10"/>
<label for="position vertical">vertical</label>
<input id="imgY" type="range" name="position vertical" max="200" min="-200" step="10"/>
<label for="size">image size</label>
<input id="imgSize" type="range" name="size" max="200" min="1" step="3"/>
<button id="pattern" style="margin-bottom: 5em;"> REPEAT</button>
<hr/>
<button id="fc">front </button>
<button id="bc">BACK</button>
</div>
\ No newline at end of file
......@@ -19,7 +19,7 @@
label(for='color-text') Text color
input#text(type='color', name='color-text', value='#eaeaea')
#back-area.color
label(for='color-back') Back color
label(for='color-back') Tint color
input#back(type='color', name='color-back', value='#1aa4cf')
#front-area.color
label(for='color-front') Spine color
......@@ -27,9 +27,12 @@
#spine-text.color
label(for='color-front') Spine text color
input#front(type='color', name='color-spine-text', value='#fff')
hr
button#colorMask Tint filter
#background.buttons.drag.hide
.handle Background
h2 cover image
button#hideBack Color only
input#imgback(type='file', accept='image/*')
label(for='position horizontal') horizontal
input#imgX(type='range', name='position horizontal', max='1000', min='-1000', step='1')
......
......@@ -32,7 +32,7 @@
<input id="text" type="color" name="color-text" value="#eaeaea"/>
</div>
<div class="color" id="back-area">
<label for="color-back">Back color</label>
<label for="color-back">Tint color</label>
<input id="back" type="color" name="color-back" value="#1aa4cf"/>
</div>
<div class="color" id="front-area">
......@@ -42,12 +42,15 @@
<div class="color" id="spine-text">
<label for="color-front">Spine text color</label>
<input id="front" type="color" name="color-spine-text" value="#fff"/>
<hr/>
</div>
<button id="colorMask">Tint filter</button>
</div>
</div>
<div class="buttons drag hide" id="background">
<div class="handle">Background </div>
<h2>cover image</h2>
<button id="hideBack">Color only</button>
<input id="imgback" type="file" accept="image/*"/>
<label for="position horizontal">horizontal</label>
<input id="imgX" type="range" name="position horizontal" max="1000" min="-1000" step="1"/>
......@@ -74,7 +77,7 @@
</div>
<div class="page" id="page">
<div class="spread">
<div class="background" style="background-image: url('img/11121355345_3797d16e6b_o.jpg');"></div>
<div class="background" style="background-image: url(img/11121355345_3797d16e6b_o.jpg);"></div>
<div class="backcover" id="back">
<div class="logos draggable" id="drag-logos"></div>
<p contenteditable="true" spellcheck="false">This is where you can add some stuff on the back cover</p>
......
......@@ -11,3 +11,12 @@
colors.forEach(color => color.addEventListener('change', handleUpdate));
colors.forEach(color => color.addEventListener('mousemove', handleUpdate));
const back = document.querySelector('.background');
const tintFilter = document.querySelector('#colorMask');
tintFilter.addEventListener('click', function() {
back.classList.toggle('tint');
})
\ No newline at end of file
......@@ -97,6 +97,18 @@ function onFileLoad(e) {
}
// to remove background
const background = document.querySelector(".background");
const backbutton = document.querySelector('#hideBack');
backbutton.addEventListener('click', function(e) {
background.setAttribute('style', 'background-image: url(none)');
})
// image location
posX.addEventListener('mousemove', function() {
......
......@@ -18,25 +18,6 @@
"hideUnwatchedFiles": false
},
"imports": [
{
"path": "index.pug",
"imports": [
"includes/_ui2.pug",
"includes/_page.pug",
"includes/_scripts.pug",
"includes/_scripts2.pug",
"includes/logos.pug",
"includes/_cokologo.pug",
"includes/_shuttlelogo.pug"
]
},
{
"path": "paper-demo.pug",
"imports": [
"mixins/_mixins.pug",
"includes/_scripts-paper.pug"
]
},
{
"path": "includes/_page.pug",
"imports": [
......@@ -46,8 +27,13 @@
]
},
{
"path": "includes/logos.pug",
"path": "index.pug",
"imports": [
"includes/_ui2.pug",
"includes/_page.pug",
"includes/_scripts.pug",
"includes/_scripts2.pug",
"includes/logos.pug",
"includes/_cokologo.pug",
"includes/_shuttlelogo.pug"
]
......@@ -61,20 +47,6 @@
"scss/coverBuilder/_ui.scss",
"scss/coverBuilder/_helpers.scss"
]
},
{
"path": "scss/paper.scss",
"imports": [
"scss/_fonts.scss",
"scss/_colors.scss"
]
},
{
"path": "scss/show.scss",
"imports": [
"scss/_fonts.scss",
"scss/_colors.scss"
]
}
],
"projectView": {
......
......@@ -17,4 +17,8 @@
.repeat {
background-repeat: repeat;
}
\ No newline at end of file
}
.tint {
opacity: 0.5;
}
......@@ -62,7 +62,6 @@
width: 100%;
height: 100%;
background: var(--color-front);
opacity: 0.5;
background-color: #269;
background: none;
background-position-y: var(--background-Y);
......@@ -126,7 +125,7 @@
background-position-x: calc(var(--background-X) - var(--spine-width));
background-position-y: calc(var(--background-Y) - var(--spine-width));
background-origin: border-box;
opacity: 0.7;
// opacity: 0.7;
z-index: 4;
display: flex;
top: calc(var(--page-bleed) * -1);
......
......@@ -57,7 +57,7 @@
input {
margin-left: 1em;
margin-right: 0em;
margin-top: 1px;
// margin-top: 1px;
vertical-align: middle;
width: 20px;
height: 20px;
......@@ -154,4 +154,11 @@
position: absolute;
top: 0;
right: 0;
}
.color {
margin-top: 1em;
margin-left: 0;
}
\ No newline at end of file
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