diff --git a/content/_index.md b/content/_index.md index fcc15db..2fcf0af 100644 --- a/content/_index.md +++ b/content/_index.md @@ -11,3 +11,11 @@ draft: true {{< rawhtml >}} {{< /rawhtml >}} + +{{< details title="Details" >}} + +This video features Influenca from the [Inconvenient EP](music/inconvenient-ep/), free to download and also available via: + +[![Funkwhale Logo](img/funkwhale_logo.svg)](https://open.audio/library/albums/19811/) + +{{< /details >}} diff --git a/content/docs/graphics/logo-design/_index.md b/content/docs/graphics/logo-design/_index.md new file mode 100644 index 0000000..721bb8d --- /dev/null +++ b/content/docs/graphics/logo-design/_index.md @@ -0,0 +1,121 @@ +--- +title: 'Logo Design' +date: 2024-01-27T20:13:10+01:00 +draft: true +--- + +I'm not that much into graphics design and this is not supposed to be a full +tutorial on how to create a logo. However, I'd like to share my experiences with +[Inkscape](https://inkscape.org/) and [GIMP](https://www.gimp.org/) for creating +the logo and favicon of this site. + +## Getting inspired + +First of all I inspect other logo designs by searching for vector images using +the terms `music` and `logo` in the [Pixabay](https://pixabay.com/) community. + +{{< icon "link" >}} URL: https://pixabay.com/vectors/search/music%20logo/ + +The idea of using notes appeals to me and as I also want to convey the spirit of +[FLOSS](https://fsfe.org/freesoftware/comparison.en.html) I need to extend it by +something that represents its characteristics. I remember that in the logo of +the Gitea fork [Forgejo](https://forgejo.org/) the letter `F` is shown as a +forking path and want to combine it with notes. + +## Creating shapes + +I run Inkscape and create a new document from template (``) and +choose *Icon 512x512* in the *Others* tab. Using the rectangle and ellipse tool +I create the note head, stem and flag by scaling and rotation. Learn more about +[shapes](https://inkscape.org/doc/tutorials/shapes/tutorial-shapes.html) in the +official tutorial. + +![Inkscape rotate object](inkscape-rotate-object.png) + +To indicate the fork at the top of second note's flag an ellipse without filling +is used. For the purpose of recognizing the note head and fork symbol as unit I decide to also leave out the filling of the note head making it a half note. +This decision is reflected in the colorization of the elements, too. The colors +are selected in the *fill and stroke* dialog of the object menu explained in the +[basic](https://inkscape.org/doc/tutorials/basic/tutorial-basic.html) tutorial. +Finally, adjusting the *z-order* of the objects creates the layering. + +Before saving the document as [SVG](https://en.wikipedia.org/wiki/SVG), useful +meta data can be added by opening the document settings (``) and +selecting the *Meta data* tab. Additionally, the *License* tab allows to +integrate URLs and the license deed and granted rights. Besides saving this file +for further editing, I use the export dialog (``) to create a +*Plain SVG* file leaving out Inkscape specific meta data which supports to +decrease the file size. + +## Serving diversity + +The shapes of the logo are simple and recognizable. Thus, it can be perfectly +used as [favicon](https://en.wikipedia.org/wiki/Favicon) for the website. Though +recent browsers and devices can render SVG files for this resource, it's good +practice to serve other file types. Consequently, the last step is to convert +(and if necessary scale) the SVG file to support older browsers and devices. + +I open the SVG file in GIMP and confirm the dialog to render the Scalable Vector +Graphics using default settings. Depending on the target file type and device I [scale](https://docs.gimp.org/en/gimp-image-scale.html) the image and convert it +via the [export dialog](https://docs.gimp.org/en/gimp-export-dialog.html) using +the dimensions (in pixels) and file types shown in the table. + +| Dimensions | File type | Additional info | +|------------|-----------|-----------------| +| 512 x 512 | PNG | | +| 192 x 192 | PNG | | +| 180 x 180 | PNG | Apple devices | +| 48 x 48 | ICO | 32 bpp, 8-bit alpha, no palette settings | +| 32 x 32 | PNG | | +| 16 x 16 | PNG | | + +You can also use Inkscape on the terminal to create these files: + +```bash +inkscape --export-width=512 --export-filename="android-chrome-512x512.png" logo.svg +inkscape --export-width=192 --export-filename="android-chrome-192x192.png" logo.svg +inkscape --export-width=180 --export-filename="apple-touch-icon.png" logo.svg +inkscape --export-width=32 --export-filename="favicon-32x32.png" logo.svg +inkscape --export-width=16 --export-filename="favicon-16x16.png" logo.svg +``` + +The file `favicon.ico` is created via Inkscape and the `convert` command of the +[ImageMagick](https://imagemagick.org/) tool suite: + +```bash +inkscape --export-width=48 --export-filename="favicon-tmp.png" logo.svg +convert favicon-tmp.png favicon.ico +rm favicon-tmp.png +``` + +## Adding a manifest + +For a [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app) +(PWA) create a [manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) +file. At least provide the following values to serve different icon sizes and +change `` to fit your needs: + +```json {filename="site.webmanifest"} +{ + "name": "", + "start_url": "index.html", + "display": "standalone", + "icons": [ + { + "src": "android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} +``` +The [icons](https://developer.mozilla.org/en-US/docs/Web/Manifest/icons) array +contains the images to be used when integrated as an app in the target OS. +Learn more about the members in the manifest file and best practices for +[PWAs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) in the +MDN Web Docs. diff --git a/content/docs/graphics/logo-design/inkscape-rotate-object.png b/content/docs/graphics/logo-design/inkscape-rotate-object.png new file mode 100644 index 0000000..a404803 --- /dev/null +++ b/content/docs/graphics/logo-design/inkscape-rotate-object.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:457bd0df73b75d6e36c96161e7c19e1180aa7660321f356cf4dce16f3b871342 +size 37478 diff --git a/hugo.yaml b/hugo.yaml index 6421a1b..cd8741f 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -3,6 +3,16 @@ languageCode: en-us title: this.ven theme: hextra +params: + navbar: + displayTitle: true + displayLogo: true + logo: + path: img/logo.svg + link: / + width: 64 + height: 64 + menu: main: - name: About diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png new file mode 100644 index 0000000..63c820b --- /dev/null +++ b/static/android-chrome-192x192.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b6de2be492d7c6c1ce3dc892f0b01357c37473ac4a8e13ab68fe364fb9fc636b +size 4268 diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png new file mode 100644 index 0000000..81588bd --- /dev/null +++ b/static/android-chrome-512x512.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cb80de6a12955f926960b7d58d978d10076518006934d5a520228bde87eca794 +size 12272 diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png new file mode 100644 index 0000000..1c7f0ac --- /dev/null +++ b/static/apple-touch-icon.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a63bd1d7898356c5b0458b9c0fa483d4d2864dc4f8b6b95e772088fb269a59f8 +size 3977 diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png new file mode 100644 index 0000000..09f27e7 --- /dev/null +++ b/static/favicon-16x16.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:81ea29aac640573189927dc5eeeae75b5077dd3c0edcb6f79978b2934d85a7ba +size 352 diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png new file mode 100644 index 0000000..66f2573 --- /dev/null +++ b/static/favicon-32x32.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4ac5660642cdeaf09023d7e514eeacc6ec00a74faaccce704ddce58d93e790f3 +size 632 diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..531095a --- /dev/null +++ b/static/favicon.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:acf008bd4b787da3fd2f224675c453b7e7abef57fb47fa5553da81b4b1449493 +size 9662 diff --git a/static/favicon.svg b/static/favicon.svg new file mode 100644 index 0000000..4e6878b --- /dev/null +++ b/static/favicon.svg @@ -0,0 +1,104 @@ + + + + + Forking notes + + + + + + + + + + + + + 2024-01-27 + + + this.ven + + + + + Creative Commons BY-SA 4.0 Intl. + + + + Forking notes + + + + + + + + + + + + diff --git a/static/img/funkwhale_logo.svg b/static/img/funkwhale_logo.svg new file mode 100644 index 0000000..63e3b03 --- /dev/null +++ b/static/img/funkwhale_logo.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/logo.svg b/static/img/logo.svg new file mode 100644 index 0000000..4e6878b --- /dev/null +++ b/static/img/logo.svg @@ -0,0 +1,104 @@ + + + + + Forking notes + + + + + + + + + + + + + 2024-01-27 + + + this.ven + + + + + Creative Commons BY-SA 4.0 Intl. + + + + Forking notes + + + + + + + + + + + + diff --git a/static/site.webmanifest b/static/site.webmanifest new file mode 100644 index 0000000..4371540 --- /dev/null +++ b/static/site.webmanifest @@ -0,0 +1,20 @@ +{ + "name": "this.ven", + "short_name": "this.ven", + "start_url": "index.html", + "icons": [ + { + "src": "android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#000000", + "background_color": "#000000", + "display": "standalone" +} \ No newline at end of file