small view not supported yet

programmerstevie · May 23, 2024 · a862eef · a862eef
1 parent 42a4668
commit a862eef
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 8 deletions.
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/src/lib/assets/icons/general/png/underline.png b/src/lib/assets/icons/general/png/underline.png
diff --git a/src/lib/components/mobile/ComingSoon/ComingSoon.svelte b/src/lib/components/mobile/ComingSoon/ComingSoon.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import icon_underline_src from '$lib/assets/icons/general/png/underline.png';
+</script>
+
+<section class="mainsection">
+	<header>
+		<h1>Small View Not Supported Yet!</h1>
+		<img src={icon_underline_src} alt="" />
+	</header>
+	<p class="p1">Steven's portfolio is not available on smaller screen sizes!</p>
+	<p class="p2">Please use a full computer screen to view my portfolio!</p>
+</section>
+
+<style lang="scss">
+	.mainsection {
+		width: 100vw;
+		height: 100vh;
+		background-image: var(--color-pf-landing-gradient);
+
+		color: var(--color-pf-light-gray);
+		text-align: center;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+    z-index: 0;
+
+		header {
+			position: relative;
+      z-index: 0;
+			h1 {
+				font-size: 6vw;
+				font-weight: bold;
+				color: var(--color-pf-primary);
+			}
+			img {
+				position: absolute;
+        right: 0;
+        top: 5vw;
+        height: 12vw;
+        width: 50vw;
+        z-index: -1;
+			}
+		}
+
+    p {
+      z-index: 1;
+      font-size: 5vw;
+    }
+
+		.p1 {
+			padding: 14vw 20px 0px 20px;
+		}
+		.p2 {
+			padding: 2vw 20px 0px 20px;
+		}
+	}
+</style>
diff --git a/src/lib/components/mobile/ComingSoon/index.ts b/src/lib/components/mobile/ComingSoon/index.ts
@@ -0,0 +1 @@
+export { default as default } from './ComingSoon.svelte';
diff --git a/src/lib/components/sections/Landing/Landing.svelte b/src/lib/components/sections/Landing/Landing.svelte
@@ -16,7 +16,7 @@
 		<div class="landing-content">
 			<div class="hero-card">
 				<section class="hero-text-side">
-					<h1>Hello I'm Stevie.</h1>
+					<h1>Hello I'm Steven.</h1>
 
 					<p class="dev-text">
 						I am a <span class="dev-job-title">Front End Developer</span>&period;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,15 +1,40 @@
 <script>
+	// Desktop
 	import Landing from '$lib/components/sections/Landing';
 	import AttributesBar from '$lib/components/AttributesBar';
 	import AboutMe from '$lib/components/sections/AboutMe';
 	import ToolingBar from '$lib/components/ToolingBar';
 	import Portfolio from '$lib/components/sections/Portfolio';
 	import Contact from '$lib/components/sections/Contact';
+
+	// Mobile
+	import ComingSoon from '$lib/components/mobile/ComingSoon';
 </script>
 
-<Landing />
-<AttributesBar />
-<AboutMe />
-<ToolingBar />
-<Portfolio />
-<Contact />
+<div class="desktop-view">
+	<Landing />
+	<AttributesBar />
+	<AboutMe />
+	<ToolingBar />
+	<Portfolio />
+	<Contact />
+</div>
+<div class="mobile-view">
+	<ComingSoon />
+</div>
+
+<style lang="scss">
+	@media (max-width: 1200px) {
+		.desktop-view {
+			display: none;
+		}
+		.mobile-view {
+			display: default;
+		}
+	}
+	@media (min-width: 1201px) {
+		.mobile-view {
+			display: none;
+		}
+	}
+</style>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as default } from './ComingSoon.svelte';