Add a placeholder for the landing page

thesis · Dec 1, 2023 · d62c3ec · d62c3ec
1 parent 0992a30
commit d62c3ec
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 1 deletion.
diff --git a/website/gatsby-browser.js b/website/gatsby-browser.js
@@ -0,0 +1 @@
+import "./src/styles/global-styles.css"
diff --git a/website/src/images/placeholder-mobile.svg b/website/src/images/placeholder-mobile.svg
diff --git a/website/src/images/placeholder.svg b/website/src/images/placeholder.svg
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -3,7 +3,9 @@ import * as React from "react"
 function IndexPage() {
   return (
     <main>
-      <h1>Landing page</h1>
+      <div className="placeholder">
+        <div className="placeholder_svg" />
+      </div>
     </main>
   )
 }

diff --git a/website/src/styles/global-styles.css b/website/src/styles/global-styles.css
@@ -0,0 +1,33 @@
+body {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.placeholder {
+    width: 100vw;
+    height: 100vh;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: #F3E5C1;
+}
+
+.placeholder_svg {
+    width: 100%;
+    height: 100%;
+    background: url('../images/placeholder.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+@media (max-width: 854px) {
+    .placeholder_svg {
+        background: url('../images/placeholder-mobile.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+}