1 files changed, 174 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..b18edfd
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,174 @@
+@font-face {
+  font-family: "Lexend";
+  font-display: swap;
+  font-weight: 400;
+  src: url("https://gleam.run/fonts/Lexend.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lexend";
+  font-display: swap;
+  font-weight: 700;
+  src: url("https://gleam.run/fonts/Lexend-700.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Outfit";
+  font-display: swap;
+  src: url("https://gleam.run/fonts/Outfit.woff") format("woff");
+}
+
+:root {
+  --font-family-normal: "Outfit", sans-serif;
+  --font-family-title: "Lexend", sans-serif;
+
+  --color-pink: #ffaff3;
+  --color-red: #ff6262;
+  --color-orange: #ffd596;
+  --color-green: #c8ffa7;
+  --gap: 12px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family-normal);
+  letter-spacing: 0.01em;
+  line-height: 1.3;
+}
+
+codeflask__textarea,
+pre,
+code {
+  font-weight: normal;
+  letter-spacing: unset;
+}
+
+p code {
+  padding: 1px 2px;
+  background-color: #f5f5f5;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-title);
+  font-weight: normal;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--gap);
+  background-color: var(--color-pink);
+}
+
+.navbar a:visited,
+.navbar a {
+  text-decoration: none;
+  color: #000;
+}
+
+.playground {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  flex: auto;
+  max-width: 100vw;
+}
+
+#text {
+  flex: 1;
+}
+
+#text > :first-child {
+  margin-top: 0;
+}
+
+#editor {
+  flex: 1;
+  position: relative;
+}
+
+#output {
+  flex: 1;
+}
+
+@media (min-width: 600px) {
+  #text,
+  #output,
+  #editor {
+    width: 50vw;
+  }
+  #text {
+    flex-basis: 100%;
+    border-right: 2px solid var(--color-pink);
+  }
+  #editor {
+    flex: 1.62;
+  }
+  #output,
+  #editor {
+    max-height: 50vh;
+  }
+}
+
+#text,
+#output > *,
+#editor .codeflask__flatten {
+  padding: var(--gap);
+}
+
+#text,
+#output,
+#editor {
+  min-width: 50%;
+  max-width: 100%;
+  overflow-y: auto;
+  border-bottom: 2px solid var(--color-pink);
+  margin: 0;
+  overflow-wrap: break-word;
+}
+
+#output > * {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.error,
+.warning {
+  border: var(--gap) solid var(--border-color);
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.error {
+  --border-color: var(--color-red);
+}
+
+.warning {
+  --border-color: var(--color-orange);
+}
+
+.prev-next {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--gap);
+  gap: 0.5em;
+}
+
+.prev-next span {
+  opacity: 0.5;
+}