From: Arnaud Guéras <arnaudgs@gmail.com>
Date: Thu, 21 Nov 2024 16:46:39 +0000 (+0100)
Subject: fix mobile
X-Git-Url: http://xenbits.xensource.com/gitweb?a=commitdiff_plain;h=0b8f65fb5b03a8efcb4c38a279f429eb211fdbc1;p=www-xenproject-org.git

fix mobile

Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>
---

diff --git a/content/all.md b/content/all.md
new file mode 100644
index 0000000..b9e6247
--- /dev/null
+++ b/content/all.md
@@ -0,0 +1,5 @@
+---
+title: "all pages"
+layout: "all"
+hidden: true
+---
\ No newline at end of file
diff --git a/content/test.md b/content/test.md
index b6090f4..8da8feb 100644
--- a/content/test.md
+++ b/content/test.md
@@ -1,8 +1,11 @@
 ---
 title: "test"
 draft: true
+hidden: true
 ---
- 
-{{<section>}}
-{{<latest-news>}}
+{{<section container="full">}}
+{{<carousel class="mg-t-lg carousel-container-width">}}
+{{<getpages "projects" "hidden">}}
+{{</carousel>}}
+
 {{</section>}}
diff --git a/hugo_stats.json b/hugo_stats.json
index 89937bf..cebe371 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -48,6 +48,7 @@
     "classes": [
       "active",
       "align-flex-start",
+      "all-pages",
       "ancestor",
       "animated-home-server",
       "animated-home-shadow-screen",
@@ -86,6 +87,7 @@
       "container",
       "container-full",
       "content-markdown",
+      "date",
       "description",
       "download-search",
       "fa",
diff --git a/themes/xen-project/assets/css/base.scss b/themes/xen-project/assets/css/base.scss
index 7a5848b..2c4d499 100644
--- a/themes/xen-project/assets/css/base.scss
+++ b/themes/xen-project/assets/css/base.scss
@@ -55,6 +55,13 @@ li {
 a {
   color: var(--color-action-text);
   text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+
+  @media (max-width: 600px) {
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
 
   &:hover {
     text-decoration: underline;
diff --git a/themes/xen-project/assets/css/components/carousel.scss b/themes/xen-project/assets/css/components/carousel.scss
index 0d2d2b0..37de028 100644
--- a/themes/xen-project/assets/css/components/carousel.scss
+++ b/themes/xen-project/assets/css/components/carousel.scss
@@ -11,8 +11,6 @@
   --height: auto;
   padding-bottom: 40px;
   overflow: hidden;
-  // margin-left: calc(var(--content-padding-horizontal) * -1);
-  // margin-right: calc(var(--content-padding-horizontal) * -1);
 
   @include phone {
     --number-of-items: 2;
diff --git a/themes/xen-project/assets/css/components/latest-news.scss b/themes/xen-project/assets/css/components/latest-news.scss
index 3f0dac1..91c3bdb 100644
--- a/themes/xen-project/assets/css/components/latest-news.scss
+++ b/themes/xen-project/assets/css/components/latest-news.scss
@@ -8,3 +8,9 @@
     text-overflow: ellipsis;
   }
 }
+
+.latest-news {
+  .container h2 {
+    padding: 0 12px;
+  }
+}
diff --git a/themes/xen-project/assets/css/content-markdown.scss b/themes/xen-project/assets/css/content-markdown.scss
index 0373264..9968f88 100644
--- a/themes/xen-project/assets/css/content-markdown.scss
+++ b/themes/xen-project/assets/css/content-markdown.scss
@@ -13,8 +13,10 @@
   }
 
   th {
-    background-color: #f2f2f2;
+    background-color: var(--color-text-secondary);
+    color: #fff;
     font-weight: bold;
+    border: 1px solid #fff;
   }
 
   tr {
@@ -36,6 +38,23 @@
       font-style: italic;
     }
   }
+  // Styles responsive
+  @media screen and (max-width: 768px) {
+    table {
+      display: block;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    td,
+    th {
+      padding: 0.5rem 0.8rem;
+    }
+
+    td:last-child {
+      white-space: normal;
+    }
+  }
 
   h1,
   h2,
@@ -54,5 +73,14 @@
     line-height: 1.4;
     margin-top: var(--sp-sm);
     margin-bottom: var(--sp-sm);
+    width: 100%;
+    overflow-x: auto;
+    white-space: pre-wrap;
+  }
+
+  @media (max-width: 600px) {
+    p {
+      word-break: break-word;
+    }
   }
 }
diff --git a/themes/xen-project/assets/css/grid.scss b/themes/xen-project/assets/css/grid.scss
index 32db705..6b42caa 100644
--- a/themes/xen-project/assets/css/grid.scss
+++ b/themes/xen-project/assets/css/grid.scss
@@ -29,6 +29,16 @@ section {
   margin-top: var(--block-space);
 }
 
+.col {
+  h2,
+  h3,
+  h4 {
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}
+
 .section-row {
   --min-col-width: 300px;
   @include tablet {
@@ -69,24 +79,29 @@ section {
   display: flex;
   flex-direction: row;
   --gap: var(--sp-lg);
+  --cols: 3;
+  --min-col-width: 300px;
   gap: var(--gap);
   justify-content: flex-start;
   align-items: stretch;
   flex-wrap: wrap;
-  --cols: 3;
-  --min-col-width: 300px;
+
   > *,
   > .col {
-    min-width: var(--min-col-width);
-    flex: 0 0 calc((100% / var(--cols)) - var(--gap));
-  }
-}
+    flex: 1 1 auto;
 
-.row-from-list .card__content {
+    @include phone {
+      --basis: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
+      min-width: var(--min-col-width);
+      flex: 1 1 var(--basis);
+    }
+  }
 }
 
 @for $i from 1 through 5 {
-  .cols-#{$i} {
-    --cols: #{$i};
+  @include phone {
+    .cols-#{$i} {
+      --cols: #{$i};
+    }
   }
 }
diff --git a/themes/xen-project/assets/css/molecules/buttons.scss b/themes/xen-project/assets/css/molecules/buttons.scss
index 65e8c81..d95dc5d 100644
--- a/themes/xen-project/assets/css/molecules/buttons.scss
+++ b/themes/xen-project/assets/css/molecules/buttons.scss
@@ -145,3 +145,19 @@
     }
   }
 }
+
+@media (max-width: 600px) {
+  .container,
+  .mg-t-md {
+    &:has(> .btn ~ .btn) {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-sm);
+      align-items: center;
+
+      > .btn {
+        margin: 0;
+      }
+    }
+  }
+}
diff --git a/themes/xen-project/assets/css/molecules/card.scss b/themes/xen-project/assets/css/molecules/card.scss
index 4277bf7..4d1bc74 100644
--- a/themes/xen-project/assets/css/molecules/card.scss
+++ b/themes/xen-project/assets/css/molecules/card.scss
@@ -40,6 +40,11 @@
     line-clamp: 4;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    @media (max-width: 600px) {
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
   }
 
   &__date {
diff --git a/themes/xen-project/assets/css/molecules/features-list.scss b/themes/xen-project/assets/css/molecules/features-list.scss
index a5a4228..f5bdcfc 100644
--- a/themes/xen-project/assets/css/molecules/features-list.scss
+++ b/themes/xen-project/assets/css/molecules/features-list.scss
@@ -7,6 +7,7 @@
   --feature-item-title-gap: 0.5rem;
 
   @include tablet {
+    --feature-padding: 2.5rem;
     --features-columns-count: 2;
     --feature-item-title-font-size: 2.5rem;
     --feature-item-title-gap: 1.3rem;
@@ -70,7 +71,14 @@
   border-radius: var(--feature-border-radius);
   border-radius: 16px;
   background: var(--color-brand-surface);
-  padding: 40px;
+  --title-direction: column;
+  --icon-font-size: 0.6em;
+  --icon-size: 36px;
+
+  @include tablet {
+    // --title-direction: column;
+    --icon-font-size: 1.8rem;
+  }
 
   &-content {
     flex: 1;
@@ -78,12 +86,14 @@
 
   // Icon styles
   &__icon {
+    --icon-size: 2.5em;
+    font-size: var(--icon-font-size);
+    width: var(--icon-size);
+    height: var(--icon-size);
     display: flex !important;
-    width: 72px;
-    height: 72px;
+
     justify-content: center;
     align-items: center;
-    font-size: 0.8em;
     border-radius: 100px;
     border: 2px solid var(--color-surface);
     color: var(--color-surface);
@@ -92,12 +102,12 @@
       0px 11px 15px 0px rgba(71, 84, 103, 0.1),
       0px 9px 46px 0px rgba(71, 84, 103, 0.06),
       0px 24px 38px 0px rgba(71, 84, 103, 0.04);
-    font-size: 1.5rem;
   }
 
   // Title styles
   &__title {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--feature-item-title-gap);
     font-size: var(--feature-item-title-font-size);
     font-weight: 500;
@@ -105,7 +115,7 @@
     margin: 0 0 1.05rem;
     padding-bottom: 0.28em;
     display: flex;
-    flex-direction: column;
+    flex-direction: var(--title-direction);
     align-items: flex-start;
   }
 
diff --git a/themes/xen-project/assets/css/molecules/hero-block.scss b/themes/xen-project/assets/css/molecules/hero-block.scss
index 92ae179..9f91b93 100644
--- a/themes/xen-project/assets/css/molecules/hero-block.scss
+++ b/themes/xen-project/assets/css/molecules/hero-block.scss
@@ -1,15 +1,14 @@
 .hero-block {
   --margin-top: var(--sp-xs);
   --margin-bottom: var(--sp-xxl);
-  --title-font-size: 2.25rem;
 
   margin-top: var(--margin-top);
   margin-bottom: var(--margin-bottom);
+  --title-font-size: clamp(1.3rem, 1.3rem + 2vw, 4rem);
 
   @include tablet {
     --margin-top: var(--sp-xxxl);
     --margin-bottom: var(--sp-sm);
-    --title-font-size: 4rem;
   }
 
   .media-block__title {
diff --git a/themes/xen-project/assets/css/molecules/list-pages.scss b/themes/xen-project/assets/css/molecules/list-pages.scss
index 741222f..c170275 100644
--- a/themes/xen-project/assets/css/molecules/list-pages.scss
+++ b/themes/xen-project/assets/css/molecules/list-pages.scss
@@ -1,21 +1,35 @@
 .list-pages {
-  --gap: var(--sp-md);
-  --cols: 2;
+  --gap: 12px;
+  --cols: 1;
+  --basis: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
 
+  @include phone {
+    --cols: 2;
+  }
+
   @include tablet {
+    --gap: var(--sp-md);
     --cols: 3;
   }
 
-  @include tablet-up {
+  @include desktop {
     --cols: 4;
   }
 
-  > * {
-    --basis: calc((100% / var(--cols)) - var(--gap));
-    flex: 0 0 var(--basis);
+  > *,
+  > .card {
+    // flex: 1;
+    // width: 100%;
+    // flex-basis: auto;
+
+    @include phone {
+      --basis: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
+      width: auto;
+      flex: 0 0 var(--basis);
+    }
   }
 }
diff --git a/themes/xen-project/assets/css/molecules/media-block.scss b/themes/xen-project/assets/css/molecules/media-block.scss
index dff3ab1..e7e9478 100644
--- a/themes/xen-project/assets/css/molecules/media-block.scss
+++ b/themes/xen-project/assets/css/molecules/media-block.scss
@@ -79,7 +79,7 @@
     letter-spacing: -0.00125em;
     font-weight: 700;
     text-transform: uppercase;
-    line-height: 67%;
+    line-height: 80%;
   }
 
   &__content,
diff --git a/themes/xen-project/assets/css/molecules/section-square-primary.scss b/themes/xen-project/assets/css/molecules/section-square-primary.scss
index 815f95d..e051326 100644
--- a/themes/xen-project/assets/css/molecules/section-square-primary.scss
+++ b/themes/xen-project/assets/css/molecules/section-square-primary.scss
@@ -3,6 +3,10 @@
   margin-left: auto;
   margin-right: auto;
   max-width: 1920px;
-  padding: var(--sp-xl) var(--sp-lg);
+  padding: 24px 12px;
   border-radius: 24px;
+
+  @include tablet {
+    padding: var(--sp-xl) var(--sp-lg);
+  }
 }
diff --git a/themes/xen-project/assets/css/molecules/section-square-rounded.scss b/themes/xen-project/assets/css/molecules/section-square-rounded.scss
index 03e66b8..797dade 100644
--- a/themes/xen-project/assets/css/molecules/section-square-rounded.scss
+++ b/themes/xen-project/assets/css/molecules/section-square-rounded.scss
@@ -4,5 +4,9 @@
   margin-left: auto;
   margin-right: auto;
   max-width: 1920px;
-  padding: var(--sp-xl) var(--sp-lg);
+  padding: 24px 12px;
+
+  @include tablet {
+    padding: var(--sp-xl) var(--sp-lg);
+  }
 }
diff --git a/themes/xen-project/assets/css/molecules/vertical-lists.scss b/themes/xen-project/assets/css/molecules/vertical-lists.scss
index b2f3826..44f2089 100644
--- a/themes/xen-project/assets/css/molecules/vertical-lists.scss
+++ b/themes/xen-project/assets/css/molecules/vertical-lists.scss
@@ -4,15 +4,24 @@
   justify-content: space-between;
   flex-wrap: wrap;
   flex-direction: row;
-  gap: var(--sp-lg) var(--sp-md);
+  --gap: var(--sp-md);
+  gap: var(--sp-lg) var(--gap);
   margin-top: var(--sp-md);
 
+  @media (max-width: 600px) {
+    --cols: 1 !important;
+  }
+
   .list-column {
-    flex-basis: calc((100% / var(--cols)) - var(--sp-md));
+    --basis: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
+    flex: 1 1 var(--basis);
+    word-break: break-word;
+    overflow-wrap: break-word;
+    //flex-basis: calc((100% / var(--cols)) - var(--sp-md));
   }
 }
+
 .list-column {
-  flex: 1;
   --border-left: 2px solid var(--color-brand-fill);
   padding-left: var(--sp-sm-md);
   //border-left: var(--border-left);
diff --git a/themes/xen-project/assets/css/structure.scss b/themes/xen-project/assets/css/structure.scss
index 85984f2..60c80f5 100644
--- a/themes/xen-project/assets/css/structure.scss
+++ b/themes/xen-project/assets/css/structure.scss
@@ -4,7 +4,11 @@
   flex-wrap: wrap;
   justify-content: stretch;
   align-items: stretch;
-  padding-top: 80px;
+  padding-top: 30px;
+
+  @include phone {
+    padding-top: 80px;
+  }
 
   &.has-aside {
     max-width: 1920px;
diff --git a/themes/xen-project/assets/css/variables.scss b/themes/xen-project/assets/css/variables.scss
index b81a3bb..ea229ff 100644
--- a/themes/xen-project/assets/css/variables.scss
+++ b/themes/xen-project/assets/css/variables.scss
@@ -1,6 +1,6 @@
 :root {
   --container-width: 1312px;
-  --content-padding-horizontal: 20px;
+  --content-padding-horizontal: 12px;
 
   --font-size: 1em;
   --font-family: "gotham", sans-serif;
@@ -27,7 +27,6 @@
 
   @include tablet {
     --content-padding-horizontal: 40px;
-
     --container-paddings: var(--sp-lg);
     --section-space: 100px;
     --block-space: 160px;
diff --git a/themes/xen-project/assets/js/carousel.js b/themes/xen-project/assets/js/carousel.js
index 04f4803..d6c59ea 100644
--- a/themes/xen-project/assets/js/carousel.js
+++ b/themes/xen-project/assets/js/carousel.js
@@ -192,6 +192,12 @@
     carouselElement.classList.add("carousel-initialized");
   };
 
+  /**
+   * Waits for elements matching the selector to be present in the DOM within the given element.
+   * @param {HTMLElement} element - The parent element to observe for the selector.
+   * @param {string} selector - The CSS selector to match the elements.
+   * @returns {Promise<NodeListOf<Element>>} A promise that resolves with the matched elements.
+   */
   const waitForElements = (element, selector) => {
     return new Promise((resolve) => {
       const items = element.querySelectorAll(selector);
diff --git a/themes/xen-project/layouts/_default/all.html b/themes/xen-project/layouts/_default/all.html
new file mode 100644
index 0000000..5edc123
--- /dev/null
+++ b/themes/xen-project/layouts/_default/all.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+  <div class="all-pages">
+    <h1>{{ .Title }}</h1>
+
+    <ul>
+      {{ range .Site.Pages }}
+        {{ if not .Params.hidden }}
+          <li>
+            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+          </li>
+        {{ end }}
+      {{ end }}
+    </ul>
+  </div>
+{{ end }}
diff --git a/themes/xen-project/layouts/_default/list.html b/themes/xen-project/layouts/_default/list.html
index 21a2f27..bada205 100644
--- a/themes/xen-project/layouts/_default/list.html
+++ b/themes/xen-project/layouts/_default/list.html
@@ -1,10 +1,12 @@
 {{ define "main" }}
-  <div class="container section-space">
-    <h1>{{ .Title }}</h1>
-    {{ .Content }}
-    {{ range .Pages }}
-      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-      {{ .Summary }}
-    {{ end }}
-  </div>
+  <article class="article">
+    <div class="container section-space">
+      <h1>{{ .Title }}</h1>
+      {{ .Content }}
+      {{ range .Pages }}
+        <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+        {{ .Summary }}
+      {{ end }}
+    </div>
+  </article>
 {{ end }}
diff --git a/themes/xen-project/layouts/_default/single.html b/themes/xen-project/layouts/_default/single.html
index ecc4f4c..d982fb4 100644
--- a/themes/xen-project/layouts/_default/single.html
+++ b/themes/xen-project/layouts/_default/single.html
@@ -8,7 +8,7 @@
   {{ if eq $asidePosition "before" }}
     {{ partial "aside.html" . }}
   {{ end }}
-  <article class="article" data-blog-api-key="{{ .Site.Params.blogApiKey }}">
+  <article class="article">
     <div class="container page-top">
       <h1>{{ .Title }}</h1>
       <div class="description">
diff --git a/themes/xen-project/layouts/partials/head.html b/themes/xen-project/layouts/partials/head.html
index 30d01d2..3ecafc9 100644
--- a/themes/xen-project/layouts/partials/head.html
+++ b/themes/xen-project/layouts/partials/head.html
@@ -43,6 +43,6 @@
   {{ partialCached "head/css.html" . }}
 
   <script>
-    const siteParams = {{ .Site.Params  }};
+    var siteParams = window.siteParams = {{ .Site.Params  }};
   </script>
 </head>
diff --git a/themes/xen-project/layouts/partials/latest-news.html b/themes/xen-project/layouts/partials/latest-news.html
index 95bf0b0..3a54f0a 100644
--- a/themes/xen-project/layouts/partials/latest-news.html
+++ b/themes/xen-project/layouts/partials/latest-news.html
@@ -1,4 +1,4 @@
-<div class="latest-news" data-max-cards="10" data-blog-api-key="{{ .Site.Params.blogApiKey }}">
+<div class="latest-news" data-max-cards="10">
   <div class="container">
     <h2>
       Latest <strong>news</strong>