Unified pills and headers

Author: mnocon

.gitignore

@@ -5,3 +5,4 @@ __pycache__/*
 **/.idea/
 /node_modules/
 yarn.lock
+**.css.map

docs/ai_actions/ai_actions.md

@@ -1,5 +1,6 @@
 ---
 description: Learn about generative AI and its capabilities.
+edition: lts-update
 ---
 
 # AI Actions

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

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);
 }

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 {

docs/css/pills.css

@@ -24,7 +24,7 @@ $(document).ready(function() {
     }
 
     // Add version pill to top of navigation
-    $('#site-name').append('<span class="pill">' + branchName + '</span>');
+    $('#site-name').append('<span class="pill pill--inline">' + branchName + '</span>');
 
     $('.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');
 });

docs/js/custom.js

@@ -1 +1 @@
-<span class="pill commerce-pill"></span>
+<span class="pill pill--inline pill--commerce"></span>

docs/snippets/commerce_badge.md

@@ -1 +1 @@
-<span class="pill experience-pill"></span>
+<span class="pill pill--inline pill--experience"></span>

docs/snippets/experience_badge.md

@@ -0,0 +1 @@
+<span class="pill pill--inline pill--lts-update"></span>

docs/snippets/lts-update_badge.md

@@ -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

mkdocs.yml

@@ -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;

scss/_variables.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;
+}

scss/pills.scss

@@ -56,10 +56,11 @@
           {% if page.meta.edition %}
             <div class="pills">
             {% if page.meta.edition == 'commerce' %}
-                <span class="pill commerce-pill"></span>
+              <span class="pill pill--commerce"></span>
             {% elif page.meta.edition == 'experience' %}
-                <span class="pill experience-pill"></span>
-                <span class="pill commerce-pill"></span>
+              <span class="pill pill--experience"></span><span class="pill pill--commerce"></span>
+            {% elif page.meta.edition == 'lts-update' %}
+            <span class="pill pill--lts-update"></span>
             {% endif %}
             </div>
           {% endif %}

theme/main.html

@@ -7,7 +7,7 @@
     {% set checked = "checked" if nav_item.active %}
     <input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
     <label class="md-nav__link level-{{ level }}" for="{{ path }}">
-      {{ nav_item.title }} <span class="pill new" hidden>New</span>
+      {{ nav_item.title }} <span class="pill pill--new" hidden>New</span>
     </label>
     <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
       <label class="md-nav__link-title md-nav__link level-{{ level }}" for="{{ path }}">
@@ -37,7 +37,7 @@
     {% endif %}
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }} md-nav__link--active">
       {{ nav_item.title }}
-      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
+      {% if nav_item.meta.month_change %}<span class="pill pill--new">New</span>{% endif %}
     </a>
     {% if toc | first is defined %}
       {% include "partials/toc.html" %}
@@ -47,7 +47,7 @@
   <li class="{{ class }}">
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }}">
       {{ nav_item.title }}
-      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
+      {% if nav_item.meta.month_change %}<span class="pill pill--new">New</span>{% endif %}
     </a>
   </li>
 {% endif %}