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

167 wiersze
2.7 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 {
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
margin: 0;
padding: 0;
Change styling a bit.
2021-02-04 01:23:24 +00:00
font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
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;
Change styling a bit.
2021-02-04 01:23:24 +00:00
}
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
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.thingy:first-child {
margin-top: 0;
}
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;
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
padding-right: 0;
margin-right: 0;
Move page list to header for easier navigation.
2021-03-29 11:48:56 +00:00
}
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
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.flex-widget {
display: flex;
flex-direction: column;
}
.flex-widget label {
margin-bottom: 8px;
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
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.canvas {
grid-area: canvas;
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
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.canvas.scrollable {
display: block;
overflow: auto;
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
}
Add basic animation support to the mandala page (#75) This addresses part of #71 by adding some basic animation support to the mandala page.
2021-04-03 21:01:13 +00:00
.sidebar .disabled {
color: gray;
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.sidebar label.checkbox {
Factor out a SvgCompositionContext. (#72) This fixes #67 by making the background color selection/randomization code more DRY via the addition of a new `SvgCompositionContext` and a `CompositionContextWidget`. It also documents the `SvgSymbolContext` type, and moves the "randomize colors" button closer to the actual colors.
2021-04-02 20:33:07 +00:00
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.sidebar .color-widget {
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
display: flex;
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.sidebar .color-widget label {
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
flex-grow: 1;
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.sidebar .numeric-slider {
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
display: flex;
flex-direction: column;
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.sidebar .numeric-slider .slider {
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
display: flex;
}
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
.sidebar .numeric-slider .slider input {
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
flex-basis: 90%;
}
Add animated GIF export. (#79) This adds an "Export GIF" button _if and only if_ animation is enabled on the Mandala page. The GIF has the same dimensions as the canvas at the time that the button was clicked. Currently the animation is locked to 15 FPS, which I think might be the maximum rate that some platforms limit it to, but I'm not sure. We can always adjust it in the future.
2021-04-10 21:11:12 +00:00
.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;
}
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>
Improve layout (#74) This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
<div id="app" className="app"></div>
use react.
2021-02-04 00:11:34 +00:00
<script src="lib/browser-main.tsx"></script>