Merge pull request #1101 from percona/DOCS-211-8.0

DOCS-211 Add info about how to contribute to documentation (8.0)

Author: rasika-chivate

_resourcepdf/overrides/partials/edit.html

@@ -1,11 +1,24 @@
-<div data-banner="data-banner">
-    <div class="actions">
-        <a href="{{ page.edit_url }}" title="Edit this page on GitHub" class="edit-page-link">
-            <span class="edit-page-icon">
-                {% set icon = config.theme.icon.edit or "material/file-edit-outline" %}
-                {% include ".icons/" ~ icon ~ ".svg" %}
-            </span>
-            <span class="edit-page-text">Edit this page on GitHub</span>
-        </a>
+<div data-banner="data-banner" class="edit-contrib-banner">
+    <div class="banner-content">
+      <!-- Edit link centered -->
+      <a href="{{ page.edit_url }}" title="Edit this page on GitHub" class="edit-page-link">
+        <span class="edit-page-icon">
+          {% set icon = config.theme.icon.edit or "material/file-edit-outline" %}
+          {% include ".icons/" ~ icon ~ ".svg" %}
+        </span>
+        <span class="edit-page-text">Edit this page on GitHub</span>
+      </a>
+  
+      <!-- Divider line -->
+      <div class="banner-divider"></div>
+  
+      <!-- Contributing Guide below, smaller -->
+      <a href="https://github.com/percona/psmdb-docs/blob/8.0/CONTRIBUTING.md"
+         title="Contributing guide"
+         class="contrib-link"
+         target="_blank"
+         rel="noopener">
+        Contributing guide
+      </a>
     </div>
-</div>
+  </div>

docs/css/extra.css

@@ -11,20 +11,51 @@
     line-height: 1.6;
 }
 
-.edit-page-link {
-    white-space: nowrap;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
-    font-size: 1.2rem;
-    font-weight: normal;
-    color: var(--md-typeset-a-color);
-    text-decoration: underline;
-  }
+/* Banner container */
+.edit-contrib-banner {
+  display: flex;
+  justify-content: center;    /* center horizontally */
+  padding: 0.7rem 0;            /* top and bottom spacing of the banner */
+  background-color: transparent;
+}
+
+/* Inner content stacked vertically */
+.edit-contrib-banner .banner-content {
+  display: flex;
+  flex-direction: column;    /* stack vertically */
+  align-items: center;       /* center horizontally */
+  gap: 0.3rem;               /* small vertical gap between elements */
+}
+
+/* Edit link styling */
+.edit-contrib-banner .edit-page-link {
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-size: 1.2rem;
+  font-weight: normal;
+  color: var(--md-typeset-a-color);
+}
 
-  .edit-page-icon svg {
-    width: 1.40em;
-    height: 1.40em;
-    fill: currentColor;
-    vertical-align: middle;
-  }
+/* Icon inside edit link */
+.edit-contrib-banner .edit-page-icon svg {
+  width: 1.4em;
+  height: 1.4em;
+  fill: currentColor;
+  vertical-align: middle;
+}
+
+/* Divider line with small spacing */
+.edit-contrib-banner .banner-divider {
+  width: 40%;                 /* width of the line */
+  border-top: 1px solid var(--md-typeset-a-color);
+  opacity: 0.3;               /* subtle line */
+  margin: 0.2rem 0;           /* smaller space above and below the line */
+}
+
+/* Contributing Guide smaller and below */
+.edit-contrib-banner .contrib-link {
+  font-size: 0.6rem !important;         /* smaller font */
+  color: var(--md-typeset-a-color);
+}