[fix]: mobile responsive

README.md

@@ -82,16 +82,21 @@ npm start
 - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
 - [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
 
-
-<p align="center">
+## Support 🙏
+<p align="left">
 <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+</a>
+<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
+<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
+</a>
 </p>
 
-<p align="center">
-  <a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator"/>
+<p align="left">
+  <a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator" width="180"/>
   </a>
 </p>
 
+<hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 
 </p>

src/components/skills.js

@@ -28,7 +28,7 @@ const Skills = props => {
           <h4 className="text-sm sm:text-xl text-gray-900 text-center">
             {categorizedSkills[key].title}
           </h4>
-          <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-10">
+          <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
             {categorizedSkills[key].skills.map(skill => createSkill(skill))}
           </div>
         </div>

src/components/social.js

@@ -5,87 +5,87 @@ const Social = (props) => {
         <div className="px-2 sm:px-6 mb-4">
             <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Social</div>
             <div className="flex flex-wrap justify-center items-center">
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="github" />
                     <input id="github" placeholder="github username"
                         className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
                         value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
                 </div>
-                <div className="w-1/2  flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2  flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="twitter" />
                     <input id="twitter" placeholder="twitter username"
                         className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
                     <input id="dev" placeholder="dev.to username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codepen" />
                     <input id="codepen" placeholder="codepen username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codesandbox" />
                     <input id="codesandbox" placeholder="codesandbox username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="stackoverflow" />
                     <input id="stackoverflow" placeholder="stackoverflow user ID" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="linkedin" />
                     <input id="linkedin" placeholder="linkedin username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="kaggle" />
                     <input id="kaggle" placeholder="kaggle username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="facebook" />
                     <input id="fb" placeholder="facebook username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="instagram" />
                     <input id="instagram" placeholder="instagram username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dribbble" />
                     <input id="dribbble" placeholder="dribbble username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="behance" />
                     <input id="behance" placeholder="behance username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="medium" />
                     <input id="medium" placeholder="medium username (with @)" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
                 </div>
-                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
+                <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="youtube" />
                     <input id="youtube" placeholder="youtube channel name" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"

src/components/work.js

@@ -24,7 +24,7 @@ const Work = props => {
         <input
           id="currentWork-link"
           placeholder="project link"
-          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.currentWork}
           onChange={event => props.handleLinkChange("currentWork", event)}
         />
@@ -46,7 +46,7 @@ const Work = props => {
         <input
           id="collaborateOn-link"
           placeholder="project link"
-          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.collaborateOn}
           onChange={event => props.handleLinkChange("collaborateOn", event)}
         />
@@ -68,7 +68,7 @@ const Work = props => {
         <input
           id="helpWith-link"
           placeholder="project link"
-          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.helpWith}
           onChange={event => props.handleLinkChange("helpWith", event)}
         />
@@ -99,7 +99,7 @@ const Work = props => {
         <input
           id="ama"
           placeholder="react, vue and gsap"
-          className="placeholder-gray-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.ama}
           onChange={event => props.handleDataChange("ama", event)}
         />
@@ -115,7 +115,7 @@ const Work = props => {
         <input
           id="contact"
           placeholder="example@gmail.com"
-          className="placeholder-gray-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.contact}
           onChange={event => props.handleDataChange("contact", event)}
         />
@@ -131,7 +131,7 @@ const Work = props => {
         <input
           id="portfolio"
           placeholder="portfolio link"
-          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.portfolio}
           onChange={event => props.handleLinkChange("portfolio", event)}
         />
@@ -146,7 +146,7 @@ const Work = props => {
         <input
           id="blog"
           placeholder="blog link"
-          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.blog}
           onChange={event => props.handleLinkChange("blog", event)}
         />
@@ -161,7 +161,7 @@ const Work = props => {
         <input
           id="funFact"
           placeholder="Chai over Coffee"
-          className="placeholder-gray-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.funFact}
           onChange={event => props.handleDataChange("funFact", event)}
         />

src/markdown-pages/about.md

@@ -20,12 +20,17 @@ So many developers contributed to the project and made it more awesome to use. Y
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
 <img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
 </a>
-<br/>
+<br>
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank">
 <img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
 </a>
 </p>
 
+### Contributors 🙏
+List of the developers who contributed to the project. A big shout out for them.
+<a href="https://github.com/rahuldkjain/github-profile-readme-generator/graphs/contributors">
+  <img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
+</a>
 <hr/>
 
 ## How do I create a profile README?

src/markdown-pages/support.md

@@ -18,6 +18,17 @@ You can come forward to support the developers by making small donations. You wi
   </a>
 </p>
 
+## Social Support
+Let the world know how you feel using this tool. Share with others on twitter.
+<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
+<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
+</a>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+
+
+https://twitter.com/hackernoon/status/1301615959107678215
+
 
 ## Sponsors 🙇
 - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.

src/styles/tailwind.css

@@ -6,102 +6,109 @@
 
 @tailwind @screens;
 
+/* Additional vertical padding used by kbd tag. */
+.py-05 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .markdown {
-  @apply leading-relaxed text-sm;
+  @apply text-gray-900 leading-normal break-words;
 }
 
-@screen sm {
-  .markdown {
-    @apply text-base;
-  }
+.markdown > * + * {
+  @apply mt-0 mb-4;
 }
 
-@screen lg {
-  .markdown {
-    @apply text-lg;
-  }
+/* .markdown p {
+  @apply flex justify-start items-center;
+} */
+
+.markdown li + li {
+  @apply mt-1;
 }
 
-.text-shadow {
-    text-shadow: 1px 1px 1px rgba(0,0,0,0.55);
+.markdown li > p + p {
+  @apply mt-6;
 }
 
-/* Headers */
-.markdown h1,
-.markdown h2 {
-  @apply text-xl my-4 font-semibold;
-}
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  @apply text-lg my-1 font-semibold;
+.markdown strong {
+  @apply font-semibold;
 }
 
-@screen sm {
-  .markdown h1,
-  .markdown h2 {
-    @apply text-2xl;
-  }
-  .markdown h3,
-  .markdown h4,
-  .markdown h5,
-  .markdown h6 {
-    @apply text-xl;
-  }
-}
-
-/* Links */
 .markdown a {
-  @apply text-blue-800 my-1;
-}
-.markdown a:hover {
-  @apply underline;
-}
-/* Paragraph */
-.markdown p {
-  @apply mb-2;
-}
-/* Lists */
-.markdown ul,
-.markdown ol {
-  @apply mb-2 ml-8;
-}
-.markdown li > p,
-.markdown li > ul,
-.markdown li > ol {
-  @apply mb-0;
-}
-.markdown ol {
-  @apply list-decimal;
-}
-.markdown ul {
-  @apply list-disc;
-}
-/* Blockquotes */
-.markdown blockquote {
-  @apply p-2 mx-6 bg-gray-100 mb-4 border-l-4 border-gray-400 italic;
-}
-.markdown blockquote > p {
-  @apply mb-0;
-}
-/* Tables */
-.markdown td,
-.markdown th {
-  @apply px-2 py-1 border border-gray-400;
-}
-.markdown tr:nth-child(odd) {
-  @apply bg-gray-100;
-}
-.markdown table {
-  @apply mb-6;
+  @apply text-blue-600 font-semibold;
 }
 
-/* Wrap any inline highlights `that are really long`, but don't modify
-     the setting for codeblocks (inside ```), which are rendered in as:
-     <pre><code>...
-  */
-.markdown :not(pre) > code.language-text {
-  white-space: pre-line;
+.markdown strong a {
+  @apply font-bold;
 }
-/* purgecss end ignore */
+
+.markdown h1 {
+  @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
+}
+
+.markdown h2 {
+  @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
+}
+
+.markdown h3 {
+  @apply leading-snug text-lg font-semibold mb-4 mt-6;
+}
+
+.markdown h4 {
+  @apply leading-none text-base font-semibold mb-4 mt-6;
+}
+
+.markdown h5 {
+  @apply leading-tight text-sm font-semibold mb-4 mt-6;
+}
+
+.markdown h6 {
+  @apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
+}
+
+.markdown blockquote {
+  @apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
+}
+
+.markdown code {
+  @apply font-body text-sm inline bg-gray-200 rounded px-1 py-05;
+}
+
+.markdown pre {
+  @apply bg-gray-100 rounded p-4;
+}
+
+.markdown pre code {
+  @apply block bg-transparent p-0 overflow-visible rounded-none;
+}
+
+.markdown ul {
+  @apply text-base pl-8 list-disc;
+}
+
+.markdown ol {
+  @apply text-base pl-8 list-decimal;
+}
+
+.markdown kbd {
+  @apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-body shadow;
+}
+
+.markdown table {
+  @apply text-base border-gray-600;
+}
+
+.markdown th {
+  @apply border py-1 px-3;
+}
+
+.markdown td {
+  @apply border py-1 px-3;
+}
+
+/* Override pygments style background color. */
+.markdown .highlight pre {
+  @apply bg-gray-100 !important;
+}

src/templates/blogTemplate.js

@@ -12,7 +12,7 @@ export default function Template({
     return (
         <Layout>
             {/* <Header heading="GitHub Profile README Generator" /> */}
-            <div className="m-4 p-10">
+            <div className="m-4 sm:p-10">
                 <div className="blog-post">
                     <h1 className="text-4xl font-bold">{frontmatter.title}</h1>
                     {/* <h2>{frontmatter.date}</h2> */}