From 2e5944e3558da6fe6c572b1551a50ea28314412c Mon Sep 17 00:00:00 2001
From: Aljaz S <me@aljaxus.eu>
Date: Tue, 23 Nov 2021 14:08:07 +0100
Subject: [PATCH] move global styling to separate template

---
 src/template/style.ejs | 94 ++++++++++++++++++++++++++++++++++++++++++
 src/views/form.ejs     |  2 +-
 src/views/index.ejs    | 54 +-----------------------
 3 files changed, 96 insertions(+), 54 deletions(-)
 create mode 100644 src/template/style.ejs
diff --git a/src/template/style.ejs b/src/template/style.ejs
new file mode 100644
index 0000000..41a750f
--- /dev/null
+++ b/src/template/style.ejs
@@ -0,0 +1,94 @@
+<style>
+body,
+html {
+    margin: 0;
+    padding: 0;
+    max-width: 100vw;
+    overflow-x: hidden;
+    --c-dark: #202124;
+    --c-darkish: #303134;
+    --c-primary: #e8eaed;
+    --c-accent: #C58AF9;
+}
+
+html {
+    padding: 0 0;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: auto minmax(50vw, 650px) auto;
+    background-color: var(--c-dark);
+}
+
+body {
+    grid-column: 2;
+    padding: 15px;
+    margin: 30px 10px;
+
+    display: grid;
+    grid-template-columns: auto;
+    grid-auto-rows: auto;
+    row-gap: 4rem;
+
+    border-radius: 1rem;
+    background-color: var(--c-darkish);
+    color: var(--c-primary);
+
+    font-family: monospace;
+    font-size: 16px;
+    line-height: 1.6em;
+    word-break: normal;
+}
+a {
+    color: var(--c-accent);
+    text-decoration: none;
+}
+code,
+pre {
+    background-color: var(--c-dark);
+    padding: 6px 4px 2px 4px;
+    word-break: break-all;
+}
+pre {
+    overflow-x: scroll;
+}
+input {
+    background-color: var(--c-darkish);
+    border-color: var(--c-dark);
+    color: var(--c-primary);
+    padding: 4px;
+    border-radius: 4px;
+    font-family: monospace;
+}
+input:focus,
+input:focus-visible {
+    border-color: transparent;
+    outline: solid var(--c-accent);
+}
+input[type=number] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+input[type=submit],
+button {
+    border: none;
+    outline: solid 1px var(--c-accent);
+    padding: 10px;
+    vertical-align: top;
+    box-shadow: 3px 3px 1px 1px var(--c-accent);
+    color: var(--c-accent);
+    margin: 0 4px 4px 0;
+    cursor: pointer;
+}
+
+input[type=submit]:focus,
+input[type=submit]:focus-visible,
+input[type=submit]:active,
+button:focus,
+button:focus-visible,
+button:active {
+    border: none;
+    box-shadow: none;
+    margin: 4px 0 0 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/form.ejs b/src/views/form.ejs
index dc6c8e4..b73817f 100644
--- a/src/views/form.ejs
+++ b/src/views/form.ejs
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UPN-QR :: FORM</title>
 </head>
+<%- include('../template/style.ejs') -%>
 <style>
-    
 </style>
 <body>
     <div>
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 6be0caa..dbd5087 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -6,60 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UPN-QR | Open generator for UPN QR codes</title>
 </head>
+<%- include('../template/style.ejs') -%>
 <style>
-body,
-html {
-    margin: 0;
-    padding: 0;
-    max-width: 100vw;
-    overflow-x: hidden;
-    --c-dark: #202124;
-    --c-darkish: #303134;
-    --c-primary: #e8eaed;
-    --c-accent: #C58AF9;
-}
-
-html {
-    padding: 0 0;
-    width: 100vw;
-    display: grid;
-    grid-template-columns: auto minmax(50vw, 650px) auto;
-    background-color: var(--c-dark);
-}
-
-body {
-    grid-column: 2;
-    padding: 15px;
-    margin: 30px 10px;
-
-    display: grid;
-    grid-template-columns: auto;
-    grid-auto-rows: auto;
-    row-gap: 2rem;
-
-    border-radius: 1rem;
-    background-color: var(--c-darkish);
-    color: var(--c-primary);
-
-    font-family: monospace;
-    font-size: 16px;
-    line-height: 1.6em;
-    word-break: normal;
-}
-
-a {
-    color: var(--c-accent);
-    text-decoration: none;
-}
-code,
-pre {
-    background-color: var(--c-dark);
-    padding: 6px 4px 2px 4px;
-    word-break: break-all;
-}
-pre {
-    overflow-x: scroll;
-}
 section div {
     padding-left: 25px;
     display: grid;
