Stajlanje pojma WIP

nuxt/components/Glava.vue

@@ -18,6 +18,7 @@
 
  img {
   width: 100%;
+  z-index: -1;
  }
 
  .meni {

nuxt/components/Pojem.vue

@@ -31,24 +31,31 @@ const urediPojem = async () => {
 
 <template>
   <section class="pojem">
-    <PojemForm v-if="urejanje" :revisionId="revisionId" :pojem="pojem" :urejanje="urejanje" />
+    <div>
-    <div v-else>
-      <div class="gumb" @click="urediPojem">Uredi</div>
       <h2>{{ pojem.naslov }}</h2>
       <div class="tekst" v-html="pojem.tekst" />
     </div>
+    <PojemForm v-if="urejanje" :revisionId="revisionId" :pojem="pojem" :urejanje="urejanje" />
+    <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
   </section>
 </template>
 
 <style scoped>
+  .pojem {
+    position: relative;
+    background: var(--bela);
+    margin: 2rem;
+    border-radius: 3rem;
+    padding: 2rem;
+  }
   @media screen and (min-width: 768px) {
     PojemForm {
       width: 50%;
       float: left;
     }
   }
-.gumb {
+  .gumb {
-  float: right;
+    float: right;
-  margin-right: 1rem;
+    margin-right: 1rem;
-}
+  }
 </style>

nuxt/pages/index.vue

@@ -13,6 +13,7 @@ await store.naloziStrani()
 <style>
   :root {
     --siva: #D9D9D9;
+    --bela: #fff;
   }
 
   body {
@@ -39,8 +40,6 @@ await store.naloziStrani()
   }
 
   .gumb {
-    display: block;
-    padding: .2rem .5rem;
     font-family: Trailers;
     font-size: 2rem;
     cursor: pointer;