better mobile compatability (#1090)

* fix cloudflare issue

* disable submit button

* better compatability for mobile

* Update App.svelte

* Update App.svelte

* oops

* Update App.svelte

showcase/src/lib/components/App.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
  import { Canvas } from '@threlte/core';
  import Scene from './Scene.svelte';
-
 </script>
-
 <div>
  <Canvas>
  <Scene />
@@ -12,9 +10,8 @@
 
 <style>
  div {
- width: 100%;
- height: 100%;
+ max-width: 100%;
+ min-height: 100%;
  object-fit: contain;
  }
 </style>
-

showcase/src/lib/components/Scene.svelte

@@ -2,24 +2,14 @@
  import Model from './models/pcb.svelte';
  import { T, useFrame} from '@threlte/core';
  import { OrbitControls } from '@threlte/extras'
-
- let rotation = 0;
-
- useFrame((_, delta) => {
- rotation += delta * 0.4
- })
- 
 </script>
 
 <T.AmbientLight intensity={2} />
 
 <T.OrthographicCamera
- zoom={50}
+ zoom={42}
  makeDefault
- position={[0, 0, 100]}
- <!-- on:create={({ ref }) => {
- ref.lookAt(0, 1, 0);
- }}> -->
+ position={[0, 0, 100]}>
 
  <OrbitControls 
  autoRotate
@@ -30,4 +20,4 @@
 
 </T.OrthographicCamera>
 
-<Model scale={100} position.x={-15} position.y={8} position.z={0} />
+<Model scale={100} position.x={-15.35} position.y={8} position.z={0} />

showcase/src/routes/+page.svelte

@@ -183,6 +183,7 @@
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #f1f1f1;
+ overflow-x: hidden;
  font-size: 1.2em;
  z-index: -1;
  box-shadow: 0 0 50px rgba(77, 76, 119, 0.9) inset;
@@ -200,8 +201,7 @@
  }
 
  .logo {
- max-width: 10%;
- height: auto;
+ width: 20vh;
  }
 
  .container {
@@ -212,31 +212,16 @@
 
  #subtitle {
  color: white;
- font-size: 1.2em;
+ font-size: 1.1em;
  margin-top: 0.5em;
  z-index: 50;
  }
 
- #form-link {
- margin-top: 2em;
- padding: 0.7em 1em;
- background: #ffa500;
- border-radius: 0.5em;
- color: white;
- font-weight: 700;
- text-decoration: none;
- transition: background-color 0.3s ease;
- }
-
- #form-link:hover {
- background: #ff8c00;
- }
-
  .grid-steps {
  display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: 1.5em;
- padding: 2em;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjusted min-width */
+ gap: 1em; /* Smaller gap for mobile */
+ padding: 1em;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
@@ -273,6 +258,7 @@
  position: absolute;
  top: -15px;
  left: 50%;
+ flex-shrink: 1;
  transform: translateX(-50%);
  animation: bounce 1s infinite alternate;
  line-height: 35px;
@@ -296,7 +282,7 @@
  font-weight: 100;
  color: #45b8cc;
  opacity: 0.9;
- padding-top: 5%;
+ padding-top: 1%;
  }
 
  .item-title {
@@ -327,6 +313,30 @@
  border-radius: 25px;
  }
 
+ img {
+ max-width: 100%; /* Ensures images fit within their container */
+ height: auto; /* Maintain aspect ratio */
+ }
+
+ @media (max-width: 600px) {
+ body {
+ font-size: 1em; /* Adjust base font size */
+ }
+
+ .guidelines-title {
+ font-size: 1.5em;
+ }
+
+ .item-title {
+ font-size: 1.1em;
+ }
+
+ #subtitle h3,
+ #subtitle h5 {
+ font-size: 0.8em;
+ }
+ }
+
  footer {
  padding: 1em;
  text-align: center;
@@ -381,17 +391,20 @@
  }
  #form-link {
  margin-top: 2em;
- padding: 0.7em 1em;
+ padding: 0.5em 0.8em; /* Reduced padding for smaller devices */
  background: #d3d3d3;
  border-radius: 0.5em;
  color: #fff;
- font-weight: 700;
+ font-weight: 650;
  text-decoration: none;
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
+ max-width: 100%; /* Allow full width on mobile */
+ max-height: 8vh; /* Slightly reduced height */
+ font-size: 2.5vh; /* Smaller text for mobile */
  }
 
  #form-link:hover {
@@ -403,4 +416,4 @@
  color: #6a6a6a;
  margin-top: 0.3em;
  }
-</style>
+</style>