Bug somewhere

app/services/markdown_render.py

@@ -48,12 +48,12 @@ def slider(options, images):
     height = options.get("height", 375)
 
     html_content = []
-    html_content.append('<div class="modal-buttons">')
+    html_content.append('<div class="button-stack">')
     for i, val in enumerate(images):
         if i % 2 == 0:
-            html_content.append(f"""<button onclick="openModal('modal{i}')" class="open">  <img src="{val}" class="thumbnail"></button>""".strip())
+            html_content.append(f"""<button onclick="openModal('modal{i}')" class="stacked-button">  <img src="{val}" class="thumbnail"></button>""".strip())
         else:
-            html_content.append(f"""<button onclick="openModal('modal{i}')" class="open_inv">  <img src="{val}" class="thumbnail" ></button>""".strip())
+            html_content.append(f"""<button onclick="openModal('modal{i}')" class="stacked-button">  <img src="{val}" class="thumbnail" ></button>""".strip())
         html_content.append(f"""<div class="modal" id="modal{i}"> <div class="modal-content"> <h2>Modal {i}</h2> <p>This is modal {i}.</p> <img src="{val}" width="80%" height="80%"> <button onclick="closeModal('modal{i}')">Close</button><button class="next-btn" onclick="nextModal('modal{i}', 'modal{i+1}')">Next</button></div> </div>""")
     html_content.append( '</div>' )
     html  = '\n'.join( html_content )

data/Kultur/index.html

@@ -58,14 +58,14 @@
 <p>Kunst og kultur går hånd i hånd i Portugal. Byer som <strong>Porto</strong> og <strong>Lissabon</strong> er fyldt med street art, museer og gallerier, der udtrykker både moderne og traditionel portugisisk kunst.</p>
 <p>Portugal formår at kombinere historie, musik og mad med en afslappet livsstil. Det er en kultur, der er lige så rig på oplevelser, som den er på sjæl.  </p>
 <h3>Lidt billeder</h3>
-<p><div class="modal-buttons">
+<p><div class="button-stack">
-<button onclick="openModal('modal0')" class="open">  <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button>
+<button onclick="openModal('modal0')" class="stacked-button">  <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button>
 <div class="modal" id="modal0"> <div class="modal-content"> <h2>Modal 0</h2> <p>This is modal 0.</p> <img src="https://picsum.photos/id/34/500/375" width="80%" height="80%"> <button onclick="closeModal('modal0')">Close</button><button class="next-btn" onclick="nextModal('modal0', 'modal1')">Next</button></div> </div>
-<button onclick="openModal('modal1')" class="open_inv">  <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button>
+<button onclick="openModal('modal1')" class="stacked-button">  <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button>
 <div class="modal" id="modal1"> <div class="modal-content"> <h2>Modal 1</h2> <p>This is modal 1.</p> <img src="https://picsum.photos/id/42/500/375" width="80%" height="80%"> <button onclick="closeModal('modal1')">Close</button><button class="next-btn" onclick="nextModal('modal1', 'modal2')">Next</button></div> </div>
-<button onclick="openModal('modal2')" class="open">  <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button>
+<button onclick="openModal('modal2')" class="stacked-button">  <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button>
 <div class="modal" id="modal2"> <div class="modal-content"> <h2>Modal 2</h2> <p>This is modal 2.</p> <img src="https://picsum.photos/id/72/500/375" width="80%" height="80%"> <button onclick="closeModal('modal2')">Close</button><button class="next-btn" onclick="nextModal('modal2', 'modal3')">Next</button></div> </div>
-<button onclick="openModal('modal3')" class="open_inv">  <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button>
+<button onclick="openModal('modal3')" class="stacked-button">  <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button>
 <div class="modal" id="modal3"> <div class="modal-content"> <h2>Modal 3</h2> <p>This is modal 3.</p> <img src="https://picsum.photos/id/94/500/375" width="80%" height="80%"> <button onclick="closeModal('modal3')">Close</button><button class="next-btn" onclick="nextModal('modal3', 'modal4')">Next</button></div> </div>
 </div></p>
             </div>

generated_data.json

@@ -6,17 +6,17 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Bolig i Portugal",
+            "name": "Populære områder i Portugal",
             "path": "Bolig",
             "author": "Henrik Jess"
         },
         {
-            "name": "El- og vandregninger i Portugal: Sådan påvirker de leveomkostningerne",
+            "name": "Supermarkedssammenligning",
             "path": "Budget",
             "author": "Henrik Jess"
         },
         {
-            "name": "Permanent ophold i Portugal",
+            "name": "Flytte permanent til Portugal",
             "path": "Flytning",
             "author": "Henrik Jess"
         },
@@ -36,7 +36,7 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Omkostninger ved at bo i Portugal vs Danmark",
+            "name": "Priser på mad og dagligvarer i Portugal",
             "path": "Hverdag",
             "author": "Henrik Jess"
         },
@@ -46,12 +46,12 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Portugals unikke kultur",
+            "name": "Nattelivet i Portugal",
             "path": "Kultur",
             "author": "Henrik Jess"
         },
         {
-            "name": "Livskvalitet i Portugal",
+            "name": "Portugiserne som mennesker",
             "path": "Livskvalitet",
             "author": "Henrik Jess"
         },
@@ -81,7 +81,7 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Er transport billigere i Portugal?",
+            "name": "Fordele ved offentlig transport i Portugal",
             "path": "Transport",
             "author": "Henrik Jess"
         }

static/css/main.css

@@ -2582,6 +2582,56 @@ button:disabled,
   transform: scale(1.05);
 }
 
+.button-stack {
+  display: flex;
+  flex-direction: column-reverse;
+  position: relative;
+  margin: 50px auto;
+  align-items: center;
+}
+
+.stacked-button {
+  all: unset;
+  position: absolute; /* Absolut position for overlap */
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  width: 100px; /* Standardbredde */
+  height: 50px; /* Standardhøjde */
+  background-color: transparent;
+  cursor: pointer;
+  transition: transform 0.3s ease, z-index 0.3s ease;
+}
+.stacked-button:hover {
+  transform: translate(-50%, -50%) scale(1.1); /* Zoom ved hover */
+  z-index: 10; /* Hover sætter knappen øverst */
+}
+
+.stacked-button:nth-child(1) {
+  z-index: 100; /* Højeste z-index for at sikre, at den altid ligger øverst */
+  transform: translate(-50%, -50%) scale(1.2); /* Gør knappen lidt større */
+}
+
+.stacked-button:nth-child(2) {
+  transform: translate(-50%, -60%) rotate(-15deg);
+  z-index: 2;
+}
+
+.stacked-button:nth-child(3) {
+  transform: translate(-50%, -50%) rotate(10deg);
+  z-index: 3;
+}
+
+.stacked-button:nth-child(4) {
+  transform: translate(-50%, -40%) rotate(-10deg);
+  z-index: 4;
+}
+
+.stacked-button:nth-child(5) {
+  transform: translate(-50%, -30%) rotate(15deg);
+  z-index: 5;
+}
+
 /* Wrapper */
 #wrapper {
   display: -moz-flex;

static/sass/components/_modals.scss

@@ -126,3 +126,59 @@ $button-color: #000;
     transform: scale(1.05);
   }
 }
+
+// Container til stablede knapper (reverseret)
+.button-stack {
+  display: flex;
+  flex-direction: column-reverse; // Reverserer rækkefølgen af knapperne
+  position: relative;
+  margin: 50px auto;
+  align-items: center; // Centrer knapperne horisontalt
+}
+
+
+// Knapper
+.stacked-button {
+  all: unset; // Fjerner globale knap-styles
+  position: absolute; /* Absolut position for overlap */
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  width: 100px; /* Standardbredde */
+  height: 50px; /* Standardhøjde */
+  background-color: transparent; // Ingen baggrundsfarve
+  cursor: pointer;
+  transition: transform 0.3s ease, z-index 0.3s ease;
+
+  &:hover {
+    transform: translate(-50%, -50%) scale(1.1); /* Zoom ved hover */
+    z-index: 10; /* Hover sætter knappen øverst */
+  }
+}
+
+// Første knap (knap0): Altid øverst
+.stacked-button:nth-child(1) {
+  z-index: 100; /* Højeste z-index for at sikre, at den altid ligger øverst */
+  transform: translate(-50%, -50%) scale(1.2); /* Gør knappen lidt større */
+}
+
+// Rotation og position for de andre knapper
+.stacked-button:nth-child(2) {
+  transform: translate(-50%, -60%) rotate(-15deg);
+  z-index: 2;
+}
+
+.stacked-button:nth-child(3) {
+  transform: translate(-50%, -50%) rotate(10deg);
+  z-index: 3;
+}
+
+.stacked-button:nth-child(4) {
+  transform: translate(-50%, -40%) rotate(-10deg);
+  z-index: 4;
+}
+
+.stacked-button:nth-child(5) {
+  transform: translate(-50%, -30%) rotate(15deg);
+  z-index: 5;
+}