Deploying to gh-pages from @ 5661f65 🚀

arcadeperfect · Nov 27, 2024 · 9debab9 · 9debab9
1 parent 76b937d
commit 9debab9
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 53 deletions.
diff --git a/assets/gltf/sphere.bin b/assets/gltf/sphere.bin
diff --git a/assets/gltf/sphere.gltf b/assets/gltf/sphere.gltf
@@ -16,7 +16,7 @@
 		{
 			"extras":{
 				"gltf_primitive_index":0,
-				"gltf_primitive_extras":"{\"visibleEdges\": [[14, 2], [18, 3], [20, 4], [21, 5], [23, 10], [24, 2], [25, 6], [26, 3], [28, 4], [29, 8], [30, 5], [31, 9], [32, 6], [34, 8], [35, 9], [36, 10], [37, 6], [2, 12], [5, 15], [3, 17], [2, 18], [3, 20], [4, 21], [10, 22], [5, 23], [6, 24], [2, 27], [8, 28], [3, 29], [9, 30], [4, 31], [10, 32], [6, 33], [8, 35], [9, 36], [10, 38], [38, 36], [37, 33], [37, 38], [37, 32], [38, 32], [23, 36], [23, 30], [36, 30], [31, 35], [31, 28], [35, 28], [29, 34], [29, 26], [34, 26], [27, 33], [27, 24], [33, 24], [25, 32], [25, 22], [32, 22], [30, 31], [30, 21], [31, 21], [28, 20], [29, 20], [26, 27], [26, 18], [27, 18], [24, 14], [25, 14], [22, 23], [22, 15], [23, 15], [20, 17], [17, 18], [17, 12], [18, 12], [12, 14]]}"
+				"gltf_primitive_extras":"{\"visibleEdges\": [[14, 2], [15, 1], [18, 3], [21, 5], [22, 1], [23, 10], [24, 2], [25, 6], [26, 3], [27, 7], [29, 8], [30, 5], [31, 9], [32, 6], [33, 7], [34, 8], [35, 9], [36, 10], [39, 7], [40, 8], [41, 9], [1, 14], [5, 15], [2, 18], [10, 22], [5, 23], [6, 24], [1, 25], [7, 26], [2, 27], [8, 28], [3, 29], [9, 30], [10, 32], [6, 33], [7, 34], [8, 35], [9, 36], [41, 36], [41, 40], [41, 35], [40, 35], [40, 39], [40, 34], [39, 34], [23, 36], [23, 30], [36, 30], [31, 35], [31, 28], [35, 28], [29, 34], [29, 26], [34, 26], [27, 33], [33, 24], [25, 32], [25, 22], [32, 22], [30, 31], [30, 21], [31, 21], [28, 29], [26, 27], [26, 18], [27, 18], [24, 25], [24, 14], [25, 14], [22, 23], [22, 15], [23, 15]]}"
 			},
 			"mesh":0,
 			"name":"Icosphere"

diff --git a/index.html b/index.html
@@ -13,7 +13,12 @@
 <body class="color-scheme-home">
     <div class="grid">
         <div class="main-column">
-            <a href="/" class="back-arrow">alexharding.ooo</a>
+            <!-- <a href="https://alexharding.ooo" class="back-arrow">alexharding.ooo</a> <a href="https://bsky.app/profile/alexharding.bsky.social" class="back-arrow">bluesky</a> -->
+            <span class="nav-links">
+                <a href="https://alexharding.ooo" class="nice-links">alexharding.ooo</a>
+                &nbsp;&nbsp;&nbsp;
+                <a href="https://bsky.app/profile/alexharding.bsky.social" class="nice-links">bluesky</a>
+            </span>
             <h1 class="main-heading">Bevy Vaporwave</h1>
             <div id="wasm-container"></div>
             <br>
@@ -42,6 +47,27 @@ <h2><a href="https://github.com/arcadeperfect/bevy_vaporwave">Github</a></h2>
                 <li>The mesh building algorithm is very slow with large meshes</li>
             </ul>
             <br>
+            <h2>Blender Workflow</h2>
+            <div class="video-wrapper">
+                <iframe 
+                    src="https://www.youtube.com/embed/rfDhslnPBpA?si=I2cgElg45rW-49li&autoplay=1&mute=1" 
+                    title="YouTube video player" 
+                    frameborder="0" 
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                    referrerpolicy="strict-origin-when-cross-origin" 
+                    allowfullscreen
+                ></iframe>
+            </div>
+            <br>
+            <br>
+            <span class="nav-links">
+                <a href="https://alexharding.ooo" class="nice-links">alexharding.ooo</a>
+                &nbsp;&nbsp;&nbsp;
+                <a href="https://bsky.app/profile/alexharding.bsky.social" class="nice-links">bluesky</a>
+            </span>
+            <br>
+            <br>
+
         </div>
 
     </div>

diff --git a/out/bevy_vaporwave_bg.wasm b/out/bevy_vaporwave_bg.wasm
diff --git a/styles.css b/styles.css
@@ -1,3 +1,5 @@
+/* CSS File */
+
 :root {
     --base-main-bg: black;
     --base-main-text: rgb(35, 174, 151);
@@ -13,27 +15,9 @@
     --accent-main: #1fe0ac;
 }
 
-/* Alternate Color Scheme 1 */
-.color-scheme-1 {
-    --base-main-bg: #f0f8ff;
-    --base-main-text: #f50000;
-    --accent-main: #06ff0e;
-}
-
-/* Alternate Color Scheme 2 */
-.color-scheme-2 {
-    --base-main-bg: #00ff15;
-    --base-main-text: #111;
-    --accent-main: #ff56b9;
-}
-
-.color-scheme-3 {
-    --base-main-bg: rgb(10, 10, 10);
-    --base-main-text: #ffebcd;
-    --accent-main: #ff56b9;
-}
+/* Alternate Color Schemes omitted for brevity */
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap');
 
 /* RESET */
 *, *::before, *::after {
@@ -64,8 +48,6 @@ p, h1, h2, h3, h4, h5, h6 {
 a {
     text-decoration: none;
     color: var(--link) !important; /* Override the .main-column a color */
-
-    /* color: inherit; */
 }
 
 ul {
@@ -100,7 +82,7 @@ p {
 .main-column {
     background-color: var(--base-main-bg);
     color: var(--base-main-text);
-    padding: 20px 20px 0 20px; /* top right bottom left */
+    padding: 20px 100px 0 20px; /* top right bottom left */
 }
 
 .main-column a {
@@ -113,14 +95,13 @@ p {
 .main-column ol,
 .main-column li {
     max-width: 750px;
+    /* Text is aligned to the left by default */
 }
 
 li {
     list-style-type: square;
 }
 
-
-
 /* MENU STYLING */
 .main-menu {
     display: flex;
@@ -135,24 +116,6 @@ a:hover {
     font-family: 'Comic Sans MS', 'Comic Sans', cursive;
 }
 
-/* VIDEO PLAYER STYLING */
-.video-wrapper {
-    position: relative;
-    width: calc(100% + 20px);
-    left: -20px;
-    padding-bottom: 56.25%;
-    height: 0;
-    overflow: hidden;
-}
-
-.video-wrapper iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
 /* Add spacing for smartphones */
 .content {
     margin-bottom: 150px;
@@ -173,6 +136,22 @@ a:hover {
     height: 100%;
 }
 
+/* VIDEO WRAPPER */
+.video-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 750px;
+    margin: 20px 0;
+    aspect-ratio: 16 / 9; /* Maintains the aspect ratio */
+    overflow: hidden;
+}
+
+.video-wrapper iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
 /* Media Queries for Smartphones */
 @media (max-width: 600px) {
     body {
@@ -190,20 +169,24 @@ a:hover {
 
     .video-wrapper {
         width: 100%;
-        left: 0;
+        max-width: 100%;
+        margin: 10px 0; /* Adjusted for smaller screens */
+        padding-bottom: 56.25%; /* Ensure aspect ratio is maintained */
     }
-}
 
+    .main-column p,
+    .main-column ul,
+    .main-column ol,
+    .main-column li {
+        max-width: 100%;
+    }
+}
 
-.back-arrow {
+.nice-links {
     text-decoration: none;
     color: var(--link) !important; /* Override the .main-column a color */
-    /* or we could use more specific selector: .main-column .back-arrow */
     font-size: 20px;
-    display: block;
+    display: inline;
     position: static;
-    /* margin-top: 20px; */
     margin-left: 4px;  /* Align with heading */
-    /* margin-bottom: -15px; */
 }
-