Fine tuned home hero positioning

components/HomeHero.tsx

@@ -1,23 +1,14 @@
 export function HomeHero() {
   return (
-    <div
-      style={
-        {
-          // transform: `translateX(17.5vw) translateY(-5vh)`,
-        }
-      }
-      className="relative w-full h-full"
-    >
-      <img
-        style={{
-          transform: ``,
-          // Make image expand into sidebar direction
-          direction: 'rtl',
-          minWidth: '100%',
-        }}
-        className="absolute bottom-0 left-0 object-cover h-full transform"
-        src="/hero.svg"
-      />
-    </div>
+    <img
+      style={{
+        transform: ``,
+        // Make image expand into sidebar direction
+        direction: 'rtl',
+        minWidth: '100%',
+      }}
+      className="absolute bottom-0 left-0 object-cover h-full transform"
+      src="/hero.svg"
+    />
   );
 }

components/HomeHeroBubble.tsx

@@ -11,27 +11,22 @@ export function HomeHeroBubble() {
   return (
     <div
       style={{
-        transform:
-          isMobile || isTablet
-            ? 'translateY(min(40vh, 20rem))'
-            : isHuge
-            ? 'translateY(50%)'
-            : 'translateY(33%)',
-        maxHeight: '400px',
+        marginTop:
+          isMobile || isTablet ? '0' : isHuge ? '16rem' : 'min(50vh, 20rem)',
       }}
       onClick={() => dispatch(expandSideMenu())}
       className={classNames(
-        'absolute h-full z-40 px-10 duration-300',
+        'absolute z-40 px-6 mobile:px-4 tablet:px-6 duration-300 w-full h-full tablet:w-auto tablet:h-auto flex justify-center items-center tablet:flex-none',
         !isDesktop && 'cursor-pointer',
       )}
     >
       <div
         className={classNames(
-          'px-4 py-2 leading-tight text-base border rounded-lg bg-opacity-90 border-secondary bg-alt front-prompt text-primary animate-float',
+          'px-4 desktop:px-6 desktop:py-4 py-2 leading-tight text-base desktop:text-xl border rounded-lg bg-opacity-90 border-secondary bg-alt front-prompt text-primary animate-float',
           //   isMobile ? 'text-base' : 'text-xl',
         )}
       >
-        <p className="mb-1 text-xs text-secondary">OXEN</p>
+        <p className="mb-1 text-xs desktop:text-base text-secondary">OXEN</p>
         Welcome to Oxen.
         <br />
         We know you have questions;

components/navigation/SideMenuSplit.tsx

@@ -42,7 +42,7 @@ export function SideMenuSplit() {
         transform,
       }}
       className={classNames(
-        'relative flex text-primary bg-alWt duration-300 mt-px',
+        'relative flex text-primary bg-alWt duration-300 mt-px z-50',
       )}
     >
       {pageType === PageType.NORMAL && (

pages/[page].tsx

@@ -71,9 +71,6 @@ function Page({
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(setPageType(PageType.NORMAL));
-
-    // Reset scroll position
-    window.scrollY = 0;
   }, []);
 
   return (
@@ -120,7 +117,7 @@ function Page({
 function Roadmap() {
   return (
     <>
-      <h1 className="px-6 mt-6 mb-3 text-3xl font-medium font-prompt text-primary">
+      <h1 className="px-6 mt-12 -mb-3 text-3xl font-medium tablet:text-5xl font-prompt text-primary">
         Oxen's 2021 Roadmap
       </h1>
 
@@ -136,7 +133,7 @@ function Roadmap() {
 
       <div className="flex flex-col px-6 pb-6 space-y-10">
         <div>
-          <h2 className="mt-6 mb-3 text-3xl font-medium font-prompt text-primary">
+          <h2 className="mt-6 mb-3 text-3xl font-medium tablet:text-4xl font-prompt text-primary">
             Session in 2021
           </h2>
           <img
@@ -147,7 +144,7 @@ function Roadmap() {
         </div>
 
         <div>
-          <h2 className="mt-6 mb-3 text-3xl font-medium font-prompt text-primary">
+          <h2 className="mt-6 mb-3 text-3xl font-medium tablet:text-4xl font-prompt text-primary">
             Lokinet in 2021
           </h2>
           <img

pages/index.tsx

@@ -25,7 +25,7 @@ const Index = () => {
       </Head>
 
       {/* Only visible when no pages are open */}
-      <div className="w-full h-full">
+      <div className="relative w-full h-full">
         <HomeHero />
         <HomeHeroBubble />
       </div>

test/getStaticPaths.test.tsx

@@ -1,119 +0,0 @@
-import { createClient } from 'contentful';
-import dotenv from 'dotenv';
-import moment from 'moment';
-import { CMS } from '../constants';
-import { IAuthor, IFigureImage, IPost } from '../types/cms';
-
-interface IPath {
-  params: { slug: string };
-}
-
-interface IFetchBlogEntriesReturn {
-  posts: Array<IPost>;
-  total: number;
-}
-
-dotenv.config();
-
-const client = createClient({
-  space: process.env.CONTENTFUL_SPACE_ID,
-  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
-});
-
-const convertPost = (rawData): IPost => {
-  const rawPost = rawData.fields;
-  const rawFeatureImage = rawPost?.featureImage
-    ? rawPost?.featureImage.fields
-    : null;
-  const rawAuthor = rawPost.author ? rawPost.author.fields : null;
-
-  return {
-    id: rawData.sys.id ?? null,
-    body: rawPost.body ?? null,
-    subtitle: rawPost.subtitle ?? null,
-    description: rawPost.description ?? null,
-    publishedDate: moment(rawPost.date).format('DD MMMM YYYY'),
-    slug: rawPost.slug,
-    tags: rawPost?.tags, //?.map(t => t?.fields?.label) ?? [],
-    title: rawPost.title,
-    featureImage: convertImage(rawFeatureImage),
-    author: convertAuthor(rawAuthor),
-  };
-};
-
-const convertImage = (rawImage): IFigureImage =>
-  rawImage
-    ? {
-        imageUrl: rawImage.file.url.replace('//', 'http://'), // may need to put null check as well here
-        description: rawImage.description ?? null,
-        title: rawImage.title ?? null,
-      }
-    : null;
-
-const convertAuthor = (rawAuthor): IAuthor =>
-  rawAuthor
-    ? {
-        name: rawAuthor?.name ?? null,
-        avatar: convertImage(rawAuthor.avatar.fields),
-        shortBio: rawAuthor?.shortBio ?? null,
-        position: rawAuthor?.position ?? null,
-        email: rawAuthor?.email ?? null,
-        twitter: rawAuthor?.twitter ?? null,
-        facebook: rawAuthor.facebook ?? null,
-        github: rawAuthor.github ?? null,
-      }
-    : null;
-
-const fetchBlogEntries = async (
-  quantity = CMS.BLOG_RESULTS_PER_PAGE,
-  page = 1,
-): Promise<IFetchBlogEntriesReturn> => {
-  console.log('cms ➡️ page:', page);
-  console.log('cms ➡️ quantity:', quantity);
-  console.log('cms ➡️ (page - 1) * quantity:', (page - 1) * quantity);
-
-  try {
-    const entries = await client.getEntries({
-      content_type: 'post', // only fetch blog post entry
-      order: '-fields.date',
-      limit: quantity,
-      skip: (page - 1) * quantity,
-    });
-
-    if (entries && entries.items && entries.items.length > 0) {
-      const blogPosts = entries.items.map(entry => convertPost(entry));
-      return { posts: blogPosts, total: entries.total };
-    }
-
-    return { posts: [], total: 0 } as IFetchBlogEntriesReturn;
-  } catch (e) {
-    return { posts: [], total: 0 } as IFetchBlogEntriesReturn;
-  }
-};
-
-describe('getStaticPaths', () => {
-  test('', async () => {
-    let posts: IPost[] = [];
-    let page = 1;
-    let foundAllPosts = false;
-
-    // Contentful only allows 100 at a time
-    while (!foundAllPosts) {
-      const { posts: _posts } = await fetchBlogEntries(100, page);
-
-      if (_posts.length === 0) {
-        foundAllPosts = true;
-        continue;
-      }
-
-      posts = [...posts, ..._posts];
-      page++;
-    }
-
-    const paths: IPath[] = posts.map(item => ({
-      params: { slug: item.slug },
-    }));
-
-    console.log('getStaticPaths.test ➡️     postPaths:', paths);
-  });
-});