some css updates especially for mobile and ipad sizes

flq · Jun 23, 2024 · 1676e49 · 1676e49
1 parent a8d539f
commit 1676e49
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/src/components/mdx/Ai.astro b/src/components/mdx/Ai.astro
@@ -5,7 +5,8 @@ interface Props {
 
 const { inline = false } = Astro.props;
 ---
-<style>
+<style lang="scss">
+    @import "../../styles/imports.scss";
     blockquote {
         display: inline-block;
         margin: 0;
@@ -26,18 +27,22 @@ const { inline = false } = Astro.props;
     span {
         position:relative;
         font-style: normal;
-        border-bottom: 1px dashed rgba(0,0,0,0.1);
+        border-bottom: 1px dashed rgba(0,0,0,0.2);
     }
     span:before {
         position: absolute;
-        top: -1.1rem;
+        top: -0.8rem;
         font-size: small;
         font-style: oblique;
         color: rgba(0,0,0,0.3);
         content: "AI";
         padding-left: 0.2rem;
         line-height: 1rem;
-        border-left: 2px solid rgba(0,0,0,0.1);
+        border-left: 2px solid rgba(0,0,0,0.2);
+
+        @media (min-width:$iPad) {
+            top: -1.1rem;
+        }
     }
 
 </style>

diff --git a/src/layouts/main.astro b/src/layouts/main.astro
@@ -47,6 +47,13 @@ const { meta = [], title: pageTitle, skipFooter } = Astro.props;
         align-items: center;
       }
 
+      body :global(ul) {
+        padding: 0 1rem;
+        @media (min-width:$iPad) {
+            padding: 0;
+        }
+      }
+
       main {
         padding: 5rem 0 1rem 0;
         @include widths;

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -81,10 +81,6 @@ figcaption {
   margin-bottom: 2em;
 }
 
-ul {
-  padding: 0;
-}
-
 img, video, .giphy-embed {
   display: block;
   margin: 20px auto;

diff --git a/src/styles/imports.scss b/src/styles/imports.scss
@@ -14,7 +14,7 @@ $largeDesktop: 2000px;
     width: 100%;
 
     @media (min-width:$iPad) {
-        width: 90%;
+        width: 85%;
     }
 
     @media (min-width:$desktop) {