- Commit
- e1ae4afb5b62071ffce575d1eff3d4a07bdd27b4
- Parent
- e4fb55ae937f94b43dacd772dbadb3f10e1e3f29
- Author
- Gark Garcia <37553739+GarkGarcia@users.noreply.github.com>
- Date
Made it so that the buttons don't overlay the main image.
A simple SVG markup editor for the web
Made it so that the buttons don't overlay the main image.
3 files changed, 24 insertions, 54 deletions
Status | File Name | N° Changes | Insertions | Deletions |
Modified | assets/example.svg | 4 | 2 | 2 |
Modified | src/View.elm | 8 | 3 | 5 |
Modified | styles.css | 66 | 19 | 47 |
diff --git a/assets/example.svg b/assets/example.svg @@ -1,4 +1,4 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> - <path fill="#450e79" d="M22.58 23.26h-3.675l-.65 1.686H14.94l4.228-9.671h3.205l4.228 9.671H23.23l-.65-1.685zm-.897-2.348l-.94-2.432-.94 2.432h1.88zM34.878 25.167a10.21 10.21 0 0 1-2.35-.276c-.745-.18-1.381-.414-1.865-.718l1.05-2.377c.456.263.981.484 1.548.65.566.152 1.12.234 1.644.234.456 0 .774-.041.967-.124.194-.097.29-.221.29-.4 0-.208-.124-.36-.386-.457-.25-.096-.664-.207-1.244-.331a13.588 13.588 0 0 1-1.865-.498 3.303 3.303 0 0 1-1.299-.884c-.373-.414-.553-.967-.553-1.672 0-.608.166-1.16.512-1.658.345-.497.842-.884 1.52-1.174.676-.29 1.506-.428 2.473-.428.663 0 1.312.069 1.948.22a5.87 5.87 0 0 1 1.7.622l-.982 2.363c-.953-.484-1.851-.718-2.694-.718s-1.257.207-1.257.608c0 .193.124.345.373.442.248.096.663.193 1.23.304.732.138 1.354.304 1.865.483.511.18.94.47 1.312.87.373.401.567.954.567 1.659 0 .608-.166 1.16-.511 1.658-.346.483-.857.884-1.534 1.174-.677.276-1.492.428-2.46.428zM40.349 15.275h3.26v9.671h-3.26zM53.82 24.946l-.027-4.407-2.1 3.537h-1.437l-2.1-3.385v4.255h-2.971v-9.671h2.68l3.15 5.153 3.068-5.153h2.68l.028 9.671h-2.97zM63.022 15.275c.899 0 1.672.152 2.335.442.664.29 1.175.718 1.534 1.27.36.554.539 1.203.539 1.935 0 .733-.18 1.382-.539 1.935-.36.552-.87.98-1.534 1.27-.663.29-1.436.443-2.335.443h-1.395v2.376h-3.26v-9.671h4.655zm-.207 4.78c.442 0 .774-.096.995-.29.221-.207.332-.483.332-.843 0-.359-.111-.635-.332-.829-.221-.207-.553-.304-.995-.304h-1.188v2.266h1.188zM68.494 15.275h3.26v7.143h4.367v2.528h-7.627v-9.671zM85.06 22.487v2.46h-8.042v-9.672h7.862v2.459h-4.656v1.133h4.09v2.349h-4.09v1.271h4.836zM3.983 45.167c-.843 0-1.63-.096-2.362-.276-.733-.18-1.34-.414-1.824-.705l1.257-2.404c1.036.594 2.128.898 3.26.898.415 0 .733-.055.954-.152.221-.096.332-.234.332-.414 0-.166-.11-.304-.346-.4-.22-.097-.58-.208-1.064-.332a14.211 14.211 0 0 1-1.602-.498 3.171 3.171 0 0 1-1.12-.787c-.317-.36-.47-.83-.47-1.41 0-.732.194-1.368.581-1.906.4-.553.967-.981 1.7-1.272.732-.303 1.602-.455 2.61-.455a8.4 8.4 0 0 1 2.004.22 5.71 5.71 0 0 1 1.617.609l-1.175 2.376a4.67 4.67 0 0 0-1.257-.539 5.225 5.225 0 0 0-1.395-.18c-.456 0-.802.07-1.05.194-.25.124-.373.276-.373.456s.11.318.331.414c.235.097.608.208 1.12.332.621.152 1.146.304 1.574.47a2.97 2.97 0 0 1 1.12.774c.317.345.47.815.47 1.381 0 .719-.194 1.354-.595 1.893-.4.539-.967.967-1.7 1.257-.732.304-1.602.456-2.597.456zM21.49 35.275l-6.025 9.671h-3.206l-2.155-9.671h3.344l1.202 5.637 3.495-5.637h3.344zM27.154 39.848h2.832l-.829 4.173c-.51.373-1.105.649-1.768.856a7.81 7.81 0 0 1-2.156.29c-.98 0-1.851-.18-2.597-.538-.76-.373-1.34-.885-1.741-1.534-.415-.65-.622-1.41-.622-2.252 0-1.12.263-2.128.788-2.998a5.414 5.414 0 0 1 2.197-2.045c.94-.498 2.017-.746 3.233-.746 2.003 0 3.468.635 4.393 1.892l-2.335 1.81c-.304-.386-.635-.663-.98-.815-.346-.166-.76-.248-1.23-.248-.567 0-1.05.124-1.465.373a2.487 2.487 0 0 0-.98 1.05c-.222.442-.332.953-.332 1.52 0 .566.193 1.036.566 1.381.373.346.898.511 1.561.511.332 0 .65-.041.954-.138l.51-2.542zM43.9 44.946l-.028-4.407-2.1 3.537h-1.437l-2.1-3.385v4.255h-2.97v-9.671h2.68l3.15 5.153 3.067-5.153h2.68l.029 9.671H43.9zM55.036 43.26h-3.675l-.65 1.686h-3.315l4.227-9.671h3.206l4.228 9.671h-3.371l-.65-1.685zm-.898-2.348l-.94-2.432-.939 2.432h1.88zM63.727 42.515h-.884v2.431h-3.261v-9.671h4.656c.898 0 1.672.152 2.335.442.664.29 1.175.718 1.534 1.27.36.554.539 1.203.539 1.935 0 .691-.152 1.299-.47 1.81-.318.511-.76.926-1.354 1.23l2.031 2.984h-3.482l-1.644-2.431zm1.63-3.593c0-.359-.11-.635-.331-.829-.221-.207-.553-.304-.995-.304h-1.188v2.266h1.188c.442 0 .774-.097.995-.304.22-.193.331-.47.331-.829zM73.813 41.74l-.732.816v2.39h-3.206v-9.671h3.206v3.51l3.178-3.51h3.55l-3.868 4.255 4.062 5.416h-3.772l-2.418-3.205zM84.936 45.167c-1.479 0-2.64-.4-3.468-1.202-.83-.801-1.244-1.92-1.244-3.37v-5.32h3.261v5.222c0 .705.124 1.23.373 1.548.263.318.622.483 1.105.483.484 0 .843-.165 1.092-.483.263-.318.387-.843.387-1.548v-5.222h3.205v5.32c0 1.45-.414 2.569-1.243 3.37-.83.802-1.99 1.202-3.468 1.202zM95.796 35.275c.898 0 1.671.152 2.335.442.663.29 1.174.718 1.533 1.27.36.554.54 1.203.54 1.935 0 .733-.18 1.382-.54 1.935-.359.552-.87.98-1.533 1.27-.664.29-1.437.443-2.335.443H94.4v2.376h-3.26v-9.671h4.656zm-.208 4.78c.443 0 .774-.097.995-.29.221-.207.332-.484.332-.843s-.11-.635-.332-.829c-.22-.207-.552-.304-.995-.304H94.4v2.266h1.188zM13.475 62.487v2.46H5.434v-9.672h7.862v2.459H8.639v1.133h4.09v2.349H8.64v1.271h4.836zM14.733 55.275h4.766c1.078 0 2.032.193 2.86.594.816.387 1.465.94 1.921 1.672.442.732.677 1.589.677 2.57 0 .98-.235 1.837-.677 2.57-.456.732-1.105 1.284-1.92 1.685-.83.387-1.783.58-2.86.58h-4.767v-9.671zm4.628 7.13c.705 0 1.258-.194 1.686-.595.414-.4.622-.967.622-1.7 0-.732-.208-1.284-.636-1.685-.414-.4-.967-.608-1.672-.608h-1.368v4.587h1.368zM26.145 55.275h3.261v9.671h-3.26zM33.081 57.803H30.25v-2.528h8.926v2.528h-2.833v7.143h-3.26v-7.143zM44.95 65.167c-1.036 0-1.976-.22-2.805-.649a4.83 4.83 0 0 1-1.948-1.81c-.47-.76-.705-1.63-.705-2.598 0-.967.235-1.837.705-2.61a4.894 4.894 0 0 1 1.948-1.797c.83-.428 1.769-.65 2.805-.65 1.036 0 1.976.222 2.805.65a4.894 4.894 0 0 1 1.948 1.796c.47.774.705 1.644.705 2.611 0 .968-.235 1.838-.705 2.598a4.83 4.83 0 0 1-1.948 1.81c-.83.428-1.769.65-2.805.65zm0-2.639c.4 0 .774-.096 1.091-.304.332-.193.595-.47.788-.842.193-.36.29-.788.29-1.272 0-.483-.097-.911-.29-1.284a2.205 2.205 0 0 0-.788-.843 2.08 2.08 0 0 0-1.091-.29c-.4 0-.774.096-1.105.29a2.28 2.28 0 0 0-.774.843c-.194.373-.29.8-.29 1.284s.096.912.29 1.272c.193.373.456.649.774.842.331.208.704.304 1.105.304zM55.74 62.515h-.883v2.431h-3.261v-9.671h4.656c.898 0 1.672.152 2.335.442.663.29 1.175.718 1.534 1.27.359.554.539 1.203.539 1.935 0 .691-.152 1.299-.47 1.81-.318.511-.76.926-1.354 1.23l2.03 2.984h-3.48l-1.645-2.431zm1.631-3.593c0-.359-.11-.635-.331-.829-.221-.207-.553-.304-.995-.304h-1.188v2.266h1.188c.442 0 .774-.096.995-.304.22-.193.331-.47.331-.829zM69.295 57.734v1.658h4.035v2.46h-4.035v3.094h-3.26v-9.671h7.861v2.459h-4.601zM79.934 65.167c-1.036 0-1.976-.22-2.805-.649a4.83 4.83 0 0 1-1.948-1.81c-.47-.76-.704-1.63-.704-2.598 0-.967.234-1.837.704-2.61a4.894 4.894 0 0 1 1.948-1.797c.83-.428 1.769-.65 2.805-.65 1.036 0 1.976.222 2.805.65a4.894 4.894 0 0 1 1.948 1.796c.47.774.705 1.644.705 2.611 0 .968-.235 1.838-.705 2.598a4.83 4.83 0 0 1-1.948 1.81c-.829.428-1.769.65-2.805.65zm0-2.639c.4 0 .774-.096 1.092-.304.331-.193.594-.47.787-.842.194-.36.29-.788.29-1.272 0-.483-.096-.911-.29-1.284a2.205 2.205 0 0 0-.787-.843 2.08 2.08 0 0 0-1.092-.29c-.4 0-.774.096-1.105.29a2.28 2.28 0 0 0-.774.843c-.193.373-.29.8-.29 1.284s.097.912.29 1.272c.194.373.456.649.774.842.331.208.705.304 1.105.304zM90.725 62.515h-.884v2.431H86.58v-9.671h4.656c.898 0 1.672.152 2.335.442.663.29 1.175.718 1.534 1.27.36.554.539 1.203.539 1.935 0 .691-.152 1.299-.47 1.81-.318.511-.76.926-1.354 1.23l2.031 2.984H92.37l-1.644-2.431zm1.63-3.593c0-.359-.11-.635-.331-.829-.221-.207-.553-.304-.995-.304h-1.188v2.266h1.188c.442 0 .774-.096.995-.304.22-.193.331-.47.331-.829zM18.242 77.803H15.41v-2.528h8.925v2.528h-2.832v7.144h-3.26v-7.144zM34.712 75.275v9.672H31.45v-3.565h-3.012v3.565h-3.26v-9.672h3.26V78.7h3.012v-3.426h3.26zM44.328 82.487v2.46h-8.041v-9.672h7.862v2.46h-4.657v1.132h4.09v2.35h-4.09v1.27h4.836zM65.468 75.275l-3.095 9.672h-3.496l-1.561-5.168-1.644 5.168h-3.496l-3.095-9.672h3.358l1.685 5.499 1.783-5.5h2.998l1.686 5.569 1.782-5.568h3.095zM74.228 82.487v2.46h-8.042v-9.672h7.862v2.46h-4.656v1.132h4.09v2.35h-4.09v1.27h4.836zM83.222 79.89c.567.207 1.01.525 1.327.925.318.401.47.898.47 1.465 0 .843-.346 1.506-1.05 1.976-.705.456-1.714.69-3.04.69h-5.444v-9.671h5.168c1.285 0 2.266.235 2.915.69.663.457.995 1.078.995 1.838 0 .456-.11.857-.332 1.216-.235.36-.566.65-1.009.87zm-4.531-2.335v1.437h1.52c.704 0 1.063-.235 1.063-.719 0-.483-.359-.718-1.064-.718h-1.52zm1.962 5.112c.718 0 1.077-.249 1.077-.76s-.359-.76-1.077-.76H78.69v1.52h1.962z"/> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"> + <path fill="#450e79" d="M22.58 8.37h-3.67l-.66 1.69h-3.31L19.17.39h3.2l4.23 9.67h-3.37l-.65-1.69zm-.9-2.35l-.94-2.43-.94 2.43h1.88zm13.2 4.26c-.8 0-1.58-.1-2.35-.28a6.36 6.36 0 0 1-1.87-.71l1.05-2.38a6.38 6.38 0 0 0 3.2.88c.45 0 .77-.04.96-.12.2-.1.3-.22.3-.4 0-.21-.13-.36-.4-.46-.24-.1-.66-.2-1.24-.33-.63-.12-1.25-.29-1.86-.5-.5-.18-.95-.49-1.3-.88a2.4 2.4 0 0 1-.56-1.67c0-.61.17-1.16.52-1.66.34-.5.84-.89 1.52-1.18a6.3 6.3 0 0 1 2.47-.42 8.4 8.4 0 0 1 3.65.84l-.98 2.36a5.96 5.96 0 0 0-2.7-.72c-.84 0-1.26.21-1.26.61 0 .2.13.35.38.44.25.1.66.2 1.23.3.73.15 1.35.31 1.86.49s.94.47 1.31.87c.38.4.57.95.57 1.66 0 .6-.16 1.16-.5 1.66-.36.48-.87.88-1.54 1.17-.68.28-1.5.43-2.46.43zm5.47-9.9h3.26v9.68h-3.26V.39zm13.47 9.68l-.03-4.4-2.1 3.53h-1.43l-2.1-3.39v4.26h-2.97V.39h2.68l3.15 5.15L54.08.39h2.68l.03 9.67h-2.97zm9.2-9.67c.9 0 1.67.15 2.34.44a3.4 3.4 0 0 1 1.53 1.27c.36.55.54 1.2.54 1.93 0 .74-.18 1.39-.54 1.94-.36.55-.87.98-1.53 1.27-.67.29-1.44.44-2.34.44h-1.4v2.38h-3.25V.39h4.65zm-.2 4.78c.44 0 .77-.1.99-.3.22-.2.33-.48.33-.84 0-.35-.1-.63-.33-.82-.22-.21-.55-.3-1-.3h-1.18v2.26h1.18zM68.48.39h3.26v7.14h4.37v2.53H68.5V.39zm16.57 7.2v2.47h-8.04V.39h7.86v2.46h-4.66v1.13h4.1v2.35h-4.1V7.6h4.84zM3.98 30.29c-.84 0-1.63-.1-2.36-.28a6.6 6.6 0 0 1-1.82-.7l1.25-2.4c1.04.59 2.13.9 3.26.9.42 0 .74-.06.96-.16.22-.1.33-.23.33-.41 0-.17-.11-.3-.35-.4a7.6 7.6 0 0 0-1.06-.34c-.54-.13-1.08-.3-1.6-.5-.43-.17-.81-.44-1.12-.78A2.05 2.05 0 0 1 1 23.8c0-.73.2-1.37.58-1.9.4-.56.97-.99 1.7-1.28a8.35 8.35 0 0 1 4.61-.23c.57.12 1.12.32 1.62.6l-1.17 2.38a5.18 5.18 0 0 0-2.65-.72c-.46 0-.8.07-1.06.2-.25.12-.37.27-.37.45s.11.32.33.42c.24.1.6.2 1.12.33.62.15 1.15.3 1.58.47.42.17.8.43 1.12.77.31.35.47.82.47 1.38 0 .72-.2 1.36-.6 1.9-.4.54-.97.96-1.7 1.25-.73.3-1.6.46-2.6.46zm17.51-9.9l-6.02 9.68h-3.21l-2.16-9.67h3.35l1.2 5.63 3.5-5.63h3.34zm5.66 4.58H30l-.83 4.17c-.51.38-1.1.65-1.77.86-.7.2-1.43.3-2.16.29-.98 0-1.85-.18-2.6-.54a4.12 4.12 0 0 1-2.36-3.78c0-1.12.27-2.13.8-3a5.41 5.41 0 0 1 2.19-2.05 6.8 6.8 0 0 1 3.23-.74c2 0 3.47.63 4.4 1.89l-2.34 1.8c-.3-.38-.64-.65-.98-.8a2.83 2.83 0 0 0-1.23-.25c-.57 0-1.05.12-1.47.37-.42.24-.76.6-.98 1.05-.22.44-.33.95-.33 1.52 0 .56.2 1.03.57 1.38.37.35.9.51 1.56.51.33 0 .65-.04.95-.14l.51-2.54zm16.75 5.1l-.03-4.4-2.1 3.53h-1.43l-2.1-3.39v4.26h-2.97v-9.67h2.68l3.15 5.15 3.06-5.15h2.68l.03 9.67H43.9zm11.14-1.69h-3.68l-.65 1.69H47.4l4.22-9.67h3.2l4.24 9.67h-3.37l-.65-1.69zm-.9-2.35l-.94-2.43-.94 2.43h1.88zm9.59 1.6h-.89v2.44h-3.26v-9.67h4.66c.9 0 1.67.15 2.33.44a3.4 3.4 0 0 1 1.54 1.27c.36.55.54 1.2.54 1.93 0 .7-.16 1.3-.47 1.81-.32.52-.76.93-1.36 1.23l2.03 2.99h-3.48l-1.64-2.43zm1.63-3.59c0-.35-.11-.63-.33-.82-.23-.21-.56-.3-1-.3h-1.19v2.26h1.2c.43 0 .76-.1.99-.3.22-.2.33-.48.33-.84zm8.45 2.82l-.73.82v2.39h-3.2v-9.67h3.2v3.5l3.18-3.5h3.55l-3.87 4.25L80 30.06h-3.77l-2.42-3.2zm11.13 3.43c-1.48 0-2.64-.4-3.47-1.2a4.46 4.46 0 0 1-1.25-3.37v-5.32h3.27v5.22c0 .7.12 1.23.37 1.55.26.32.62.48 1.1.48.49 0 .85-.16 1.1-.48.26-.32.38-.85.38-1.55v-5.22h3.2v5.32c0 1.45-.4 2.57-1.24 3.37-.83.8-1.99 1.2-3.46 1.2zm10.86-9.9c.9 0 1.67.16 2.33.45.66.29 1.18.72 1.53 1.27.36.55.54 1.2.54 1.93 0 .74-.18 1.39-.54 1.94-.35.55-.87.98-1.53 1.27-.66.29-1.44.44-2.33.44h-1.4v2.38h-3.26v-9.67h4.66zm-.21 4.79c.44 0 .77-.1 1-.3.21-.2.33-.48.33-.84 0-.35-.11-.63-.34-.82-.22-.21-.55-.3-1-.3H94.4v2.26h1.19zM13.48 47.6v2.46H5.43v-9.67h7.87v2.46H8.64v1.13h4.09v2.35H8.64v1.27h4.84zm1.25-7.21h4.77c1.08 0 2.03.19 2.86.6.82.38 1.46.93 1.92 1.66.44.74.68 1.6.68 2.57 0 .98-.24 1.84-.68 2.57a4.57 4.57 0 0 1-1.92 1.69 6.7 6.7 0 0 1-2.86.58h-4.77v-9.67zm4.63 7.13c.7 0 1.26-.2 1.69-.6.41-.4.62-.96.62-1.7 0-.73-.2-1.28-.64-1.68a2.3 2.3 0 0 0-1.67-.61H18v4.59h1.37zm6.79-7.13h3.26v9.67h-3.26v-9.67zm6.93 2.52h-2.83V40.4h8.93v2.52h-2.84v7.15h-3.26V42.9zm11.87 7.37a6.03 6.03 0 0 1-2.8-.65 4.84 4.84 0 0 1-2.66-4.4c0-.98.24-1.85.7-2.62a4.9 4.9 0 0 1 1.96-1.8 6.05 6.05 0 0 1 2.8-.65c1.04 0 1.98.23 2.8.66a4.89 4.89 0 0 1 2.66 4.4 4.85 4.85 0 0 1-2.65 4.41c-.83.43-1.77.65-2.81.65zm0-2.64c.4 0 .77-.1 1.1-.3.32-.2.59-.47.78-.85.2-.36.29-.78.29-1.27 0-.48-.1-.9-.3-1.28a2.07 2.07 0 0 0-1.88-1.13c-.39 0-.76.1-1.1.28-.32.21-.59.5-.77.85-.2.37-.29.8-.29 1.28 0 .49.1.91.3 1.27a2.08 2.08 0 0 0 1.87 1.15zm10.79-.01h-.88v2.43H51.6v-9.67h4.65c.9 0 1.67.15 2.34.44.66.29 1.17.72 1.53 1.27.36.55.54 1.2.54 1.93 0 .7-.15 1.3-.47 1.81-.32.51-.76.93-1.35 1.23l2.03 2.99h-3.48l-1.65-2.43zm1.63-3.6c0-.36-.1-.63-.33-.83-.22-.2-.55-.3-1-.3h-1.18v2.27h1.18c.45 0 .78-.1 1-.3.22-.2.33-.48.33-.84zm11.93-1.18v1.65h4.03v2.46h-4.04v3.1h-3.26v-9.67h7.87v2.46h-4.6zm10.63 7.43a6.03 6.03 0 0 1-2.8-.65 4.84 4.84 0 0 1-2.65-4.4c0-.98.23-1.85.7-2.62a4.9 4.9 0 0 1 1.95-1.8 6.05 6.05 0 0 1 2.8-.65c1.04 0 1.98.23 2.8.65a4.89 4.89 0 0 1 2.66 4.41 4.85 4.85 0 0 1-2.65 4.41c-.83.43-1.77.65-2.8.65zm0-2.64c.4 0 .78-.1 1.1-.3.33-.2.59-.47.78-.85.2-.36.3-.78.3-1.27 0-.48-.1-.9-.3-1.28a2.07 2.07 0 0 0-1.88-1.13c-.4 0-.77.1-1.1.28-.33.21-.6.5-.78.85-.19.37-.29.8-.29 1.28 0 .49.1.91.3 1.27a2.08 2.08 0 0 0 1.87 1.15zm10.8-.01h-.89v2.43h-3.26v-9.67h4.66c.9 0 1.67.15 2.33.44.66.29 1.18.72 1.54 1.27.36.55.53 1.2.53 1.93 0 .7-.15 1.3-.47 1.81-.31.51-.76.93-1.35 1.23l2.03 2.99h-3.48l-1.64-2.43zm1.62-3.6c0-.36-.1-.63-.33-.83-.22-.2-.55-.3-1-.3h-1.18v2.27h1.19c.44 0 .77-.1 1-.3.21-.2.32-.48.32-.84zm-74.1 18.88H15.4V60.4h8.92v2.52H21.5v7.15h-3.26V62.9zM34.7 60.4v9.67h-3.26v-3.57h-3.01v3.57h-3.26v-9.67h3.26v3.42h3.01V60.4h3.26zm9.62 7.2v2.47h-8.04v-9.67h7.86v2.46h-4.66v1.13h4.1v2.35h-4.1v1.27h4.84zm21.14-7.2l-3.1 9.67h-3.5l-1.55-5.17-1.65 5.17h-3.5l-3.09-9.67h3.36l1.68 5.5 1.79-5.5h3l1.68 5.56 1.78-5.56h3.1zm8.76 7.2v2.47h-8.04v-9.67h7.86v2.46h-4.66v1.13h4.1v2.35h-4.1v1.27h4.84zm9-2.59c.56.2 1 .53 1.32.93.32.4.47.9.47 1.46 0 .84-.35 1.5-1.05 1.98a5.6 5.6 0 0 1-3.04.69h-5.45v-9.67h5.17a5.1 5.1 0 0 1 2.92.69c.66.45 1 1.07 1 1.83 0 .46-.12.86-.34 1.22-.23.36-.56.65-1 .87zm-4.54-2.33v1.43h1.52c.7 0 1.06-.23 1.06-.71 0-.49-.36-.72-1.06-.72h-1.52zm1.96 5.1c.72 0 1.08-.24 1.08-.75s-.36-.76-1.08-.76H78.7v1.52h1.96z"/> </svg>
diff --git a/src/View.elm b/src/View.elm @@ -33,11 +33,9 @@ display model = else on "load" (Json.Decode.succeed (Validation True)) ] [] , errorIcon - , div [ id "options" ] - [ button [ onClick Download ] [ downloadIcon ] - , button [ onClick (Upload Requested) ] [ uploadIcon ] - , button [ onClick DarkModeToggle ] [ darkModeIcon model ] - ] + , button [ onClick Download ] [ downloadIcon ] + , button [ onClick (Upload Requested) ] [ uploadIcon ] + , button [ onClick DarkModeToggle ] [ darkModeIcon model ] ] texteditor : Model -> Html Msg
diff --git a/styles.css b/styles.css @@ -71,8 +71,8 @@ body { body > div#container { display: grid; - width: calc(100% - 2 * var(--small)); - height: calc(100% - 2 * var(--small)); + width: calc(100vw - 2 * var(--small)); + min-height: calc(100vh - 2 * var(--small)); grid-gap: calc(1.5 * var(--tiny)); padding: var(--small); @@ -133,10 +133,12 @@ body > div#container > div#title > a > svg { stroke: var(--background); stroke-linejoin: round; - stroke-width: 2pt; + stroke-width: 1pt; } body > div#container > div#display > svg#error { + grid-area: image; + max-width: 100%; max-height: 100%; @@ -161,9 +163,19 @@ body > div#container img { } body > div#container > div#display { + display: grid; grid-area: display; - position: relative; + grid-template-rows: auto calc(4 * var(--tiny)); + grid-template-columns: calc(4 * var(--tiny)) calc(4 * var(--tiny)) calc(4 * var(--tiny)) auto; + grid-template-areas: "image image image image" + "button button button ."; + grid-gap: calc(2 * var(--tiny)); + + width: calc(100% - 4 * var(--tiny)); + height: calc(100% - 4 * var(--tiny)); + + padding: calc(2 * var(--tiny)); background: var(--light); border-radius: var(--tiny); @@ -182,63 +194,23 @@ body > div#container > div#display.dark { background: var(--dark); } -body > div#container > div#display > * { - position: absolute; -} - body > div#container > div#display > img { - top: 0; - left: 0; - - width: calc(100% - 4 * var(--tiny)); - height: calc(100% - 4 * var(--tiny)); - - padding: calc(2 * var(--tiny)); -} - -body > div#container > div#display > div#options { - display: grid; - grid-gap: var(--tiny); - grid-auto-flow: column; - - justify-items: center; - - bottom: 0; - left: 0; - - z-index: 1; - padding: var(--tiny); -} - -@media (pointer: coarse) and (orientation: landscape) { - body > div#container > div#display > div#options { - width: calc(100% - 2 * var(--tiny)); - } + grid-area: image; } -body > div#container > div#display > div#options > button { +body > div#container > div#display > button { display: flex; - - width: calc(4 * var(--tiny)); - height: calc(4 * var(--tiny)); + grid-area: auto; background: var(--background); border: none; border-radius: calc(2 * var(--tiny)); - border: none; box-shadow: 0 0 calc(.25 * var(--small)) .5vmax #00000030; cursor: pointer; } -@media (pointer: coarse) and (orientation: landscape) { - body > div#container > div#display > div#options > button { - max-width: 7vw; - max-height: 7vw; - } -} - body > div#container > div#display svg { width: 90%; height: 90%;