From 8f73846f75810fce91f979f6abac2f55e6ef6ff6 Mon Sep 17 00:00:00 2001
From: janko <Jan.Kostanjevec@radiostudent.si>
Date: Sun, 7 Jan 2024 22:33:20 +0100
Subject: [PATCH] pojem css

---
 nuxt/components/Pojem.vue | 42 +++++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/nuxt/components/Pojem.vue b/nuxt/components/Pojem.vue
index 16a71c2..8066fab 100644
--- a/nuxt/components/Pojem.vue
+++ b/nuxt/components/Pojem.vue
@@ -36,7 +36,9 @@ const urediPojem = async () => {
       <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>
+    <div>
+      <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
+    </div>
   </section>
 </template>
 
@@ -45,17 +47,45 @@ const urediPojem = async () => {
     position: relative;
     background: var(--bela);
     margin: 2rem;
-    border-radius: 3rem;
+    border-radius: 24px;
     padding: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
   }
-  @media screen and (min-width: 768px) {
+
+  .pojem > div {
+    position: relative;
+    width: 50%;
+  }
+
+  h2 {
+    text-transform: uppercase;
+    margin-top: 0;
+  }
+  .gumb {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    text-decoration: underline;
+    font-size: 3rem;
+  }
+
+  @media screen and (max-width: 768px) {
     PojemForm {
       width: 50%;
       float: left;
     }
+    .pojem > div {
+      min-height: 4rem;
+      width: 100%;
+    }
   }
-  .gumb {
-    float: right;
-    margin-right: 1rem;
+  @media screen and (max-width: 325px) {
+    .pojem {
+      margin-right: 0;
+      margin-left: 0;
+    }
   }
+
 </style>