X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=eslint%2Fdocs%2Fsrc%2Fassets%2Fscss%2Fdocs.scss;h=ee40123891d88a3f71256513f8d48f25251ee06e;hb=f2a92ac62f5c8e72451bd86e77e46c05e75cf42e;hp=22cde70720dfe7f85aafd5597c6ae9cc95771b9f;hpb=28ff354db001e368c2497fb14373081a5dfad2fd;p=pve-eslint.git

diff --git a/eslint/docs/src/assets/scss/docs.scss b/eslint/docs/src/assets/scss/docs.scss
index 22cde70..ee40123 100644
--- a/eslint/docs/src/assets/scss/docs.scss
+++ b/eslint/docs/src/assets/scss/docs.scss
@@ -4,11 +4,6 @@ html {
     scroll-behavior: smooth;
 }
 
-.docs {
-    max-width: 1700px;
-    margin: 0 auto;
-}
-
 .docs-aside__content {
     flex: 1;
 }
@@ -18,12 +13,16 @@ html {
     flex: 1;
     display: flex;
     flex-direction: column;
+    max-width: 1700px;
 
     @media all and (min-width: 1024px) {
         display: grid;
         grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
         align-items: stretch;
     }
+    @media all and (min-width: 1700px) {
+        margin: auto;
+    }
 }
 
 .docs-nav {
@@ -31,8 +30,7 @@ html {
     grid-row: 1 / 2;
     padding-top: var(--space-l-xl);
     padding-block-start: var(--space-l-xl);
-    font-size: .875rem;
-
+    font-size: 0.875rem;
     display: grid;
     grid-auto-rows: max-content;
     align-items: start;
@@ -41,7 +39,6 @@ html {
         padding: var(--space-l-xl) 0;
         padding-right: var(--space-s-l);
         padding-inline-end: var(--space-s-l);
-
         border-right: 1px solid var(--divider-color);
         border-inline-end: 1px solid var(--divider-color);
     }
@@ -73,7 +70,6 @@ html {
     @media all and (min-width: 800px) {
         padding-right: var(--space-s-l);
         padding-inline-end: var(--space-s-l);
-
         border-right: 1px solid var(--divider-color);
         border-inline-end: 1px solid var(--divider-color);
     }
@@ -83,7 +79,6 @@ html {
     }
 }
 
-
 .docs-aside {
     grid-column: 2 / 3;
     display: flex;
@@ -131,6 +126,15 @@ div.incorrect {
     }
 }
 
+div.img-container {
+    background-color: var(--img-background-color);
+    border-radius: var(--border-radius);
+
+    img {
+        margin: 0 auto;
+    }
+}
+
 pre[class*="language-"] {
     position: relative;
 }
@@ -138,10 +142,10 @@ pre[class*="language-"] {
 .c-btn.c-btn--playground {
     position: absolute;
     font-size: var(--step--1);
-    bottom: .5rem;
-    right: .5rem;
-    offset-block-end: .5rem;
-    offset-inline-end: .5rem;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    offset-block-end: 0.5rem;
+    offset-inline-end: 0.5rem;
 
     @media all and (max-width: 768px) {
         display: none;
@@ -153,3 +157,27 @@ pre[class*="language-"] {
         opacity: 1;
     }
 }
+
+#scroll-up-btn {
+    width: 50px;
+    height: 50px;
+    display: none;
+    position: fixed;
+    right: 50px;
+    bottom: 35px;
+    font-size: 1.5rem;
+    border-radius: 50%;
+    color: var(--body-background-color);
+    text-decoration: none;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--link-color);
+
+    @media (max-width: 800px) {
+        right: 35px;
+    }
+
+    @media (max-width: 600px) {
+        right: 25px;
+    }
+}