Merge pull request #502 from SpineEventEngine/docs-structure

Prepare structure for documentation

Author: JuliaEvseeva

_hugo-site/assets/js/main.js

@@ -25,3 +25,4 @@
  */
 
 import './modules/navbar/navbar';
+import './modules/go-top-button';

_hugo-site/assets/scss/base/_reset.scss renamed to _hugo-site/assets/js/modules/go-top-button.js

@@ -1,4 +1,4 @@
-/*!
+/*
  * Copyright 2025, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,73 +24,35 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, figure,
-a, abbr, acronym, address, big, cite,
-del, dfn, em, font, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-  border: 0;
-  font-family: inherit;
-  font-size: 100%;
-  font-style: inherit;
-  font-weight: inherit;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
+'use strict';
 
-:focus {
-  outline: 0;
-}
-
-body {
-  background: #FFF;
-  line-height: 1;
-}
-
-ol,
-ul {
-  list-style: none;
-}
-
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-caption,
-th,
-td {
-  font-weight: normal;
-  text-align: left;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-}
-
-blockquote,
-q {
-   quotes: "" "";
-}
-
-a img {
-  border: 0;
-}
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-a,
-a:hover {
-  text-decoration: none;
-}
+/**
+ * Scrolls the content to the top of the page on the “Go to top” button click.
+ *
+ * <p>The button will be shown if the content will be too long.
+ */
+$(function () {
+    const $goTopButton = $('#go-top-button');
+    if (!$goTopButton || !$goTopButton.length) return;
+
+    /**
+     * Shows the button when the user scrolls down more than 300 pixels.
+     */
+    $(window).on('scroll', function() {
+        if ($(this).scrollTop() > 300) {
+            $goTopButton.fadeIn();
+        } else {
+            $goTopButton.fadeOut();
+        }
+    });
+
+    /**
+     * Scrolls the content to top with the animation effect on the button click.
+     */
+    $goTopButton.on('click', function() {
+        $('html, body').animate({
+            scrollTop: 0
+        }, 300);
+        return false;
+    });
+});

_hugo-site/assets/scss/base/_common.scss

@@ -27,6 +27,7 @@
 .intro-section {
   padding-top: 40px;
   padding-bottom: 48px;
+
   @media (max-width: $tablet) {
     padding-top: 32px;
     padding-bottom: 32px;
@@ -64,106 +65,10 @@
 }
 
 .content-with-fixed-header {
-  margin-top: $page-top-offset;
+  margin-top: $header-height + 32px;;
 
   @media(max-width: $desktop-small) {
-    margin-top: $page-top-offset-mobile;
-  }
-}
-
-.toc-col,
-.side-nav-col {
-  -ms-flex: 0 0 $custom-side-col-width;
-  flex: 0 0 $custom-side-col-width;
-}
-
-.toc-col {
-  // Custom width is used here to have the central content column more readable.
-  @media (max-width: 1140px) {
-    display: none;
-  }
-}
-
-.sticky-element {
-  @media (min-width: $tablet-large) {
-    padding: 0;
-    position: relative;
-    overflow: auto;
-    max-height: 80%;
-    -webkit-transform: translateZ(0); // Fixes jumping while scrolling
-
-    &.sticky {
-      position: fixed;
-    }
-  }
-}
-
-.toc {
-  width: $sticky-el-width;
-  padding-top: 12px;
-
-  &.blog-toc {
-    margin: 40px 0 24px;
-  }
-
-  &.initially-fixed {
-    position: fixed;
-  }
-
-  &.hide-block {
-    display: none !important;
-  }
-
-  @media (max-width: 1024px) {
-    display: none !important;
-  }
-
-  .blog-toc-header {
-    margin-bottom: 16px;
-    padding-left: 12px;
-    font-size: 12px;
-    color: $gray-300;
-    font-weight: 500;
-    text-transform: uppercase;
-  }
-
-  >ul>li>a {
-    display: block;
-    line-height: 1.4;
-    margin-bottom: 18px;
-  }
-
-  ul {
-    list-style-type: none !important;
-    padding-left: 12px;
-    font-size: 12px;
-
-    li {
-      line-height: 1.4;
-      margin-bottom: 18px;
-
-      // Overrides Bootstrap v5 default value.
-      &.active {
-         a,
-         a:not([href]):not([tabindex]) {
-           color: $mainBrandColor;
-         }
-       }
-    }
-
-    // Overrides Bootstrap v5 default value
-    a,
-    a:not([href]):not([tabindex]) {
-      color: $gray-500;
-      font-weight: 500;
-      padding: 0;
-      letter-spacing: 0.2px;
-      &:hover {
-        color:$black;
-        background: none;
-        text-decoration: none;
-      }
-    }
+    margin-top: $header-height + 16px;;
   }
 }
 
@@ -244,58 +149,3 @@ $tooltip-padding: .5rem .7rem;
     border-bottom-color: $tooltip-color;
   }
 }
-
-.anchorjs-link {
-  &:hover {
-    text-decoration: none !important;
-  }
-
-  &:after {
-    vertical-align: -2px;
-  }
-}
-
-/* Custom checkbox styles. */
-$checkbox-size: 18px;
-.checkbox-container {
-  position: relative;
-  display: block;
-  cursor: pointer;
-  margin-top: 12px;
-  padding-left: $checkbox-size + 12px;
-  line-height: 1.4;
-  user-select: none;
-
-  &:hover input ~ .checkmark {
-    border-color: $mainBrandColor;
-  }
-
-  .text {
-    font-size: 14px;
-  }
-
-  /* Hide the browser's default checkbox. */
-  input {
-    position: absolute;
-    cursor: pointer;
-    opacity: 0;
-    height: 0;
-    width: 0;
-
-    &:checked ~ .checkmark {
-      background: url('img/icons/checkbox.svg') no-repeat center/cover;
-      border: none;
-    }
-  }
-
-  /* Custom checkbox. */
-  .checkmark {
-    position: absolute;
-    top: 2px;
-    left: 0;
-    height: $checkbox-size;
-    width: $checkbox-size;
-    border: 1px solid $gray-300;
-    border-radius: $border-radius-s;
-  }
-}