Docs - Docker - style update

Author: SimonMellerin

docs/.vitepress/theme/components/DbToolsBundleFlavorSwitcher.vue

@@ -177,13 +177,10 @@ small {
 }
 
 div[db-tools-flavor] {
-  margin: -15px;
-  margin-top: 25px;
-  margin-bottom: 25px;
-  padding: 15px;
-  border-radius: 6px;
+  margin: 25px -24px;
+  padding: 12px 14px 12px 24px;
   position: relative;
-  background: color-mix(in oklab, var(--db-tools-flavor-color) 4%, transparent);
+  background: color-mix(in oklab, var(--db-tools-flavor-color) 5%, transparent);
 
   &::before {
     display: block;
@@ -196,10 +193,24 @@ div[db-tools-flavor] {
     background-size: 18px 18px;
     background-position: center;
     background-repeat: no-repeat;
-    border-radius: 6px 0 6px 0;
+    border-radius: 0 0 6px 0;
     width: 22px;
     height: 22px;
   }
+
+  @media (min-width: 960px) {
+    margin: 40px -20px 40px -30px;
+    padding: 5px 20px 5px 30px;
+    border-radius: 6px;
+
+    &::before {
+      border-radius: 6px 0 6px 0;
+    }
+  }
+}
+
+.dark div[db-tools-flavor] {
+  border: solid 1px color-mix(in oklab, var(--db-tools-flavor-color) 20%, transparent);;
 }
 
 span[db-tools-flavor] code {
@@ -212,4 +223,8 @@ span[db-tools-flavor] code {
 .vp-doc div[db-tools-flavor] div[class*="language-"] {
   border: solid 1px var(--vp-c-border);
 }
+.dark .vp-doc div[db-tools-flavor] div[class*="language-"] {
+  border: none;
+}
+
 </style>

docs/.vitepress/theme/components/DbToolsBundleHomeImage.vue

@@ -168,6 +168,7 @@ svg {
   svg {
     margin-top: -2rem;
     margin-bottom: -4rem;
+    transform: translateX(32px);
   }
 }
-</style>
+</style>

docs/content/getting-started/flavors.md

@@ -52,10 +52,9 @@ Right after you installed the bundle, and with zero configuration:
 
 *DbToolsBundle* can be used in any CI/CD using its [*Docker* image](https://hub.docker.com/r/makinacorpus/dbtoolsbundle).
 
-Every commands will be accessible with the `docker container run` utility.
+This image is based on [FrankenPHP](https://frankenphp.dev/docs/docker/). Every *DbtoolsBundle* commands can be run with `docker container run` utility.
 
-All configuration can be set up mounting a config file (see [installation section](/getting-started/installation) for an example). This config file uses the exact same syntax as for the
-standalone flavor.
+All configuration can be set up mounting a config file (see [installation section](/getting-started/installation) for an example). This config file uses the exact same syntax as for the standalone flavor.
 
 ## Laravel (experimental) {#laravel}
 

docs/content/getting-started/installation.md

@@ -1,6 +1,6 @@
 # Installation
 
-Installation method will depend on which flavor you want to use:
+Installation method will depend on which [flavor](./flavors.md) you want to use:
 
 <FlavorSwitcher />
 

docs/content/getting-started/introduction.md

@@ -1,6 +1,6 @@
 # DbToolsBundle
 
-**A PHP tool to backup, restore and anonymize databases**
+**A PHP tool to back up, restore and anonymize databases**
 
 <svg version="1.1" style="margin: auto;" viewBox="0 0 162.94769 160.29467" width="244.06895" height="240.08168" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
   <path d="m 64.176019,1.2999481 c -35.25899,0 -62.8806104,16.1131569 -62.8806104,36.6803579 v 62.880614 c 0,20.5672 27.6216204,36.68036 62.8806104,36.68036 35.258991,0 62.880601,-16.11316 62.880601,-36.68036 V 37.980306 c 0,-20.567201 -27.62161,-36.6803579 -62.880601,-36.6803579 z" style="fill:var(--vp-c-bg);fill-opacity:1;stroke:var(--vp-c-bg);stroke-width:2.5999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
@@ -20,6 +20,24 @@ perform frequent database related tasks: backup, restore, anonymize...
 
 <small>*And now for Devops with our [Docker image](https://hub.docker.com/r/makinacorpus/dbtoolsbundle).</small>
 
+## A note about flavors
+
+This library can be used in different contexts:
+
+* as a standalone PHP library utlity
+* as a *Symfony* bundle
+* as a *Docker* image
+* as a *Laravel package* (expiremental)
+
+We call these context "*flavors*". You can change the current flavor from
+the menu in the top left-hand corner.
+
+Most of the content (text and examples) presented on this documentation will change according
+to this selected flavor. Whenever this happens, a visual hint indicates it.
+
+Learn more about *flavors* in the [dedicated section](./flavors.md)
+
+
 ---
 
 This bundle is proudly developed by: