Skip to content
Snippets Groups Projects
Commit 13141c67 authored by TilCreator's avatar TilCreator
Browse files

Merge branch 'master' into 'no-bundled-fonts' 

# Conflicts:
#   flake.nix
parents c5373097 71906c58
No related branches found
No related tags found
1 merge request!2render text into svg paths; don't bundle fonts with the svg
Show whitespace changes
Inline Side-by-side
.gitlab-ci.yml
+ 2
− 2
View file @ 13141c67
...@@ -3,5 +3,5 @@ stages: ...@@ -3,5 +3,5 @@ stages:
nix-build: nix-build:
stage: build stage: build
image: nixos:20.03 tags: [nix]
script: nix-build script: nix-build
README.md
+ 11
− 4
View file @ 13141c67
# Divoc BB3 logo generator # Divoc BB3 logo generator
This generator is meant to provide an easy way to generator BB3 style logos/user pictures. If one needs something more complex, both logo templates in src are nicely editable in Inkscape. This generator is meant to provide an easy way to generator BB3 style logos/user pictures. If one needs something more complex, both logo templates in src are nicely editable in Inkscape.
## TODO ## TODO
- [ ] Modify Genos font, so that the i looks right? - [ ] Modify fonts
- [ ] Apply official stying - Merge fonts, latin from Genos, JP and Cyrillic from Noto Sans
- [ ] Add more animals - Replace `i` from Genos with custom `i`
- [ ] Add more accent / background colors - Genos bold only, Noto Sans Black only, possibly all merged to regular?
- [ ] Finalize animals
- [ ] Finalize accent / background colors
- [ ] Where to host? - [ ] Where to host?
- [ ] 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 ## Build from source
`$ nix --extra-experimental-features flakes build` `$ nix --extra-experimental-features flakes build`
### legacy ### legacy
......
flake.nix
+ 3
− 2
View file @ 13141c67
...@@ -26,14 +26,15 @@ ...@@ -26,14 +26,15 @@
"$(base64 -w0 ${svg_templates}/logo_small_template.svg)" "$(base64 -w0 ${svg_templates}/logo_small_template.svg)"
''; '';
installPhase = '' installPhase = ''
mkdir -p $out mkdir -p $out $out/img $out/font
cp index.html $out/index.html cp index.html $out/index.html
cp ${favicon}/favicon.svg ${favicon}/favicon.png $out/
cp ${google_fonts}/ofl/notosansjp/NotoSansJP-Black.otf $out cp ${google_fonts}/ofl/notosansjp/NotoSansJP-Black.otf $out
# bundle the Genos-Bold font, since opentype.js can't work with the # bundle the Genos-Bold font, since opentype.js can't work with the
# variable-width version that's included in google fonts # variable-width version that's included in google fonts
cp ${./Genos-Bold.ttf} $out/Genos-Bold.ttf cp ${./Genos-Bold.ttf} $out/Genos-Bold.ttf
cp ${opentype_js} $out/opentype.min.js cp ${opentype_js} $out/opentype.min.js
cp ${favicon}/favicon.svg ${favicon}/favicon.png $out/img
cp ${google_fonts}/ufl/ubuntumono/UbuntuMono-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Bold.ttf $out/font
''; '';
}; };
favicon = pkgs.stdenv.mkDerivation rec { favicon = pkgs.stdenv.mkDerivation rec {
......
src/index.html
+ 455
− 261
View file @ 13141c67
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<head> <head>
<title>Divoc logo generator</title> <title>Divoc logo generator</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.svg"> <link rel="shortcut icon" href="img/favicon.svg">
<link rel="shortcut icon" href="favicon.png"> <link rel="shortcut icon" href="img/favicon.png">
<link rel="icon" href="favicon.svg"> <link rel="icon" href="img/favicon.svg">
<link rel="icon" href="favicon.png"> <link rel="icon" href="img/favicon.png">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<meta name="og:title" content="Divoc logo generator"> <meta name="og:title" content="Divoc logo generator">
<meta name="description" content="Divoc logo generator"> <meta name="description" content="Divoc logo generator">
...@@ -14,56 +14,106 @@ ...@@ -14,56 +14,106 @@
<meta name="og:image" content="favicon.png"> <meta name="og:image" content="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: regular;
src: local('Ubuntu'), url(font/Ubuntu-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: bold;
src: local('Ubuntu'), url(font/Ubuntu-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: regular;
src: local('Ubuntu Mono'), url(font/UbuntuMono-Regular.ttf) format('truetype');
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
min-height: 100%;
} }
body { body {
background: #000; font-family: Ubuntu;
color: #fff; background: linear-gradient(#332a39ff 0%, #020613ff 100%);
color: #FFEBD8;
margin: 0px auto 50px auto; margin: 0px auto 50px auto;
max-width: 1500px; max-width: 1500px;
overflow-x: hidden; overflow-x: hidden;
background-size: cover;
background-attachment: fixed;
} }
main { main {
margin: 0px 10px; margin: 0px 10px;
} }
input { 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; margin: 10px 0px;
} }
a { input, textarea {
color: #00c6ff; background: #241B2B;
color: #FFEBD8;
border: #FFEBD8 4px solid;
border-radius: 3px;
font-size: 110%;
} }
.table { input:focus, textarea:focus {
border-color: #62c1a6;
outline: none;
}
.input-with-label {
display: inline-grid; display: inline-grid;
grid-template-columns: repeat(2, auto); grid-template-columns: auto;
grid-template-rows: repeat(3, auto); grid-template-rows: auto;
} }
.table > * { .input-with-label label {
margin: 5px 7px; margin-left: 7px;
} }
.dynamic_table { .input-with-label label h2 {
width: 100%; margin: 0px;
}
.input-with-label input {
margin-top: 1px;
} }
#preview h2, #preview button { #preview h2, #preview button {
margin-bottom: 5px; margin-bottom: 5px;
} }
.katakana-wrapper {
display: inline-block;
max-width: 100%;
}
.katakana-wrapper summary {
font-size: 18px;
font-weight: 700;
}
.katakana { .katakana {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
display: inline-grid; display: grid;
grid-template-columns: repeat(12, 50px); grid-template-columns: repeat(12, 50px);
grid-template-rows: 50px; grid-template-rows: 50px;
margin-bottom: 20px; grid-gap: 4px;
padding-left: 4px;
padding-bottom: 4px;
} }
.katakana > div { .katakana > div {
/* margin: 7px 7px; */
line-height: 2em; line-height: 2em;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
}
.katakana > div {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
...@@ -71,29 +121,145 @@ ...@@ -71,29 +121,145 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
margin: 0px; margin: -4px;
border-radius: 3px;
background: transparent;
color: #FFEBD8;
box-shadow: 0 0 0 4px #FFEBD8;
} }
.katakana > div > button > span { .katakana > div > button > span {
display: block; display: block;
} }
.color_selector_simple label, .color_selector_gradient label { .container-background {
padding: 0px calc(50% - 20px); background: #241B2B;
margin-left: 10px; margin: 10px -10px;
padding: 10px 10px;
}
.container {
margin: 10px 0px;
}
.container-background > *:first-child, .container > *:first-child {
margin-top: 0px;
}
.container-background > *:last-child, .container > *:last-child {
margin-bottom: 0px;
}
.download-button-container {
grid-column: 2;
}
.download-button-container:last-child {
align-self: end;
}
.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 > h2 {
margin: 5px;
width: calc(100% - 20px);
}
.download-button-container > div {
display: grid;
grid-template-columns: repeat(2, 50%);
padding: 0px;
}
.download-button-container > div > button {
border: none;
margin: 5px;
padding: 5px;
width: calc(100% - 20px);
background: #62c1a6;
font-size: 18px;
}
#preview {
max-width: 1000px;
margin: 0px auto;
}
#preview > div {
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: auto 1fr auto;
width: 100%;
}
#preview_big {
grid-row-start: 1;
grid-row-end: 4;
} }
#preview_big, #preview_small, #preview_big > svg, #preview_small > svg { #preview_big, #preview_small, #preview_big > svg, #preview_small > svg {
display: block; display: block;
width: 100%; width: 100%;
height: fit-content;
}
#selector_color_foreground, #selector_color_background, #selector_animal {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-template-rows: repeat(auto-fit, 40px);
grid-area: box-content;
}
#selector_color_foreground input, #selector_color_background input, #selector_animal input {
display: none;
}
#selector_color_foreground > div, #selector_color_background > div {
width: calc(100% - 10px);
height: 30px;
margin: 5px;
}
#selector_color_foreground label, #selector_color_background label {
padding: 0px 0px 30px 100%;
display: block;
}
#selector_animal label {
display: block;
}
#selector_color_foreground input:checked + label, #selector_color_background input:checked + label, #selector_animal input:checked + label {
border: #FFEBD8 4px solid;
border-radius: 3px;
margin: -5px;
}
#selector_animal {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}
#selector_animal > div {
width: calc(100% - 10px);
margin: 5px;
}
#selector_animal img {
height: auto; height: auto;
width: 100%;
background: #1F1C2A;
margin-bottom: -4px; /* Very hacky, but is needed for some reason */
} }
@media screen and (prefers-color-scheme: light) { @media screen and (prefers-color-scheme: light) {
body { body {
color: #000; color: #0E0E0F;
background: #fff; 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;
} }
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.dynamic_table { .download-button-container:last-child {
grid-template-columns: auto; grid-row: 4;
grid-column: 1;
} }
} }
</style> </style>
...@@ -288,53 +454,109 @@ ...@@ -288,53 +454,109 @@
</head> </head>
<body> <body>
<main> <main>
<h1>Preview</h1> <div class="container">
<div id="preview" class="table dynamic_table"> <h1>logo generator</h1>
<div> </div>
<h2>big</h2> <div id="preview" alt="preview of generated logo">
<button id="download_big_svg">Save big SVG</button> <div class="container-background">
<button id="download_big_png">Save big PNG</button>
<div id="preview_big"></div> <div id="preview_big"></div>
<div id="preview_small"></div>
<div class="download-button-container">
<h2>save small logo</h2>
<div>
<button id="download_small_svg">svg</button>
<button id="download_small_png">png</button>
</div> </div>
</div>
<div class="download-button-container">
<h2>save big logo</h2>
<div> <div>
<h2>small</h2> <button id="download_big_svg">SVG</button>
<button id="download_small_svg">Save small SVG</button> <button id="download_big_png">PNG</button>
<button id="download_small_png">Save small PNG</button> </div>
<div id="preview_small"></div>
</div> </div>
</div> </div>
<h2>Alt text</h2> </div>
<div class="container-background">
<h2>alt text</h2>
<p id="alt_text"></p> <p id="alt_text"></p>
<h1>Options</h1> </div>
<h2>Animal</h2> <div id="selector_color_foreground" class="container" alt="select foreground color of the logo">
<div id="selector_animal"> <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 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 id="selector_animal" class="container" alt="select animal on the logo">
<div> <div>
<input type="radio" id="animal_bunny" name="animal" value="bunny" checked="true"/> <input type="radio" id="animal_bunny" name="animal" value="bunny" checked="true"/>
<label for="animal_bunny">bunny</label> <label for="animal_bunny">
<img alt="bunny" src="img/favicon.svg"/>
</label>
</div> </div>
<div> <div>
<input type="radio" id="animal_maneki-neko" name="animal" value="maneki-neko"/> <input type="radio" id="animal_maneki-neko" name="animal" value="maneki-neko"/>
<label for="animal_maneki-neko">maneki-neko</label> <label for="animal_maneki-neko">
<img alt="maneki-neko Winkekatze" src="img/favicon.svg"/>
</label>
</div> </div>
<div> <div>
<input type="radio" id="animal_creature" name="animal" value="creature"/> <input type="radio" id="animal_creature" name="animal" value="creature"/>
<label for="animal_creature">creature</label> <label for="animal_creature">
<img alt="creature" src="img/favicon.svg"/>
</label>
</div> </div>
<div> <div>
<input type="radio" id="animal_haj" name="animal" value="haj"/> <input type="radio" id="animal_haj" name="animal" value="haj"/>
<label for="animal_haj">haj</label> <label for="animal_haj">
<img alt="haj" src="img/favicon.svg"/>
</label>
</div> </div>
<div> <div>
<input type="radio" id="animal_otter" name="animal" value="otter"/> <input type="radio" id="animal_otter" name="animal" value="otter"/>
<label for="animal_otter">otter</label> <label for="animal_otter">
<img alt="otter" src="img/favicon.svg"/>
</label>
</div> </div>
</div> </div>
<h2>Text</h2> <div class="container">
<div class="table"> <div>
<label for="headline_text">Headline</label> <div class="input-with-label">
<label for="headline_text"><h2>headline</h2></label>
<input type="text" id="headline_text" value="DiVOC"/> <input type="text" id="headline_text" value="DiVOC"/>
</div> </div>
<div> </div>
<div class="container-background katakana-wrapper">
<details open>
<summary>
katakana keyboard
</summary>
<div class="katakana" id="headline_katakana" for="headline_text"> <div class="katakana" id="headline_katakana" for="headline_text">
<div>n</div> <div>n</div>
<div>w</div> <div>w</div>
...@@ -414,12 +636,21 @@ ...@@ -414,12 +636,21 @@
<div><button value="オ"><span>オ</span><span>o</span></button></div> <div><button value="オ"><span>オ</span><span>o</span></button></div>
<div>o</div> <div>o</div>
</div> </div>
</details>
</div> </div>
<div class="table">
<label for="sub_headline_text">Sub headline</label>
<textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
</div> </div>
<div class="container">
<div> <div>
<div class="input-with-label">
<label for="sub_headline_text"><h2>subtitle</h2></label>
<textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
</div>
</div>
<div class="container-background katakana-wrapper">
<details open>
<summary>
katakana keyboard
</summary>
<div class="katakana" id="sub_headline_katakana" for="sub_headline_text"> <div class="katakana" id="sub_headline_katakana" for="sub_headline_text">
<div>n</div> <div>n</div>
<div>w</div> <div>w</div>
...@@ -499,44 +730,7 @@ ...@@ -499,44 +730,7 @@
<div><button value="オ"><span>オ</span><span>o</span></button></div> <div><button value="オ"><span>オ</span><span>o</span></button></div>
<div>o</div> <div>o</div>
</div> </div>
</div> </details>
<h2>Color</h2>
<h3>Foreground acent</h3>
<div id="selector_color_foreground">
<div class="color_selector_simple">
<input type="radio" id="foreground_white" name="foreground_color" value="#FFEBD8"/>
<label for="foreground_white" style="background-color: #FFEBD8;"></label>
</div>
<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>
<h3>Background</h3>
<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, #1f1c2a 0%, #1f1c2a 38%, #00000000 38%, #00000000 42%, #020613 42%, #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, #0b1a26 0%, #0b1a26 38%, #00000000 38%, #00000000 42%, #0d0313 42%, #0b1a26 100%);"></label>
</div> </div>
</div> </div>
</main> </main>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment

Impressum - Datenschutzerklärung