Merge branch 'ui' into develop
This commit is contained in:
Georg Fischer
commit
48770b9021
91
index.html
91
index.html
@ -5,52 +5,61 @@
|
||||
<title>image glitch experiment</title>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<article class="content intro">
|
||||
<h1 class="headline">glitch images</h1>
|
||||
<p>drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
|
||||
<p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p>
|
||||
</article>
|
||||
<div class="content" id="controls">
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="amount-slider">amount</label>
|
||||
<input class="control-input control-number" id="amount-number" type="number" min="0" max="99" value="50" maxlength="2" />
|
||||
<input class="control-input control-slider" id="amount-slider" type="range" min="0" max="99" value="50" step="1" maxlength="2" />
|
||||
<body data-defaultimage="lincoln.jpg">
|
||||
<div class="nav-wrapper dark-bg">
|
||||
<div class="export-wrapper center">
|
||||
<h1 class="headline">glitch images</h1>
|
||||
<button id="import-button" class="button" title="open image from your computer">import image</button>
|
||||
<input type="file" id="import-input" accept="image/*" />
|
||||
<button id="export-button" class="button" title="save image to your computer">download image</button>
|
||||
<button id="imgur-button" class="button" title="share image via imgur.com"><span>share image</span></button>
|
||||
<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
|
||||
<div id="imgur-url-container">
|
||||
<input id="imgur-url-input" type="text" readonly="readonly" />
|
||||
<a href id="imgur-url-link" class="button social-link" href="http://imgur.com" target="_blank">open</a>
|
||||
<a href id="twitter-link" class="button social-link" href="http://twitter.com" target="_blank" title="post your image on twitter">twitter</a>
|
||||
<a href id="facebook-link" class="button social-link" href="http://facebook.com" target="_blank" title="post your image on facebook">facebook</a>
|
||||
<a href id="reddit-link" class="button social-link" href="http://reddit.com" target="_blank" title="post your image on reddit">reddit</a>
|
||||
<span id="imgur-url-error">sorry, something went wrong. maybe try again?</span>
|
||||
</div>
|
||||
<button class="intro-button button is-active">?</button>
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="seed-slider">seed</label>
|
||||
<input class="control-input control-number" id="seed-number" type="number" min="0" max="100" value="50" maxlength="2" />
|
||||
<input class="control-input control-slider" id="seed-slider" type="range" min="0" max="100" value="50" step="1" maxlength="2" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="iterations-slider">iterations</label>
|
||||
<input class="control-input control-number" id="iterations-number" type="number" min="1" max="50" value="5" maxlength="2" />
|
||||
<input class="control-input control-slider" id="iterations-slider" type="range" min="1" max="50" value="5" step="1" maxlength="2"/>
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="quality-slider">quality</label>
|
||||
<input class="control-input control-number" id="quality-number" type="number" min="1" max="99" value="50" maxlength="2" />
|
||||
<input class="control-input control-slider" id="quality-slider" type="range" min="1" max="99" value="50" step="1" maxlength="2" />
|
||||
</div>
|
||||
<button id="random-button" class="button is-hidden">randomize</button>
|
||||
</div>
|
||||
<div class="export-wrapper">
|
||||
<button id="import-button" class="button" title="open image from your computer">import image</button>
|
||||
<input type="file" id="import-input" accept="image/*" />
|
||||
<button id="export-button" class="button" title="save image to your computer">download image</button>
|
||||
<button id="imgur-button" class="button" title="share image via imgur.com"><span>share image</span></button>
|
||||
<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
|
||||
<div id="imgur-url-container">
|
||||
<input id="imgur-url-input" type="text" readonly="readonly" />
|
||||
<a href id="imgur-url-link" class="button social-link" href="http://imgur.com" target="_blank">open</a>
|
||||
<a href id="twitter-link" class="button social-link" href="http://twitter.com" target="_blank" title="post your image on twitter">twitter</a>
|
||||
<a href id="facebook-link" class="button social-link" href="http://facebook.com" target="_blank" title="post your image on facebook">facebook</a>
|
||||
<a href id="reddit-link" class="button social-link" href="http://reddit.com" target="_blank" title="post your image on reddit">reddit</a>
|
||||
<span id="imgur-url-error">sorry, something went wrong. maybe try again?</span>
|
||||
<div class="nav-wrapper light-bg">
|
||||
<div class="content center" id="controls">
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="amount-slider">amount</label>
|
||||
<input class="control-input control-number" id="amount-number" type="number" min="0" max="99" value="50" maxlength="2" />
|
||||
<input class="control-input control-slider" id="amount-slider" type="range" min="0" max="99" value="50" step="1" maxlength="2" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="seed-slider">seed</label>
|
||||
<input class="control-input control-number" id="seed-number" type="number" min="0" max="100" value="50" maxlength="2" />
|
||||
<input class="control-input control-slider" id="seed-slider" type="range" min="0" max="100" value="50" step="1" maxlength="2" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="iterations-slider">iterations</label>
|
||||
<input class="control-input control-number" id="iterations-number" type="number" min="1" max="50" value="5" maxlength="2" />
|
||||
<input class="control-input control-slider" id="iterations-slider" type="range" min="1" max="50" value="5" step="1" maxlength="2"/>
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="quality-slider">quality</label>
|
||||
<input class="control-input control-number" id="quality-number" type="number" min="1" max="99" value="50" maxlength="2" />
|
||||
<input class="control-input control-slider" id="quality-slider" type="range" min="1" max="99" value="50" step="1" maxlength="2" />
|
||||
</div>
|
||||
<button id="random-button" class="button is-hidden">randomise</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas-wrapper">
|
||||
<canvas id="canvas" />
|
||||
<canvas id="canvas"></canvas>
|
||||
<article class="content intro is-active">
|
||||
<div class="center">
|
||||
<p>drag an image into the browser window to modify it.</p>
|
||||
<p>this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
|
||||
<p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script>
|
||||
</body>
|
||||
|
||||
@ -20,6 +20,7 @@ require(
|
||||
'src/import-button',
|
||||
'src/random-button',
|
||||
'src/upload-imgur',
|
||||
'src/intro',
|
||||
'util/feature-test',
|
||||
'lib/signals-1.0.0'
|
||||
],
|
||||
@ -33,6 +34,7 @@ require(
|
||||
import_button,
|
||||
random_button,
|
||||
imgur,
|
||||
intro,
|
||||
testFeatures,
|
||||
Signal
|
||||
)
|
||||
@ -49,6 +51,7 @@ require(
|
||||
'set-new-src' : new Signal(),
|
||||
'control-set' : new Signal(),
|
||||
'control-updated' : new Signal(),
|
||||
'close-intro' : new Signal(),
|
||||
'image-data-url-requested' : new Signal()
|
||||
}
|
||||
};
|
||||
@ -62,6 +65,7 @@ require(
|
||||
image.init( shared );
|
||||
file.init( shared );
|
||||
imgur.init( shared );
|
||||
intro.init( shared );
|
||||
}
|
||||
|
||||
function showError( required_features )
|
||||
|
||||
1
scripts/src/dragdrop.js
vendored
1
scripts/src/dragdrop.js
vendored
@ -34,6 +34,7 @@ define(
|
||||
)
|
||||
{
|
||||
signals['load-file'].dispatch( event.dataTransfer.files[0] );
|
||||
signals['close-intro'].dispatch();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ define(
|
||||
var signals;
|
||||
var image;
|
||||
var initialized = false;
|
||||
var defaultimage = document.body.getAttribute( 'data-defaultimage' );
|
||||
|
||||
function init( shared )
|
||||
{
|
||||
@ -17,7 +18,7 @@ define(
|
||||
|
||||
// the image "Abraham Lincoln November 1863" is public domain:
|
||||
// https://en.wikipedia.org/wiki/File:Abraham_Lincoln_November_1863.jpg
|
||||
setSrc( 'lincoln.jpg' );
|
||||
setSrc( defaultimage );
|
||||
}
|
||||
|
||||
function imageLoaded()
|
||||
|
||||
@ -50,6 +50,7 @@ define(
|
||||
)
|
||||
{
|
||||
signals['load-file'].dispatch( event.target.files[0] );
|
||||
signals['close-intro'].dispatch();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
48
scripts/src/intro.js
Normal file
48
scripts/src/intro.js
Normal file
@ -0,0 +1,48 @@
|
||||
/*global define*/
|
||||
define(
|
||||
function()
|
||||
{
|
||||
var signals;
|
||||
var is_open = true;
|
||||
var element = document.querySelectorAll( '.intro' )[0];
|
||||
var button = document.querySelectorAll( '.intro-button' )[0];
|
||||
var close_button = element.querySelectorAll( '.close' )[0];
|
||||
|
||||
function init( shared )
|
||||
{
|
||||
signals = shared.signals;
|
||||
button.addEventListener( 'click', buttonClicked );
|
||||
close_button.addEventListener( 'click', close );
|
||||
signals['close-intro'].add( close );
|
||||
}
|
||||
|
||||
function buttonClicked( event )
|
||||
{
|
||||
if ( is_open )
|
||||
{
|
||||
close();
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
open();
|
||||
}
|
||||
}
|
||||
|
||||
function open()
|
||||
{
|
||||
button.classList.add( 'is-active' );
|
||||
element.classList.add( 'is-active' );
|
||||
is_open = true;
|
||||
}
|
||||
|
||||
function close()
|
||||
{
|
||||
button.classList.remove( 'is-active' );
|
||||
element.classList.remove( 'is-active' );
|
||||
is_open = false;
|
||||
}
|
||||
|
||||
return { init: init };
|
||||
}
|
||||
);
|
||||
405
styles/main.css
405
styles/main.css
@ -1,40 +1,59 @@
|
||||
*
|
||||
{
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
padding: 50px;
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #666;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
a {
|
||||
color: #06f;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.is-hidden
|
||||
{
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
background-color: #eaeaea;
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dark-bg {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.light-bg {
|
||||
background-color: #efefef;
|
||||
border-bottom: 1px #ddd solid;
|
||||
}
|
||||
|
||||
.center {
|
||||
max-width: 860px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
padding-top: 17px;
|
||||
padding-bottom: 17px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #ddd;
|
||||
padding: 5px 9px;
|
||||
display: inline-block;
|
||||
color: #06f;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
@ -43,223 +62,261 @@ a:hover
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
line-height: normal;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.button:hover
|
||||
{
|
||||
.button:hover {
|
||||
background-color: #06f;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#random-button
|
||||
{
|
||||
.dark-bg .button {
|
||||
background-color: #666;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.dark-bg .button:hover {
|
||||
background-color: #999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark-bg a {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
#random-button {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.headline
|
||||
{
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
.headline {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.intro
|
||||
{
|
||||
max-width: 650px;
|
||||
.intro {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
background-color: #fff;
|
||||
background-color: rgba(255,255,255, 0.9);
|
||||
-webkit-transition: all 0.5s ease-in;
|
||||
transition: all 0.5s ease-in;
|
||||
}
|
||||
|
||||
#controls
|
||||
{
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
.intro.is-active {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.intro .center {
|
||||
padding: 30px;
|
||||
max-width: 580px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.intro .close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #06f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.intro-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.intro-button.is-active,
|
||||
.intro-button.is-active:hover {
|
||||
background-color: #ddd;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#controls.is-active
|
||||
{
|
||||
#controls.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.control-wrapper
|
||||
{
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.control-wrapper {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.control-label
|
||||
{
|
||||
display: block;
|
||||
color: #666;
|
||||
}
|
||||
.control-label {
|
||||
font-size: 11px;
|
||||
display: block;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.control-slider
|
||||
{
|
||||
display: block;
|
||||
float: left;
|
||||
border: none;
|
||||
width: 160px;
|
||||
height: 1px;
|
||||
margin-top: 6px;
|
||||
background: #ddd;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.control-slider {
|
||||
display: block;
|
||||
float: left;
|
||||
border: none;
|
||||
width: 120px;
|
||||
height: 1px;
|
||||
margin-top: 6px;
|
||||
background: #ddd;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.control-number
|
||||
{
|
||||
display: block;
|
||||
color: #333;
|
||||
float: right;
|
||||
border: none;
|
||||
max-width: 30px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.control-number {
|
||||
display: block;
|
||||
color: #333;
|
||||
float: right;
|
||||
border: none;
|
||||
max-width: 30px;
|
||||
font-family: sans-serif;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#import-input
|
||||
{
|
||||
#import-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.export-wrapper
|
||||
{
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
.download-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.download-link
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.download-link.is-active {
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.download-link.is-active
|
||||
{
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.download-link span {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.download-link span
|
||||
{
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
#imgur-button
|
||||
{
|
||||
#imgur-button {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
#imgur-button.is-uploading,
|
||||
#imgur-button.is-uploading:hover
|
||||
{
|
||||
background-color: #eaeaea;
|
||||
color: #06f;
|
||||
#imgur-button.is-uploading:hover {
|
||||
background-color: #ddd;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#imgur-button span
|
||||
{
|
||||
display: block;
|
||||
width: 154px;
|
||||
transition: margin-left 0.5s ease-in;
|
||||
transition-property: margin-left top;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
#imgur-button span {
|
||||
display: block;
|
||||
width: 154px;
|
||||
-webkit-transition: margin-left 0.5s ease-in;
|
||||
transition: margin-left 0.5s ease-in;
|
||||
-webkit-transition-property: margin-left top;
|
||||
transition-property: margin-left top;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#imgur-button.is-uploading span {
|
||||
margin-left: -76px;
|
||||
}
|
||||
|
||||
#imgur-button.is-uploading span
|
||||
{
|
||||
margin-left: -76px;
|
||||
}
|
||||
#imgur-button span::after {
|
||||
content: 'loading…';
|
||||
display: inline-block;
|
||||
padding-left: 15px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#imgur-button span::after
|
||||
{
|
||||
content: 'loading…';
|
||||
display: inline-block;
|
||||
padding-left: 15px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#imgur-url-container
|
||||
{
|
||||
#imgur-url-container {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease-in;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
#imgur-url-container.is-active
|
||||
{
|
||||
#imgur-url-container.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#imgur-url-input
|
||||
{
|
||||
padding: 4px 9px;
|
||||
border: 1px #CCC solid;
|
||||
border-radius: 3px;
|
||||
font-family: sans-serif;
|
||||
font-size: 13px;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
#imgur-url-input {
|
||||
padding: 5px 9px 4px 9px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
font-family: sans-serif;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-right: 7px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
#imgur-url-error
|
||||
{
|
||||
padding: 5px 9px;
|
||||
line-height: normal;
|
||||
color: #999;
|
||||
}
|
||||
#imgur-url-error {
|
||||
padding: 5px 9px;
|
||||
line-height: normal;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#imgur-url-input,
|
||||
#imgur-url-link,
|
||||
#imgur-url-error
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#imgur-url-container.upload-successful #imgur-url-input,
|
||||
#imgur-url-container.upload-successful #imgur-url-link
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#imgur-url-container.upload-failed #imgur-url-error
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.social-link
|
||||
{
|
||||
#imgur-url-input,
|
||||
#imgur-url-link,
|
||||
#imgur-url-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-successful .social-link
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
#imgur-url-container.upload-successful #imgur-url-input,
|
||||
#imgur-url-container.upload-successful #imgur-url-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#imgur-url-container.upload-failed #imgur-url-error {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.missing-feature
|
||||
{
|
||||
.social-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-successful .social-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.missing-feature {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.canvas-wrapper
|
||||
{
|
||||
.canvas-wrapper {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.7;
|
||||
}
|
||||
#canvas
|
||||
{
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
#canvas {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media all and (max-width: 860px) {
|
||||
.nav-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user