Add margin on small screen

mishguruorg · Apr 27, 2021 · b8da6b9 · b8da6b9
1 parent 274b54d
commit b8da6b9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/blog/BlogGallery.tsx b/src/blog/BlogGallery.tsx
@@ -22,7 +22,7 @@ const BlogGallery = (props: IBlogGalleryProps) => (
             </a>
           </Link>
 
-          <div>{format(new Date(elt.date), 'LLL d, yyyy')}</div>
+          <div className="text-right">{format(new Date(elt.date), 'LLL d, yyyy')}</div>
         </li>
       ))}
     </ul>

diff --git a/src/content/Content.tsx b/src/content/Content.tsx
@@ -10,6 +10,10 @@ const Content = (props: IContentProps) => (
 
     <style jsx>
       {`
+        .content :global(*) {
+          @apply break-words;
+        }
+
         .content :global(p) {
           @apply my-6;
         }

diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
@@ -11,7 +11,7 @@ type IMainProps = {
 };
 
 const Main = (props: IMainProps) => (
-  <div className="antialiased w-full text-gray-700">
+  <div className="antialiased w-full text-gray-700 px-3 md:px-0">
     {props.meta}
 
     <div className="max-w-screen-md mx-auto">
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,7 +22,7 @@ const BlogGallery = (props: IBlogGalleryProps) => ( @@
                 </a>
               </Link>
-              <div>{format(new Date(elt.date), 'LLL d, yyyy')}</div>
+              <div className="text-right">{format(new Date(elt.date), 'LLL d, yyyy')}</div>
             </li>
           ))}
         </ul>
@@ Expand Down @@