- 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.
A simple SVG markup editor for the web
Fixed the height of the picture display on portrait orientation devices.
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