[FEATURE] New styling

composer.json

@@ -90,7 +90,7 @@
 		"symfony/validator": "^7.4",
 		"symfony/web-link": "^7.4",
 		"symfony/yaml": "^7.4",
-		"t3g/symfony-template-bundle": "dev-master",
+		"t3g/symfony-template-bundle": "^6.1",
 		"t3g/symfony-usercentrics-bundle": "^2.0 || dev-master",
 		"twig/extra-bundle": "^3.0",
 		"twig/twig": "^3.0"

config/packages/nelmio_api_doc.yaml

@@ -1,4 +1,6 @@
 nelmio_api_doc:
+  html_config:
+    assets_mode: bundle
   documentation:
     info:
       title: get.typo3.org

config/packages/template.yaml

@@ -1,6 +1,6 @@
 template:
     application:
-        name: 'get.typo3.org'
+        name: 'Get TYPO3'
         platformkey: download
         copyright:
             author: TYPO3 Association
@@ -20,5 +20,4 @@ template:
                 Entry in the register of commerce of the Kanton Zug: CHE‑112.256.297
                 Represented by: Olivier Dobberkau (President)
         theme:
-            use_logo: true
             background: white

public/assets/Css/additions.css

@@ -6,18 +6,26 @@
 .card-inverse {
     background-color: #313131;
     color: #ffffff;
+    --frame-link-color: #ffffff;
+    --frame-link-hover-color: #ffffff;
 }
 
 
-pre {
-    border-radius: 2px;
-    padding: 1rem;
-    background-color: rgba(0,0,0,0.05);
+.no-user-selection {
+    user-select: none;
 }
 
 
-.no-user-selection {
-    user-select: none;
+.elts-version-actions {
+    container-type: inline-size;
+}
+.elts-version-actions .btn {
+    min-width: max-content;
+}
+@container (max-width: 19rem) {
+    .elts-version-actions .btn {
+        width: 100%;
+    }
 }
 
 
@@ -50,7 +58,7 @@ pre {
     padding: 0;
 }
 .changelog .change {
-    font-family: monospace;
+    font-family: 'Source Code Pro', monospace;
 }
 .changelog .change-feature,
 .changelog .change-release {
@@ -62,6 +70,9 @@ pre {
 }
 
 
+.frame .swagger-ui pre.version {
+    overflow: unset;
+}
 .frame .swagger-ui .col {
     width: initial;
 }

src/Twig/Filter/ChangeHighlighter.php

@@ -52,7 +52,7 @@ static function ($matches): string {
                     $cssClass .= ' change-important';
                 }
 
-                return '<li class="change ' . $cssClass . '">' . $matches['content'];
+                return '<li class="pre change ' . $cssClass . '">' . $matches['content'];
             },
             $changeList
         );

templates/default/root.html.twig

@@ -203,11 +203,13 @@
                                         <li>Version: <strong>{{ version.latestRelease.version }}{% if version.latestRelease.elts %} ELTS{% endif %}</strong></li>
                                         <li>Release Date: <strong>{{ version.latestRelease.date|date("Y-m-d") }}</strong></li>
                                     </ul>
-                                    <a href="https://my.typo3.org/*/elts/{{ version.lts }}" class="btn btn-primary">Buy ELTS {{ version.version }}</a>
-                                    <a href="{{ path('version', {'version': version.version}) }}" class="btn btn-light">
-                                        {% if version.latestRelease.elts %}See ELTS{% else %}Get version{% endif %}
-                                        {{ version.version }}
-                                    </a>
+                                    <div class="elts-version-actions d-flex gap-2 flex-wrap">
+                                        <a href="https://my.typo3.org/*/elts/{{ version.lts }}" class="btn btn-primary">Buy ELTS {{ version.version }}</a>
+                                        <a href="{{ path('version', {'version': version.version}) }}" class="btn btn-light">
+                                            {% if version.latestRelease.elts %}See ELTS{% else %}Get version{% endif %}
+                                            {{ version.version }}
+                                        </a>
+                                    </div>
                                 {% else %}
                                     <p>No version available.</p>
                                 {% endif %}