Merge pull request #38 from ita-design-system/develop

v0.11.0

Author: olivier3lanc

_includes/libdoc_before_html.liquid

@@ -92,3 +92,18 @@
 {%- assign tag_to_replace = '<' | append: libdocSystem.navigationOptions.listElement | append: '>' -%}
 {%- assign tag_replacement = '<' | append: libdocSystem.navigationOptions.listElement | append: ' class="d-flex fd-column fg-1 order-1 | m-0 pl-5 o-hidden | ls-none">' -%}
 {%- assign eleventyNavigationMenu = eleventyNavigationMenu | replace: tag_to_replace, tag_replacement -%}
+
+{% comment %} header margin {% endcomment %}
+{%- assign headerMargin = 'mb-7' -%}
+{%- if pageUrlSplit[1] == 'tags' -%}
+    {%- assign headerMargin = '' -%}
+{%- endif -%}
+{%- if pageUrlSplit[1] == libdocConfig.blogSlug and pageUrlSplit[2] == null -%}
+    {%- assign headerMargin = '' -%}
+{%- endif -%}
+
+{% comment %} header padding {% endcomment %}
+{%- assign headerPadding = '' -%}
+{%- if pageUrlSplit[1] != 'tags' and pageUrlSplit[1] != libdocConfig.blogSlug and pageUrlSplit[2] != null -%}
+    {%- assign headerPadding = 'pb-7' -%}
+{%- endif -%}

_includes/libdoc_page.liquid

@@ -276,7 +276,7 @@
         <main class="pos-relative"
             w-100-minus-sidebar="md"
             w-100="xs,sm">
-            <header class="d-flex fd-column | pt-5 {% if pageUrlSplit[1] != 'tags' and pageUrlSplit[1] != libdocConfig.blogSlug %}pb-7{% endif %}">
+            <header class="d-flex fd-column | pt-5 {{ headerPadding }} {{ headerMargin }}">
                 <nav class="d-flex jc-space-between | pos-relative">
                     {% include 'libdoc_breadcrumb' %}
                     <details id="user_preferences">

core/assets/css/ds__defaults.css

@@ -708,8 +708,8 @@ main > aside > iframe {
 main .alert {
     font-variation-settings: "wght" 400, "slnt" 0, "CASL" 0, "CRSV" 0;
     padding: var(--ita-spacings-3) var(--ita-spacings-5);
-    border-left-style: solid;
-    border-left-width: 3px;
+    border-left-style: dashed;
+    border-left-width: 1px;
     font-size: var(--ita-fontSizes-4);
     letter-spacing: -0.01em;
     line-height: 1.6em;
@@ -722,7 +722,7 @@ main .alert[data-title]::before {
     text-transform: uppercase;
     font-size: var(--ita-fontSizes-3);
     padding-bottom: var(--ita-spacings-1);
-    border-bottom-style: solid;
+    border-bottom-style: dashed;
     border-bottom-width: 1px;
 }
 /* SEARCH OCCURRENCES */
@@ -796,6 +796,9 @@ main .__search-occurrence {
 #toc_main li {
     break-inside: avoid;
 }
+#toc_main li a {
+    text-decoration-color: var(--ita-colors-primary-300);
+}
 
 /* SANDBOX */
 .sandbox {
@@ -1039,6 +1042,7 @@ input[type="radio"] ~ label::before {
     #floating_toc_container,
     #toc_main,
     #sidebar,
+    #user_preferences,
     main h1 a,
     main h2 a,
     main h3 a,

core/assets/js/ui.js

@@ -497,7 +497,7 @@ const libdocUi = {
                 floatingTocMarkup += `
                     <li>
                         <a  href="${headingReference}"
-                            class="d-flex | pl-5 pr-5 | fs-4 lsp-3 lh-5 fvs-wght-500 | c-primary-500 blwidth-1 blstyle-dashed bcolor-primary-300"
+                            class="d-flex | pl-5 pr-5 | fs-3 lsp-3 lh-5 fvs-wght-400 td-none | c-primary-500 blwidth-1 blstyle-dashed bcolor-primary-300"
                             pt-2="md"
                             pb-2="md"
                             pt-1="xs,sm"

core/libdoc_tags.liquid

@@ -18,9 +18,7 @@ date: false
         {% for tag in collections.myTags %}
             {% assign tagName = tag[0] %}
             {% assign tagCount = tag[1] %}
-            <li class="d-flex jc-space-between"
-                ai-center="sm,md"
-                ai-end="xs"
+            <li class="d-flex jc-space-between ai-center"
                 gap-5="sm,md"
                 gap-3="xs">
                 <a  href="/tags/{{ tagName }}/"
@@ -34,8 +32,9 @@ date: false
                     <span class="icon-tag-simple"></span>
                     <span class="o-hidden | to-ellipsis">{{ tagName }}</span>
                 </a>
-                <p class="d-flex | m-0 | lh-1"
+                <p  class="d-flex | m-0 | lh-1"
                     fd-column="xs"
+                    ai-center="sm,md"
                     gap-5="sm,md">
                     <span class="fs-2 ws-nowrap"
                         fs-1="xs">
@@ -46,7 +45,18 @@ date: false
                             {{ libdocMessages.pages[libdocConfig.lang] | downcase }}
                         {% endif %}
                     </span>
-                    <span class="d-flex gap-1"
+                    <span class="pl-10 pr-10 pt-2 | brad-3 bwidth-1 bstyle-solid bcolor-primary-500"
+                        pl-7="xs"
+                        pr-7="xs"
+                        pt-1="xs"
+                        style="
+                        background: linear-gradient( 
+                            90deg, 
+                            var(--ita-colors-primary-500) 0%, 
+                            var(--ita-colors-primary-500) calc(100% * {{ tagCount }} / {{ highestBound }}), 
+                            var(--ita-colors-primary-200) calc(100% * {{ tagCount }} / {{ highestBound }})">
+                    </span>
+                    {% comment %} <span class="d-flex gap-1"
                         style="background: text linear-gradient( 
                         90deg, 
                         var(--ita-colors-primary-500) 0%, 
@@ -57,7 +67,7 @@ date: false
                         <span class="icon-star-fill" style="color:transparent"></span>
                         <span class="icon-star-fill" style="color:transparent"></span>
                         <span class="icon-star-fill" style="color:transparent"></span>
-                    </span>
+                    </span> {% endcomment %}
                 </p>
             </li>
         {% endfor %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-libdoc",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "An Eleventy starter project to craft slick and responsive documentation",
   "main": "index.js",
   "scripts": {