enhance styling

components/comment.js

@@ -203,7 +203,7 @@ export default function Comment ({
                   {root.bounty && !bountyPaid && <PayBounty item={item} />}
                 </Reply>}
               {children}
-              <div className={`${styles.comments} ms-sm-1 ms-md-3`}>
+              <div className={styles.comments}>
                 {item.comments && !noComments
                   ? item.comments.map((item) => (
                     <Comment depth={depth + 1} key={item.id} item={item} />

components/comment.module.css

@@ -6,6 +6,8 @@
 
 .upvote {
     margin-top: 9px;
+    margin-left: .25rem;
+    margin-right: 0rem;
 }
 
 .dontLike {
@@ -55,13 +57,20 @@
 
 .children {
     margin-top: 0;
-    margin-left: 28px;
+    margin-left: 30px;
 }
 
 .comments {
-    margin-left: -1rem;
+    margin-left: -.75rem;
 }
 
+@media screen and (min-width: 768px) {
+
+    .comments {
+        margin-left: .75rem;
+    }
+  }
+
 .skeleton .hunk {
     width: 100%;
 }

components/header.js

@@ -234,7 +234,7 @@ export default function Header ({ sub }) {
   const me = useMe()
 
   return (
-    <Container as='header'>
+    <Container as='header' className='px-sm-0'>
       <Navbar className='pb-0 pb-lg-2'>
         <Nav
           className={styles.navbarNav}
@@ -243,7 +243,7 @@ export default function Header ({ sub }) {
           <div className='d-flex align-items-center'>
             <Back />
             <Link href='/' passHref legacyBehavior>
-              <Navbar.Brand className={`${styles.brand} d-flex`}>
+              <Navbar.Brand className={`${styles.brand} d-flex me-0 me-md-2`}>
                 SN
               </Navbar.Brand>
             </Link>

components/item.module.css

@@ -17,6 +17,7 @@ a.title:visited {
 
 .upvote {
     margin-top: 3px;
+    padding-right: .2rem;
 }
 
 .link {
@@ -38,7 +39,8 @@ a.title:visited {
 
 .pin {
     fill: #a5a5a5;
-    margin-right: .2rem;
+    margin-right: .4rem;
+    margin-left: -.1rem;
 }
 
 .dontLike {

components/upvote.js

@@ -262,8 +262,8 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
                 className={`${disabled ? styles.noSelfTips : ''} ${styles.upvoteWrapper}`}
               >
                 <UpBolt
-                  width={24}
-                  height={24}
+                  width={26}
+                  height={26}
                   className={
                       `${styles.upvote}
                       ${className || ''}

components/upvote.module.css

@@ -7,7 +7,9 @@
 
 .upvoteWrapper {
     position: relative;
-    padding-right: .2rem;
+    margin-right: .2rem;
+    padding-left: .2rem;
+    margin-left: -.4rem;
 }
 
 .noSelfTips {

lib/md.js

@@ -1,11 +1,12 @@
 import { fromMarkdown } from 'mdast-util-from-markdown'
 import { gfmFromMarkdown } from 'mdast-util-gfm'
 import { visit } from 'unist-util-visit'
-import { gfm } from 'micromark-extension-gfm'
+import gfm from 'remark-gfm'
 
 export function mdHas (md, test) {
+  if (!md) return []
   const tree = fromMarkdown(md, {
-    extensions: [gfm()],
+    extensions: [gfm],
     mdastExtensions: [gfmFromMarkdown()]
   })
 
@@ -21,7 +22,7 @@ export function mdHas (md, test) {
 export function extractUrls (md) {
   if (!md) return []
   const tree = fromMarkdown(md, {
-    extensions: [gfm()],
+    extensions: [gfm],
     mdastExtensions: [gfmFromMarkdown()]
   })
 

pages/~/search.js

@@ -21,7 +21,6 @@ export default function Index ({ ssrData }) {
             destructureData={data => data.search}
             variables={variables}
             noMoreText='NO MORE'
-            rank
           />
         : (
           <div className='text-muted text-center mt-5' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>

styles/globals.scss

@@ -79,6 +79,7 @@ $form-select-bg-size: 1.5rem;
 $popover-body-padding-y: .5rem;
 $popover-max-width: 320px !default;
 $popover-border-color: var(--theme-borderColor);
+$grid-gutter-width: 2rem;
 
 @import '../node_modules/bootstrap/scss/bootstrap.scss';