Merge pull request #11232 from animeshchaudhri/master

feat: Update styles in SCSS files meshery docs
meshery · Jun 21, 2024 · 8bdcba0 · 8bdcba0
2 parents e0bdd72 + eddf1a1
commit 8bdcba0
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/docs/_sass/elements.scss b/docs/_sass/elements.scss
@@ -5,14 +5,13 @@ a > * {
   color: var(--brand-color);
   text-decoration: none;
   background-color: transparent;
-
 }
 img {
   max-width: 100%;
   border-style: none;
 }
 img.center {
-  display:block;
+  display: block;
   margin-left: auto;
   margin-right: auto;
 }
@@ -64,7 +63,7 @@ h5,
 .h5 {
   font-size: 1.4rem;
   font-weight: 400;
-} 
+}
 h6 {
   font-size: 1.2rem;
   font-weight: 300;
@@ -82,7 +81,7 @@ pre {
 }
 
 label {
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
 
 // LIST (UL,OL) ////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -94,8 +93,9 @@ ol {
   font-size: 1rem;
   padding-inline-start: 2rem;
 
-  @media (max-width: 37.5em) {
-    font-size: 1.8rem;
+  @media (max-width: 320px) {
+    font-size: 0.8rem;
+    padding-inline-start: 0.5rem;
   }
 
   & li {
@@ -106,26 +106,26 @@ ul {
   font-size: 1rem;
   list-style: disc;
   > li {
-    color: var(--color-secondary-medium)
+    color: var(--color-secondary-medium);
   }
 }
 ol {
   list-style-type: decimal;
 }
 
-li:has(> a[href*="/installation/quick-start"]){
+li:has(> a[href*="/installation/quick-start"]) {
   list-style-type: none;
   margin-left: -2rem;
-} 
-li:has(> a[href*="/guides/tutorials"]){
+}
+li:has(> a[href*="/guides/tutorials"]) {
   list-style-type: none;
   margin-left: -2rem;
-} 
+}
 
-li:has(> a[href*="/extensions"]){
+li:has(> a[href*="/extensions"]) {
   list-style-type: none;
   margin-left: -2rem;
-} 
+}
 
 dt {
   font-weight: bold;

diff --git a/docs/_sass/mesheryctl.scss b/docs/_sass/mesheryctl.scss
@@ -24,7 +24,7 @@ div.prereqs {
     margin-top: 0;
   }
   color: #ddd;
-  margin: 20px;
+  margin: 0.5rem;
   padding: 15px;
   border-radius: 0.3rem;
 }

diff --git a/docs/_sass/overview.scss b/docs/_sass/overview.scss
@@ -10,7 +10,7 @@ div.overview {
   background: linear-gradient(337deg, $charcoal_rgba 0%, rgba(0, 179, 159, 0.861782212885154) 87%);
   color: #fff;
   font-size: 1.4rem;
-  padding: .65rem auto;
+  padding: 0.65rem auto;
   margin: 0.5rem;
   margin-right: 1rem;
   width: auto;
@@ -95,9 +95,15 @@ a > strong:hover {
   }
 }
 
+@media (max-width: 320px) {
+  div.overview {
+    min-width: 190px;
+  }
+}
 
 /*image align-right*/
 .image-right {
   float: right;
   padding-right: 10px;
 }
+
diff --git a/docs/_sass/td-content.scss b/docs/_sass/td-content.scss
@@ -15,6 +15,25 @@
     margin: 1.2rem 0 1.6rem;
     font-weight: 400;
   }
+
+  @media (max-width: 320px) {
+    & > h1 {
+      font-size: 1.5rem;
+    }
+
+    & > h2 {
+      font-size: 1.3rem;
+      margin: 1rem 0 1.2rem;
+    }
+
+    & > h3 {
+      font-size: 1.1rem;
+      margin: 0.8rem 0 1rem;
+    }
+    & > h4 {
+      font-size: 1rem;
+    }
+  }
 }
 
 ///////////////// Code Terminal /////////////////////////////
@@ -77,8 +96,8 @@
   left: 1.5rem;
   margin-bottom: -2rem;
   display: inline-block;
-  width: .85rem;
-  height: .85rem;
+  width: 0.85rem;
+  height: 0.85rem;
   border-radius: 50%;
   /* A little hack to display the window buttons in one pseudo element. */
   background: #d9515d;
@@ -89,10 +108,10 @@
 .clipboardjs::after {
   /* position: absolute; */
   color: var(--color-grey-medium);
-  margin-top: .75rem;
+  margin-top: 0.75rem;
   /* left: 0%; */
   width: 100%;
-  font-size: .9rem;
+  font-size: 0.9rem;
   text-align: center;
 }