FIx easter egg positioning on blog

ArhanChaudhary · Aug 26, 2024 · a8f3635 · a8f3635
1 parent 1643f4e
commit a8f3635
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -59,17 +59,32 @@ const { description = "Arhan's Blog", pubDate, title } = Astro.props;
       padding-bottom: 15px;
     }
   }
+</style>
+
+<style lang="scss" is:global>
+  @use "../assets/variables";
 
-  :global(:is(#nav-hamburger, nav)) {
+  #nav-hamburger,
+  nav {
     display: none !important;
   }
 
-  :global(#flex-wrapper) {
+  #flex-wrapper {
     margin-right: initial !important;
     padding-right: initial !important;
   }
 
-  :global(main) {
+  main {
     margin-left: var(--mobile-outer-padding) !important;
   }
+
+  #troll-flex-wrapper {
+    margin-left: var(--main-margin-left);
+  }
+
+  @media (max-width: variables.$mobile-width) {
+    #troll-flex-wrapper {
+      margin-left: var(--mobile-outer-padding) !important;
+    }
+  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -365,8 +365,7 @@ const highlightIndex = sshUsers.indexOf(sshUser) + 1;
       main {
         flex: 1;
         word-wrap: break-word;
-        /* Layout.astro and index.astro hardcoded to this value */
-        margin-left: 100px;
+        margin-left: var(--main-margin-left);
         margin-right: var(--mobile-outer-padding);
         position: relative;
         color: white;
@@ -547,6 +546,7 @@ const highlightIndex = sshUsers.indexOf(sshUser) + 1;
     --offwhite: hsl(0, 0%, 88%);
     --outer-padding: 50px;
     --mobile-outer-padding: 12px;
+    --main-margin-left: 100px;
   }
 
   a {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -134,8 +134,7 @@ import mail from "../assets/index/mail.png";
 
     #shape-thing-1 {
       margin-bottom: 15px;
-      /* Layout.astro hardcoded to this value */
-      margin-left: -100px;
+      margin-left: calc(var(--main-margin-left) * -1);
       width: 340px;
       position: relative;
       overflow: hidden;