print mode

src/App.vue

@@ -2,13 +2,17 @@
 
     <header>
     <h1>Story Baobab</h1>
+    <div class="intro">
+        Drag and drop images and video to sketch a print-friendly storyboard.
+    </div>
     </header>
 
     <main>
         
-
-        <input v-model="title">
-        <button @click="add">New Scene</button>
+    <div class="insert-scene">
+        <input v-model="title" placeholder="Title">
+        <button @click="add">Add Scene</button>
+    </div>
         
         <SceneEntry v-for="scene in scenes" :title="scene"/>
 
@@ -29,16 +33,36 @@ const add = () => {
 
 </script>
 
-<style scoped>
+<style>
 
 header {
     margin: 32px;
 }
 
+header h1 {
+    margin: 0;
+}
+
 main {
     margin: 32px;
 }
 
+.insert-scene {
+    display: inline-flex;
+    gap: 8px;
+    padding: 16px;
+    background-color: #F3F3F3;
+}
+
+@media print {
+
+    header, .insert-scene, .add-shot {
+        display: none
+    }
+
+
+
+}
 
 
 </style>

src/components/AddShot.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="add-scene">
+    <div class="add-shot">
         <FileLoader class="cover" @upload="getImg" @filename="setTitle" :key="key"></FileLoader>
         <div class="meta">
             <input v-model="title" placeholder="Title">
@@ -44,14 +44,14 @@
 </script>
 <style>
 
-.add-scene {
+.add-shot{
     position: relative;
     display: inline-flex;
     flex-direction: column;
     gap: 8px;
 }
 
-.add-scene .cover {
+.add-shot .cover {
     width: 320px;
     height: 180px;
     object-fit: cover;

src/components/SceneEntry.vue

@@ -1,11 +1,7 @@
 <template>
-
     <section class="scene">
 
-
     <h2>{{title}}</h2>
-
-    
     
     <draggable
         tag="transition-group"
@@ -96,6 +92,19 @@ const remove = (index) => {
 
 .scene h2 {
     margin-block: 32px;
+    }
+
+@media print {
+
+
+    .shots {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+
+
+
 }
 
 </style>

src/components/ShotEntry.vue

@@ -4,7 +4,7 @@
         <img :src="img">
         <div class="meta">
             <span class="order">{{order}}</span>
-            <h3 class="title">{{title}}</h3>
+            <h3 class="title" >{{title}}</h3>
             <p class="description">{{description}}</p>
         </div>
     </div>
@@ -13,7 +13,6 @@
 </template>
 <script setup>
 
-
     const props = defineProps(['title', 'description', 'img', 'order'])
     const emit = defineEmits(['remove'])
 

src/style.css

@@ -10,4 +10,22 @@ body {
     font-family: sans-serif;
     font-size: 16px;
     line-height: 1.6;
+    color: #393939;
 }
+
+button, input {
+    background-color: #ffffff;
+    border: 1px solid currentColor;
+    padding: 4px 8px;
+}
+
+button {
+    cursor: pointer;
+}
+
+button:hover {
+    color: #ffffff;
+    background-color: #393939;
+}
+
+