2024 09 19 (#6)

* change sentence and bullet point color

* hejbit is blue

* no wrap on product feature list

assets/styles/main.css

@@ -321,7 +321,7 @@ video {
 
 .list-item::marker {
   font-size: 3.5rem;
-  color: var(--mp-hejbit-yellow);
+  color: var(--mp-hejbit-blue);
 }
 
 .image-wrapper {

assets/styles/util.css

@@ -354,7 +354,11 @@
 .responsive-text,
 .responsive-text p,
 .responsive-text b {
-    font-size: clamp(0.5rem, 3vw, 1.4rem);
+    font-size: clamp(0.7rem, 4vw, 1.7rem);
+}
+
+.nowrap {
+    white-space: nowrap;
 }
 
 .fullscreen-section {
@@ -369,7 +373,7 @@
     box-sizing: border-box;
 }
 
-.nowrap {
+.flex-nowrap {
     flex-wrap: nowrap;
 }
 
@@ -390,4 +394,8 @@
     .mobile-text-center {
         text-align: center;
     }
+
+    .mobile-wrap {
+        white-space: normal;
+    }
 }

hejbit/index.html

@@ -103,10 +103,9 @@ <h1 class="header-small hejbit-yellow mlr-0 text-center">
           <b class="hejbit-blue">HejBit</b>.
         </p>
 
-        <p class="text-large text-center">
-          Store, manage, and share your files using
-          <b class="hejbit-blue">HejBit</b>, with ease and simplicity. Bridging
-          Nextcloud and Ethereum Swarm.
+        <p class="text-large text-center">Bridging
+          Nextcloud and Ethereum Swarm.<br/>Store, manage, and share your files using
+          <b class="hejbit-blue">HejBit</b>, with ease and simplicity. 
         </p>
         <div class="center">
           <button
@@ -228,80 +227,80 @@ <h2 style="font-size: 2.25rem; color: var(--mp-hejbit-yellow)">
     </section>
 
     <section class="max-w-100vw flex-row center">
-      <div class="bg-black p-64 curved-border max-w-75p mobile-max-w-100vw responsive-text">
+      <div class="bg-black p-64 curved-border mobile-max-w-100vw responsive-text">
         <h2 class="header-medium hejbit-blue mt-8">Product Features</h2>
         <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           />
           <b class="mr-8">Seamless integration with Nextcloud</b>
-          <p>For already existing users, or for those needing easy onboarding</p>
+          <p class="nowrap mobile-wrap">For already existing users, or for those needing easy onboarding</p>
         </div>
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           /><b class="mr-8">Swarm file Management</b>
           <p>Upload, Download, Folder Management.</p>
         </div>
 
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           />
           <b class="mr-8">Swarm file Sharing Capabilities</b>
-          <p>Private link, Public Link.</p> 
+          <p class="nowrap mobile-wrap">Private link, Public Link.</p> 
         </div>
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           />
           <b class="mr-8">Swarm file permissions</b></p>
-          <p>Note to Recipient, Read / Update /
+          <p class="nowrap mobile-wrap">Note to Recipient, Read / Update /
           Delete, Can Edit, Password, Expiration Date, Hide Download</p>
         </div>
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           /><b class="mr-8">Swarm file Viewing & Streaming</b>
-            <p>Text files, Images, Documents (Word, spreadsheets), Audio files, Video files, PDF files.</p>
+            <p class="nowrap mobile-wrap">Text files, Images, Documents (Word, spreadsheets), Audio files, Video files, PDF files.</p>
         </div>
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           />
           <b class="mr-8">Swarm Hash Features</b>
-          <p>Check Swarm Hash, Selectively hide Swarm
+          <p class="nowrap mobile-wrap">Check Swarm Hash, Selectively hide Swarm
           Hash for defined users/groups, Swarm Hash backup.</p>
         </div>
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           />
           <b class="mr-8">Identity management & Authentication</b>
-          <p>LDAP, CAS, Auth0, SAML,
+          <p class="nowrap mobile-wrap">LDAP, CAS, Auth0, SAML,
           Shibboleth, Kerberos, amongst serveral other options.</p>
         </div>
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           /><b class="mr-8">Access Control</b>
           <p>Detailed settings for users, groups and guest
           access using Swarm Storage.</p>
         </div>
-        <div class="flex-row mb-16 align-center nowrap mobile-flex-column mobile-text-center">
+        <div class="flex-row mb-16 align-center flex-nowrap mobile-flex-column mobile-text-center">
           <img
             class="box-small mr-8 mb-8"
             src="../assets/images/hejbit-mini-logo.png"
           /><b class="mr-8">Data Migration</b>
-          <p>From Google Drive, One drive, iCloud, DropBox
+          <p class="nowrap mobile-wrap">From Google Drive, One drive, iCloud, DropBox
           to Nextcloud/Swarm Storage.</p>
         </div>
       </div>
@@ -320,9 +319,9 @@ <h3 class="header-medium hejbit-yellow text-center mobile-p-16">Hej! Meet Birgit
         </p>
         <div class="w-100p flex-row center">
           <ul class="mtb-16 m-0-auto w-100p">
-            <li class="list-item text-medium"><span>Outstanding app & tech development</span></li>
+            <li class="list-item text-medium"><span class="hejbit-yellow">Outstanding app & tech development</span></li>
             <li class="list-item text-medium mt-8">
-              <span>Honest marketing & smart business thinking</span>
+              <span class="hejbit-yellow">Honest marketing & smart business thinking</span>
             </li>
           </ul>
         </div>
@@ -443,7 +442,7 @@ <h3 class="header-smaller hejbit-yellow mt-64 mb-64 mobile-p-16">
 
       <h3 class="header-smaller hejbit-yellow mb-64 mt-64 text-center mobile-p-16">
         Thus, Birgitta went to this homepage and clicked on the yellow button
-        below - claiming her own HejBit before you did
+        below - claiming her own <span class="hejbit-blue">HejBit</span> before you did
       </h3>
     </section>