diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000000000000000000000000000000000000..9139acc32a4b030a10ed0cb04ecb9a3f24ad71d1 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "device-pictures"] + path = device-pictures + url = https://github.com/freifunk/device-pictures.git diff --git a/app.css b/app.css index 613538533011f54497e9b1f1f95f7dbd9cb9d2b6..2c28310ec5d9ef4af928463f7ebf9c329c961eb7 100644 --- a/app.css +++ b/app.css @@ -1,15 +1,31 @@ * { box-sizing: border-box; + + --background-color: white; + --text-color: #333; + --table-alternate-color: #f9f9f9; + --background-color-attribution: rgba(255, 255, 255, 0.8); +} + +@media (prefers-color-scheme: dark) { + * { + --background-color: #333333; + --text-color: #cccccc; + --table-alternate-color: #444; + --background-color-attribution: rgba(51, 51, 51, 0.8); + } } + + body { margin: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42; - color: #333; - background-color: #fff; + color: var(--text-color); + background-color: var(--background-color); overflow-y: scroll; } @@ -68,11 +84,11 @@ h1, h2, h3, h4, h5, h6 { position: sticky; top: 0; z-index: 1; - background: #fff; + background: var(--background-color); } .table-striped > tbody > tr:nth-of-type(2n+1) { - background-color: #f9f9f9; + background-color: var(--table-alternate-color); } .table td, th { @@ -95,7 +111,7 @@ h1, h2, h3, h4, h5, h6 { bottom: 0; margin: 0; padding: 0.5em; - background: rgba(255, 255, 255, 0.8); + background: var(--background-color-attribution); } #branchName { @@ -230,7 +246,7 @@ h1, h2, h3, h4, h5, h6 { font: inherit; color: inherit; margin-bottom: .5em; - background: #fff; + background: var(--background-color); border: none; border: 1px solid #ddd; box-shadow: 1px 2px 2px 0 #ccc; @@ -262,7 +278,7 @@ h1, h2, h3, h4, h5, h6 { display: inline-block; list-style-type: none; font: inherit; - color: black; + color: var(--text-color); margin: .5em; padding: .5em 1em; border: none; @@ -272,7 +288,7 @@ h1, h2, h3, h4, h5, h6 { } #wizard .btn:hover { - color: black; + color: var(--text-color); } #wizard .imagePreview { @@ -309,7 +325,7 @@ h1, h2, h3, h4, h5, h6 { min-height: 11em; margin: 0.5em; padding: 0.5em; - border: 1px solid white; + border: 1px solid var(--background-color); text-align: center; } diff --git a/app.js b/app.js index 64824680a4bc931f00db213eef7517184b79fd13..92e9c08bcf091e515685936cedffe7bb1b815c7e 100644 --- a/app.js +++ b/app.js @@ -503,7 +503,7 @@ var firmwarewizard = function() { 'version': version, 'location': location, 'size': size, - 'preview': preview+".jpg", + 'preview': preview+".svg", 'category': device.category }); } @@ -699,7 +699,7 @@ var firmwarewizard = function() { } function setDefaultImg(e) { - fallbackImg = PREVIEW_PICTURES_DIR+'no_picture_available.jpg'; + fallbackImg = PREVIEW_PICTURES_DIR+'no_picture_available.svg'; if (e.target.src.indexOf(fallbackImg) == -1) { e.target.src = fallbackImg; } diff --git a/config.js b/config.js index 515b68b75029482e83887a2b54903529690b26e9..09fd4ced767473ec1f9f5862089057502f2e8df2 100644 --- a/config.js +++ b/config.js @@ -59,7 +59,7 @@ var config = { // experimental branches (show a warning for these branches) experimental_branches: ['experimental', 'nightly'], // path to preview pictures directory - preview_pictures: 'pictures/', + preview_pictures: 'device-pictures/pictures-svg/', // link to changelog changelog: 'https://wiki.freifunk-stuttgart.net/technik:software:gluon:firmwareversionen_milestones' }; diff --git a/device-pictures b/device-pictures new file mode 160000 index 0000000000000000000000000000000000000000..36efe11f39b714a6377ada377da74e2c3a751008 --- /dev/null +++ b/device-pictures @@ -0,0 +1 @@ +Subproject commit 36efe11f39b714a6377ada377da74e2c3a751008 diff --git a/ffs-logo_weiss.png b/ffs-logo_weiss.png new file mode 100644 index 0000000000000000000000000000000000000000..0952eaf1a0c086a942468f123b126b832b4f5e47 Binary files /dev/null and b/ffs-logo_weiss.png differ diff --git a/index.html b/index.html index cf923ca7a21ef552eaa8f125fa359e6a5e1d7fbe..3fec7b5b7899a4cb29c5bb5bc946584e9f7f38ba 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,10 @@ </div> <div id="wizard"> <div class="center"> - <a href="./index.html"><img src="./ffs-logo.png" class="center"></a> + <a href="./index.html"><picture> + <source srcset="ffs-logo_weiss.png" media="(prefers-color-scheme: dark)"> + <img id="logo" src="./ffs-logo.png" class="center"> + </picture></a> </div> <div class="pane-wrapper"> <div id="model-pane" class="pane">