- Commit
- a8f49db9738976725db7464c2e5a76a0fa0a8fcf
- Parent
- ca83eae377da86302b4a3fc8bd24cb7b71389115
- Author
- Pablo Emilio Escobar Gaviria <pablo-escobar@riseup.net>
- Date
Organized the repository
svg.pablopie.xyz
A simple SVG markup editor for the web
Diffstats
9 files changed, 233 insertions, 232 deletions
| Status | Name | Changes | Insertions | Deletions |
| Modified | .gitignore | 2 files changed | 1 | 1 |
| Modified | Makefile | 2 files changed | 5 | 4 |
| Deleted | app.webmanifest | 1 file changed | 0 | 20 |
| Added | css/styles.css | 1 file changed | 186 | 0 |
| Modified | index.html | 2 files changed | 3 | 3 |
| Added | js/app.webmanifest | 1 file changed | 20 | 0 |
| Added | js/service-worker.js | 1 file changed | 18 | 0 |
| Deleted | service-worker.js | 1 file changed | 0 | 18 |
| Deleted | styles.css | 1 file changed | 0 | 186 |
diff --git a/.gitignore b/.gitignore @@ -1,3 +1,3 @@ elm-stuff elm.json -*.min.js +_site
diff --git a/Makefile b/Makefile @@ -1,11 +1,12 @@ .PHONY: build auto-compile runserver: - python3 -m http.server + (cd _site && python3 -m http.server) build: - elm make --optimize --output=script.js src/Main.elm - mv script.js script.min.js + elm make --optimize --output=_site/js/script.min.js src/Main.elm + cp index.html css assets _site/ -r + cp js/* _site/js/ auto-compile: - ls src/*.elm | entr make build + ls src/*.elm js/* css/* index.html | entr make build
diff --git a/app.webmanifest /dev/null @@ -1,20 +0,0 @@ -{ - "name": "RawSvg", - "short_name": "RawSvg", - "display": "standalone", - "icons": [ - { - "src": "assets/icons/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "assets/icons/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "start_url": "index.html", - "background_color": "#eeeeff", - "theme_color": "#B362FF" -}
diff --git /dev/null b/css/styles.css @@ -0,0 +1,186 @@ +@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; +} + +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; + + width: 100%; + height: 100%; + + border: none; + background: transparent; + + color: transparent; + caret-color: var(--foreground); + + overflow: scroll; + + scrollbar-color: var(--foreground) transparent; + scrollbar-width: thin; + + font-size: 15pt; + line-height: 1.15em; +} + +#container #editor textarea::-webkit-scrollbar { + width: 2pt; + height: 2pt; +} + +#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; +} + +#container #editor textarea::-moz-selection { + background: var(--selection); +} + +.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,15 +3,15 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="styles.css"> + <link rel="stylesheet" href="css/styles.css"> <link rel="icon" type="image/svg+xml" sizes="16x16 24x24 32x32 48x48 64x64 128x128 256x256 512x512" href="https://pablo.escobar.life/images/icons/favicon.svg"> - <link rel="manifest" href="app.webmanifest"> - <script src="script.min.js"></script> + <link rel="manifest" href="js/app.webmanifest"> + <script src="js/script.min.js"></script> </head> <body> <script>Elm.Main.init()</script>
diff --git /dev/null b/js/app.webmanifest @@ -0,0 +1,20 @@ +{ + "name": "RawSvg", + "short_name": "RawSvg", + "display": "standalone", + "icons": [ + { + "src": "assets/icons/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "assets/icons/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "index.html", + "background_color": "#eeeeff", + "theme_color": "#B362FF" +}
diff --git /dev/null b/js/service-worker.js @@ -0,0 +1,18 @@ +self.addEventListener('install', installHandler); +self.addEventListener('fetch', fetchHandler); + +function installHandler(e) { + e.waitUntil( + caches.open('progressive-elm') + .then((cache) => cache.addAll(['/', '/index.html'])) + .catch(console.error) + ); +} + +function fetchHandler(e) { + e.respondWith( + caches.match(event.request) + .then((response) => response || fetch(e.request)) + .catch(console.error) + ); +}
diff --git a/service-worker.js /dev/null @@ -1,18 +0,0 @@ -self.addEventListener('install', installHandler); -self.addEventListener('fetch', fetchHandler); - -function installHandler(e) { - e.waitUntil( - caches.open('progressive-elm') - .then((cache) => cache.addAll(['/', '/index.html'])) - .catch(console.error) - ); -} - -function fetchHandler(e) { - e.respondWith( - caches.match(event.request) - .then((response) => response || fetch(e.request)) - .catch(console.error) - ); -}
diff --git a/styles.css /dev/null @@ -1,186 +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; -} - -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; - - width: 100%; - height: 100%; - - border: none; - background: transparent; - - color: transparent; - caret-color: var(--foreground); - - overflow: scroll; - - scrollbar-color: var(--foreground) transparent; - scrollbar-width: thin; - - font-size: 15pt; - line-height: 1.15em; -} - -#container #editor textarea::-webkit-scrollbar { - width: 2pt; - height: 2pt; -} - -#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; -} - -#container #editor textarea::-moz-selection { - background: var(--selection); -} - -.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); }