Merge pull request #1585 from Nexmo/APIDOC-176_sign_up_blog

APIDOC-176: move CSS layout rules into main blog.scss file + fixed ma…
Nexmo · Aug 26, 2022 · 1df1d33 · 1df1d33
2 parents 5ee9e69 + 724a282
commit 1df1d33
Show file tree

Hide file tree

Showing 4 changed files with 270 additions and 266 deletions.
diff --git a/lib/nexmo_developer/app/assets/stylesheets/blog/blog.scss b/lib/nexmo_developer/app/assets/stylesheets/blog/blog.scss
@@ -88,6 +88,7 @@
   object-fit: cover;
 }
 
+
 // < CATEGORY /> tag on blogposts
 .category-name {
   display: block;
@@ -121,7 +122,7 @@
 }
 
 
-// Raw blogpost content in SHOW
+// RAW blogpost CONTENT in SHOW
 .raw_blopost_content {
   margin-top: 3em;
 
@@ -136,6 +137,12 @@
       margin: 1em 0;
     }
   }
+
+  figure { // Centering imgs
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
 
@@ -200,6 +207,40 @@
 }
 
 
+// MAIN LAYOUT for Blogposts#SHOW
+#blogpost-show-wrapper {
+  #author  { width:20%; height: fit-content; position: sticky; top: 10px; }
+  #content { width:58%; padding:0; }
+  .wrapper-cards {
+    width: 20%;
+    top: 10px;
+    height: fit-content;
+    position: sticky;
+    position: -webkit-sticky;
+    #related { width: auto; }
+  }
+
+  // VIDEO embedded in IFRAME Blogposts#SHOW
+  iframe { display: block; margin: 20px auto; }
+}
+
+@media screen and (max-width: 767px) {
+  #blogpost-show-wrapper {
+    flex-direction: column;
+
+    #author, #content, .wrapper-cards {
+      min-width:300px; width:100%;
+      position: relative;
+      top: 0;
+    }
+    .wrapper-cards #related { width: auto; }
+
+    // VIDEO embedded in IFRAME Blogposts#SHOW
+    iframe { width: 100% !important; }
+  }
+}
+
+
 // CUSTOM GRID
 .my-2col-grid {
   min-width: 300px;
@@ -307,4 +348,4 @@
 // Media query for MAIN MOBILE LAYOUT
 @media screen and (max-width: 480) {
   .Nxd-landing-main { padding: 8px !important; }
-}
+}