Merge branch 'main' of https://git.xpub.nl/XPUB/SI24

web/index.html

@@ -69,8 +69,8 @@
             <p>Our tips for an uneventful stay in Rotterdam</p>
         </section>
         <div class="tours">
-            <a href="./poinxs/" class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/3/3f/Poinxsbackdrop.png" alt="">
+            <div class="tourcard">
+                <img src="images/poinx.jpg" alt="">
                 <div class="tour-text">
                     <h4>POINXS [Points of InAccess]</h4>
                     <p>A critical counter map looking at city marketing & planning versus the city living and
@@ -83,10 +83,15 @@
                         via private transport to wheelchair inaccessible hotspots with ambitions to become a multi-user
                         platform for reporting other people's POINXS.
                     </p>
+                    <ul>
+                        <li>
+                            <a href="./poinxs/">Open project</a>
+                        </li>
+                    </ul>
+                </div>
             </div>
-            </a>
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/a/a5/Fly_on_the_wall.jpg" alt="">
+                <img src="images/onthewall.jpg" alt="">
                 <div class="tour-text">
                     <h4>Fly on the Wall</h4>
                     <p>This is a device built to counter mosquito devices and prolong possible periods of loitering.
@@ -99,7 +104,7 @@
                 </div>
             </div>
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/f/f6/Screenshot_2024-06-24_at_13.29.40.png" alt="">
+                <img src="images/infra.jpg" alt="">
                 <div class="tour-text">
                     <h4>Ministry of the Infraordinary</h4>
                     <p>The Ministry of the Infraordinary invites you to experience the city of Rotterdam in ways you
@@ -118,7 +123,7 @@
                 </div>
             </div>
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/4/41/IntimaCity.jpg" alt="">
+                <img src="images/intamacity.jpg" alt="">
                 <div class="tour-text">
                     <h4>INTIMACITY</h4>
                     <p>INTIMACITY is an installation art piece that explores the relationship between people and the
@@ -146,7 +151,7 @@
                 </div>
             </div>
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/e/e2/Re-secure-product-image.png" alt="">
+                <img src="images/product-image.jpg" alt="">
                 <div class="tour-text">
                     <h4>re-secure</h4>
                     <p>In today's cities, surveillance systems are often touted as indispensable elements of urban
@@ -160,7 +165,7 @@
                 </div>
             </div>
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/0/04/CHECKPOINTLAY.png" alt="">
+                <img src="images/CHECKPOINTLAY.jpg" alt="">
                 <div class="tour-text">
                     <h4>Checking point</h4>
                     <p>In games, checking points are saving the player’s state, so they could resume the point if they
@@ -181,7 +186,7 @@
                 </div>
             </div>
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/2/23/Emohoohoo.png" alt="">
+                <img src="images/emohoohoo.jpg" alt="">
                 <div class="tour-text">
                     <h4>EmoHooHoo</h4>
                     <p>Specially designed for adults prone to embarrassment. EmoHooHoo supports the outward expression
@@ -195,7 +200,7 @@
             </div>
 
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/d/dc/Scan_3.jpg" alt="">
+                <img src="images/scan.jpg" alt="">
                 <div class="tour-text">
                     <h4>Scripts to Read the City</h4>
                     <p>The project imagines an urban environment that can be read, analyzed and criticized as a text. By
@@ -218,7 +223,7 @@
             </div>
 
             <div class="tourcard">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/4/46/Portable_mosquito_engraving.jpg" alt="">
+                <img src="images/musquito.jpg" alt="">
                 <div class="tour-text">
                     <h4>Portable Mosquito</h4>
                     <p>What if anti-loitering devices such as Mosquitos foregrounded dialogical, rather than monological
@@ -369,7 +374,8 @@
         <h2>Top 10 things to do</h2>
         <ul class="events">
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/f/fa/Mama_gerts_allewway.jpg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/f/fa/Mama_gerts_allewway.jpg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
@@ -377,11 +383,13 @@
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/8/87/Poinxs_flyer3.png" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/8/87/Poinxs_flyer3.png" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/1/10/Adv_rotterdam.jpg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/1/10/Adv_rotterdam.jpg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
@@ -389,19 +397,23 @@
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/9/94/Collective_nearby_diary.png" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/9/94/Collective_nearby_diary.png" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/b/b6/Roffamem2lorenzo.jpg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/b/b6/Roffamem2lorenzo.jpg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/6/6c/CheckingPointAds.jpg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/6/6c/CheckingPointAds.jpg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/5/5a/Portable-mosquito.png" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/5/5a/Portable-mosquito.png" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
@@ -409,11 +421,13 @@
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/1/1b/Icecreamcoupon1.jpg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/1/1b/Icecreamcoupon1.jpg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/5/50/Roffamem1lorenzo.jpg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/5/50/Roffamem1lorenzo.jpg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
@@ -421,7 +435,8 @@
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/3/31/Re-secure-ad-2000x2000px.png" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/3/31/Re-secure-ad-2000x2000px.png" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
@@ -429,11 +444,13 @@
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/e/eb/Magic_fantasy_net.jpg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/e/eb/Magic_fantasy_net.jpg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/0/03/Geenmeente_logo.svg" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/0/03/Geenmeente_logo.svg" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
             <li class="event">
@@ -442,7 +459,8 @@
             </li>
 
             <li class="event">
-                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/2/2c/Anothermosquitoad.png" alt="" class="event__img">
+                <img src="https://pzwiki.wdka.nl/mw-mediadesign/images/2/2c/Anothermosquitoad.png" alt=""
+                    class="event__img">
                 <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
             </li>
 

web/style.css

@@ -171,20 +171,17 @@ p {
     margin-top: 50px;
     max-width: 2000px;
     gap: 2rem;
-
-
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: min-content min-content min-content min-content;
-    grid-auto-rows: 300px;
+    display: flex;
     transition: .2s linear;
-
-
 }
 
 .tourcard {
     position: relative;
     overflow: hidden;
+    padding: 100px 16px 16px 16px;
+    display: flex;
+    justify-content: flex-end;
+    max-width: calc(50% - 1rem);
 }
 
 @media only screen and (max-width: 801px) {
@@ -195,18 +192,25 @@ p {
 
 .tourcard>img {
     width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+.tourcard p {
+    color: inherit;
+    text-decoration: none;
 }
 
 .tour-text {
-    position: absolute;
-    width: 80%;
-    bottom: 8%;
-    left: 8%;
-    padding: 2%;
+    /* position: absolute; */
+    padding: 16px;
     font-family: Montserrat;
     font-size: .7em;
     background: white;
-    max-height: 80%;;
 }
 
 .counter {