[Style] Korea fish in desktop mode

src/assets/images/CFP/radial.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1922" height="2900" viewBox="88 0 1922 2900"><defs><style>.a{opacity:0.6;}.b{fill:#9ccaef;}.c{fill:#9cc3ef;}.d{fill:#fff;}</style></defs><g class="a" transform="translate(89)"><path class="b" d="M0,0H120L960,540,0,120Z"/><path class="b" d="M240,0H360L960,540h0Z"/><path class="b" d="M480,0H600L960,540h0Z"/><path class="b" d="M720,0H840L960,540h0Z"/><path class="b" d="M960,0h120L960,540h0Z"/><path class="b" d="M1200,0h120L960,540h0Z"/><path class="c" d="M1440,0h120L960,540h0Z"/><path class="c" d="M1680,0h120L960,540h0Z"/><path class="b" d="M960,540l960-420V240L960,540Z"/><path class="b" d="M0,240,960,540h0L0,360Z"/><path class="b" d="M960,540l960-180V480L960,540Z"/><path class="b" d="M0,480l960,60h0L0,600Z"/><path class="b" d="M960,540l960,60V720L960,540Z"/><path class="b" d="M0,720,960,540h0L0,840Z"/><path class="b" d="M960,540l960,300V960L960,540Z"/><path class="b" d="M0,960,960,540,0,1157V960Z"/><path class="b" d="M960,540h0L0,1404V1260Z"/><path class="b" d="M960,540h0L0,1981V1620Z"/><path class="b" d="M960,540h0L436,2900H-89Z"/><path class="b" d="M960,540h0l524,2360H960Z"/><path class="b" d="M960,540h0l960,1440v719Z"/><path class="b" d="M960,540h0l960,864v215Z"/><path class="b" d="M960,540h0l960,617,1,103Z"/><path class="d" d="M120,0H240L960,540h0Z"/><path class="d" d="M360,0H480L960,540h0Z"/><path class="d" d="M600,0H720L960,540h0Z"/><path class="d" d="M840,0H960V540h0Z"/><path class="d" d="M1080,0h120L960,540h0Z"/><path class="d" d="M1320,0h120L960,540h0Z"/><path class="d" d="M1560,0h120L960,540h0Z"/><path class="d" d="M1800,0h120V120L960,540Z"/><path class="d" d="M0,120,960,540h0L0,240Z"/><path class="d" d="M960,540l960-300V360L960,540Z"/><path class="d" d="M0,360,960,540h0L0,480Z"/><path class="d" d="M960,540l960-60V600L960,540Z"/><path class="d" d="M0,600l960-60h0L0,720Z"/><path class="d" d="M960,540l960,180V840L960,540Z"/><path class="d" d="M0,840,960,540h0L0,960Z"/><path class="d" d="M960,540h0L240,1080H120Z"/><path class="d" d="M960,540h0L480,1080H360Z"/><path class="d" d="M960,540h0L720,1080H600Z"/><path class="d" d="M960,540h0v540H840Z"/><path class="d" d="M960,540h0l240,540H1080Z"/><path class="d" d="M960,540h0l480,540H1320Z"/><path class="d" d="M960,540h0l720,540H1560Z"/><path class="d" d="M960,540l960,420v120H1800Z"/></g></svg>

src/assets/images/cfp/Background.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2010" height="2900" viewBox="0 0 2010 2900"><defs><style>.a{opacity:0.6;}.b{fill:#9ccaef;}.c{fill:#9cc3ef;}.d{fill:#fff;}</style></defs><g class="a" transform="translate(89)"><path class="b" d="M0,0H120L960,540,0,120Z"/><path class="b" d="M240,0H360L960,540h0Z"/><path class="b" d="M480,0H600L960,540h0Z"/><path class="b" d="M720,0H840L960,540h0Z"/><path class="b" d="M960,0h120L960,540h0Z"/><path class="b" d="M1200,0h120L960,540h0Z"/><path class="c" d="M1440,0h120L960,540h0Z"/><path class="c" d="M1680,0h120L960,540h0Z"/><path class="b" d="M960,540l960-420V240L960,540Z"/><path class="b" d="M0,240,960,540h0L0,360Z"/><path class="b" d="M960,540l960-180V480L960,540Z"/><path class="b" d="M0,480l960,60h0L0,600Z"/><path class="b" d="M960,540l960,60V720L960,540Z"/><path class="b" d="M0,720,960,540h0L0,840Z"/><path class="b" d="M960,540l960,300V960L960,540Z"/><path class="b" d="M0,960,960,540,0,1157V960Z"/><path class="b" d="M960,540h0L0,1404V1260Z"/><path class="b" d="M960,540h0L0,1981V1620Z"/><path class="b" d="M960,540h0L436,2900H-89Z"/><path class="b" d="M960,540h0l524,2360H960Z"/><path class="b" d="M960,540h0l960,1440v719Z"/><path class="b" d="M960,540h0l960,864v215Z"/><path class="b" d="M960,540h0l960,617,1,103Z"/><path class="d" d="M120,0H240L960,540h0Z"/><path class="d" d="M360,0H480L960,540h0Z"/><path class="d" d="M600,0H720L960,540h0Z"/><path class="d" d="M840,0H960V540h0Z"/><path class="d" d="M1080,0h120L960,540h0Z"/><path class="d" d="M1320,0h120L960,540h0Z"/><path class="d" d="M1560,0h120L960,540h0Z"/><path class="d" d="M1800,0h120V120L960,540Z"/><path class="d" d="M0,120,960,540h0L0,240Z"/><path class="d" d="M960,540l960-300V360L960,540Z"/><path class="d" d="M0,360,960,540h0L0,480Z"/><path class="d" d="M960,540l960-60V600L960,540Z"/><path class="d" d="M0,600l960-60h0L0,720Z"/><path class="d" d="M960,540l960,180V840L960,540Z"/><path class="d" d="M0,840,960,540h0L0,960Z"/><path class="d" d="M960,540h0L240,1080H120Z"/><path class="d" d="M960,540h0L480,1080H360Z"/><path class="d" d="M960,540h0L720,1080H600Z"/><path class="d" d="M960,540h0v540H840Z"/><path class="d" d="M960,540h0l240,540H1080Z"/><path class="d" d="M960,540h0l480,540H1320Z"/><path class="d" d="M960,540h0l720,540H1560Z"/><path class="d" d="M960,540l960,420v120H1800Z"/></g></svg>

src/assets/scss/CFP/bg.scss

@@ -0,0 +1,35 @@
+#cfp {
+  position: relative;
+}
+
+// The Korea Fish
+
+#cfp-bg {
+  width: 100vw;
+  z-index: -1;
+  position: absolute;
+  left: -12px; // offset
+
+  .korea-fish {
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    .sitcon-apple {
+      position: absolute;
+      margin-top: 360px;
+      width: 250px;
+    }
+    .ellipse {
+      position: absolute;
+      margin-top: 200px;
+      width: 640px;
+    }
+    .radial {
+      width: 100vw;
+      position: absolute;
+    }
+  }
+}

src/pages/CFP.vue

@@ -1,8 +1,15 @@
 <template>
   <div id="cfp" class="cfp cfp-background">
-    <!-- CfpHeader id="cfp-header"/ -->
-    <Intro id="cfp-intro"></Intro>
-    
+    <div id="cfp-bg">
+      <div class="korea-fish">
+        <img class="radial" src="~@/assets/images/CFP/radial.svg" />
+        <img class="ellipse" src="~@/assets/images/CFP/ellipse.svg" />
+        <img class="sitcon-apple" src="~@/assets/images/CFP/sitcon-apple.svg" />
+      </div>
+    </div>
+    <!-- WTF = = -->
+    <CfpHeader id="cfp-header" />
+    <!--<Intro id="cfp-intro"></Intro>-->
   </div>
 </template>
 
@@ -10,12 +17,12 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 // components
 import CfpHeader from '@/components/CFP/Header.vue';
-import Intro from '@/components/CFP/Intro.vue';
+// import Intro from '@/components/CFP/Intro.vue';
 
 @Component({
   components: {
-    CfpHeader,
-    Intro
+    CfpHeader
+    // Intro
   }
 })
 export default class CFP extends Vue {
@@ -24,6 +31,6 @@ export default class CFP extends Vue {
 </script>
 
 <style lang="scss">
-
+@import "@/assets/scss/CFP/bg";
 </style>