MeowcaTheoRange/HexFlagGen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Accessibility, add to globals, make CSS custom

Browse source
This commit is contained in:
MeowcaTheoRange 2023-11-17 10:04:59 -06:00
parent 0af761772f
commit dc42bc1203
4 changed files with 160 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
index.html
View file

@ -1,29 +1,70 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<link rel="stylesheet" href="styles/globals.css" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HexFlagGen</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/normal.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
: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-family: "Lexend Deca";
--document-width: 40em;
}
* {
transition: background-color 0.125s, color 0.125s;
}
</style>
</head> </head>
<body> <body>
<section> <section>
<h1>HexFlagGen</h1> <h1>HexFlagGen</h1>
<label for="size_width"
><input
type="number"
style="width: 8ch"
min="0"
max="64"
value="16"
onchange="document.documentElement.style.setProperty('--base-scale', event.target.value + 'px')"
/>
UI scale</label
><br /><label for="checkbox" class="checkbox">
<input
type="checkbox"
id="checkbox"
onchange="event.target.checked ? document.documentElement.classList.add('base') : document.documentElement.classList.remove('base')"
/>
<span class="checkbox">O</span>
Base style
</label>
<p>by <a href="https://abtmtr.link/">MeowcaTheoRange</a></p> <p>by <a href="https://abtmtr.link/">MeowcaTheoRange</a></p>
<p> <p>
Welcome, here you can make a flag out of the hexadecimal bytes of your Welcome, here you can make a flag out of the hexadecimal bytes of your
choice! choice!
</p> </p>
</section> </section>
<hr />
<section> <section>
<label for="data">Generator string</label><br /> <label for="data">Generator string</label><br />
<input <input
type="text" type="text"
id="data" id="data"
value="FF400000C0FF8000FF80FF00FF" value="09F911029D74E35BD84156C5635688C0"
style="width: 100%" style="width: 100%"
/><br /> /><br />
<button id="generateButton">Generate!</button> <button id="generateButton">Generate!</button>
</section> </section>
<section> <section>
<label for="size_width">Size</label><br />
<input <input
type="number" type="number"
id="size_width" id="size_width"
@ -42,14 +83,17 @@
value="200" value="200"
/> />
<label for="size_height">Height (px)</label><br /> <label for="size_height">Height (px)</label><br />
<label for="flag_type">Flag type</label><br />
<select id="flag_type"> <select id="flag_type">
<option value="horiz" selected>Horizontal</option> <option value="horiz" selected>Horizontal</option>
<option value="vert">Vertical</option> <option value="vert">Vertical</option>
</select> </select>
<label for="flag_type">Flag type</label>
</section> </section>
<hr />
<section> <section>
<p>Hex: <span class="monospace" id="hexdisplay">...</span></p> <p>
Hex: <code><span id="hexdisplay">...</span></code>
</p>
<canvas id="canvas" width="300" height="200"></canvas> <canvas id="canvas" width="300" height="200"></canvas>
</section> </section>
<script src="scripts/index.js"></script> <script src="scripts/index.js"></script>

24
scripts/index.js
View file

@ -24,18 +24,18 @@ function getData() {
size_height.value, size_height.value,
flag_type.value flag_type.value
); );
// var ac = averageColors(hexValue); var ac = averageColors(hexValue);
// console.log(ac); console.log(ac);
// root.style.setProperty( root.style.setProperty(
// "--background-color", "--background-color",
// arrayToColor(darkenColor(ac, 70)) arrayToColor(darkenColor(ac, 70))
// ); );
// root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70))); root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70)));
// root.style.setProperty("--accent-color", arrayToColor(ac)); root.style.setProperty("--accent-color", arrayToColor(ac));
// root.style.setProperty( root.style.setProperty(
// "--accent-color-fg", "--accent-color-fg",
// arrayToColor(lightenColor(ac, 90)) arrayToColor(lightenColor(ac, 90))
// ); );
} }
generateButton.addEventListener("click", getData); generateButton.addEventListener("click", getData);

11
styles/globals.css
View file

@ -1,11 +0,0 @@
@import "normal.css";
.monospace {
font-family: monospace;
}
.horiz {
display: inline-block;
vertical-align: top;
margin: 0 0.25em;
}

119
styles/normal.css
View file

@ -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 { :root {
--base-scale: 16px;
--background-color: hsl(0, 0%, 15%); --background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%); --color: hsl(0, 0%, 85%);
--accent-color: #808080; --accent-color: #808080;
--accent-color-fg: hsl(0, 0%, 95%); --accent-color-fg: hsl(0, 0%, 95%);
--font-size: 16px; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
--font-family: "Lexend Deca"; 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 { body {
width: 100vw; width: 100vw;
max-width: 640px; max-width: var(--document-width);
margin: auto; 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 */ /* Size and type normalize */
html { html {
font-size: var(--font-size); font-size: var(--base-scale);
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
} }
@ -57,6 +78,23 @@ small {
font-size: 0.75em; 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 */ /* Form normalize */
html { html {
@ -86,11 +124,23 @@ a:active {
opacity: 0.5; 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, button,
input[type="button"], input[type="button"],
input[type="submit"], input[type="submit"],
input[type="reset"] { input[type="reset"] {
border: 1px solid var(--accent-color); border: var(--border-style);
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
margin: 0.25em 0; margin: 0.25em 0;
font-size: 1em; font-size: 1em;
@ -103,7 +153,7 @@ button[data-outlined],
input[type="button"][data-outlined], input[type="button"][data-outlined],
input[type="submit"][data-outlined], input[type="submit"][data-outlined],
input[type="reset"][data-outlined] { input[type="reset"][data-outlined] {
border: 1px solid var(--accent-color); border: var(--border-style);
background-color: var(--background-color); background-color: var(--background-color);
color: var(--accent-color); color: var(--accent-color);
} }
@ -125,16 +175,43 @@ input[type="reset"]:active {
opacity: 0.5; opacity: 0.5;
} }
input[type="text"], /* -- Checkbox styling */
input[type="number"],
input[type="email"], label.checkbox {
select, display: inline-block;
textarea { position: relative;
font-family: inherit;
border: 1px solid var(--color);
padding: 0.25em 0.5em;
margin: 0.25em 0; 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);
} }