ajout header du site temporaire

science-quest/src/App.vue

@@ -1,47 +1,17 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import Titre from './components/Titre.vue';
+
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+  <!-- header -->
+  <Titre />
 
   <main>
-    <TheWelcome />
+    <!-- todo -->
   </main>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
 </style>

science-quest/src/assets/main.css

@@ -1,35 +1,6 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   font-weight: normal;
 }
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

science-quest/src/components/Titre.vue

@@ -0,0 +1,66 @@
+<script>
+export default{
+    data(){
+        return{
+            nomApp:"ScienceQuest"
+
+        }
+    }
+}
+
+</script>
+
+<template>
+    <header>
+        <!-- logo temporaire-->
+        <img alt="Vue logo" src="../assets/logo.svg" />
+        <h1>
+            <a href="/">
+                {{ nomApp }}
+            </a>
+        </h1>
+        <div class="espacement">
+            <!-- espacement pour mettre les boutons a droite-->
+        </div>
+
+        <!-- liste de trucs a cliquer; accueil, jouer, langues?-->
+        <nav>
+            <!-- todo : component pour faire type de bouton (normal, menu déroulant)-->
+            <a>Accueil</a>
+            <a>Jouer</a>
+        </nav>
+    </header>
+</template>
+
+<style scoped>
+header{
+    width:100%;
+    height: 4em;
+    background-color:gold;
+    display:flex;
+    flex:auto;
+    flex-direction: row;
+}
+
+.espacement{
+    flex:auto
+}
+
+h1{
+    font-size: 2em;
+}
+
+nav{
+    display:flex;
+    flex:0;
+    flex-direction: row;
+}
+
+nav a{
+    background-color: aqua;
+    vertical-align: center;
+    padding:1em;
+    height:100%;
+}
+
+</style>