Small guide styling fixes

ubyssey · Aug 26, 2024 · 4489929 · 4489929
1 parent 0bb240b
commit 4489929
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss b/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss
@@ -77,15 +77,15 @@
       transition: 0.5s;
     }
     [name="arrow-back-circle-outline"] {
-      left: -1.5em;
+      left: 0;
     }
     [name="arrow-forward-circle-outline"] {
-      right: -1.5em;
+      right: 0;
     }
 
     &:hover {
-      margin-right: 1.5em;
-      margin-left: 1.5em;
+      padding-right: 3.5em;
+      padding-left: 3.5em;
     }
 
     &:hover .arrow {

diff --git a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss
@@ -13,6 +13,7 @@
 
   .header {
     margin: 2em auto;
+    padding-inline: 1em;
     max-width: 400px;
     h2 {
       text-align: center;
@@ -44,6 +45,7 @@
     }
     .header {
       margin: 1em;
+      padding: 0;
     }
   }
 }
@@ -76,6 +78,23 @@ nav.navbar {
   }
 }
 
+@media($bp-smaller-than-phablet) {
+  .vs-side-by-side {
+    .o-visual-essay__left-container {
+      position: relative;
+    }
+    .o-visual-essay__right-container {
+      margin-top: 1em;
+    }
+    .o-visual-essay__right-div {
+      margin-top: 1em;
+    }
+    .o-visual-essay__right-div:last-child {
+      margin-bottom: 1em !important;
+    }
+  }
+}
+
 .o-visual-essay__right-div {
   max-width: 600px;
 }