diff --git a/.gitignore b/.gitignore
index d94c4707..a31beee4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ __pycache__/*
**/.idea/
/node_modules/
yarn.lock
+**.css.map
diff --git a/docs/ai_actions/ai_actions.md b/docs/ai_actions/ai_actions.md
index 278d89b2..1aac86f4 100644
--- a/docs/ai_actions/ai_actions.md
+++ b/docs/ai_actions/ai_actions.md
@@ -1,5 +1,6 @@
---
description: Learn about generative AI and its capabilities.
+edition: lts-update
---
# AI Actions
diff --git a/docs/ai_actions/work_with_ai_actions.md b/docs/ai_actions/work_with_ai_actions.md
index 8603cfc1..297fc844 100644
--- a/docs/ai_actions/work_with_ai_actions.md
+++ b/docs/ai_actions/work_with_ai_actions.md
@@ -1,5 +1,6 @@
---
description: Create new AI actions or modify existing ones to work faster and increase creativity.
+edition: lts-update
---
# Work with AI actions
diff --git a/docs/css/custom.css b/docs/css/custom.css
index 49f08523..4464feea 100644
--- a/docs/css/custom.css
+++ b/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):not(.notification__cta a):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);
}
diff --git a/docs/css/navigation.css b/docs/css/navigation.css
index 878dd54e..e8eaaad9 100644
--- a/docs/css/navigation.css
+++ b/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 {
diff --git a/docs/css/pills.css b/docs/css/pills.css
new file mode 100644
index 00000000..67b2c18e
--- /dev/null
+++ b/docs/css/pills.css
@@ -0,0 +1,60 @@
+.pill {
+ font-size: 12px;
+ font-weight: initial;
+ line-height: 18px;
+ padding: 1px 8px;
+ border: 1px solid;
+ margin-right: 8px;
+ color: #A32768;
+}
+.pill--headless {
+ color: #C4234A;
+ border-color: #C4234A;
+}
+.pill--headless::after {
+ content: "Headless";
+}
+.pill--experience {
+ color: #D3822B;
+ border-color: #D3822B;
+}
+.pill--experience::after {
+ content: "Experience";
+}
+.pill--commerce {
+ color: #A32768;
+ border-color: #A32768;
+}
+.pill--commerce::after {
+ content: "Commerce";
+}
+.pill--lts-update {
+ color: #5DA7C0;
+ border-color: #5DA7C0;
+}
+.pill--lts-update::after {
+ content: "LTS Update";
+}
+.pill--new-feature {
+ color: #2C9445;
+ border-color: #2C9445;
+}
+.pill--new-feature::after {
+ content: "New feature";
+}
+.pill--inline:first-of-type {
+ margin-left: 8px;
+}
+.pill--new {
+ margin-right: 15px;
+ align-self: center;
+ color: #d9e8ff;
+ color: #3562a0;
+ text-transform: lowercase;
+}
+
+div.pills {
+ float: right;
+}
+
+/*# sourceMappingURL=pills.css.map */
diff --git a/docs/js/custom.js b/docs/js/custom.js
index cff117b3..27cf450e 100644
--- a/docs/js/custom.js
+++ b/docs/js/custom.js
@@ -24,7 +24,7 @@ $(document).ready(function() {
}
// Add version pill to top of navigation
- $('#site-name').append('' + branchName + '');
+ $('#site-name').append('' + branchName + '');
$('.rst-current-version.switcher__label').html(branchName);
@@ -197,5 +197,5 @@ $(document).ready(function() {
});
// Mark higher-level nodes with "New" pill, not only the actual item
- $('.pill.new:not([hidden])').parents('.md-nav__item').children('label').children('.pill.new[hidden]').removeAttr('hidden');
+ $('.pill--new:not([hidden])').parents('.md-nav__item').children('label').children('.pill--new[hidden]').removeAttr('hidden');
});
diff --git a/docs/snippets/commerce_badge.md b/docs/snippets/commerce_badge.md
index 0aa977a2..94a50a63 100644
--- a/docs/snippets/commerce_badge.md
+++ b/docs/snippets/commerce_badge.md
@@ -1 +1 @@
-
+
diff --git a/docs/snippets/experience_badge.md b/docs/snippets/experience_badge.md
index df97d868..642de515 100644
--- a/docs/snippets/experience_badge.md
+++ b/docs/snippets/experience_badge.md
@@ -1 +1 @@
-
+
diff --git a/docs/snippets/lts-update_badge.md b/docs/snippets/lts-update_badge.md
new file mode 100644
index 00000000..3a63215a
--- /dev/null
+++ b/docs/snippets/lts-update_badge.md
@@ -0,0 +1 @@
+
diff --git a/mkdocs.yml b/mkdocs.yml
index ab456d8e..4a470b07 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -199,6 +199,7 @@ extra_css:
- css/custom.css
- css/page-not-found.css
- css/navigation.css
+ - css/pills.css
- css/search.css
- css/docs.switcher.css
- css/jquery-ui.min.css
diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 00000000..b10c3396
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,23 @@
+$transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+$transition-duration: 0.4s;
+
+$color-primary-main: #A32768;
+
+$color-dark-85-white: #DCDDDE;
+$color-dark-100-white: #FFFFFF;
+
+$color-info-main: #5DA7C0;
+
+$color-success-main: #2C9445;
+
+$color-error-main: #C4234A;
+
+$color-warning-dark-01: #D3822B;
+
+$color-primary: #AE1164;
+
+$color-light: #E0E0E8;
+$color-light-400: #ECECF1;
+
+$color-dark: #131C26;
+$color-dark-400: #71767C;
diff --git a/scss/pills.scss b/scss/pills.scss
new file mode 100644
index 00000000..f0843788
--- /dev/null
+++ b/scss/pills.scss
@@ -0,0 +1,52 @@
+@use 'variables';
+@use 'sass:list';
+
+.pill {
+ font-size: 12px;
+ font-weight: initial;
+ line-height: 18px;
+ padding: 1px 8px;
+ border: 1px solid;
+ margin-right: 8px;
+ color: variables.$color-primary-main;
+
+ $types: (
+ "headless": (variables.$color-error-main, "Headless"),
+ "experience": (variables.$color-warning-dark-01, "Experience"),
+ "commerce": (variables.$color-primary-main, "Commerce"),
+ "lts-update": (variables.$color-info-main, "LTS Update"),
+ "new-feature": (variables.$color-success-main, "New feature")
+ );
+
+ @each $name, $values in $types {
+ $color: list.nth($values, 1);
+ $label: list.nth($values, 2);
+
+ &--#{$name} {
+ color: $color;
+ border-color: $color;
+
+ &::after {
+ content: "#{$label}";
+ }
+ }
+ }
+
+ &--inline {
+ &:first-of-type {
+ margin-left: 8px;
+ }
+ }
+
+ &--new {
+ margin-right: 15px;
+ align-self: center;
+ color: #d9e8ff;
+ color: #3562a0;
+ text-transform: lowercase;
+ }
+}
+
+div.pills {
+ float: right;
+}
diff --git a/theme/main.html b/theme/main.html
index 45fda889..e6777d06 100644
--- a/theme/main.html
+++ b/theme/main.html
@@ -56,10 +56,11 @@
{% if page.meta.edition %}
{% if page.meta.edition == 'commerce' %}
-
+
{% elif page.meta.edition == 'experience' %}
-
-
+
+ {% elif page.meta.edition == 'lts-update' %}
+
{% endif %}
{% endif %}
diff --git a/theme/partials/nav-item.html b/theme/partials/nav-item.html
index c6c67dee..006289ea 100644
--- a/theme/partials/nav-item.html
+++ b/theme/partials/nav-item.html
@@ -7,7 +7,7 @@
{% set checked = "checked" if nav_item.active %}