Add temporary mobile placeholder

Author: forkball

CNAME

@@ -0,0 +1 @@
+erosdipede.ca

src/components/Handheld/Components/Input/Input.js

@@ -3,16 +3,16 @@ import './Input.scss';
 
 function Input() {
   return (
-    <div className="handheld-input flex flex-row gap-8 justify-center items-center">
-      <div className="handheld-input__panel handheld-input__panel--left w-1/2 h-full flex justify-center">
+    <div className="handheld-input flex flex-row gap-8 w-full">
+      <div className="handheld-input__panel handheld-input__panel--left flex justify-center">
         <div className="handheld-input__panel__controls grid grid-cols-3 grid-rows-3">
           <div className="handheld-input__panel__controls--a col-start-2" />
           <div className="handheld-input__panel__controls--b col-start-1 row-start-2" />
           <div className="handheld-input__panel__controls--c col-start-3 row-start-2" />
           <div className="handheld-input__panel__controls--d col-start-2 row-start-3" />
         </div>
       </div>
-      <div className="handheld-input__panel handheld-input__panel--right w-1/2 h-full flex justify-center">
+      <div className="handheld-input__panel handheld-input__panel--right ml-auto flex justify-center">
         <div className="handheld-input__panel__controls flex justify-center items-center gap-4">
           <div className="handheld-input__panel__controls--a rounded-full" />
           <div className="handheld-input__panel__controls--b rounded-full" />

src/components/Handheld/Components/Input/Input.scss

@@ -1,6 +1,6 @@
 .handheld-input {
   width: 576px;
-  height: 408px;
+  margin-top: 24px;
   &__panel {
     &--left {
       .handheld-input__panel__controls {

src/components/Handheld/Components/Screen/Screen.js

@@ -18,7 +18,7 @@ function Screen({ className }) {
               <p>FULLSTACK AND GAME DEVELOPER</p>
             </div>
           </div>
-          <div className="handheld-screen__interface__content__body flex tablet:flex-row flex-col tablet:flex-row-reverse">
+          <div className="handheld-screen__interface__content__body flex flex-col">
             <div className="handheld-screen__content__body flex flex-col text-left">
               <p>
                 In all areas of the stack, Eros is well equipped to address any challenge, whether
@@ -27,7 +27,7 @@ function Screen({ className }) {
               </p>
             </div>
           </div>
-          <div className="handheld-screen__interface__content__page flex flex-col items-end">
+          <div className="handheld-screen__interface__content__page flex flex-col mt-auto items-end">
             <p>1/2</p>
           </div>
         </div>

src/components/Handheld/Device/Device.js

@@ -1,19 +1,29 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Screen } from '../Components';
 import Input from '../Components/Input';
 import './Device.scss';
 
-function Device() {
+function Device({ classes }) {
+  console.log(classes);
   return (
-    <div className="handheld flex flex-col h-full shadow-lg gap-8">
+    <div className={`handheld flex flex-col h-full shadow-lg gap-8 ${classes}`}>
       <div className="handheld__screen flex justify-center">
         <Screen />
       </div>
-      <div className="handheld__input flex justify-center">
+      <div className="handheld__input flex">
         <Input />
       </div>
     </div>
   );
 }
 
+Device.propTypes = {
+  classes: PropTypes.string,
+};
+
+Device.defaultProps = {
+  classes: '',
+};
+
 export default Device;

src/pages/LandingPage/LandingPage.js

@@ -1,13 +1,12 @@
 import React from 'react';
-// import { ExperienceCard, ProjectCard } from '../../components';
 import './LandingPage.scss';
 import { Device } from '../../components';
-// import ParticleBackground from '../../components/ParticleBackground';
 
 function LandingPage() {
   return (
     <div className="flex justify-center items-center py-4 h-screen">
-      <Device />
+      <Device classes="tablet:block hidden" />
+      <p className="font-pixel tablet:hidden block">under construction...</p>
     </div>
   );
 }

src/styles/mixins/typography.scss

@@ -80,10 +80,8 @@
   align-items: center;
   @include tablet {
     font-size: $p-font-size-tablet;
-    line-height: $p-font-size-tablet * 1.5;
   }
   @include mobile {
     font-size: $p-font-size-mobile;
-    line-height: $p-font-size-mobile * 1.5;
   }
 }