@paroicms/playground_demo2 0.75.1 → 0.76.0

package/.turbo/turbo-build.log

@@ -1,12 +1,4 @@
 
-> @paroicms/playground_demo2@0.75.1 build
-> npm run scss
-
-
-> @paroicms/playground_demo2@0.75.1 scss
-> npm run _scss -- --no-source-map --style=compressed
-
-
-> @paroicms/playground_demo2@0.75.1 _scss
-> sass theme/assets/scss/index.scss theme/assets/css/index.css --no-source-map --style=compressed
+> @paroicms/playground_demo2@0.76.0 build
+> postcss theme/assets/css/index.css -o theme/assets/index.css
 

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @paroicms/playground_seoul
 
+## 0.76.0
+
+### Minor Changes
+
+- 2f26720: New UI. Removed PrimeReact and SASS.
+
+### Patch Changes
+
+- Updated dependencies [2f26720]
+  - @paroicms/tiptap-editor-plugin@1.2.0
+  - @paroicms/quill-editor-plugin@1.47.0
+  - @paroicms/contact-form-plugin@0.33.12
+  - @paroicms/content-loading-plugin@0.27.13
+  - @paroicms/internal-link-plugin@0.23.10
+  - @paroicms/list-field-plugin@0.28.10
+  - @paroicms/mcp-plugin@0.2.4
+  - @paroicms/platform-video-plugin@0.37.11
+  - @paroicms/public-menu-plugin@0.19.13
+  - @paroicms/zoom-plugin@0.2.10
+  - @paroicms/script-lib@0.3.12
+
 ## 0.75.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/playground_demo2",
-  "version": "0.75.1",
+  "version": "0.76.0",
   "description": "Demonstration website for ParoiCMS",
   "author": "Paroi Team",
   "license": "MIT",
@@ -15,32 +15,34 @@
   "scripts": {
     "start": "paroicms | npm run _pino-pretty",
     "start:dev": "nodemon --watch 'site-schema*.json' --watch config.json",
-    "clear": "rimraf theme/assets/css/*",
-    "build": "npm run scss",
-    "dev": "concurrently -n 'node,scss' -c 'yellow.bold,magenta.bold' 'npm run start:dev' 'npm run scss:watch'",
-    "scss": "npm run _scss -- --no-source-map --style=compressed",
-    "scss:watch": "npm run _scss && npm run _scss -- --watch",
-    "_scss": "sass theme/assets/scss/index.scss theme/assets/css/index.css",
+    "dev": "concurrently -n 'node,css' -c 'yellow.bold,magenta.bold' 'npm run start:dev' 'npm run css:watch'",
+    "build": "postcss theme/assets/css/index.css -o theme/assets/index.css",
+    "clear": "rimraf theme/assets/index.css",
+    "css:watch": "postcss theme/assets/css/index.css -o theme/assets/index.css --watch",
     "_pino-pretty": "pino-pretty -U false -x 'stats:25' -X 'stats:grey' -t 'yyyy-mm-dd HH:MM:ss.l' -i 'hostname,pid,fqdn'"
   },
   "dependencies": {
-    "@paroicms/contact-form-plugin": "0.33.11",
-    "@paroicms/content-loading-plugin": "0.27.12",
-    "@paroicms/internal-link-plugin": "0.23.9",
-    "@paroicms/list-field-plugin": "0.28.9",
-    "@paroicms/mcp-plugin": "0.2.3",
-    "@paroicms/public-menu-plugin": "0.19.12",
-    "@paroicms/tiptap-editor-plugin": "1.1.2",
-    "@paroicms/quill-editor-plugin": "1.46.2",
-    "@paroicms/script-lib": "0.3.11",
-    "@paroicms/platform-video-plugin": "0.37.10",
-    "@paroicms/zoom-plugin": "0.2.9"
+    "@paroicms/contact-form-plugin": "0.33.12",
+    "@paroicms/content-loading-plugin": "0.27.13",
+    "@paroicms/internal-link-plugin": "0.23.10",
+    "@paroicms/list-field-plugin": "0.28.10",
+    "@paroicms/mcp-plugin": "0.2.4",
+    "@paroicms/public-menu-plugin": "0.19.13",
+    "@paroicms/tiptap-editor-plugin": "1.2.0",
+    "@paroicms/quill-editor-plugin": "1.47.0",
+    "@paroicms/script-lib": "0.3.12",
+    "@paroicms/platform-video-plugin": "0.37.11",
+    "@paroicms/zoom-plugin": "0.2.10"
   },
   "devDependencies": {
     "concurrently": "~9.2.1",
+    "cssnano": "~7.1.2",
     "nodemon": "~3.1.11",
-    "pino-pretty": "~13.1.2",
-    "rimraf": "~6.1.2",
-    "sass": "~1.94.2"
+    "pino-pretty": "~13.1.3",
+    "postcss": "~8.5.6",
+    "postcss-cli": "~11.0.1",
+    "postcss-import": "~16.1.1",
+    "postcss-nested": "~7.0.2",
+    "rimraf": "~6.1.2"
   }
 }

package/postcss.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: {
+    "postcss-import": {},
+    "postcss-nested": {},
+    cssnano: {
+      preset: "default",
+    },
+  },
+};

package/site-schema.json

@@ -203,7 +203,20 @@
       },
       "routingChildren": ["exhibition", "pages"],
       "regularChildren": ["page"],
-      "regularChildrenSorting": "title asc"
+      "regularChildrenSorting": "title asc",
+      "lists": [
+        {
+          "listName": "partners",
+          "parts": ["partner"],
+          "sorting": "publishDate desc",
+          "limit": 5
+        },
+        {
+          "listName": "sections",
+          "parts": ["partner", "sideImage", "bookPage"],
+          "sorting": "manual"
+        }
+      ]
     },
     {
       "typeName": "posts",

package/theme/assets/css/Breadcrumb.css

@@ -0,0 +1,22 @@
+.Breadcrumb {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.Breadcrumb-imgIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.Breadcrumb-span {
+  display: inline-block;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Breadcrumb-a {
+  color: #6c98e2 !important;
+}

package/theme/assets/{scss/_ContactForm.scss → css/ContactForm.css}

@@ -1,27 +1,29 @@
 .PaButton {
-  background-color: #8bdda0;
-  border: 2px solid #8bdda0;
-  border-radius: 5px;
-  color: #674002;
-  cursor: pointer;
   display: inline-block;
+  padding: 10px 20px;
   font-size: 16px;
   font-weight: bold;
-  padding: 10px 20px;
+  color: #674002;
   text-align: center;
   text-decoration: none;
-  transition: background-color 0.3s, color 0.3s;
+  cursor: pointer;
+  background-color: #8bdda0;
+  border: 2px solid #8bdda0;
+  border-radius: 5px;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 
   &:focus,
   &:hover {
-    background-color: #b77306;
     color: white;
+    background-color: #b77306;
   }
 
   &:disabled {
-    background-color: #ccc;
-    border-color: #aaa;
     color: #777;
     cursor: not-allowed;
+    background-color: #ccc;
+    border-color: #aaa;
   }
-}
+}

package/theme/assets/css/Gallery.css

@@ -0,0 +1,11 @@
+.Gallery {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.Gallery-item {
+  width: 280px;
+  height: 150px;
+  margin: 10px;
+  object-fit: cover;
+}

package/theme/assets/{scss/_HeaderBar.scss → css/HeaderBar.css}

@@ -1,64 +1,62 @@
-@use "constants";
-
 .HeaderBar {
-  align-items: center;
   display: flex;
+  align-items: center;
   justify-content: space-between;
   margin-bottom: 30px;
 
-  &-logoTitle {
-    align-items: center;
-    display: flex;
-  }
-
-  &-siteLogo {
-    margin-right: 10px;
-  }
-
-  &-siteTitle {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
   nav {
     ul {
       display: flex;
     }
 
     li {
-      list-style: none;
       padding: 5px 10px;
+      list-style: none;
     }
 
-    li>a {
+    li > a {
       text-decoration: none;
     }
   }
 
-  @include constants.for-phone-and-tablet {
+  @media not all and (min-width: 992px) {
     nav li {
-      list-style: none;
       margin-bottom: 10px;
+      list-style: none;
 
       a {
-        align-items: center;
         display: flex;
+        align-items: center;
         height: 50px;
         text-decoration: none;
       }
     }
   }
 
-  &>div:nth-last-child(1) {
-    align-items: center;
+  & > div:nth-last-child(1) {
     display: flex;
+    align-items: center;
   }
+}
 
-  &-searchBtn {
-    margin-right: 10px;
-  }
+.HeaderBar-logoTitle {
+  display: flex;
+  align-items: center;
+}
 
-  .SearchOpenerBtn {
-    padding: 8px 10px;
-  }
-}
+.HeaderBar-siteLogo {
+  margin-right: 10px;
+}
+
+.HeaderBar-siteTitle {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.HeaderBar-searchBtn {
+  margin-right: 10px;
+}
+
+.HeaderBar .SearchOpenerBtn {
+  padding: 8px 10px;
+}

package/theme/assets/css/HeroBanner.css

@@ -0,0 +1,13 @@
+.HeroBanner-img {
+  width: 100%;
+  height: 545px;
+  object-fit: cover;
+
+  @media not all and (min-width: 992px) {
+    height: 300px;
+  }
+
+  @media not all and (min-width: 640px) {
+    height: 200px;
+  }
+}

package/theme/assets/css/Paginate.css

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

package/theme/assets/{scss/_Part.scss → css/Part.css}

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   margin-top: 20px;
-
 }
 
 .PartItem {
@@ -13,8 +12,8 @@
   }
 
   &.partner {
-    margin-bottom: 20px;
     max-width: 300px;
+    margin-bottom: 20px;
 
     p {
       margin-top: 10px;
@@ -29,4 +28,4 @@
       margin-left: 10px;
     }
   }
-}
+}

package/theme/assets/{scss/_ResultItem.scss → css/ResultItem.css}

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

package/theme/assets/{scss/_SiteFooter.scss → css/SiteFooter.css}

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

package/theme/assets/{scss/_Text.scss → css/Text.css}

@@ -1,10 +1,8 @@
-@use "constants";
-
 .Text {
   hyphens: auto;
   overflow-wrap: break-word;
 
-  @include constants.for-phone {
+  @media not all and (min-width: 640px) {
     hyphens: auto;
   }
 
@@ -14,8 +12,8 @@
 
   &.selfContained::after {
     clear: both;
-    content: "";
     display: block;
+    content: "";
   }
 
   a {
@@ -29,20 +27,20 @@
   h1,
   h2 {
     clear: both;
-    font-size: constants.$f28;
-    font-weight: bold;
     margin: 2rem 0;
+    font-size: var(--font-size-28);
+    font-weight: bold;
   }
 
   h3 {
-    font-size: constants.$f18;
-    font-weight: bold;
     margin: 1.5rem 0;
+    font-size: var(--font-size-18);
+    font-weight: bold;
   }
 
   h4,
   h5 {
-    font-size: constants.$f16;
+    font-size: var(--font-size-16);
     font-weight: bold;
   }
 
@@ -57,8 +55,8 @@
   }
 
   blockquote {
-    margin-left: 50px;
     margin-right: 20px;
+    margin-left: 50px;
   }
 
   ul,
@@ -90,27 +88,27 @@
 
   img,
   svg {
-    height: auto;
     max-width: 100%;
+    height: auto;
   }
 
   .hljs {
-    background-color: #f5f5f5;
-    border-left: 15px solid #ddd;
-    font-family: monospace;
-    font-size: constants.$f14;
-    line-height: 1.35;
+    padding: 10px 20px 10px 15px;
     margin: 20px 10px;
     overflow-x: auto;
-    padding: 10px 20px 10px 15px;
+    font-family: monospace;
+    font-size: var(--font-size-14);
+    line-height: 1.35;
+    background-color: #f5f5f5;
+    border-left: 15px solid #ddd;
   }
 
   code {
+    padding: 1px 3px;
+    font-family: sans-serif;
+    font-size: var(--font-size-15);
+    color: #785454;
     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 → css/Tile.css}

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

package/theme/assets/{scss/_global.scss → css/global.css}

@@ -1,3 +1,3 @@
 :root {
   --paInteractiveColor: #99f;
-}
+}

package/theme/assets/css/index.css

@@ -1 +1,15 @@
-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}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}:root{--paInteractiveColor: #99f}.Container{margin-left:auto;margin-right:auto;max-width:1200px}.Container.text{max-width:700px}@media not all and (min-width: 640px){.Container{width:90%}}@media(min-width: 640px){.Container.pad{max-width:1240px;padding-left:20px;padding-right:20px}.Container.pad.text{max-width:740px}}@media(min-width: 640px){.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}@media not all and (min-width: 992px){.Span4Tablet{grid-column-end:span 4}}}.Text{hyphens:auto;overflow-wrap:break-word}@media not all and (min-width: 640px){.Text{hyphens:auto}}.Text.justified{text-align:justify}.Text.selfContained::after{clear:both;content:"";display:block}.Text a{text-decoration:underline}.Text a:hover{text-decoration:none}.Text h1,.Text h2{clear:both;font-size:1.75rem;font-weight:bold;margin:2rem 0}.Text h3{font-size:1.125rem;font-weight:bold;margin:1.5rem 0}.Text h4,.Text h5{font-size:1rem;font-weight:bold}.Text blockquote,.Text h4,.Text h5,.Text ol,.Text p,.Text table,.Text ul{margin-bottom:10px}.Text blockquote{margin-left:50px;margin-right:20px}.Text ul,.Text ol{margin-left:20px}.Text li{margin-bottom:5px}.Text ul{list-style:disc}.Text ol{list-style:decimal}.Text ul ul,.Text ol ul{list-style:circle}.Text ul ol,.Text ol ol{list-style:lower-alpha}.Text img,.Text svg{height:auto;max-width:100%}.Text .hljs{background-color:#f5f5f5;border-left:15px solid #ddd;font-family:monospace;font-size:.875rem;line-height:1.35;margin:20px 10px;overflow-x:auto;padding:10px 20px 10px 15px}.Text code{background-color:#f5f5f5;border:1px dotted #ccc;color:#785454;font-family:sans-serif;font-size:.9375rem;padding:1px 3px}.Breadcrumb{align-items:center;display:flex;margin-bottom:20px}.Breadcrumb-imgIcon{height:24px;width:24px}.Breadcrumb-span{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Breadcrumb-a{color:#6c98e2 !important}.HeaderBar{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.HeaderBar-logoTitle{align-items:center;display:flex}.HeaderBar-siteLogo{margin-right:10px}.HeaderBar-siteTitle{font-size:18px;font-weight:bold}.HeaderBar nav ul{display:flex}.HeaderBar nav li{list-style:none;padding:5px 10px}.HeaderBar nav li>a{text-decoration:none}@media not all and (min-width: 992px){.HeaderBar nav li{list-style:none;margin-bottom:10px}.HeaderBar nav li a{align-items:center;display:flex;height:50px;text-decoration:none}}.HeaderBar>div:nth-last-child(1){align-items:center;display:flex}.HeaderBar-searchBtn{margin-right:10px}.HeaderBar .SearchOpenerBtn{padding:8px 10px}.Tile{background-color:#f0f0f0}.Tile-img{display:block;height:auto;object-fit:cover;width:100%}@media not all and (min-width: 640px){.Tile{margin-bottom:20px}.Tile-text{padding:10px}}.Tile2{background-color:#f0f0f0}.Tile2-img{display:block;height:auto;width:100%}.Tile2-text{padding:10px}@media not all and (min-width: 640px){.Tile2{margin-bottom:20px}}.Tile-tags{display:flex;flex-wrap:wrap}.Tile-tags>span{border:1px solid #000;border-radius:15px;margin-bottom:10px;margin-right:5px;padding:5px 10px}.HeroBanner-img{height:545px;object-fit:cover;width:100%}@media not all and (min-width: 992px){.HeroBanner-img{height:300px}}@media not all and (min-width: 640px){.HeroBanner-img{height:200px}}.SiteFooter{background-color:#fafafa;margin-top:10px;padding:15px 0;text-align:center}.SiteFooter>span:nth-child(1){font-weight:bold;margin-right:15px}.ResultItem{margin-bottom:20px}.Paginate-left{text-align:left}.Paginate-next{text-align:right}.Gallery{display:flex;flex-wrap:wrap}.Gallery-item{height:150px;margin:10px;object-fit:cover;width:280px}.PaButton{background-color:#8bdda0;border:2px solid #8bdda0;border-radius:5px;color:#674002;cursor:pointer;display:inline-block;font-size:16px;font-weight:bold;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s,color .3s}.PaButton:focus,.PaButton:hover{background-color:#b77306;color:#fff}.PaButton:disabled{background-color:#ccc;border-color:#aaa;color:#777;cursor:not-allowed}.List{display:flex;flex-direction:column;margin-top:20px}.PartItem{margin:0 auto}.PartItem img{margin-bottom:10px}.PartItem.partner{margin-bottom:20px;max-width:300px}.PartItem.partner p{margin-top:10px}.PartItem.sideImage{display:flex;width:100%}.PartItem.sideImage p{margin-left:10px}
+@import "./tokens.css";
+@import "./reset.css";
+@import "./global.css";
+@import "./layout.css";
+@import "./Text.css";
+@import "./Breadcrumb.css";
+@import "./HeaderBar.css";
+@import "./Tile.css";
+@import "./HeroBanner.css";
+@import "./SiteFooter.css";
+@import "./ResultItem.css";
+@import "./Paginate.css";
+@import "./Gallery.css";
+@import "./ContactForm.css";
+@import "./Part.css";

package/theme/assets/{scss/_layout.scss → css/layout.css}

@@ -1,23 +1,21 @@
-@use "constants";
-
 .Container {
-  margin-left: auto;
-  margin-right: auto;
   max-width: 1200px;
+  margin-right: auto;
+  margin-left: auto;
 
   &.text {
     max-width: 700px;
   }
 
-  @include constants.for-phone {
+  @media not all and (min-width: 640px) {
     width: 90%;
   }
 
-  @include constants.for-tablet-up {
+  @media (min-width: 640px) {
     &.pad {
       max-width: 1240px;
-      padding-left: 20px;
       padding-right: 20px;
+      padding-left: 20px;
     }
 
     &.pad.text {
@@ -26,14 +24,13 @@
   }
 }
 
-@include constants.for-tablet-up {
-
+@media (min-width: 640px) {
   .Grid6,
   .Grid9,
   .Grid12 {
-    column-gap: 25px;
     display: grid;
     row-gap: 25px;
+    column-gap: 25px;
   }
 
   .Grid6 {
@@ -76,10 +73,9 @@
     grid-column-start: 7;
   }
 
-  @include constants.for-phone-and-tablet {
+  @media not all and (min-width: 992px) {
     .Span4Tablet {
       grid-column-end: span 4;
-
     }
   }
-}
+}

package/theme/assets/{scss/_reset.scss → css/reset.css}

@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
@@ -85,12 +85,12 @@ mark,
 audio,
 video,
 button {
-  margin: 0;
   padding: 0;
-  border: 0;
-  font-size: 100%;
+  margin: 0;
   font: inherit;
+  font-size: 100%;
   vertical-align: baseline;
+  border: 0;
 }
 
 /* HTML5 display-role reset for older browsers */
@@ -126,11 +126,10 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-  content: '';
   content: none;
 }
 
 table {
-  border-collapse: collapse;
   border-spacing: 0;
-}
+  border-collapse: collapse;
+}

package/theme/assets/css/tokens.css

@@ -0,0 +1,61 @@
+:root {
+  --font-size-6: 0.375rem;
+  --font-size-7: 0.4375rem;
+  --font-size-8: 0.5rem;
+  --font-size-9: 0.5625rem;
+  --font-size-10: 0.625rem;
+  --font-size-11: 0.6875rem;
+  --font-size-12: 0.75rem;
+  --font-size-13: 0.8125rem;
+  --font-size-14: 0.875rem;
+  --font-size-15: 0.9375rem;
+  --font-size-16: 1rem;
+  --font-size-17: 1.0625rem;
+  --font-size-18: 1.125rem;
+  --font-size-19: 1.1875rem;
+  --font-size-20: 1.25rem;
+  --font-size-21: 1.3125rem;
+  --font-size-22: 1.375rem;
+  --font-size-23: 1.4375rem;
+  --font-size-24: 1.5rem;
+  --font-size-25: 1.5625rem;
+  --font-size-26: 1.625rem;
+  --font-size-27: 1.6875rem;
+  --font-size-28: 1.75rem;
+  --font-size-29: 1.8125rem;
+  --font-size-30: 1.875rem;
+  --font-size-31: 1.9375rem;
+  --font-size-32: 2rem;
+  --font-size-33: 2.0625rem;
+  --font-size-34: 2.125rem;
+  --font-size-35: 2.1875rem;
+  --font-size-36: 2.25rem;
+  --font-size-37: 2.3125rem;
+  --font-size-38: 2.375rem;
+  --font-size-39: 2.4375rem;
+  --font-size-40: 2.5rem;
+  --font-size-41: 2.5625rem;
+  --font-size-42: 2.625rem;
+  --font-size-43: 2.6875rem;
+  --font-size-44: 2.75rem;
+  --font-size-45: 2.8125rem;
+  --font-size-46: 2.875rem;
+  --font-size-47: 2.9375rem;
+  --font-size-48: 3rem;
+  --font-size-49: 3.0625rem;
+  --font-size-50: 3.125rem;
+  --font-size-51: 3.1875rem;
+  --font-size-52: 3.25rem;
+  --font-size-53: 3.3125rem;
+  --font-size-54: 3.375rem;
+  --font-size-55: 3.4375rem;
+  --font-size-56: 3.5rem;
+  --font-size-57: 3.5625rem;
+  --font-size-58: 3.625rem;
+  --font-size-59: 3.6875rem;
+  --font-size-60: 3.75rem;
+  --font-size-61: 3.8125rem;
+  --font-size-62: 3.875rem;
+  --font-size-63: 3.9375rem;
+  --font-size-64: 4rem;
+}

package/theme/assets/index.css

@@ -0,0 +1 @@
+:root{--font-size-6:0.375rem;--font-size-7:0.4375rem;--font-size-8:0.5rem;--font-size-9:0.5625rem;--font-size-10:0.625rem;--font-size-11:0.6875rem;--font-size-12:0.75rem;--font-size-13:0.8125rem;--font-size-14:0.875rem;--font-size-15:0.9375rem;--font-size-16:1rem;--font-size-17:1.0625rem;--font-size-18:1.125rem;--font-size-19:1.1875rem;--font-size-20:1.25rem;--font-size-21:1.3125rem;--font-size-22:1.375rem;--font-size-23:1.4375rem;--font-size-24:1.5rem;--font-size-25:1.5625rem;--font-size-26:1.625rem;--font-size-27:1.6875rem;--font-size-28:1.75rem;--font-size-29:1.8125rem;--font-size-30:1.875rem;--font-size-31:1.9375rem;--font-size-32:2rem;--font-size-33:2.0625rem;--font-size-34:2.125rem;--font-size-35:2.1875rem;--font-size-36:2.25rem;--font-size-37:2.3125rem;--font-size-38:2.375rem;--font-size-39:2.4375rem;--font-size-40:2.5rem;--font-size-41:2.5625rem;--font-size-42:2.625rem;--font-size-43:2.6875rem;--font-size-44:2.75rem;--font-size-45:2.8125rem;--font-size-46:2.875rem;--font-size-47:2.9375rem;--font-size-48:3rem;--font-size-49:3.0625rem;--font-size-50:3.125rem;--font-size-51:3.1875rem;--font-size-52:3.25rem;--font-size-53:3.3125rem;--font-size-54:3.375rem;--font-size-55:3.4375rem;--font-size-56:3.5rem;--font-size-57:3.5625rem;--font-size-58:3.625rem;--font-size-59:3.6875rem;--font-size-60:3.75rem;--font-size-61:3.8125rem;--font-size-62:3.875rem;--font-size-63:3.9375rem;--font-size-64:4rem}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}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:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}:root{--paInteractiveColor:#99f}.Container{margin-left:auto;margin-right:auto;max-width:1200px}.Container.text{max-width:700px}@media not all and (min-width:640px){.Container{width:90%}}@media (min-width:640px){.Container.pad{max-width:1240px;padding-left:20px;padding-right:20px}.Container.pad.text{max-width:740px}.Grid12,.Grid6,.Grid9{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}}@media (min-width:640px){@media not all and (min-width:992px){.Span4Tablet{grid-column-end:span 4}}}.Text{hyphens:auto;overflow-wrap:break-word}@media not all and (min-width:640px){.Text{hyphens:auto}}.Text.justified{text-align:justify}.Text.selfContained:after{clear:both;content:"";display:block}.Text a{text-decoration:underline}.Text a:hover{text-decoration:none}.Text h1,.Text h2{clear:both;font-size:var(--font-size-28);font-weight:700;margin:2rem 0}.Text h3{font-size:var(--font-size-18);font-weight:700;margin:1.5rem 0}.Text h4,.Text h5{font-size:var(--font-size-16);font-weight:700}.Text blockquote,.Text h4,.Text h5,.Text ol,.Text p,.Text table,.Text ul{margin-bottom:10px}.Text blockquote{margin-left:50px;margin-right:20px}.Text ol,.Text ul{margin-left:20px}.Text li{margin-bottom:5px}.Text ul{list-style:disc}.Text ol{list-style:decimal}.Text ol ul,.Text ul ul{list-style:circle}.Text ol ol,.Text ul ol{list-style:lower-alpha}.Text img,.Text svg{height:auto;max-width:100%}.Text .hljs{border-left:15px solid #ddd;font-family:monospace;font-size:var(--font-size-14);line-height:1.35;margin:20px 10px;overflow-x:auto;padding:10px 20px 10px 15px}.Text .hljs,.Text code{background-color:#f5f5f5}.Text code{border:1px dotted #ccc;color:#785454;font-family:sans-serif;font-size:var(--font-size-15);padding:1px 3px}.Breadcrumb{align-items:center;display:flex;margin-bottom:20px}.Breadcrumb-imgIcon{height:24px;width:24px}.Breadcrumb-span{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Breadcrumb-a{color:#6c98e2!important}.HeaderBar{align-items:center;justify-content:space-between;margin-bottom:30px}.HeaderBar,.HeaderBar nav ul{display:flex}.HeaderBar nav li{list-style:none;padding:5px 10px}.HeaderBar nav li>a{text-decoration:none}@media not all and (min-width:992px){.HeaderBar nav li{list-style:none;margin-bottom:10px}.HeaderBar nav li a{align-items:center;display:flex;height:50px;text-decoration:none}}.HeaderBar-logoTitle,.HeaderBar>div:last-child{align-items:center;display:flex}.HeaderBar-siteLogo{margin-right:10px}.HeaderBar-siteTitle{font-size:18px;font-weight:700}.HeaderBar-searchBtn{margin-right:10px}.HeaderBar .SearchOpenerBtn{padding:8px 10px}.Tile{background-color:#f0f0f0}@media not all and (min-width:640px){.Tile{margin-bottom:20px}}.Tile-img{display:block;height:auto;object-fit:cover;width:100%}@media not all and (min-width:640px){.Tile-text{padding:10px}}.Tile2{background-color:#f0f0f0}@media not all and (min-width:640px){.Tile2{margin-bottom:20px}}.Tile2-img{display:block;height:auto;width:100%}.Tile2-text{padding:10px}.Tile-tags{display:flex;flex-wrap:wrap}.Tile-tags>span{border:1px solid #000;border-radius:15px;margin-bottom:10px;margin-right:5px;padding:5px 10px}.HeroBanner-img{height:545px;object-fit:cover;width:100%}@media not all and (min-width:992px){.HeroBanner-img{height:300px}}@media not all and (min-width:640px){.HeroBanner-img{height:200px}}.SiteFooter{background-color:#fafafa;margin-top:10px;padding:15px 0;text-align:center}.SiteFooter>span:first-child{font-weight:700;margin-right:15px}.ResultItem{margin-bottom:20px}.Paginate-left{text-align:left}.Paginate-next{text-align:right}.Gallery{display:flex;flex-wrap:wrap}.Gallery-item{height:150px;margin:10px;object-fit:cover;width:280px}.PaButton{background-color:#8bdda0;border:2px solid #8bdda0;border-radius:5px;color:#674002;cursor:pointer;display:inline-block;font-size:16px;font-weight:700;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s,color .3s}.PaButton:focus,.PaButton:hover{background-color:#b77306;color:#fff}.PaButton:disabled{background-color:#ccc;border-color:#aaa;color:#777;cursor:not-allowed}.List{display:flex;flex-direction:column;margin-top:20px}.PartItem{margin:0 auto}.PartItem img{margin-bottom:10px}.PartItem.partner{margin-bottom:20px;max-width:300px}.PartItem.partner p{margin-top:10px}.PartItem.sideImage{display:flex;width:100%}.PartItem.sideImage p{margin-left:10px}

package/theme/templates/layouts/main-layout.liquid

@@ -8,7 +8,7 @@
       {%- endif %}
       {{ site.field.title }}
     </title>
-    <link rel="stylesheet" href="{{ site.assetsUrl }}/css/index.css">
+    <link rel="stylesheet" href="{{ site.assetsUrl }}/index.css">
     <script type="module" src="{{ site.assetsUrl }}/js/main.mjs" defer></script>
     {{ doc | headTags }}
   </head>

package/theme/assets/scss/_Breadcrumb.scss

@@ -1,22 +0,0 @@
-.Breadcrumb {
-  align-items: center;
-  display: flex;
-  margin-bottom: 20px;
-
-  &-imgIcon {
-    height: 24px;
-    width: 24px;
-  }
-
-  &-span {
-    display: inline-block;
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &-a {
-    color: #6c98e2 !important;
-  }
-}

package/theme/assets/scss/_Gallery.scss

@@ -1,11 +0,0 @@
-.Gallery {
-  display: flex;
-  flex-wrap: wrap;
-
-  &-item {
-    height: 150px;
-    margin: 10px;
-    object-fit: cover;
-    width: 280px;
-  }
-}

package/theme/assets/scss/_HeroBanner.scss

@@ -1,21 +0,0 @@
-@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

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

package/theme/assets/scss/_constants.scss

@@ -1,83 +0,0 @@
-@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/index.scss

@@ -1,14 +0,0 @@
-@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"