✅: dark mode - mobile fixes; 📌 real data in hero and meta tag

Author: skazi019

src/Components/NotionComponents/text.jsx

@@ -66,7 +66,7 @@ export default function Text(props) {
  className={`
  ${extraClasses} 
  ${bold ? 'font-semibold' : ''} 
- ${code ? 'bg-gray-200 px-1 rounded text-red-500 dark:bg-gray-300 dark:text-red-500' : ''} 
+ ${code ? 'bg-gray-200 px-1 rounded text-red-500 dark:bg-stone-200 dark:text-red-500' : ''} 
  ${italic ? 'italic' : ''}
  `}
  >

src/Components/darkmode.jsx

@@ -31,7 +31,7 @@ export default function DarkMode() {
 
 
  return (
- <div>
+ <div className='mt-2 md:mt-0'>
  {
  !mode ?
  (

src/Components/navbar.jsx

@@ -7,8 +7,8 @@ import Headroom from 'react-headroom'
 export default function Navbar() {
  return (
  <Headroom className='fixed top-0 left-0 w-screen z-30'>
- <nav className='block md:hidden relative w-screen flex flex-row justify-between items-start py-4 px-6 md:mx-auto md:max-w-3xl lg:max-w-6xl bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-50 border border-t-0 rounded border-gray-200 dark:border-gray-400'>
- <Link to="/" className='text-sm flex flex-row justify-start items-center gap-2'>
+ <nav className='flex md:hidden relative w-screen flex-row justify-between items-center py-4 px-6 md:mx-auto md:max-w-3xl lg:max-w-6xl bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-50 border-b rounded border-gray-200 dark:border-gray-400'>
+ <Link to="/" className='text-sm'>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
  </svg>
@@ -20,7 +20,7 @@ export default function Navbar() {
  </div>
  </nav>
 
- <nav className='hidden md:block relative w-screen flex flex-row justify-between items-start py-4 px-6 md:mx-auto md:max-w-3xl lg:max-w-6xl'>
+ <nav className='hidden md:flex relative w-screen flex-row justify-between items-start py-4 px-6 md:mx-auto md:max-w-3xl lg:max-w-6xl'>
  <Link to="/" className='text-sm flex flex-row justify-start items-center gap-2'>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />

src/Components/tagsFilter.jsx

@@ -45,8 +45,8 @@ export default function TagFilter() {
  }
  </button>
 
- <div className={`${filterDisplay} absolute w-64 top-6 right-0 bg-white border border-gray-200 rounded dark:border-gray-600`}>
- <div className='flex flex-row flex-wrap gap-2 bg-amber-100/50 border-b border-gray-200 p-2 dark:bg-slate-800 dark:border-gray-600'>
+ <div className={`${filterDisplay} absolute w-64 top-6 right-0 bg-white border border-gray-200 rounded dark:border-gray-800`}>
+ <div className='flex flex-row flex-wrap gap-2 bg-slate-100/50 border-b border-gray-200 p-2 dark:bg-slate-800 dark:border-gray-800'>
  {
  tagFilter.length > 0 ?
  (