deploy: d13c892f3d
toolness
rodzic
ab3ccd9c30
commit
9479f73ece
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
178
index.html
178
index.html
|
|
@ -1 +1,177 @@
|
|||
<!DOCTYPE html><meta charset="utf-8"><title>Mystic Symbolic</title><style>body,html{margin:0;padding:0;font-family:Calibri,Arial,Helvetica Neue,sans-serif;overflow:hidden}.page{display:grid;column-gap:8px;padding:8px;box-sizing:border-box;height:100vh;width:100vw;grid-template-columns:auto 20em;grid-template-rows:3em auto 3em;grid-template-areas:"header header" "canvas sidebar" "footer footer"}header{grid-area:header;display:flex}header h1{margin:0;flex-grow:1}.sidebar{grid-area:sidebar;overflow-y:auto}footer{grid-area:footer}input[type=text],select{padding:8px}.checkerboard-bg{background:#eee url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1"><path d="M200 0h200v200H200zM0 200h200v200H0z"/></svg>');background-size:20px 20px}.hover-debug-helper{font-family:Consolas,Monaco,monospace;color:#fff;background:rgba(0,0,0,.75);padding:4px;margin-top:4px;margin-left:4px}.thingy{margin-top:10px;margin-bottom:10px}.thingy:first-child{margin-top:0}ul.navbar{display:flex;list-style-type:none;margin:0;padding:0;justify-content:flex-end}ul.navbar li{border-right:1px solid grey;margin-right:8px;padding-right:8px}ul.navbar li:last-child{border-right:none;padding-right:0;margin-right:0}.flex-widget{display:flex;flex-direction:column}.flex-widget label{margin-bottom:8px}.canvas{grid-area:canvas;display:flex;align-items:center;justify-content:center;overflow:hidden}.canvas.scrollable{display:block;overflow:auto}.sidebar .disabled{color:grey}.sidebar label.checkbox{display:block;margin-top:10px;margin-bottom:10px}.sidebar .color-widget{display:flex}.sidebar .color-widget label{flex-grow:1}.sidebar .numeric-slider{display:flex;flex-direction:column}.sidebar .numeric-slider .slider{display:flex}.sidebar .numeric-slider .slider input{flex-basis:90%}.sidebar .numeric-slider .slider .slider-value{min-width:2em}.overlay-wrapper{position:fixed;display:flex;background-color:rgba(0,0,0,.9);flex-direction:column;align-items:center;justify-content:center;color:#fff;top:0;left:0;bottom:0;right:0}</style><noscript> <p>Alas, you need JavaScript to peruse this page.</p> </noscript><div id="app" className="app"></div><script src="browser-main.11808b2e.js"></script>
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Mystic Symbolic</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: grid;
|
||||
column-gap: 8px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
grid-template-columns: auto 20em;
|
||||
grid-template-rows: 3em auto 3em;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"canvas sidebar"
|
||||
"footer footer";
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
select, input[type="text"] {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.checkerboard-bg {
|
||||
/* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
|
||||
background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.hover-debug-helper {
|
||||
font-family: "Consolas", "Monaco", monospace;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
padding: 4px;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/** Stupid class we're using instead of <p> to avoid ValidateDOMNesting warnings. */
|
||||
.thingy {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.thingy:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul.navbar {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
ul.navbar li {
|
||||
border-right: 1px solid gray;
|
||||
margin-right: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
ul.navbar li:last-child {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.flex-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-widget label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
grid-area: canvas;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas.scrollable {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sidebar .disabled {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.sidebar label.checkbox {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sidebar .color-widget {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar .color-widget label {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider input {
|
||||
flex-basis: 90%;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider .slider-value {
|
||||
/**
|
||||
* We want to keep a minimum width for the value or else
|
||||
* there will be a "jitter" effect where the slider will
|
||||
* contract as a result of the label getting smaller,
|
||||
* which will then change the value of the slider, which
|
||||
* will then change the width of the label, ad infinitum.
|
||||
*/
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
.overlay-wrapper {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
<noscript>
|
||||
<p>Alas, you need JavaScript to peruse this page.</p>
|
||||
</noscript>
|
||||
<div id="app" className="app"></div>
|
||||
<script src="browser-main.js"></script>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue