@paroicms/playground_demo2 0.56.0

package/theme/assets/scss/_HeroBanner.scss

@@ -0,0 +1,21 @@
+@use "constants";
+
+.HeroBanner {
+  &-img {
+    height: 545px;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  @include constants.for-phone-and-tablet {
+    &-img {
+      height: 300px;
+    }
+  }
+
+  @include constants.for-phone {
+    &-img {
+      height: 200px;
+    }
+  }
+}

package/theme/assets/scss/_Paginate.scss

@@ -0,0 +1,9 @@
+.Paginate {
+  &-left {
+    text-align: left;
+  }
+
+  &-next {
+    text-align: right;
+  }
+}

package/theme/assets/scss/_Part.scss

@@ -0,0 +1,32 @@
+.List {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+
+}
+
+.PartItem {
+  margin: 0 auto;
+
+  img {
+    margin-bottom: 10px;
+  }
+
+  &.partner {
+    margin-bottom: 20px;
+    max-width: 300px;
+
+    p {
+      margin-top: 10px;
+    }
+  }
+
+  &.sideImage {
+    display: flex;
+    width: 100%;
+
+    p {
+      margin-left: 10px;
+    }
+  }
+}

package/theme/assets/scss/_ResultItem.scss

@@ -0,0 +1,3 @@
+.ResultItem {
+  margin-bottom: 20px;
+}

package/theme/assets/scss/_SiteFooter.scss

@@ -0,0 +1,11 @@
+.SiteFooter {
+  background-color: #FAFAFA;
+  margin-top: 10px;
+  padding: 15px 0;
+  text-align: center;
+
+  &>span:nth-child(1) {
+    font-weight: bold;
+    margin-right: 15px;
+  }
+}

package/theme/assets/scss/_Text.scss

@@ -0,0 +1,157 @@
+@use "constants";
+
+.Text {
+  hyphens: auto;
+  overflow-wrap: break-word;
+
+  @include constants.for-phone {
+    hyphens: auto;
+  }
+
+  &.justified {
+
+    p,
+    li {
+      text-align: justify;
+    }
+  }
+
+  &.selfContained::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+
+  a {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  h1,
+  h2 {
+    clear: both;
+    font-size: constants.$f28;
+    font-weight: bold;
+    margin: 2rem 0;
+  }
+
+  h3 {
+    font-size: constants.$f18;
+    font-weight: bold;
+    margin: 1.5rem 0;
+  }
+
+  h4,
+  h5 {
+    font-size: constants.$f16;
+    font-weight: bold;
+  }
+
+  blockquote,
+  h4,
+  h5,
+  ol,
+  p,
+  table,
+  ul {
+    margin-bottom: 10px;
+  }
+
+  blockquote {
+    margin-left: 50px;
+    margin-right: 20px;
+  }
+
+  ul,
+  ol {
+    margin-left: 20px;
+  }
+
+  li {
+    margin-bottom: 5px;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  ul ul,
+  ol ul {
+    list-style: circle;
+  }
+
+  ul ol,
+  ol ol {
+    list-style: lower-alpha;
+  }
+
+  img,
+  svg {
+    height: auto;
+    max-width: 100%;
+  }
+
+  .Img {
+    &.left {
+      float: left;
+      margin: 5px 20px 10px 0;
+    }
+
+    &.right {
+      float: right;
+      margin: 5px 0 10px 20px;
+    }
+
+    &.center {
+      display: block;
+      margin: 20px auto;
+    }
+  }
+
+  .ql-align-center {
+    text-align: center !important;
+  }
+
+  .ql-align-right {
+    text-align: right !important;
+  }
+
+  .ql-size-small {
+    font-size: constants.$f9;
+  }
+
+  .ql-size-large {
+    font-size: constants.$f18;
+  }
+
+  .ql-size-huge {
+    font-size: constants.$f32;
+  }
+
+  .hljs {
+    background-color: #f5f5f5;
+    border-left: 15px solid #ddd;
+    font-family: monospace;
+    font-size: constants.$f14;
+    line-height: 1.35;
+    margin: 20px 10px;
+    overflow-x: auto;
+    padding: 10px 20px 10px 15px;
+  }
+
+  code {
+    background-color: #f5f5f5;
+    border: 1px dotted #ccc;
+    color: #785454;
+    font-family: sans-serif;
+    font-size: constants.$f15;
+    padding: 1px 3px;
+  }
+}

package/theme/assets/scss/_Tile.scss

@@ -0,0 +1,51 @@
+@use "constants";
+
+.Tile {
+  background-color: #f0f0f0;
+
+  &-img {
+    display: block;
+    height: auto;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  @include constants.for-phone {
+    margin-bottom: 20px;
+
+    &-text {
+      padding: 10px;
+    }
+  }
+}
+
+.Tile2 {
+  background-color: #f0f0f0;
+
+  &-img {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
+  &-text {
+    padding: 10px;
+  }
+
+  @include constants.for-phone {
+    margin-bottom: 20px;
+  }
+}
+
+.Tile-tags {
+  display: flex;
+  flex-wrap: wrap;
+
+  &>span {
+    border: 1px solid #000;
+    border-radius: 15px;
+    margin-bottom: 10px;
+    margin-right: 5px;
+    padding: 5px 10px;
+  }
+}

package/theme/assets/scss/_constants.scss

@@ -0,0 +1,83 @@
+@mixin for-phone {
+  @media not all and (min-width: 640px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-up {
+  @media (min-width: 640px) {
+    @content;
+  }
+}
+
+@mixin for-phone-and-tablet {
+  @media not all and (min-width: 992px) {
+    @content;
+  }
+}
+
+@mixin for-desktop {
+  @media (min-width: 992px) {
+    @content;
+  }
+}
+
+$f6: 0.375rem;
+$f7: 0.4375rem;
+$f8: 0.5rem;
+$f9: 0.5625rem;
+$f10: 0.625rem;
+$f11: 0.6875rem;
+$f12: 0.75rem;
+$f13: 0.8125rem;
+$f14: 0.875rem;
+$f15: 0.9375rem;
+$f16: 1rem;
+$f17: 1.0625rem;
+$f18: 1.125rem;
+$f19: 1.1875rem;
+$f20: 1.25rem;
+$f21: 1.3125rem;
+$f22: 1.375rem;
+$f23: 1.4375rem;
+$f24: 1.5rem;
+$f25: 1.5625rem;
+$f26: 1.625rem;
+$f27: 1.6875rem;
+$f28: 1.75rem;
+$f29: 1.8125rem;
+$f30: 1.875rem;
+$f31: 1.9375rem;
+$f32: 2rem;
+$f33: 2.0625rem;
+$f34: 2.125rem;
+$f35: 2.1875rem;
+$f36: 2.25rem;
+$f37: 2.3125rem;
+$f38: 2.375rem;
+$f39: 2.4375rem;
+$f40: 2.5rem;
+$f41: 2.5625rem;
+$f42: 2.625rem;
+$f43: 2.6875rem;
+$f44: 2.75rem;
+$f45: 2.8125rem;
+$f46: 2.875rem;
+$f47: 2.9375rem;
+$f48: 3rem;
+$f49: 3.0625rem;
+$f50: 3.125rem;
+$f51: 3.1875rem;
+$f52: 3.25rem;
+$f53: 3.3125rem;
+$f54: 3.375rem;
+$f55: 3.4375rem;
+$f56: 3.5rem;
+$f57: 3.5625rem;
+$f58: 3.625rem;
+$f59: 3.6875rem;
+$f60: 3.75rem;
+$f61: 3.8125rem;
+$f62: 3.875rem;
+$f63: 3.9375rem;
+$f64: 4rem;

package/theme/assets/scss/_global.scss

@@ -0,0 +1,7 @@
+:root {
+  --siteAppBtnBgColor: "";
+  --siteAppSearchIconColor: "";
+  --siteAppBtnFgColor: "";
+  --siteAppMobileMenuMaxWidth: 992px;
+  --transitionDuration: 0.2s;
+}

package/theme/assets/scss/_layout.scss

@@ -0,0 +1,85 @@
+@use "constants";
+
+.Container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
+
+  &.text {
+    max-width: 700px;
+  }
+
+  @include constants.for-phone {
+    width: 90%;
+  }
+
+  @include constants.for-tablet-up {
+    &.pad {
+      max-width: 1240px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    &.pad.text {
+      max-width: 740px;
+    }
+  }
+}
+
+@include constants.for-tablet-up {
+
+  .Grid6,
+  .Grid9,
+  .Grid12 {
+    column-gap: 25px;
+    display: grid;
+    row-gap: 25px;
+  }
+
+  .Grid6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .Grid9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .Grid12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  .Span2 {
+    grid-column-end: span 2;
+  }
+
+  .Span3 {
+    grid-column-end: span 3;
+  }
+
+  .Span4 {
+    grid-column-end: span 4;
+  }
+
+  .Span6 {
+    grid-column-end: span 6;
+  }
+
+  .Span12 {
+    grid-column-end: span 12;
+  }
+
+  .Column3 {
+    grid-column-start: 3;
+  }
+
+  .Column7 {
+    grid-column-start: 7;
+  }
+
+  @include constants.for-phone-and-tablet {
+    .Span4Tablet {
+      grid-column-end: span 4;
+
+    }
+  }
+}

package/theme/assets/scss/_reset.scss

@@ -0,0 +1,136 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/theme/assets/scss/index.scss

@@ -0,0 +1,14 @@
+@use "reset";
+@use "global";
+@use "layout";
+@use "Text";
+@use "Breadcrumb";
+@use "HeaderBar";
+@use "Tile";
+@use "HeroBanner";
+@use "SiteFooter";
+@use "ResultItem";
+@use "Paginate";
+@use "Gallery";
+@use "ContactForm";
+@use "Part"

package/theme/locales/fr.json

@@ -0,0 +1,10 @@
+{
+  "Home": "Accueil",
+  "Read more": "Lire la suite",
+  "This page does not exist. We offer you to <a href='/'>return to home page</a>.": "Cette page n'existe pas. Nous vous proposons de <a href='/'>revenir à la page d'accueil</a>.",
+  "All posts": "Tout les articles",
+  "Latest posts": "Articles récents",
+  "Pages": "Pages",
+  "Previous": "Précédent",
+  "Next": "Suivant"
+}

package/theme/templates/404.liquid

@@ -0,0 +1,11 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  <main class="Container">
+    <div class="Text">
+      <h1>404</h1>
+      <p>
+        {{ "This page does not exist. We offer you to <a href='/'>return to home page</a>." | t | raw }}
+      </p>
+    </div>
+  </main>
+{% endblock %}

package/theme/templates/about-page.liquid

@@ -0,0 +1,64 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  <main class="Container">
+    {% render "./partials/breadcrumb"
+      , doc: doc
+      , site: site %}
+    {% if doc.featuredImage %}
+      <div class="HeroBanner">
+        {% useImage smallImg
+          , uid: doc.featuredImage.uid size: "324x200" %}
+        {% useImage mediumImg
+          , uid: doc.featuredImage.uid size: "1024x545" %}
+        {% useImage largeImg
+          , uid: doc.featuredImage.uid size: "1200x545" %}
+
+        <picture>
+          <source
+            width="{{ smallImg.width }}"
+            height="{{ smallImg.height }}"
+            srcset="{{ smallImg.url }}"
+            media="(max-width: 360px)">
+          <source
+            width="{{ mediumImg.width }}"
+            height="{{ mediumImg.height }}"
+            srcset="{{ mediumImg.url }}"
+            media="(max-width: 1024px)">
+          <source
+            width="{{ largeImg.width }}"
+            height="{{ largeImg.height }}"
+            srcset="{{ largeImg.url }}"
+            media="(min-width: 1920px)">
+
+          <img
+            class="HeroBanner-img"
+            src="{{ largeImg.url }}"
+            width="{{ largeImg.width }}"
+            height="{{ largeImg.height }}"
+            alt=""
+            loading="lazy">
+        </picture>
+      </div>
+    {% endif %}
+    <h1>{{ doc.title }}</h1>
+    <div class="Text">{{ doc.field.htmlContent | raw }}</div>
+    <section class="Container">
+      <h1>Test Date Fields</h1>
+      <div>
+        <h2>Date de mise à jour:
+        </h2>
+        <span>{{ doc.field.testDate }}</span>
+      </div>
+      <div>
+        <h2>Date & heure de mise à jour:
+        </h2>
+        <span>{{ doc.field.updateDateTime }}</span>
+      </div>
+      <div>
+        <h2>Heure de mise à jour:
+        </h2>
+        <span>{{ doc.field.testTime }}</span>
+      </div>
+    </section>
+  </main>
+{% endblock %}