A simple SVG markup editor for the web
Refactored the CSS to avoid a cross-origin-request issue with the fonts used in the website
3 files changed, 204 insertions, 204 deletions
| Status | File Name | N° Changes | Insertions | Deletions |
| Deleted | css/styles.css | 203 | 0 | 203 |
| Added | css/svg.css | 203 | 203 | 0 |
| Modified | index.html | 2 | 1 | 1 |
diff --git a/css/styles.css b/css/styles.css @@ -1,203 +0,0 @@ -@import url('https://pablo.escobar.life/css/styles.css'); - -:root { - align-self: center; - align-content: center; - align-items: center; - - cursor: default; - user-select: none; - scrollbar-width: none; - - --selection: #A599E940; - --dark: #000011; - - --tag: #9EFFFF; - --attribute: var(--accent); - --string: #A5FF90; - --comm: #B362FF; - - --indent: 3em; -} - -body { - height: 100vh; - min-height: 25vw; - - padding: 0; -} - -#container { - display: grid; - - grid-gap: 1em; - grid-template-rows: 30vh auto; - - height: calc(100% - 2em); - padding: 1em; -} - -@media (orientation: landscape) { - #container { - grid-template-columns: 1fr 2fr; - grid-template-rows: 100%; - } -} - -#container #display img { - grid-area: image; - - max-width: 100% !important; - max-height: 100% !important; - - justify-self: center; - align-self: center; -} - -@media (orientation: portrait) { - #container #display img#image { - max-height: calc(30vh - 4.8em) !important; - } -} - -#container, #container * { - transition: background-color .25s ease, fill .25s ease; -} - -#container #display { - display: grid; - - grid-template-rows: auto 2em; - grid-template-columns: repeat(3, 2em) auto; - grid-template-areas: "image image image image" - "button button button ."; - grid-gap: 1em; - - padding: 1em; - background: var(--foreground); -} - -#container #display.dark { - background: var(--dark); -} - -#container #display button { - grid-area: auto; - - background: var(--background); - border: none; - - cursor: pointer; -} - -#container #display button img { - width: 100% !important; - height: 100% !important; -} - -#container #display img#error { - width: calc(100% - 2em); - height: calc(100% - 2em); - - margin: 1em; -} - -#container #display img#error, #container.error #display img#image { - display: none; -} - -#container.error #display #error { - display: block; -} - -#container #editor { - position: relative; - - width: 100%; - height: 100%; - - overflow: hidden; - line-height: 1em; -} - -#container #editor > * { - position: absolute; - will-change: transform; -} - -#container #editor * { - margin: 0; -} - -#container #editor textarea { - z-index: 1; - - resize: none; - white-space: pre; - overflow: scroll; - - width: calc(100% - var(--indent)); - height: 100%; - margin-left: var(--indent); - - font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace; - font-size: 15pt; - line-height: 1.4em; - - border: none; - background: transparent; - - color: transparent; - caret-color: var(--foreground); - - scrollbar-color: var(--foreground) transparent; -} - -#container #editor textarea::-webkit-scrollbar-track { - background: transparent; - outline: none; -} - -#container #editor textarea::-webkit-scrollbar-thumb { - background: var(--foreground); - outline: none; -} - -#container #editor textarea::selection { - background: var(--selection); - color: transparent; -} - -#noscript { - display: flex; - width: 100%; - height: 100%; -} - -#noscript > * { - margin: auto; -} - -.elmsh { - line-height: 1.4em; -} - -.elmsh-line::before { - display: inline-block; - width: calc(var(--indent) - 1em); - margin-right: 1em; - - content: attr(data-elmsh-lc); - font-weight: bold; -} - -.elmsh-comm { - font-style: italic; - color: var(--comm); -} - -.elmsh , .elmsh7 { color: var(--foreground); } -.elmsh1, .elmsh2, .elmsh6 { color: var(--string); } -.elmsh3, .elmsh4 { color: var(--tag); } -.elmsh5 { color: var(--attribute); } -
diff --git a/css/svg.css b/css/svg.css @@ -0,0 +1,203 @@ +@import url('/css/styles.css'); + +:root { + align-self: center; + align-content: center; + align-items: center; + + cursor: default; + user-select: none; + scrollbar-width: none; + + --selection: #A599E940; + --dark: #000011; + + --tag: #9EFFFF; + --attribute: var(--accent); + --string: #A5FF90; + --comm: #B362FF; + + --indent: 3em; +} + +body { + height: 100vh; + min-height: 25vw; + + padding: 0; +} + +#container { + display: grid; + + grid-gap: 1em; + grid-template-rows: 30vh auto; + + height: calc(100% - 2em); + padding: 1em; +} + +@media (orientation: landscape) { + #container { + grid-template-columns: 1fr 2fr; + grid-template-rows: 100%; + } +} + +#container #display img { + grid-area: image; + + max-width: 100% !important; + max-height: 100% !important; + + justify-self: center; + align-self: center; +} + +@media (orientation: portrait) { + #container #display img#image { + max-height: calc(30vh - 4.8em) !important; + } +} + +#container, #container * { + transition: background-color .25s ease, fill .25s ease; +} + +#container #display { + display: grid; + + grid-template-rows: auto 2em; + grid-template-columns: repeat(3, 2em) auto; + grid-template-areas: "image image image image" + "button button button ."; + grid-gap: 1em; + + padding: 1em; + background: var(--foreground); +} + +#container #display.dark { + background: var(--dark); +} + +#container #display button { + grid-area: auto; + + background: var(--background); + border: none; + + cursor: pointer; +} + +#container #display button img { + width: 100% !important; + height: 100% !important; +} + +#container #display img#error { + width: calc(100% - 2em); + height: calc(100% - 2em); + + margin: 1em; +} + +#container #display img#error, #container.error #display img#image { + display: none; +} + +#container.error #display #error { + display: block; +} + +#container #editor { + position: relative; + + width: 100%; + height: 100%; + + overflow: hidden; + line-height: 1em; +} + +#container #editor > * { + position: absolute; + will-change: transform; +} + +#container #editor * { + margin: 0; +} + +#container #editor textarea { + z-index: 1; + + resize: none; + white-space: pre; + overflow: scroll; + + width: calc(100% - var(--indent)); + height: 100%; + margin-left: var(--indent); + + font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace; + font-size: 15pt; + line-height: 1.4em; + + border: none; + background: transparent; + + color: transparent; + caret-color: var(--foreground); + + scrollbar-color: var(--foreground) transparent; +} + +#container #editor textarea::-webkit-scrollbar-track { + background: transparent; + outline: none; +} + +#container #editor textarea::-webkit-scrollbar-thumb { + background: var(--foreground); + outline: none; +} + +#container #editor textarea::selection { + background: var(--selection); + color: transparent; +} + +#noscript { + display: flex; + width: 100%; + height: 100%; +} + +#noscript > * { + margin: auto; +} + +.elmsh { + line-height: 1.4em; +} + +.elmsh-line::before { + display: inline-block; + width: calc(var(--indent) - 1em); + margin-right: 1em; + + content: attr(data-elmsh-lc); + font-weight: bold; +} + +.elmsh-comm { + font-style: italic; + color: var(--comm); +} + +.elmsh , .elmsh7 { color: var(--foreground); } +.elmsh1, .elmsh2, .elmsh6 { color: var(--string); } +.elmsh3, .elmsh4 { color: var(--tag); } +.elmsh5 { color: var(--attribute); } +
diff --git a/index.html b/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="css/styles.css"> + <link rel="stylesheet" href="css/svg.css"> <link rel="icon" type="image/svg+xml"