From 31235cea67ab3daff42af69e5949b9ffea774067 Mon Sep 17 00:00:00 2001
From: mwinter <mwinter@unboundedpress.org>
Date: Mon, 28 Aug 2023 22:54:29 +0200
Subject: [PATCH] fixing mobile fail

---
 portfolio-nuxt/app.vue                        |  2 +-
 .../pages/a_history_of_the_domino_problem.vue | 29 ++++++++++---------
 portfolio-nuxt/pages/about.vue                |  2 +-
 portfolio-nuxt/pages/events.vue               |  2 +-
 portfolio-nuxt/pages/index.vue                |  2 +-
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/portfolio-nuxt/app.vue b/portfolio-nuxt/app.vue
index 68b66cb..99b133d 100644
--- a/portfolio-nuxt/app.vue
+++ b/portfolio-nuxt/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white min-w-[800px] min-h-[100px]">
+  <div class="bg-white min-w-[800px] min-h-[80vh]">
     <NuxtLayout>
       <NuxtPage/>
     </NuxtLayout>
diff --git a/portfolio-nuxt/pages/a_history_of_the_domino_problem.vue b/portfolio-nuxt/pages/a_history_of_the_domino_problem.vue
index 4695220..8121899 100644
--- a/portfolio-nuxt/pages/a_history_of_the_domino_problem.vue
+++ b/portfolio-nuxt/pages/a_history_of_the_domino_problem.vue
@@ -1,16 +1,20 @@
 <template>
-    <div class="bg-contain bg-no-repeat bg-center rounded-lg m-5 gap-10 bg-[#0A0A19] py-4 text-2xl text-white h-[calc(100vh-10.5rem)] overflow-hidden" :style="{ backgroundImage: `url(${image})`}">
+    <div class="bg-contain bg-no-repeat bg-center rounded-lg m-5 gap-10 bg-[#0A0A19] py-4 text-2xl text-white py-4 mb-10 overflow-hidden" :style="{ backgroundImage: `url(${image})`}">
         <div class="rounded-lg w-full sticky top-[10px] grid grid-cols-[63%,35%]">
             <div>
                 <div class="p-5 text-5xl font-bold">a history of the domino problem</div>
                 
-                <div class="inline-flex text-2xl ml-4 mb-5">
-                    <a href="#about" class="px-3">about</a>
-                    <a href="#exhibition" class="px-3">exhibition</a>
-                    <a href="#events" class="px-3">events</a>
-                    <a href="#participants" class="px-3">participants</a>
-                    <a href="#media" class="px-3">media</a>
-                    <a href="#contributors" class="px-3">contributors</a>
+                <div>
+                    <div class="inline-flex text-2xl ml-4 mb-5">
+                        <a href="#about" class="px-3">about</a>
+                        <a href="#exhibition" class="px-3">exhibition</a>
+                        <a href="#events" class="px-3">events</a>
+                    </div>
+                    <div class="inline-flex text-2xl ml-4 mb-5">
+                        <a href="#participants" class="px-3">participants</a>
+                        <a href="#media" class="px-3">media</a>
+                        <a href="#contributors" class="px-3">contributors</a>
+                    </div>
                 </div>
             </div>
             <div>
@@ -55,10 +59,9 @@
                 watchState: true,
             }"
             :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation, SwiperHashNavigation]"
-            class="max-w-[95vw]"
             >
         <SwiperSlide data-hash="about" class="p-10 text-xl overflow-hidden">
-            <div class="max-h-[calc(100vh-27rem)] overflow-auto">
+            <div class="overflow-auto">
                 <p class="mb-5">
                     <span class="italic">a history of the domino problem</span> is a performance-installation that traces the history of an epistemological problem in mathematics about how things that one could never imagine fitting together, actually come together and unify in unexpected ways. The work comprises a set of musical compositions and a kinetic sculpture that sonify and visualize rare mosaics constructed from dominoes. The dominoes in these mosaics are similar yet slightly different than those used in the popular game of the same name. As opposed to rectangles, they are squares with various color combinations along the edges (which can alternatively also be represented by numbers or patterns) called <NuxtLink to='https://en.wikipedia.org/wiki/Wang_tile'>wang tiles</NuxtLink>. Like in the game, the rule is that edges of adjacent dominoes in a mosaic must match.  
                 </p>
@@ -68,7 +71,7 @@
             </div>
         </SwiperSlide>
         <SwiperSlide data-hash="exhibition" class="p-10 text-xl overflow-hidden">
-            <div class="max-h-[calc(100vh-27rem)] overflow-auto">
+            <div class="overflow-auto">
                 <div class="mb-5">
                     in collaboration with MAREIKE YIN-YEE LEE
                 </div>
@@ -83,7 +86,7 @@
             </div>
         </SwiperSlide>
         <SwiperSlide data-hash="events" class="p-10 text-xl overflow-hidden">
-            <div class="max-h-[calc(100vh-27rem)] overflow-auto">
+            <div class="overflow-auto">
                 <div class="mb-5">
                     Exhibition Opening - TBA
                 </div>
@@ -117,7 +120,7 @@
             </div>
         </SwiperSlide>
         <SwiperSlide data-hash="participants" class="p-10 text-xl overflow-hidden">
-            <div class="max-h-[calc(100vh-27rem)] overflow-auto">
+            <div class="max-h-[500px] overflow-auto">
                 <div class="mb-5 py-10">
                     <NuxtLink class="text-3xl font-bold" to='https://unboundedpress.org/'>Michael Winter - composer | sound artist</NuxtLink>
                     <div class="grid grid-cols-[20%,70%] p-5">
diff --git a/portfolio-nuxt/pages/about.vue b/portfolio-nuxt/pages/about.vue
index 74cc8ec..ff62e65 100644
--- a/portfolio-nuxt/pages/about.vue
+++ b/portfolio-nuxt/pages/about.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-[60%,35%] gap-10 divide-x divide-solid divide-black py-4 h-[calc(100vh-10.5rem)] overflow-auto">
+    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-[60%,35%] gap-10 divide-x divide-solid divide-black py-4 min-h-[calc(100vh-10.5rem)]">
         <div class="px-5">
             <p class="text-lg">about</p>
         
diff --git a/portfolio-nuxt/pages/events.vue b/portfolio-nuxt/pages/events.vue
index 5c567bc..6e1c47e 100644
--- a/portfolio-nuxt/pages/events.vue
+++ b/portfolio-nuxt/pages/events.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-2 gap-10 divide-x divide-solid divide-black py-4 max-h-[calc(100vh-10.5rem)] overflow-auto">
+    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-2 gap-10 divide-x divide-solid divide-black py-4 mb-10">
     
         <div class="px-5">
             <p class="text-lg">performances</p>
diff --git a/portfolio-nuxt/pages/index.vue b/portfolio-nuxt/pages/index.vue
index c71c83b..aa71d68 100644
--- a/portfolio-nuxt/pages/index.vue
+++ b/portfolio-nuxt/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-3 gap-10 divide-x divide-solid divide-black py-4 h-[calc(100vh-10.5rem)] overflow-auto">
+  <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-3 gap-10 divide-x divide-solid divide-black py-4 mb-10">
 
     <div class="px-5">
       <p class="text-lg">pieces</p>