Merge pull request #89 from catenax-ng/feature/doc-scroll-helpers

prepare for release 1.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx-portal-assets",
-  "version": "1.0.0-RC8",
+  "version": "1.0.0",
   "description": "Shared frontend content and static assets for the Catena-X Portal",
   "main": "index.js",
   "repository": "[email protected]:eclipse-tractusx/portal-assets.git",

public/documentation/css/Chapter.css

@@ -41,6 +41,7 @@ nav.menu {
     display: flex;
     flex-direction: row;
     transition: width 0.1s;
+    min-height: 35vh;
 }
 
 nav.menu.open {
@@ -122,6 +123,7 @@ nav.breadcrumb {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    margin-bottom: 20px;
 }
 
 nav.menu ul.level1,
@@ -139,14 +141,19 @@ nav.menu ul.level2 {
 }
 
 nav.breadcrumb ul {
+    display: flex;
+    flex-direction: row;
     padding-inline-start: 0;
     margin-block-start: 0;
     margin-block-end: 0;
     list-style-type: none;
     margin-bottom: 30px;
     font-size: 12px;
-    display: flex;
-    flex-direction: row;
+    margin-top: 10px;
+}
+
+nav.breadcrumb a.github img {
+    margin-top: 10px;
 }
 
 nav.breadcrumb ul li {
@@ -199,17 +206,27 @@ article.content {
 }
 
 article.content.small {
-    padding: 40px 60px 60px 60px;
+    padding: 30px 60px 60px 60px;
     width: 800px;
     margin-left: 280px;
 }
 
 article.content.large {
-    padding: 40px 60px 60px 60px;
+    padding: 30px 60px 60px 60px;
     width: 1072px;
     margin-left: 20px;
 }
 
+article.content > div {
+    position: relative;
+}
+
+article.content .loader {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+}
+
 ul.subchapter {
     display: flex;
     flex-direction: row;

public/documentation/css/Main.css

@@ -28,7 +28,7 @@ html {
 }
 
 body {
-    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
     background-image: url(/assets/images/frame/Home.jpg);
     background-position: 0px 0px;
     background-repeat: no-repeat;
@@ -65,13 +65,13 @@ header {
 }
 
 .release-selection select,
-.search input {    
+.search input {
     padding: 4px;
     border-radius: 4px;
     border: 1px solid lightgray
 }
 
-.search input {    
+.search input {
     padding: 4px 10px;
     line-height: 17px;
 }
@@ -272,4 +272,50 @@ footer .copy {
 
 .scroll-helper button:hover {
     color: #aaaaaa;
+}
+
+.loader {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite
+}
+
+.loader::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid rgb(15, 113, 203);
+    animation: prixClipFix 4s linear infinite;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes prixClipFix {
+    0% {
+        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+    }
+
+    25% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+    }
+
+    50% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+    }
+
+    75% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+    }
+
+    100% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+    }
 }