fix carousel on mobile

MetaProvide · Sep 20, 2024 · 98e2b73 · 98e2b73
1 parent 1e20048
commit 98e2b73
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 51 deletions.
diff --git a/assets/styles/main.css b/assets/styles/main.css
@@ -351,36 +351,6 @@ video {
   max-width: 300px;
 }
 
-.carousel-wrapper {
-  margin-bottom: 16px;
-}
-
-.areas-wrapper {
-  display: flex;
-  justify-content: space-between;
-}
-
-.area-card {
-  width: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  color: var(--grey-600-color);
-}
-
-.area-card p {
-  margin-top: 0px;
-  margin-bottom: 24px;
-}
-
-.area-card div {
-  text-align: center;
-}
-
-.area-card img {
-  width: 100%;
-}
-
 .posts-list {
   margin: 0;
   padding: 0;

diff --git a/assets/styles/util.css b/assets/styles/util.css
@@ -54,6 +54,38 @@
     padding: 64px;
 }
 
+.pt-8 {
+    padding-top: 8px;
+}
+.pt-16 {
+    padding-top: 16px;
+}
+.pt-32 {
+    padding-top: 32px;
+}
+.pt-48 {
+    padding-top: 48px;
+}
+.pt-64 {
+    padding-top: 64px;
+}
+
+.pb-8 {
+    padding-bottom: 8px;
+}
+.pb-16 {
+    padding-bottom: 16px;
+}
+.pb-32 {
+    padding-bottom: 32px;
+}
+.pb-48 {
+    padding-bottom: 48px;
+}
+.pb-64 {
+    padding-bottom: 64px;
+}
+
 .plr-8 {
     padding-left: 8px;
     padding-right: 8px;
@@ -387,6 +419,10 @@
         padding: 16px;
     }
 
+    .mobile-p-32 {
+        padding: 32px;
+    }
+
     .mobile-flex-column {
         flex-direction: column;
     }

diff --git a/blog/may-2022.html b/blog/may-2022.html
@@ -137,22 +137,22 @@ <h3 id="how-are-we-contributing-to-the-greater-good">
       <p><strong>Our three core projects are:</strong></p>
       <ol>
         <li>
-          <p><a href="../areas#adminly">Adminly</a></p>
+          <p>Adminly</p>
           <p>
             A web-based all-in-one administrative tasks platform, designed
             specifically for well-being providers, with personalized support
             from virtual assistants.
           </p>
         </li>
         <li>
-          <p><a href="../areas#metafriend">MetaFriend</a></p>
+          <p>MetaFriend</p>
           <p>
             An entirely free service to connect well-being explorers with vetted
             providers, according to their individual needs and aspirations.
           </p>
         </li>
         <li>
-          <p><a href="../areas#metaland">MetaLand</a></p>
+          <p>MetaLand</p>
           <p>
             Our bit of land in the Portuguese country-side for harmonizing
             multi-disciplinary approaches to well being through permaculture,

diff --git a/hejbit/index.html b/hejbit/index.html
@@ -129,7 +129,7 @@ <h2 class="header-xl text-center">
     </section>
 
     <section class="max-w-100vw mt-128">
-      <div class="carousel-wrapper mt-64">
+      <div class="mb-16 mt-64">
         <carousel-component>
           <div
             style="
@@ -306,9 +306,9 @@ <h2 class="header-medium hejbit-blue mt-8">Product Features</h2>
       </div>
     </section>
 
-    <section class="max-w-100vw bg-hejbit-secondary flex-column center">
-      <h3 class="header-medium hejbit-yellow text-center mobile-p-16">Hej! Meet Birgitta Wallander</h3>
-      <div class="w-content curved-border bg-black p-48">
+    <section class="max-w-100vw bg-hejbit-secondary">
+      <h3 class="header-medium hejbit-yellow text-center mobile-p-16 pt-48">Hej! Meet Birgitta Wallander</h3>
+      <div class="w-content curved-border bg-black p-48 m-0-auto">
         <img
           class="curved-border mobile-p-16 m-0-auto"
           src="../assets/images/birgitta.png"
@@ -326,10 +326,8 @@ <h3 class="header-medium hejbit-yellow text-center mobile-p-16">Hej! Meet Birgit
           </ul>
         </div>
       </div>
-
-
 
-      <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
+      <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16 text-center">
         Being smart she knows that not all data storage solutions are
         created equal
       </h3>
@@ -350,8 +348,7 @@ <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
             <div
               style="border-radius: 100px 100px 0 0; margin-bottom: 16px; width: 100%; height: 350px; background: url('../assets/images/birgitta_looking.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;"
             ></div>
-            <div style="padding: 24px 48px;">
-            <ul style="margin-left: 0">
+            <ul style="margin-left: 0; padding: 24px 32px 24px 52px;">
               <li style="line-height: 2.25rem; font-size: 1.8rem">
                 First thing that comes to her mind is safety, protecting her
                 inventions; unique and precious recipies as well as code.
@@ -370,7 +367,6 @@ <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
               </li>
             </ul>
           </div>
-          </div>
           <div
             style="
               display: flex;
@@ -386,8 +382,7 @@ <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
             <div
               style="border-radius: 100px 100px 0 0; margin-bottom: 16px; width: 100%; height: 350px; background: url('../assets/images/HerbLab.svg'); background-size: contain; background-color: #eee; background-position: center center; background-repeat: no-repeat;"
             ></div>
-            <div style="padding: 24px 48px;">
-            <ul style="margin-left: 0">
+            <ul style="margin-left: 0;padding: 24px 32px 24px 52px;">
               <li style="line-height: 2.25rem; font-size: 1.8rem">
                 She discovers that the true meaning of cloud is "stored on someone else’s computer". With HejBit her files can instead stay on her self-hosted storage, but, much better, nowhere at all; i.e. in fully decentralised non-local storage.
               </li>
@@ -403,7 +398,6 @@ <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
                 business.
               </li>
             </ul>
-            </div>
           </div>
           <div
             style="
@@ -421,9 +415,7 @@ <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
               style="border-radius: 100px 100px 0 0; margin-bottom: 16px; width: 100%; height: 350px; background: url('../assets/images/lab1.jpg'); background-size: cover; background-color: #eee; background-position: center center; background-repeat: no-repeat;
 "
             ></div>
-            <div 
-            style="padding: 24px 48px;">
-            <ul style="margin-left: 0">
+            <ul style="margin-left: 0;padding: 24px 32px 24px 52px;">
               <li style="line-height: 2.25rem; font-size: 1.8rem">
                 She knows that it's the blockchain that not only decentralises
                 her life's work, but also connects her to potentially booming
@@ -435,12 +427,11 @@ <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
                 one else could ever steal, vandalise or burn down.
               </li>
             </ul>
-            </div>
           </div>
         </carousel-component>
       </div>
 
-      <h3 class="header-smaller hejbit-yellow mb-64 mt-64 text-center mobile-p-16">
+      <h3 class="header-smaller hejbit-yellow pb-64 mt-64 text-center mobile-p-32">
         Thus, Birgitta went to this homepage and clicked on the yellow button
         below - claiming her own <span class="hejbit-blue">HejBit</span> before you did
       </h3>