diff --git a/index.html b/index.html
index 3a1950b..781180f 100644
--- a/index.html
+++ b/index.html
@@ -1,29 +1,70 @@
-
+
-
+
+
+ HexFlagGen
+
+
+
+
+
- Hex: ...
+
+ Hex: ...
+
diff --git a/scripts/index.js b/scripts/index.js
index f5ae40f..316b266 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -24,18 +24,18 @@ function getData() {
size_height.value,
flag_type.value
);
- // var ac = averageColors(hexValue);
- // console.log(ac);
- // root.style.setProperty(
- // "--background-color",
- // arrayToColor(darkenColor(ac, 70))
- // );
- // root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70)));
- // root.style.setProperty("--accent-color", arrayToColor(ac));
- // root.style.setProperty(
- // "--accent-color-fg",
- // arrayToColor(lightenColor(ac, 90))
- // );
+ var ac = averageColors(hexValue);
+ console.log(ac);
+ root.style.setProperty(
+ "--background-color",
+ arrayToColor(darkenColor(ac, 70))
+ );
+ root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70)));
+ root.style.setProperty("--accent-color", arrayToColor(ac));
+ root.style.setProperty(
+ "--accent-color-fg",
+ arrayToColor(lightenColor(ac, 90))
+ );
}
generateButton.addEventListener("click", getData);
diff --git a/styles/globals.css b/styles/globals.css
deleted file mode 100644
index 44f090a..0000000
--- a/styles/globals.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "normal.css";
-
-.monospace {
- font-family: monospace;
-}
-
-.horiz {
- display: inline-block;
- vertical-align: top;
- margin: 0 0.25em;
-}
diff --git a/styles/normal.css b/styles/normal.css
index 080acf1..0cc5f16 100644
--- a/styles/normal.css
+++ b/styles/normal.css
@@ -1,27 +1,48 @@
-@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/* Document form */
:root {
+ --base-scale: 16px;
+
--background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%);
--accent-color: #808080;
--accent-color-fg: hsl(0, 0%, 95%);
- --font-size: 16px;
- --font-family: "Lexend Deca";
-}
+ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol";
+ --document-width: 40em;
-/* Document form */
+ --border-style: 0.0625em solid var(--color);
+}
body {
width: 100vw;
- max-width: 640px;
+ max-width: var(--document-width);
margin: auto;
- padding: 10px;
+ padding: 0.5em;
+}
+
+html.base {
+ --background-color: #fff !important;
+ --color: #000 !important;
+ --accent-color: #000 !important;
+ --accent-color-fg: #fff !important;
+ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol" !important;
+ --document-width: 40em;
+
+ --border-style: 0.0625em solid var(--color);
+}
+
+html.base body {
+ margin: 0;
}
/* Size and type normalize */
html {
- font-size: var(--font-size);
+ font-size: var(--base-scale);
background-color: var(--background-color);
color: var(--color);
}
@@ -57,6 +78,23 @@ small {
font-size: 0.75em;
}
+big {
+ font-size: 1.5em;
+}
+
+code {
+ font-size: 1em;
+ line-height: 1.25em;
+ font-family: monospace;
+}
+
+hr {
+ border: none;
+ border-top: var(--border-style);
+ background-color: transparent;
+ margin: 0.25em 0;
+}
+
/* Form normalize */
html {
@@ -86,11 +124,23 @@ a:active {
opacity: 0.5;
}
+input,
+select,
+textarea {
+ font-family: inherit;
+ border: var(--border-style);
+ padding: 0.25em 0.5em;
+ margin: 0.25em 0;
+ font-size: 1em;
+ background-color: var(--background-color);
+ color: var(--color);
+}
+
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
- border: 1px solid var(--accent-color);
+ border: var(--border-style);
padding: 0.25em 0.5em;
margin: 0.25em 0;
font-size: 1em;
@@ -103,7 +153,7 @@ button[data-outlined],
input[type="button"][data-outlined],
input[type="submit"][data-outlined],
input[type="reset"][data-outlined] {
- border: 1px solid var(--accent-color);
+ border: var(--border-style);
background-color: var(--background-color);
color: var(--accent-color);
}
@@ -125,16 +175,43 @@ input[type="reset"]:active {
opacity: 0.5;
}
-input[type="text"],
-input[type="number"],
-input[type="email"],
-select,
-textarea {
- font-family: inherit;
- border: 1px solid var(--color);
- padding: 0.25em 0.5em;
+/* -- Checkbox styling */
+
+label.checkbox {
+ display: inline-block;
+ position: relative;
margin: 0.25em 0;
- font-size: 1em;
- background-color: var(--background-color);
- color: var(--color);
+}
+
+label.checkbox input[type="checkbox"] {
+ /* visibility: hidden; */
+ opacity: 0;
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+label.checkbox input[type="checkbox"] + span.checkbox {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ line-height: 1em;
+ padding: 0.25em;
+ box-sizing: content-box;
+ border: var(--border-style);
+ color: transparent;
+ text-align: center;
+ user-select: none;
+}
+
+label.checkbox input[type="checkbox"]:focus + span.checkbox {
+ outline: 2px solid var(--accent-color-fg);
+}
+
+label.checkbox input[type="checkbox"]:checked + span.checkbox {
+ background-color: var(--accent-color);
+ border: var(--border-style);
+ color: var(--accent-color-fg);
}