svg.escobar.life

A simple SVG markup editor for the web

Commit
39a2491e5a1c28eaa965ca09ef4978553a34c2fd
Parent
260180f72622a7c225d1324e617d15c8b0dfdba1
Author
Gark Garcia <37553739+GarkGarcia@users.noreply.github.com>
Date

Fixed the height of the picture display on portrait orientation devices.

Diffstat

2 files changed, 11 insertions, 16 deletions

Status File Name N° Changes Insertions Deletions
Modified assets/logo.svg 4 2 2
Modified styles.css 23 9 14
diff --git a/assets/logo.svg b/assets/logo.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 20">
-  <path d="M8.68 14.97H7.16L6.24 20H.05L3.72 0h8.23c2.41 0 4.29.58 5.63 1.73 1.33 1.15 2 2.77 2 4.84a7.77 7.77 0 0 1-4.95 7.6l3.01 5.74L29.28 0h6.08l4.35 20h-6.16l-.6-3.49h-7L24.12 20H11.27l-2.6-5.03zM50.93 20H44.3L42.1 0h6.1l1.19 11.4L54.84 0h5.69l1.04 11.57L67.11 0h6.08l-9.54 20H57L55.96 9.46 50.93 20zm23.57 0c-.8 0-1.58-.1-2.34-.3a5.98 5.98 0 0 1-1.87-.78l1.05-2.6a6.41 6.41 0 0 0 3.19.97c.45 0 .77-.05.97-.14.19-.1.29-.24.29-.43 0-.22-.13-.4-.38-.5a7.67 7.67 0 0 0-1.25-.36 13.3 13.3 0 0 1-1.87-.55c-.5-.2-.93-.52-1.3-.97a2.77 2.77 0 0 1-.55-1.81c0-.66.17-1.27.5-1.81.35-.54.86-.97 1.54-1.28.67-.31 1.5-.47 2.46-.47.67 0 1.32.08 1.96.24.64.15 1.2.38 1.7.68l-.99 2.58a5.62 5.62 0 0 0-2.7-.79c-.83 0-1.25.23-1.25.67 0 .2.12.37.37.47.25.1.66.22 1.23.34.74.15 1.36.32 1.87.52.5.2.94.52 1.32.96.37.44.56 1.04.56 1.8a3.29 3.29 0 0 1-2.04 3.09 5.8 5.8 0 0 1-2.47.47zm22.39-5.8h2.83v4.46c-.57.43-1.23.76-1.99 1-.75.22-1.5.34-2.22.34a5.51 5.51 0 0 1-2.78-.7 5 5 0 0 1-1.93-1.96 5.78 5.78 0 0 1-.7-2.85c0-1.07.24-2.02.7-2.86a4.96 4.96 0 0 1 1.95-1.96c.83-.46 1.78-.7 2.83-.7.95 0 1.8.18 2.55.52.75.35 1.37.85 1.87 1.52l-2.09 2c-.6-.77-1.33-1.16-2.17-1.16-.72 0-1.29.24-1.71.7a2.78 2.78 0 0 0-.64 1.94c0 .79.21 1.43.63 1.91.42.48.98.72 1.68.72.42 0 .81-.08 1.19-.25V14.2zm-10.67 5.56h-3.2L78.91 9.2h3.51l2.31 6.17 2.37-6.17h3.2l-4.09 10.55zm-54.14-8.1l-.89-5.12-2.7 5.12h3.6zM11.01 5.2H8.94l-.87 4.69h2.55c.85 0 1.52-.24 1.99-.7.47-.47.7-1.12.7-1.96 0-1.35-.76-2.03-2.3-2.03z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 18">
+  <path d="M8.68 13.473H7.16L6.24 18H.05L3.72 0h8.23c2.41 0 4.29.522 5.63 1.557 1.33 1.035 2 2.493 2 4.356.153 2.9925-1.847 5.7555-4.95 6.84l3.01 5.166L29.28 0h6.08l4.35 18h-6.16l-.6-3.141h-7L24.12 18H11.27l-2.6-4.527h.01zM50.93 18H44.3L42.1 0h6.1l1.19 10.26L54.84 0h5.69l1.04 10.413L67.11 0h6.08l-9.54 18H57l-1.04-9.486L50.93 18zm23.57 0c-.8 0-1.58-.09-2.34-.27-.663-.1368-1.296-.3744-1.87-.702l1.05-2.34c.959.5391 2.06.8406 3.19.873.45 0 .77-.045.97-.126.19-.09.29-.216.29-.387 0-.198-.13-.36-.38-.45-.406-.1395-.824-.2484-1.25-.324-.636-.1233-1.261-.2889-1.87-.495-.5-.18-.93-.468-1.3-.873-.39-.468-.585-1.0449-.55-1.629 0-.594.17-1.143.5-1.629.35-.486.86-.873 1.54-1.152.67-.279 1.5-.423 2.46-.423.67 0 1.32.072 1.96.216.64.135 1.2.342 1.7.612l-.99 2.322c-.818-.4392-1.748-.684-2.7-.711-.83 0-1.25.207-1.25.603 0 .18.12.333.37.423.25.09.66.198 1.23.306.74.135 1.36.288 1.87.468.5.18.94.468 1.32.864.37.396.56.936.56 1.62.019 1.2132-.793 2.3202-2.04 2.781-.779.3015-1.622.4464-2.47.423zm22.39-5.22h2.83v4.014c-.57.387-1.23.684-1.99.9-.75.198-1.5.306-2.22.306-.972.0144-1.931-.2034-2.78-.63-.814-.414-1.483-1.0251-1.93-1.764-.475-.7866-.716-1.6704-.7-2.565 0-.963.24-1.818.7-2.574.451-.7425 1.127-1.3545 1.95-1.764.83-.414 1.78-.63 2.83-.63.95 0 1.8.162 2.55.468.75.315 1.37.765 1.87 1.368l-2.09 1.8c-.6-.693-1.33-1.044-2.17-1.044-.72 0-1.29.216-1.71.63-.452.4878-.681 1.1124-.64 1.746 0 .711.21 1.287.63 1.719.42.432.98.648 1.68.648.42 0 .81-.072 1.19-.225V12.78zm-10.67 5.004h-3.2L78.91 8.28h3.51l2.31 5.553L87.1 8.28h3.2l-4.09 9.495.01.009zm-54.14-7.29l-.89-4.608-2.7 4.608h3.6-.01zM11.01 4.68H8.94l-.87 4.221h2.55c.85 0 1.52-.216 1.99-.63.47-.423.7-1.008.7-1.764 0-1.215-.76-1.827-2.3-1.827z"/>
 </svg>
diff --git a/styles.css b/styles.css
@@ -22,7 +22,6 @@
     */
 
     --background: #2D2B55;
-    --foreground: #A599E9;
     --selection: #A599E940;
     --light: #eeeeff;
     --dark: #000022;
@@ -103,7 +102,7 @@ body > div#container {
 
 @media (orientation: portrait) {
     body > div#container {
-        grid-template-rows: calc(4 * var(--tiny)) 1fr 2fr;
+        grid-template-rows: calc(4 * var(--tiny)) 30vh auto;
         grid-template-areas: "title" "display" "text";
 
         height: calc(100vh - 2 * var(--small));
@@ -117,6 +116,8 @@ body, body * {
 
 body > div#container > div#title {
     grid-area: title;
+
+    overflow: hidden;
 }
 
 body > div#container > div#title > * {
@@ -164,7 +165,6 @@ body > div#container, body > div#container > * {
 
 body > div#container.error {
     --background: #913534;
-    --foreground: #e999b4;
     --selection: #f12b5c40;
     --light: #ffefef;
 
@@ -180,7 +180,7 @@ body > div#container > div#display {
     display: grid;
     grid-area: display;
 
-    grid-template-rows: auto calc(4 * var(--tiny));
+    grid-template-rows: calc(100% - 6 * var(--tiny)) auto;
     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 .";
@@ -277,7 +277,7 @@ body > div#container > div#editor > textarea {
 
     overflow: scroll;
 
-    scrollbar-color: var(--foreground) transparent;
+    scrollbar-color: var(--light) transparent;
     scrollbar-width: thin;
 }
 
@@ -292,7 +292,7 @@ body > div#container > div#editor > textarea::-webkit-scrollbar-track {
 }
 
 body > div#container > div#editor > textarea::-webkit-scrollbar-thumb {
-    background: var(--foreground);
+    background: var(--light);
     outline: none;
 }
 
@@ -304,17 +304,12 @@ body > div#container > div#editor > textarea::-moz-selection {
     background: var(--selection);
 }
 
-.elmsh {color: var(--light);}
-.elmsh-hl {background: rgba(229, 231,235, 0.1);}
-.elmsh-add {background: rgba(40, 124,82, 0.4);}
-.elmsh-del {background: rgba(136, 64,67, 0.4);}
-
 .elmsh-comm {
     font-style: italic;
     color: var(--comm);
 }
 
+.elmsh , .elmsh7 { color: var(--light); }
 .elmsh1, .elmsh2, .elmsh6 { color: var(--string); }
 .elmsh3, .elmsh4 { color: var(--tag); }
-.elmsh5 { color: var(--prop); }
-.elmsh7 { color: var(--light); }-
\ No newline at end of file
+.elmsh5 { color: var(--prop); }+
\ No newline at end of file