diff --git a/README.md b/README.md
index 8636b3f2fba0ec6f830774286f59d416e37c74eb..6532f2073a24b7293d745defedf170519062e675 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,8 @@ This generator is meant to provide an easy way to generator BB3 style logos/user
- [ ] Better alt text
- [ ] Replace place holder images
- [ ] Add font controls: size and letter spacing
+- [ ] Add customizing instructions
+- [ ] Add alt text to svgs
## Build from source
`$ nix --extra-experimental-features flakes build`
### legacy
diff --git a/src/index.html b/src/index.html
index f76be948028f6d083e60c37759d68ca5a93a9a0d..d16f9964b927bdc6cc0be516837ad3289b7e490b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,7 @@
}
body {
font-family: Ubuntu;
- background: linear-gradient(#332a39ff 0%, #020613ff 100%);;
+ background: linear-gradient(#332a39ff 0%, #020613ff 100%);
color: #FFEBD8;
margin: 0px auto 50px auto;
max-width: 1500px;
@@ -49,18 +49,19 @@
main {
margin: 0px 10px;
}
- input {
- margin: 10px 0px;
- }
- a {
- color: #00c6ff;
- }
h1 {
box-shadow: 0px -20px 0px -11px #62c1a6 inset;
margin-left: -20px;
padding: 0px 20px 2px 20px;
display: inline-block;
}
+ h2 {
+ font-size: 18px;
+ margin: 10px 0px;
+ }
+ p {
+ margin: 10px 0px;
+ }
input, textarea {
background: #241B2B;
color: #FFEBD8;
@@ -78,9 +79,11 @@
grid-template-rows: auto;
}
.input-with-label label {
- font-size: 90%;
margin-left: 7px;
}
+ .input-with-label label h2 {
+ margin: 0px;
+ }
.input-with-label input {
margin-top: 1px;
}
@@ -91,6 +94,10 @@
display: inline-block;
max-width: 100%;
}
+ .katakana-wrapper summary {
+ font-size: 18px;
+ font-weight: 700;
+ }
.katakana {
width: 100%;
overflow-x: auto;
@@ -100,6 +107,7 @@
grid-template-rows: 50px;
grid-gap: 4px;
padding-left: 4px;
+ padding-bottom: 4px;
}
.katakana > div {
line-height: 2em;
@@ -127,10 +135,13 @@
margin: 10px -10px;
padding: 10px 10px;
}
- .container-background > *:first-child {
+ .container {
+ margin: 10px 0px;
+ }
+ .container-background > *:first-child, .container > *:first-child {
margin-top: 0px;
}
- .container-background > *:last-child {
+ .container-background > *:last-child, .container > *:last-child {
margin-bottom: 0px;
}
.download-button-container {
@@ -139,14 +150,14 @@
.download-button-container:last-child {
align-self: end;
}
- .download-button-container > p, .download-button-container > div, .download-button-container > div > button {
+ .download-button-container > h2, .download-button-container > div, .download-button-container > div > button {
width: 100%;
text-align: center;
margin: 0px;
font-weight: bold;
}
- .download-button-container > p {
- padding: 10px;
+ .download-button-container > h2 {
+ margin: 5px;
width: calc(100% - 20px);
}
.download-button-container > div {
@@ -160,6 +171,7 @@
padding: 5px;
width: calc(100% - 20px);
background: #62c1a6;
+ font-size: 18px;
}
#preview {
max-width: 1000px;
@@ -217,11 +229,30 @@
#selector_animal img {
height: auto;
width: 100%;
- background: #241B2B;
+ background: #1F1C2A;
+ margin-bottom: -4px; /* Very hacky, but is needed for some reason */
}
@media screen and (prefers-color-scheme: light) {
body {
color: #0E0E0F;
+ background: linear-gradient(#fff0e0ff 0%, #d0c8c3ff 100%);
+ }
+ input, textarea {
+ background: #DED6E5;
+ color: #0E0E0F;
+ border-color: #0E0E0F;
+ }
+ input:focus, textarea:focus {
+ border-color: #57C0A2;
+ }
+ .katakana > div > button {
+ color: #0E0E0F;
+ box-shadow: 0 0 0 4px #0E0E0F;
+ }
+ #selector_color_foreground input:checked + label, #selector_color_background input:checked + label, #selector_animal input:checked + label {
+ border-color: #0E0E0F;
+ }
+ .container-background {
background: #DED6E5;
}
}
@@ -404,20 +435,22 @@
</head>
<body>
<main>
- <h1>logo generator</h1>
- <div id="preview">
+ <div class="container">
+ <h1>logo generator</h1>
+ </div>
+ <div id="preview" alt="preview of generated logo">
<div class="container-background">
<div id="preview_big"></div>
<div id="preview_small"></div>
<div class="download-button-container">
- <p>save small logo</p>
+ <h2>save small logo</h2>
<div>
<button id="download_small_svg">svg</button>
<button id="download_small_png">png</button>
</div>
</div>
<div class="download-button-container">
- <p>save big logo</p>
+ <h2>save big logo</h2>
<div>
<button id="download_big_svg">SVG</button>
<button id="download_big_png">PNG</button>
@@ -429,47 +462,39 @@
<h2>alt text</h2>
<p id="alt_text"></p>
</div>
- <div>
- <h2>foreground accent color</h2>
- <div id="selector_color_foreground">
- <div class="color_selector_simple">
- <input type="radio" id="foreground_red" name="foreground_color" value="#EA5177"/>
- <label for="foreground_red" style="background-color: #EA5177;"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_yellow" name="foreground_color" value="#FDBE4B"/>
- <label for="foreground_yellow" style="background-color: #FDBE4B;"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_green" name="foreground_color" value="#62c1a6" checked="true"/>
- <label for="foreground_green" style="background-color: #62c1a6;"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_blue" name="foreground_color" value="#5253ff"/>
- <label for="foreground_blue" style="background-color: #5253ff;"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_purple" name="foreground_color" value="#A74DB7"/>
- <label for="foreground_purple" style="background-color: #A74DB7;"></label>
- </div>
+ <div id="selector_color_foreground" class="container" alt="select foreground color of the logo">
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_red" name="foreground_color" value="#EA5177"/>
+ <label for="foreground_red" style="background-color: #EA5177;" alt="red"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_yellow" name="foreground_color" value="#FDBE4B"/>
+ <label for="foreground_yellow" style="background-color: #FDBE4B;" alt="yellow"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_green" name="foreground_color" value="#62c1a6" checked="true"/>
+ <label for="foreground_green" style="background-color: #62c1a6;" alt="green"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_blue" name="foreground_color" value="#5253ff"/>
+ <label for="foreground_blue" style="background-color: #5253ff;" alt="blue"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_purple" name="foreground_color" value="#A74DB7"/>
+ <label for="foreground_purple" style="background-color: #A74DB7;" alt="pink"></label>
</div>
</div>
- <div>
- <h2>background color</h2>
- <div id="selector_color_background">
- <div class="color_selector_gradient">
- <input type="radio" id="background_light" name="background_color" value='{"simple": "#1f1c2a", "bottom": "#020613", "top": "#332a39"}' checked="true"/>
- <label for="background_light" style="background: linear-gradient(90deg, #020613 0%, #332a39 100%);"></label>
- </div>
- <div class="color_selector_gradient">
- <input type="radio" id="background_dark" name="background_color" value='{"simple": "#0b1a26", "bottom": "#0d0313", "top": "#0b1a26"}'/>
- <label for="background_dark" style="background: linear-gradient(90deg, #0d0313 0%, #0b1a26 100%);"></label>
- </div>
+ <div id="selector_color_background" class="container" alt="select background color of the logo">
+ <div class="color_selector_gradient">
+ <input type="radio" id="background_light" name="background_color" value='{"simple": "#1f1c2a", "bottom": "#020613", "top": "#332a39"}' checked="true"/>
+ <label for="background_light" style="background: linear-gradient(90deg, #020613 0%, #332a39 100%);" alt="pink"></label>
+ </div>
+ <div class="color_selector_gradient">
+ <input type="radio" id="background_dark" name="background_color" value='{"simple": "#0b1a26", "bottom": "#0d0313", "top": "#0b1a26"}'/>
+ <label for="background_dark" style="background: linear-gradient(90deg, #0d0313 0%, #0b1a26 100%);" alt="green"></label>
</div>
</div>
- <div>
- <h2>animal</h2>
- <div id="selector_animal">
+ <div id="selector_animal" class="container" alt="select animal on the logo">
<div>
<input type="radio" id="animal_bunny" name="animal" value="bunny" checked="true"/>
<label for="animal_bunny">
@@ -479,7 +504,7 @@
<div>
<input type="radio" id="animal_maneki-neko" name="animal" value="maneki-neko"/>
<label for="animal_maneki-neko">
- <img alt="maneki-neko" src="img/favicon.svg"/>
+ <img alt="maneki-neko Winkekatze" src="img/favicon.svg"/>
</label>
</div>
<div>
@@ -501,11 +526,10 @@
</label>
</div>
</div>
- </div>
- <div>
+ <div class="container">
<div>
<div class="input-with-label">
- <label for="headline_text">Headline</label>
+ <label for="headline_text"><h2>headline</h2></label>
<input type="text" id="headline_text" value="DiVOC"/>
</div>
</div>
@@ -596,10 +620,10 @@
</details>
</div>
</div>
- <div>
+ <div class="container">
<div>
<div class="input-with-label">
- <label for="sub_headline_text">Sub headline</label>
+ <label for="sub_headline_text"><h2>subtitle</h2></label>
<textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
</div>
</div>