svg.escobar.life

Unnamed repository; edit this file 'description' to name the repository.

commit 690c6672c906fe48f6f15c3da0e227cbdc99f1a0
parent f0de42cdd9a4b5ec9b8e3a542c0e2012b9d541f9
Author: Pablo Emilio Escobar Gaviria <pablo-escobar@riseup.net>
Date:   Sat, 26 Dec 2020 00:53:11 +1000

Refactored the CSS to avoid a cross-origin-request issue with the fonts used in the website

Diffstat:
Dcss/styles.css | 203-------------------------------------------------------------------------------
Acss/svg.css | 203+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mindex.html | 2+-
3 files changed, 204 insertions(+), 204 deletions(-)
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"