mirror
/
mysticsymbolic.github.io
kopia lustrzana https://github.com/mysticsymbolic/mysticsymbolic.github.io
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność
mysticsymbolic.github.io/index.html

100 wiersze
1.9 KiB
HTML
Czysty Zwykły widok Historia

Origination.
2021-02-03 00:26:40 +00:00
<!DOCTYPE html>
<meta charset="utf-8">
Rename to Mystic Symbolic.
2021-02-13 12:20:16 +00:00
<title>Mystic Symbolic</title>
Change styling a bit.
2021-02-04 01:23:24 +00:00
<style>
html, body {
font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
}
Add checkerboard bg.
2021-02-06 13:11:20 +00:00
Add a search field in vocabulary page.
2021-03-29 11:58:50 +00:00
select, input[type="text"] {
Add SVG symbol widget picker to mandala page.
2021-03-27 12:04:40 +00:00
padding: 8px;
}
Add checkerboard bg.
2021-02-06 13:11:20 +00:00
.checkerboard-bg {
Add link to codepen.
2021-02-06 13:13:56 +00:00
/* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
Add checkerboard bg.
2021-02-06 13:11:20 +00:00
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;
}
Add mouseover tooltips with debugging information (#35) This adds a bit of debugging information on mouseover. For example, a tooltip with the text `bird@tail.arm[0]` can be interpreted as "a bird symbol attached to the tail symbol's first arm attachment point." The implementation is a bit funky: we basically annotate the SVG DOM with various `data` attributes, and on mouseover we traverse the DOM from the element the mouse is over all the way up to the SVG root element, picking out relevant `data` attributes and building a tooltip out of it. This ended up being easier than e.g. passing a bunch of props down the whole tree in React.
2021-02-27 18:28:44 +00:00
.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;
}
get rid of ValidateDOMNesting warnings
2021-03-27 12:34:22 +00:00
/** Stupid class we're using instead of <p> to avoid ValidateDOMNesting warnings. */
.thingy {
margin-top: 10px;
margin-bottom: 10px;
}
Move page list to header for easier navigation.
2021-03-29 11:48:56 +00:00
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;
}
Make mandala UI layout a bit less terrible (#65) The key phrase here is **less terrible**, as opposed to **good**. Right now if the mandala gets too big for the page, it will just overflow and the remainder won't be visible (not even via scrolling). This is intentional, though, as per @ninapaley's suggestion: > I'm hoping you can change the way the image keeps resizing its canvas, and keeps justifying left. > Maybe have an oversize canvas with the ring pinned to the center, and all the adjustment sliders > on the right? Then they won't disappear if the canvas is too big. Also! I have an idea for an > animated cycle that would require the symbols to eventually outgrow the canvas area and disappear. I'm not super happy with this CSS, it doesn't feel terribly maintainable. Ah well, maybe we can improve it later.
2021-03-29 17:03:54 +00:00
.mandala-container {
position: relative;
}
.mandala-container .canvas {
display: flex;
width: 100%;
height: 85vh;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mandala-container .sidebar {
position: absolute;
right: 0;
top: 0;
padding: 8px;
width: 20em;
background-color: rgba(255, 255, 255, 0.9);
}
.mandala-container .color-widget {
display: flex;
}
.mandala-container .color-widget label {
flex-grow: 1;
}
.mandala-container .numeric-slider {
display: flex;
flex-direction: column;
}
.mandala-container .numeric-slider .slider {
display: flex;
}
.mandala-container .numeric-slider .slider input {
flex-basis: 90%;
}
Change styling a bit.
2021-02-04 01:23:24 +00:00
</style>
use react.
2021-02-04 00:11:34 +00:00
<noscript>
<p>Alas, you need JavaScript to peruse this page.</p>
</noscript>
<div id="app"></div>
<script src="lib/browser-main.tsx"></script>