Startpage logo

leaky-ships/pages/dev/index.tsx

@@ -10,8 +10,15 @@ export default function Home() {
             <button id='navExpand'>
                 <FontAwesomeIcon icon={faCompass} />
             </button>
+            <div className='flex-row'>
+                <div id='shield'>
+                    <div id='width'>
+                        <h1>Leaky</h1>
+                        <h1>Ships</h1>
+                    </div>
+                </div>
+            </div>
             <div className='beforeStartBox'>
-                <img id='shield' src="/assets/shield.png" alt="Shield Logo" />
                 {!heWantsToPlay ?
                     <>
                         <div id='videoWrapper'>
@@ -27,6 +34,6 @@ export default function Home() {
                         </div>
                     </div>}
             </div>
-        </div>
+        </div >
     )
 }

leaky-ships/styles/homepage.scss

@@ -1,7 +1,9 @@
+@use './mixins/display' as *;
+@use './mixins/CP_Font' as *;
+
 #box {
     border: 2px solid black;
-    height: 100vh;
+    min-height: 100vh;
-    width: 100vw;
     background-color: #282c34;
 
     #navExpand {
@@ -21,6 +23,107 @@
         }
     }
 
+    .flex-row {
+        @include flex-row;
+        justify-content: center;
+
+        #shield {
+            @include flex-row;
+            justify-content: center;
+            height: 250px;
+            width: 700px;
+            margin: 5%;
+            background-image: url("/assets/shield.png");
+            background-repeat: no-repeat;
+            background-size: contain;
+
+            #width {
+                @include flex-col;
+                justify-content: space-between;
+
+                h1 {
+                    @include CP_Font;
+                    margin: 3%;
+                    width: 100%;
+                    text-align: center;
+                    font-size: 5.8em;
+                    letter-spacing: 6px;
+
+                    &:first-child {
+                        border-top: 5px solid black;
+                    }
+
+                    &:last-child {
+                        border-bottom: 5px solid black;
+                    }
+                }
+            }
+
+            @media (max-width: 1000px) {
+                height: 200px;
+                width: 560px;
+
+                #width {
+
+                    h1 {
+                        font-size: 4.5em;
+                        letter-spacing: 4px;
+
+                        &:first-child {
+                            border-top: 4px solid black;
+                        }
+
+                        &:last-child {
+                            border-bottom: 4px solid black;
+                        }
+                    }
+                }
+            }
+
+            @media (max-width: 800px) {
+                height: 160px;
+                width: 450px;
+
+                #width {
+
+                    h1 {
+                        font-size: 3.6em;
+                        letter-spacing: 3px;
+
+                        &:first-child {
+                            border-top: 3px solid black;
+                        }
+
+                        &:last-child {
+                            border-bottom: 3px solid black;
+                        }
+                    }
+                }
+            }
+
+            @media (max-width: 600px) {
+                height: 100px;
+                width: 280px;
+
+                #width {
+
+                    h1 {
+                        font-size: 2.4em;
+                        letter-spacing: 2px;
+
+                        &:first-child {
+                            border-top: 2px solid black;
+                        }
+
+                        &:last-child {
+                            border-bottom: 2px solid black;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     .beforeStartBox {
         display: flex;
         flex-direction: column;
@@ -29,11 +132,6 @@
         height: 100%;
         width: 100%;
 
-        #shield {
-            width: 450px;
-
-        }
-
         #videoWrapper {
             display: flex;
             align-items: center;

leaky-ships/styles/mixins/CP_Font.scss

@@ -0,0 +1,9 @@
+@font-face {
+    font-family: "CP_Font";
+    src: url("/fonts/cpfont_ote/CP Font.otf") format("opentype");
+}
+
+
+@mixin CP_Font {
+    font-family: "CP_Font", sans-serif;
+}