Fix mobile res

zhaospei · Oct 7, 2023 · bd1abf5 · bd1abf5
1 parent cf1aef1
commit bd1abf5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -26,7 +26,7 @@
     <nav
         class="flex items-center justify-between relative max-w-3xl mx-auto text-gray-900">
         {% for item in site.data.navigation %}
-        <a class="font-bold text-gray-800 hidden md:inline-block mx-1 p-1 sm:px-3 rounded-3xl hover:bg-white transition-all dark:text-gray-100 dark:hover:bg-zinc-950"
+        <a class="font-bold text-gray-800 hidden md:inline-block mx-1 p-1 sm:px-3 rounded-3xl hover:bg-gray-100 transition-all dark:text-gray-100 dark:hover:bg-zinc-950"
              href="{{ item.link }}"><span
                 class="capsize">{{ item.name }}</span></a>
         {% endfor %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -138,7 +138,7 @@ <h2 class="uppercase tracking-widest text-base	font-extrabold mb-6"> Table of co
                 </svg></span></a></div>
           <div>
             <div
-              class="flex justify-between items-start w-full gap-16 flex-row flew-nowrap pt-16 pl-2 pr-2 border-gray-300 dark:boder-gray-900 border-0 border-t border-solid">
+              class="flex justify-between items-start w-full gap-16 flex-col md:flex-row flew-nowrap pt-16 pl-2 pr-2 border-gray-300 dark:boder-gray-900 border-0 border-t border-solid">
               <div class="relative w-36 h-36">
                 <div class="relative overflow-hidden h-full rounded-full">
                   <div class="">
@@ -172,7 +172,7 @@ <h2 class="uppercase tracking-widest text-base	font-extrabold mb-6"> Table of co
 
     <section class="page-navigation flex justify-center items-start flex-col flex-wrap w-full p-0 mt-16 mb-8">
       <h2 class="mb-4 text-3xl max-w-3xl font-bold mb-8">Check my other posts 📚</h2>
-      <div class="w-full items-start justify-center grid gap-8" style="grid-template-columns: 1fr 1fr 1fr; grid-gap: 3rem">
+      <div class="w-full items-start justify-center gap-8 flex flex-col md:flex-row">
         {% for post in site.posts limit:3 %}
         <a class="w-full container-hover" href="{{post.url}}">
           <div class="w-full">

diff --git a/assets/css/github.css b/assets/css/github.css
@@ -29,6 +29,21 @@ pre {
     border: 1px solid #dfe2e588;
 }
 
+.MathJax_Display {
+    background: transparent !important;
+    text-align: center;
+    display: block;
+    padding: 10px 0;
+    border-radius: 8px;
+    margin: 0;
+    display: inline-block;
+    clear: both;
+    min-width: 100%;
+    max-width: 100%;
+    overflow-x: auto !important;
+    text-align: center;
+}
+
 code {
     padding: 2px;
     border-radius: 8px;

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -21,8 +21,8 @@
     }
 
     ::-webkit-scrollbar-thumb {
-      background: rgb(144, 144, 144);
-      border-radius: 8px;
+      background: rgba(144, 144, 144, 0.692);
+      /* border-radius: 8px; */
     }
 
     ::-webkit-scrollbar-thumb:hover {