Unified pills and headers across Documentation (#2705)

* Adjusted header size everywhere

* Extracted pill styling

* Unified header with release notes

* Added LTS update badhe

* Added default color for pill - latest pill on homepage

* New pill changes

* Selfreview

* New pill colors in PHP API ref

* Fixed inline styling

* Review fixes

Author: mnocon

.gitignore

@@ -9,3 +9,4 @@ tools/php-cs-fixer/vendor
 node_modules/
 .yarn
 yarn.lock
+docs/css/*.map

docs/ai_actions/ai_actions.md

@@ -1,6 +1,7 @@
 ---
 description: AI Actions help editors by automating repetitive tasks.
 page_type: landing_page
+edition: lts-update
 month_change: false
 ---
 

docs/ai_actions/ai_actions_guide.md

@@ -1,5 +1,6 @@
 ---
 description: AI Actions LTS update helps editors by automating repetitive tasks.
+edition: lts-update
 month_change: true
 ---
 

docs/ai_actions/extend_ai_actions.md

@@ -1,5 +1,6 @@
 ---
 description: Extend AI Actions by connecting to other services and adding new capabilities.
+edition: lts-update
 month_change: false
 ---
 

docs/ai_actions/install_ai_actions.md

@@ -1,5 +1,6 @@
 ---
 description: Install the AI Actions LTS update.
+edition: lts-update
 month_change: true
 ---
 

docs/api/event_reference/ai_action_events.md

@@ -1,6 +1,7 @@
 ---
 description: Events that are triggered when working with AI actions.
 page_type: reference
+edition: lts-update
 month_change: false
 ---
 

docs/api/php_api/php_api_reference/css/base.css

@@ -199,7 +199,8 @@ html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:n
     --mid-grey: rgb(201,201,208);
     --dark-grey: rgb(151,151,151);
 
-    
+    --color-warning-dark-01: rgb(211,130,43);
+    --color-primary-main: rgb(163,39,104);
     --caution-border: var(--ibexa-orange);
     --note-border: var(--mid-grey);
     --enterprise-border: var(--ibexa-jazzberry);
@@ -700,7 +701,6 @@ div.pills {
 }
 
 .pill {
-    background-color: var(--ibexa-jazzberry);
     border-radius: 2.18px;
     padding: 3px 8px;
     color: var(--white);
@@ -713,23 +713,26 @@ div.pills {
 }
 
 .experience-pill {
-    background-color: var(--ibexa-orange);
+    color: var(--color-warning-dark-01);
+    border: 1px solid var(--color-warning-dark-01);
 }
 
 .commerce-pill::after {
     content: "Commerce";
 }
 
 .commerce-pill {
-    background-color: var(--ibexa-jazzberry);
+    color: var(--color-primary-main);
+    border: 1px solid var(--color-primary-main);
 }
 
 .optional-pill::after {
     content: "Optional";
 }
 
 .optional-pill {
-    background-color: var(--sherpa-blue);
+    color: var(--sherpa-blue);
+    border: 1px solid var(--sherpa-blue);
 }
 
 .md-clipboard:focus, .md-clipboard:hover {
@@ -1631,21 +1634,6 @@ ul.breadcrumbs li.breadcrumb-item-current span {
     background-color: transparent;
 }
 
-.md-typeset .content-header .experience-pill {
-    color: var(--ibexa-orange);
-    border: 1px solid var(--ibexa-orange);
-}
-
-.md-typeset .content-header .commerce-pill {
-    color: var(--ibexa-jazzberry);
-    border: 1px solid var(--ibexa-jazzberry);
-}
-
-.md-typeset .content-header .optional-pill {
-    color: var(--sherpa-blue);
-    border: 1px solid var(--sherpa-blue);
-}
-
 .md-typeset .content-header img {
     display: inline-block;
     margin-bottom: -2px;

docs/api/php_api/php_api_reference/css/template.css

@@ -290,7 +290,8 @@
     --mid-grey: rgb(201,201,208);
     --dark-grey: rgb(151,151,151);
 
-    
+    --color-warning-dark-01: rgb(211,130,43);
+    --color-primary-main: rgb(163,39,104);
     --caution-border: var(--ibexa-orange);
     --note-border: var(--mid-grey);
     --enterprise-border: var(--ibexa-jazzberry);
@@ -791,7 +792,6 @@ div.pills {
 }
 
 .pill {
-    background-color: var(--ibexa-jazzberry);
     border-radius: 2.18px;
     padding: 3px 8px;
     color: var(--white);
@@ -804,23 +804,26 @@ div.pills {
 }
 
 .experience-pill {
-    background-color: var(--ibexa-orange);
+    color: var(--color-warning-dark-01);
+    border: 1px solid var(--color-warning-dark-01);
 }
 
 .commerce-pill::after {
     content: "Commerce";
 }
 
 .commerce-pill {
-    background-color: var(--ibexa-jazzberry);
+    color: var(--color-primary-main);
+    border: 1px solid var(--color-primary-main);
 }
 
 .optional-pill::after {
     content: "Optional";
 }
 
 .optional-pill {
-    background-color: var(--sherpa-blue);
+    color: var(--sherpa-blue);
+    border: 1px solid var(--sherpa-blue);
 }
 
 .md-clipboard:focus, .md-clipboard:hover {

docs/content_management/data_migration/importing_data.md

@@ -346,7 +346,7 @@ You can also update attributes, including changing which attribute group they be
 
 You can't change the attribute type of an existing attribute.
 
-##### Date and time attributes
+##### Date and time attributes [[% include 'snippets/lts-update_badge.md' %]]
 
 If you're using attributes of the [date and time type](date_and_time.md), you can manage it through the migrations as well, for example:
 
@@ -487,7 +487,7 @@ When updating a content type, use:
 [[= include_file('code_samples/data_migration/examples/update_tag.yaml') =]]
 ```
 
-### AI action configurations
+### AI action configurations [[% include 'snippets/lts-update_badge.md' %]]
 
 - The following example shows how you can create a new action configuration in your system:
 

docs/css/custom.css

@@ -152,32 +152,41 @@ body {
 .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
     color: var(--ibexa-dusk-black);
     line-height: 1;
+    display: flex;
+    align-items: center;
+    text-align: center;
 }
 
 .md-typeset h1 {
     margin: 0 0 1rem;
-    font-size: 34px;
+    font-size: 24px;
+    line-height: 34px;
 }
 
 .md-typeset h2 {
-    font-size: 28px;
+    font-size: 20px;
+    line-height: 27px;
 }
 
 .md-typeset h3 {
-    font-size: 24px;
+    font-size: 18px;
+    line-height: 22px;
 }
 
 .md-typeset h4 {
-    font-size: 22px;
+    font-size: 16;
+    line-height: 19px;
 }
 
 .md-typeset h5 {
-    font-size: 18px;
+    font-size: 14px;
+    line-height: 18px;
     text-transform: none;
 }
 
 .md-typeset h6 {
-    font-size: 16px;
+    font-size: 12px;
+    line-height: 18px;
 }
 
 .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
@@ -546,35 +555,6 @@ a.external:not(.card):after {
     padding: 0;
 }
 
-div.pills {
-    float: right;
-}
-
-.pill {
-    background-color: var(--ibexa-jazzberry);
-    border-radius: 2.18px;
-    padding: 3px 8px;
-    color: var(--white);
-    font-size: 10px;
-    font-weight: 500;
-}
-
-.experience-pill::after {
-    content: "Experience";
-}
-
-.experience-pill {
-    background-color: var(--ibexa-orange);
-}
-
-.commerce-pill::after {
-    content: "Commerce";
-}
-
-.commerce-pill {
-    background-color: var(--ibexa-jazzberry);
-}
-
 .md-clipboard:focus, .md-clipboard:hover {
   color: var(--ibexa-jazzberry);
 }

docs/css/navigation.css

@@ -142,13 +142,6 @@
     padding-bottom: 0.5rem;
 }
 
-.md-nav__link .pill.new {
-    margin-right: 15px;
-    background-color: #d9e8ff;
-    color: #3562a0;
-    text-transform: lowercase;
-}
-
 .md-nav__link::after {
     font-weight: 700;
 }
@@ -302,6 +295,8 @@
     padding: 1rem 0.8rem;
     border-bottom: 1px solid var(--mid-grey);
     background: white;
+    display: flex;
+    align-items: center;
 }
 
 .push {