Merge pull request #120 from CreativeCodeBerlin/fix-project-flicker

I make sure the <section> for projects is not rendered server-side by adding v-if="showProject"
Then in onMounted, after project index has been updated: showProject.value = true

Also switched to black bacground by default. More projects have that than white.

Author: gugray

app.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="app">
     <header>
-      <section class="project">
+      <div ref="projectMount"></div>
+      <section v-if="showProject" class="project">
         <h2 class="credits">
           Background art by
           <template v-if="project.author_url">
@@ -12,8 +13,7 @@
           </template>
         </h2>
         <div class="display">
-          <iframe :style="{ transform: `scale(${project.scale})` }" :src="project.url">
-          </iframe>
+          <iframe :style="{ transform: `scale(${project.scale})` }" :src="project.url" />
         </div>
       </section>
       <svg width="49" height="65" viewBox="0 0 49 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="logo">
@@ -34,17 +34,17 @@
 import projects from 'assets/projects';
 import links from 'assets/links';
 
+const showProject = ref(false)
 const projectIndex = useCookie('projectIndex', {
   default: () => Math.floor(Math.random() * projects.length),
 })
-
-
 const project = ref(projects[projectIndex.value])
 provide('project', project)
 onMounted(() => {
   projectIndex.value += 1
   projectIndex.value %= projects.length
   project.value = projects[projectIndex.value]
+  showProject.value = true
 })
 
 const route = useRoute()
@@ -72,8 +72,8 @@ useHead(() => ({
 <style lang="scss">
 :root {
   --primary: #cb5955;
-  --foreground: black;
-  --background: white;
+  --foreground: white;
+  --background: black;
 
   &.black {
     --foreground: white;
@@ -129,11 +129,6 @@ a {
   z-index: 0;
   min-height: 100vh;
 
-  &.black {
-    --foreground: white;
-    --background: black;
-  }
-
   @media screen and (min-width: 800px) {
     display: flex;
   }