DOCS-211 Add info about how to contribute to documentation (15) (#912)

This PR adds a link to the right side of the docs website which takes the user to the GitHub docs contributing guide.

Author: alina-derkach-oaza

_resourcepdf/overrides/partials/edit.html

@@ -1,11 +1,24 @@
-<div data-banner="data-banner">
-  <div class="actions">
+<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/postgresql-docs/blob/15/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,65 @@
     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;
 }
 
-.edit-page-icon svg {
-  width: 1.40em;
-  height: 1.40em;
-  fill: currentColor;
-  vertical-align: middle;
-}
+/* Inner content stacked vertically */
+.edit-contrib-banner .banner-content {
+  display: flex;
+  flex-direction: column;    /* stack vertically */
+  align-items: center;       /* center horizontally */
+  gap: 0.3rem;             /* 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);
+  }
+  
+  /* 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);
+  }
+