Fix sidebar

docs/_includes/docs/elements/responsive-image.html

@@ -1,8 +1,7 @@
 <img
-  src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
-  srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
-          {{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x,
-          {{ site.url }}/images/{{ include.path }}@3x.{{ include.extension }} 3x"
+  src="{{ site.url }}/assets/images/{{ include.path }}.{{ include.extension }}"
+  srcset="{{ site.url }}/assets/images/{{ include.path }}.{{ include.extension }} 1x,
+          {{ site.url }}/assets/images/{{ include.path }}@2x.{{ include.extension }} 2x"
   alt="{{ include.alt }}"
   width="{{ include.width }}"
   height="{{ include.height }}">

docs/_includes/docs/menu-heading.html

@@ -1,6 +1,8 @@
 <h3 class="bd-menu-heading js-menu-heading">
+  {% if include.icon %}
     <span class="icon">
       <i class="{{ include.icon }}"></i>
     </span>
+  {% endif %}
   <strong>{{ include.label }}</strong>
 </h3>

docs/_includes/docs/menu.html

@@ -62,4 +62,18 @@
     {% include docs/menu-heading.html icon="fa-brands fa-css3" label="CSS Helpers" %}
     {% include docs/menu-list.html category_id="helpers" %}
   </div>
+
+  <div class="bd-menu-section is-sponsr">
+    {% include docs/menu-heading.html label="Sponsor" %}
+    <a class="bd-side-sponsor" href="https://password.link/" target="_blank">
+      {%
+        include docs/elements/responsive-image.html
+        path="amis/passwordlink"
+        extension="png"
+        alt="Password.link"
+        width="332"
+        height="96"
+      %}
+    </a>
+  </div>
 </div>

docs/_includes/docs/side-sponsr.html

@@ -0,0 +1,14 @@
+<div class="bd-side-sponsrs">
+  <p class="bd-side-sponsor-label">Sponsors</p>
+
+  <a class="bd-side-sponsor" href="https://password.link/" target="_blank">
+    {%
+      include docs/elements/responsive-image.html
+      path="amis/passwordlink"
+      extension="png"
+      alt="Password.link"
+      width="332"
+      height="96"
+    %}
+  </a>
+</div>

docs/_sass/docs/menu.scss

@@ -170,3 +170,13 @@
   font-weight: inherit;
   line-height: 1.25rem;
 }
+
+.bd-side-sponsor {
+  display: flex;
+  margin: 0.5rem;
+  margin-top: 0;
+
+  img {
+    border-radius: 0.75rem;
+  }
+}

docs/_sass/home/intro.scss

@@ -63,16 +63,9 @@ $delay: 0.2s;
   animation-delay: $delay * 2;
   animation-name: anim-slow-intro;
   align-self: center;
-  background-color: cv.getVar("scheme-main");
-  border-color: cv.getVar("success-80");
-  box-shadow: 0px 0.25em 0.5em 0px
-    hsla(
-      cv.getVar("success-h"),
-      cv.getVar("success-s"),
-      cv.getVar("success-l"),
-      0.08
-    );
-  color: cv.getVar("success-40");
+  background-color: cv.getVar("success-soft");
+  border: none;
+  color: cv.getVar("success");
   font-size: calc(var(--scale) * 1.25em);
   transform-origin: center;
 

docs/assets/css/website.css

@@ -34941,10 +34941,9 @@ has-background-moon.is-hoverable:active {
   animation-delay: 0.4s;
   animation-name: anim-slow-intro;
   align-self: center;
-  background-color: var(--bulma-scheme-main);
-  border-color: var(--bulma-success-80);
-  box-shadow: 0px 0.25em 0.5em 0px hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 0.08);
-  color: var(--bulma-success-40);
+  background-color: var(--bulma-success-soft);
+  border: none;
+  color: var(--bulma-success);
   font-size: calc(var(--scale) * 1.25em);
   transform-origin: center;
 }
@@ -36854,6 +36853,15 @@ has-background-moon.is-hoverable:active {
   line-height: 1.25rem;
 }
 
+.bd-side-sponsor {
+  display: flex;
+  margin: 0.5rem;
+  margin-top: 0;
+}
+.bd-side-sponsor img {
+  border-radius: 0.75rem;
+}
+
 .bd-notification {
   --bulma-notification-h: var(--bulma-scheme-h);
   --bulma-notification-s: var(--bulma-scheme-s);