@paroicms/playground_demo1 0.65.14 → 0.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/.turbo/turbo-build.log +2 -10
  2. package/CHANGELOG.md +24 -0
  3. package/package.json +20 -18
  4. package/postcss.config.js +9 -0
  5. package/theme/assets/{scss/_Text.scss → css/Text.css} +9 -11
  6. package/theme/assets/css/index.css +4 -1
  7. package/theme/assets/{scss/_layout.scss → css/layout.css} +9 -13
  8. package/theme/assets/{scss/_theme.scss → css/theme.css} +90 -96
  9. package/theme/assets/css/tokens.css +62 -0
  10. package/theme/assets/index.css +1 -0
  11. package/theme/templates/home.liquid +3 -3
  12. package/theme/templates/layouts/main-layout.liquid +1 -1
  13. package/theme/templates/partials/footer.liquid +1 -1
  14. package/theme/templates/partials/header.liquid +6 -6
  15. package/theme/templates/posts.liquid +2 -2
  16. package/theme/templates/tag.liquid +2 -2
  17. package/theme/assets/scss/_constants.scss +0 -87
  18. package/theme/assets/scss/index.scss +0 -3
package/.turbo/turbo-build.log CHANGED
@@ -1,12 +1,4 @@
1
1
 
2
- > @paroicms/playground_demo1@0.65.14 build
3
- > npm run scss
4
-
5
-
6
- > @paroicms/playground_demo1@0.65.14 scss
7
- > npm run _scss -- --no-source-map --style=compressed
8
-
9
-
10
- > @paroicms/playground_demo1@0.65.14 _scss
11
- > sass theme/assets/scss/index.scss theme/assets/css/index.css --no-source-map --style=compressed
2
+ > @paroicms/playground_demo1@0.67.0 build
3
+ > postcss theme/assets/css/index.css -o theme/assets/index.css
12
4
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @paroicms/playground_seoul
2
2
 
3
+ ## 0.67.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 2f26720: New UI. Removed PrimeReact and SASS.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [2f26720]
12
+ - @paroicms/tiptap-editor-plugin@1.2.0
13
+ - @paroicms/contact-form-plugin@0.33.12
14
+ - @paroicms/content-loading-plugin@0.27.13
15
+ - @paroicms/internal-link-plugin@0.23.10
16
+ - @paroicms/platform-video-plugin@0.37.11
17
+ - @paroicms/public-menu-plugin@0.19.13
18
+ - @paroicms/zoom-plugin@0.2.10
19
+ - @paroicms/script-lib@0.3.12
20
+
21
+ ## 0.66.0
22
+
23
+ ### Minor Changes
24
+
25
+ - 449a35f: Aligned the site payload. See the ticket for a migration script of your Liquid templates.
26
+
3
27
  ## 0.65.14
4
28
 
5
29
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paroicms/playground_demo1",
3
- "version": "0.65.14",
3
+ "version": "0.67.0",
4
4
  "description": "Boilerplate website for ParoiCMS",
5
5
  "author": "Paroi Team",
6
6
  "license": "MIT",
@@ -15,29 +15,31 @@
15
15
  "scripts": {
16
16
  "start": "paroicms | npm run _pino-pretty",
17
17
  "start:dev": "nodemon --watch 'site-schema*.json' --watch config.json",
18
- "clear": "rimraf theme/assets/css/*",
19
- "build": "npm run scss",
20
- "dev": "concurrently -n 'node,scss' -c 'yellow.bold,magenta.bold' 'npm run start:dev' 'npm run scss:watch'",
21
- "scss": "npm run _scss -- --no-source-map --style=compressed",
22
- "scss:watch": "npm run _scss && npm run _scss -- --watch",
23
- "_scss": "sass theme/assets/scss/index.scss theme/assets/css/index.css",
18
+ "dev": "concurrently -n 'node,css' -c 'yellow.bold,magenta.bold' 'npm run start:dev' 'npm run css:watch'",
19
+ "build": "postcss theme/assets/css/index.css -o theme/assets/index.css",
20
+ "clear": "rimraf theme/assets/index.css",
21
+ "css:watch": "postcss theme/assets/css/index.css -o theme/assets/index.css --watch",
24
22
  "_pino-pretty": "pino-pretty -U false -x 'stats:25' -X 'stats:grey' -t 'yyyy-mm-dd HH:MM:ss.l' -i 'hostname,pid,fqdn'"
25
23
  },
26
24
  "dependencies": {
27
- "@paroicms/contact-form-plugin": "0.33.11",
28
- "@paroicms/content-loading-plugin": "0.27.12",
29
- "@paroicms/internal-link-plugin": "0.23.9",
30
- "@paroicms/public-menu-plugin": "0.19.12",
31
- "@paroicms/tiptap-editor-plugin": "1.1.2",
32
- "@paroicms/script-lib": "0.3.11",
33
- "@paroicms/platform-video-plugin": "0.37.10",
34
- "@paroicms/zoom-plugin": "0.2.9"
25
+ "@paroicms/contact-form-plugin": "0.33.12",
26
+ "@paroicms/content-loading-plugin": "0.27.13",
27
+ "@paroicms/internal-link-plugin": "0.23.10",
28
+ "@paroicms/public-menu-plugin": "0.19.13",
29
+ "@paroicms/tiptap-editor-plugin": "1.2.0",
30
+ "@paroicms/script-lib": "0.3.12",
31
+ "@paroicms/platform-video-plugin": "0.37.11",
32
+ "@paroicms/zoom-plugin": "0.2.10"
35
33
  },
36
34
  "devDependencies": {
37
35
  "concurrently": "~9.2.1",
36
+ "cssnano": "~7.1.2",
38
37
  "nodemon": "~3.1.11",
39
- "pino-pretty": "~13.1.2",
40
- "rimraf": "~6.1.2",
41
- "sass": "~1.94.2"
38
+ "pino-pretty": "~13.1.3",
39
+ "postcss": "~8.5.6",
40
+ "postcss-cli": "~11.0.1",
41
+ "postcss-import": "~16.1.1",
42
+ "postcss-nested": "~7.0.2",
43
+ "rimraf": "~6.1.2"
42
44
  }
43
45
  }
package/postcss.config.js ADDED
@@ -0,0 +1,9 @@
1
+ export default {
2
+ plugins: {
3
+ "postcss-import": {},
4
+ "postcss-nested": {},
5
+ cssnano: {
6
+ preset: "default",
7
+ },
8
+ },
9
+ };
package/theme/assets/{scss/_Text.scss → css/Text.css} RENAMED
@@ -1,5 +1,3 @@
1
- @use "constants";
2
-
3
1
  .Text {
4
2
  hyphens: auto;
5
3
  overflow-wrap: break-word;
@@ -10,8 +8,8 @@
10
8
 
11
9
  &.selfContained::after {
12
10
  clear: both;
13
- content: "";
14
11
  display: block;
12
+ content: "";
15
13
  }
16
14
 
17
15
  a {
@@ -25,20 +23,20 @@
25
23
  h1,
26
24
  h2 {
27
25
  clear: both;
28
- font-size: constants.$f28;
29
- font-weight: bold;
30
26
  margin: 2rem 0;
27
+ font-size: var(--font-size-28);
28
+ font-weight: bold;
31
29
  }
32
30
 
33
31
  h3 {
34
- font-size: constants.$f18;
35
- font-weight: bold;
36
32
  margin: 1.5rem 0;
33
+ font-size: var(--font-size-18);
34
+ font-weight: bold;
37
35
  }
38
36
 
39
37
  h4,
40
38
  h5 {
41
- font-size: constants.$f16;
39
+ font-size: var(--font-size-16);
42
40
  font-weight: bold;
43
41
  }
44
42
 
@@ -53,8 +51,8 @@
53
51
  }
54
52
 
55
53
  blockquote {
56
- margin-left: 50px;
57
54
  margin-right: 20px;
55
+ margin-left: 50px;
58
56
  }
59
57
 
60
58
  ul,
@@ -86,7 +84,7 @@
86
84
 
87
85
  img,
88
86
  svg {
89
- height: auto;
90
87
  max-width: 100%;
88
+ height: auto;
91
89
  }
92
- }
90
+ }
package/theme/assets/css/index.css CHANGED
@@ -1 +1,4 @@
1
- :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}.Column4{grid-column-start:4}.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}.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%}*{box-sizing:border-box}body{line-height:1.5;padding:0;margin:0}@media(min-width: 640px){body{min-height:100vh;padding-bottom:50px;position:relative}.PageFooterArea{bottom:0;left:0;position:absolute;width:100%}}.PageFooterArea{height:50px}.PageHeader{padding-bottom:15px;padding-top:15px}.PageFooter{align-items:center;display:flex;height:100%;justify-content:space-between}._revertedColors{background-color:#666;color:#fff}.Mini{font-size:.6em;font-style:italic}.Annotation{color:#888;font-size:.875rem}._revertedColors .Annotation{color:#b0b0b0}.Btn,.PaButton{all:unset;background-color:#ccc;border:1px solid #aaa;box-sizing:border-box;color:#444;cursor:pointer;display:inline-block;padding:5px;text-align:center;user-select:none}.Btn:focus,.Btn:hover,.PaButton:focus,.PaButton:hover{background-color:#ddd;border-color:#bbb;outline:2px solid #f3e0bc}.Btn.active,.PaButton.active{font-weight:bold}.Btn.disabled,.PaButton.disabled{background-color:rgba(170,170,170,.4666666667);border-color:rgba(0,0,0,0);color:#ccc;outline:none;cursor:default}.Btn::before,.PaButton::before{content:" "}.Btn::after,.PaButton::after{content:" "}.Bg{background-color:#f0f0f0}.Bg2{background-color:#ccc}.Color2{color:#777}.Mt{margin-top:30px}.Mb{margin-bottom:30px}.BigMt{margin-top:60px}.BigMb{margin-bottom:60px}.Pt{padding-top:20px}.Pb{padding-bottom:20px}.Hr{color:#ccc;max-width:500px;margin-left:0}.Flex{display:flex}.Flex.column{flex-direction:column}.Flex.center{align-items:center;justify-content:center}.Flex.spaceBetween{justify-content:space-between}.Flex.gap{gap:15px}.Breadcrumb{font-size:.875rem;padding-bottom:5px;padding-top:5px}.Menu{display:flex;gap:2px;padding:0;margin:0}.Menu>li{display:flex;flex-direction:column;gap:2px}.DocHeader{display:flex;gap:15px;padding:15px 25px 25px;justify-content:space-between}.DocHeader-h1{margin-top:0}.DocHeader-right{align-self:center}.DocHeader-middle{padding-top:50px}.Tag{background-color:#666;border-radius:10px;color:#fff;font-size:.875rem;font-weight:bold;padding:3px 7px;white-space:nowrap}.Block{display:block}.InlineBlock{display:inline-block}.Bold{font-weight:bold}.Tile{background-color:#f0f0f0;display:flex;font-size:.875rem;gap:15px;height:150px;padding:15px 25px}.Tile-text{flex-basis:0;flex-grow:2}.Tile-right{align-self:center;display:flex;justify-content:right;flex-basis:0;flex-grow:1;width:30%;height:100%}.Img{display:block;height:auto;max-height:100%;max-width:100%;object-fit:contain}.TextPage{padding:40px}.ConstraintSize{max-width:100%;height:auto}.PaZoomable:hover,.PaZoomable:focus{outline:2px solid #f3e0bc}.InfiniteLoading-actionArea{grid-column:4;grid-column-end:span 6;text-align:center}.ContactForm-error{background-color:#fcc}.ContactForm-ended{background-color:#eee}.ContactForm-button{border:2px solid #bbb;padding:20px}.ContactForm-button:not(:disabled):not(.inProgress):focus,.ContactForm-button:not(:disabled):not(.inProgress):hover{background-color:blue;color:#fff}.ContactForm-button.inProgress::before{border:6px solid #88f;border-color:#88f rgba(0,0,0,0) #88f rgba(0,0,0,0)}.SideImage{display:flex;flex-direction:row;margin:0 auto;max-width:750px}.SideImage-side{background-color:#f0f0f0;padding:50px;width:50%}.SideImage-img{margin:0 auto;max-height:250px}.SideImage-text{padding:50px;width:50%}.SideImage.right{flex-direction:row-reverse}
1
+ @import "./tokens.css";
2
+ @import "./layout.css";
3
+ @import "./Text.css";
4
+ @import "./theme.css";
package/theme/assets/{scss/_layout.scss → css/layout.css} RENAMED
@@ -1,23 +1,21 @@
1
- @use "constants";
2
-
3
1
  .Container {
4
- margin-left: auto;
5
- margin-right: auto;
6
2
  max-width: 1200px;
3
+ margin-right: auto;
4
+ margin-left: auto;
7
5
 
8
6
  &.text {
9
7
  max-width: 700px;
10
8
  }
11
9
 
12
- @include constants.for-phone {
10
+ @media not all and (min-width: 640px) {
13
11
  width: 90%;
14
12
  }
15
13
 
16
- @include constants.for-tablet-up {
14
+ @media (min-width: 640px) {
17
15
  &.pad {
18
16
  max-width: 1240px;
19
- padding-left: 20px;
20
17
  padding-right: 20px;
18
+ padding-left: 20px;
21
19
  }
22
20
 
23
21
  &.pad.text {
@@ -26,14 +24,13 @@
26
24
  }
27
25
  }
28
26
 
29
- @include constants.for-tablet-up {
30
-
27
+ @media (min-width: 640px) {
31
28
  .Grid6,
32
29
  .Grid9,
33
30
  .Grid12 {
34
- column-gap: 25px;
35
31
  display: grid;
36
32
  row-gap: 25px;
33
+ column-gap: 25px;
37
34
  }
38
35
 
39
36
  .Grid6 {
@@ -80,10 +77,9 @@
80
77
  grid-column-start: 7;
81
78
  }
82
79
 
83
- @include constants.for-phone-and-tablet {
80
+ @media not all and (min-width: 992px) {
84
81
  .Span4Tablet {
85
82
  grid-column-end: span 4;
86
-
87
83
  }
88
84
  }
89
- }
85
+ }
package/theme/assets/{scss/_theme.scss → css/theme.css} RENAMED
@@ -1,27 +1,24 @@
1
- @use "constants";
2
-
3
1
  * {
4
2
  box-sizing: border-box;
5
3
  }
6
4
 
7
5
  body {
8
- line-height: 1.5;
9
6
  padding: 0;
10
7
  margin: 0;
11
-
8
+ line-height: 1.5;
12
9
  }
13
10
 
14
- @include constants.for-tablet-up {
11
+ @media (min-width: 640px) {
15
12
  body {
13
+ position: relative;
16
14
  min-height: 100vh;
17
15
  padding-bottom: 50px;
18
- position: relative;
19
16
  }
20
17
 
21
18
  .PageFooterArea {
19
+ position: absolute;
22
20
  bottom: 0;
23
21
  left: 0;
24
- position: absolute;
25
22
  width: 100%;
26
23
  }
27
24
  }
@@ -31,30 +28,30 @@ body {
31
28
  }
32
29
 
33
30
  .PageHeader {
34
- padding-bottom: 15px;
35
31
  padding-top: 15px;
32
+ padding-bottom: 15px;
36
33
  }
37
34
 
38
35
  .PageFooter {
39
- align-items: center;
40
36
  display: flex;
41
- height: 100%;
37
+ align-items: center;
42
38
  justify-content: space-between;
39
+ height: 100%;
43
40
  }
44
41
 
45
42
  ._revertedColors {
46
- background-color: #666;
47
43
  color: #fff;
44
+ background-color: #666;
48
45
  }
49
46
 
50
47
  .Mini {
51
- font-size: .6em;
48
+ font-size: 0.6em;
52
49
  font-style: italic;
53
50
  }
54
51
 
55
52
  .Annotation {
53
+ font-size: var(--font-size-14);
56
54
  color: #888;
57
- font-size: constants.$f14;
58
55
  }
59
56
 
60
57
  ._revertedColors .Annotation {
@@ -64,21 +61,21 @@ body {
64
61
  .Btn,
65
62
  .PaButton {
66
63
  all: unset;
67
- background-color: #ccc;
68
- border: 1px solid #aaa;
69
64
  box-sizing: border-box;
70
- color: #444;
71
- cursor: pointer;
72
65
  display: inline-block;
73
66
  padding: 5px;
67
+ color: #444;
74
68
  text-align: center;
69
+ cursor: pointer;
75
70
  user-select: none;
71
+ background-color: #ccc;
72
+ border: 1px solid #aaa;
76
73
 
77
74
  &:focus,
78
75
  &:hover {
76
+ outline: 2px solid #f3e0bc;
79
77
  background-color: #ddd;
80
78
  border-color: #bbb;
81
- outline: 2px solid #f3e0bc;
82
79
  }
83
80
 
84
81
  &.active {
@@ -86,19 +83,19 @@ body {
86
83
  }
87
84
 
88
85
  &.disabled {
89
- background-color: #aaa7;
90
- border-color: transparent;
91
86
  color: #ccc;
92
- outline: none;
93
87
  cursor: default;
88
+ outline: none;
89
+ background-color: #aaa7;
90
+ border-color: transparent;
94
91
  }
95
92
 
96
93
  &::before {
97
- content: " "; // keep the button from collapsing when empty
94
+ content: " ";
98
95
  }
99
96
 
100
97
  &::after {
101
- content: " "; // keep the button from collapsing when empty
98
+ content: " ";
102
99
  }
103
100
  }
104
101
 
@@ -139,9 +136,9 @@ body {
139
136
  }
140
137
 
141
138
  .Hr {
142
- color: #ccc;
143
139
  max-width: 500px;
144
140
  margin-left: 0;
141
+ color: #ccc;
145
142
  }
146
143
 
147
144
  .Flex {
@@ -166,9 +163,9 @@ body {
166
163
  }
167
164
 
168
165
  .Breadcrumb {
169
- font-size: constants.$f14;
170
- padding-bottom: 5px;
171
166
  padding-top: 5px;
167
+ padding-bottom: 5px;
168
+ font-size: var(--font-size-14);
172
169
  }
173
170
 
174
171
  .Menu {
@@ -177,7 +174,7 @@ body {
177
174
  padding: 0;
178
175
  margin: 0;
179
176
 
180
- &>li {
177
+ & > li {
181
178
  display: flex;
182
179
  flex-direction: column;
183
180
  gap: 2px;
@@ -187,30 +184,30 @@ body {
187
184
  .DocHeader {
188
185
  display: flex;
189
186
  gap: 15px;
190
- padding: 15px 25px 25px;
191
187
  justify-content: space-between;
188
+ padding: 15px 25px 25px;
189
+ }
192
190
 
193
- &-h1 {
194
- margin-top: 0;
195
- }
191
+ .DocHeader-h1 {
192
+ margin-top: 0;
193
+ }
196
194
 
197
- &-right {
198
- align-self: center;
199
- }
195
+ .DocHeader-right {
196
+ align-self: center;
197
+ }
200
198
 
201
- &-middle {
202
- padding-top: 50px;
203
- }
199
+ .DocHeader-middle {
200
+ padding-top: 50px;
204
201
  }
205
202
 
206
203
  .Tag {
207
- background-color: #666;
208
- border-radius: 10px;
209
- color: #fff;
210
- font-size: constants.$f14;
211
- font-weight: bold;
212
204
  padding: 3px 7px;
205
+ font-size: var(--font-size-14);
206
+ font-weight: bold;
207
+ color: #fff;
213
208
  white-space: nowrap;
209
+ background-color: #666;
210
+ border-radius: 10px;
214
211
  }
215
212
 
216
213
  .Block {
@@ -226,34 +223,34 @@ body {
226
223
  }
227
224
 
228
225
  .Tile {
229
- background-color: #f0f0f0;
230
226
  display: flex;
231
- font-size: constants.$f14;
232
227
  gap: 15px;
233
228
  height: 150px;
234
229
  padding: 15px 25px;
230
+ font-size: var(--font-size-14);
231
+ background-color: #f0f0f0;
232
+ }
235
233
 
236
- &-text {
237
- flex-basis: 0;
238
- flex-grow: 2;
239
- }
234
+ .Tile-text {
235
+ flex-grow: 2;
236
+ flex-basis: 0;
237
+ }
240
238
 
241
- &-right {
242
- align-self: center;
243
- display: flex;
244
- justify-content: right;
245
- flex-basis: 0;
246
- flex-grow: 1;
247
- width: 30%;
248
- height: 100%;
249
- }
239
+ .Tile-right {
240
+ display: flex;
241
+ flex-grow: 1;
242
+ flex-basis: 0;
243
+ align-self: center;
244
+ justify-content: right;
245
+ width: 30%;
246
+ height: 100%;
250
247
  }
251
248
 
252
249
  .Img {
253
250
  display: block;
251
+ max-width: 100%;
254
252
  height: auto;
255
253
  max-height: 100%;
256
- max-width: 100%;
257
254
  object-fit: contain;
258
255
  }
259
256
 
@@ -267,7 +264,6 @@ body {
267
264
  }
268
265
 
269
266
  .PaZoomable {
270
-
271
267
  &:hover,
272
268
  &:focus {
273
269
  outline: 2px solid #f3e0bc;
@@ -280,55 +276,53 @@ body {
280
276
  text-align: center;
281
277
  }
282
278
 
283
- .ContactForm {
284
- &-error {
285
- background-color: #fcc;
286
- }
279
+ .ContactForm-error {
280
+ background-color: #fcc;
281
+ }
287
282
 
288
- &-ended {
289
- background-color: #eee;
290
- }
283
+ .ContactForm-ended {
284
+ background-color: #eee;
285
+ }
291
286
 
292
- &-button {
293
- border: 2px solid #bbb;
294
- padding: 20px;
295
- }
287
+ .ContactForm-button {
288
+ padding: 20px;
289
+ border: 2px solid #bbb;
290
+ }
296
291
 
297
- &-button:not(:disabled):not(.inProgress):focus,
298
- &-button:not(:disabled):not(.inProgress):hover {
299
- background-color: blue;
300
- color: white;
301
- }
292
+ .ContactForm-button:not(:disabled):not(.inProgress):focus,
293
+ .ContactForm-button:not(:disabled):not(.inProgress):hover {
294
+ color: white;
295
+ background-color: blue;
296
+ }
302
297
 
303
- &-button.inProgress::before {
304
- border: 6px solid #88f;
305
- border-color: #88f transparent #88f transparent;
306
- }
298
+ .ContactForm-button.inProgress::before {
299
+ border: 6px solid #88f;
300
+ border-color: #88f transparent #88f transparent;
307
301
  }
308
302
 
309
303
  .SideImage {
310
304
  display: flex;
311
305
  flex-direction: row;
312
- margin: 0 auto;
313
306
  max-width: 750px;
307
+ margin: 0 auto;
314
308
 
315
- &-side {
316
- background-color: #f0f0f0;
317
- padding: 50px;
318
- width: 50%;
309
+ &.right {
310
+ flex-direction: row-reverse;
319
311
  }
312
+ }
320
313
 
321
- &-img {
322
- margin: 0 auto;
323
- max-height: 250px;
324
- }
314
+ .SideImage-side {
315
+ width: 50%;
316
+ padding: 50px;
317
+ background-color: #f0f0f0;
318
+ }
325
319
 
326
- &-text {
327
- padding: 50px;
328
- width: 50%;
329
- }
320
+ .SideImage-img {
321
+ max-height: 250px;
322
+ margin: 0 auto;
323
+ }
330
324
 
331
- &.right {
332
- flex-direction: row-reverse;
333
- }
334
- }
325
+ .SideImage-text {
326
+ width: 50%;
327
+ padding: 50px;
328
+ }
package/theme/assets/css/tokens.css ADDED
@@ -0,0 +1,62 @@
1
+ :root {
2
+ --font-size-6: 0.375rem;
3
+ --font-size-7: 0.4375rem;
4
+ --font-size-8: 0.5rem;
5
+ --font-size-9: 0.5625rem;
6
+ --font-size-10: 0.625rem;
7
+ --font-size-11: 0.6875rem;
8
+ --font-size-12: 0.75rem;
9
+ --font-size-13: 0.8125rem;
10
+ --font-size-14: 0.875rem;
11
+ --font-size-15: 0.9375rem;
12
+ --font-size-16: 1rem;
13
+ --font-size-17: 1.0625rem;
14
+ --font-size-18: 1.125rem;
15
+ --font-size-19: 1.1875rem;
16
+ --font-size-20: 1.25rem;
17
+ --font-size-21: 1.3125rem;
18
+ --font-size-22: 1.375rem;
19
+ --font-size-23: 1.4375rem;
20
+ --font-size-24: 1.5rem;
21
+ --font-size-25: 1.5625rem;
22
+ --font-size-26: 1.625rem;
23
+ --font-size-27: 1.6875rem;
24
+ --font-size-28: 1.75rem;
25
+ --font-size-29: 1.8125rem;
26
+ --font-size-30: 1.875rem;
27
+ --font-size-31: 1.9375rem;
28
+ --font-size-32: 2rem;
29
+ --font-size-33: 2.0625rem;
30
+ --font-size-34: 2.125rem;
31
+ --font-size-35: 2.1875rem;
32
+ --font-size-36: 2.25rem;
33
+ --font-size-37: 2.3125rem;
34
+ --font-size-38: 2.375rem;
35
+ --font-size-39: 2.4375rem;
36
+ --font-size-40: 2.5rem;
37
+ --font-size-41: 2.5625rem;
38
+ --font-size-42: 2.625rem;
39
+ --font-size-43: 2.6875rem;
40
+ --font-size-44: 2.75rem;
41
+ --font-size-45: 2.8125rem;
42
+ --font-size-46: 2.875rem;
43
+ --font-size-47: 2.9375rem;
44
+ --font-size-48: 3rem;
45
+ --font-size-49: 3.0625rem;
46
+ --font-size-50: 3.125rem;
47
+ --font-size-51: 3.1875rem;
48
+ --font-size-52: 3.25rem;
49
+ --font-size-53: 3.3125rem;
50
+ --font-size-54: 3.375rem;
51
+ --font-size-55: 3.4375rem;
52
+ --font-size-56: 3.5rem;
53
+ --font-size-57: 3.5625rem;
54
+ --font-size-58: 3.625rem;
55
+ --font-size-59: 3.6875rem;
56
+ --font-size-60: 3.75rem;
57
+ --font-size-61: 3.8125rem;
58
+ --font-size-62: 3.875rem;
59
+ --font-size-63: 3.9375rem;
60
+ --font-size-64: 4rem;
61
+ --paInteractiveColor: #99f;
62
+ }
package/theme/assets/index.css ADDED
@@ -0,0 +1 @@
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;--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}.Column4{grid-column-start:4}.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}.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%}*{box-sizing:border-box}body{line-height:1.5;margin:0;padding:0}@media (min-width:640px){body{min-height:100vh;padding-bottom:50px;position:relative}.PageFooterArea{bottom:0;left:0;position:absolute;width:100%}}.PageFooterArea{height:50px}.PageHeader{padding-bottom:15px;padding-top:15px}.PageFooter{align-items:center;display:flex;height:100%;justify-content:space-between}._revertedColors{background-color:#666;color:#fff}.Mini{font-size:.6em;font-style:italic}.Annotation{color:#888;font-size:var(--font-size-14)}._revertedColors .Annotation{color:#b0b0b0}.Btn,.PaButton{all:unset;background-color:#ccc;border:1px solid #aaa;box-sizing:border-box;color:#444;cursor:pointer;display:inline-block;padding:5px;text-align:center;user-select:none}.Btn:focus,.Btn:hover,.PaButton:focus,.PaButton:hover{background-color:#ddd;border-color:#bbb;outline:2px solid #f3e0bc}.Btn.active,.PaButton.active{font-weight:700}.Btn.disabled,.PaButton.disabled{background-color:#aaa7;border-color:transparent;color:#ccc;cursor:default;outline:none}.Btn:after,.Btn:before,.PaButton:after,.PaButton:before{content:" "}.Bg{background-color:#f0f0f0}.Bg2{background-color:#ccc}.Color2{color:#777}.Mt{margin-top:30px}.Mb{margin-bottom:30px}.BigMt{margin-top:60px}.BigMb{margin-bottom:60px}.Pt{padding-top:20px}.Pb{padding-bottom:20px}.Hr{color:#ccc;margin-left:0;max-width:500px}.Flex{display:flex}.Flex.column{flex-direction:column}.Flex.center{align-items:center;justify-content:center}.Flex.spaceBetween{justify-content:space-between}.Flex.gap{gap:15px}.Breadcrumb{font-size:var(--font-size-14);padding-bottom:5px;padding-top:5px}.Menu{margin:0;padding:0}.Menu,.Menu>li{display:flex;gap:2px}.Menu>li{flex-direction:column}.DocHeader{display:flex;gap:15px;justify-content:space-between;padding:15px 25px 25px}.DocHeader-h1{margin-top:0}.DocHeader-right{align-self:center}.DocHeader-middle{padding-top:50px}.Tag{background-color:#666;border-radius:10px;color:#fff;font-size:var(--font-size-14);font-weight:700;padding:3px 7px;white-space:nowrap}.Block{display:block}.InlineBlock{display:inline-block}.Bold{font-weight:700}.Tile{background-color:#f0f0f0;display:flex;font-size:var(--font-size-14);gap:15px;height:150px;padding:15px 25px}.Tile-text{flex-basis:0;flex-grow:2}.Tile-right{align-self:center;display:flex;flex-basis:0;flex-grow:1;height:100%;justify-content:right;width:30%}.Img{display:block;height:auto;max-height:100%;max-width:100%;object-fit:contain}.TextPage{padding:40px}.ConstraintSize{height:auto;max-width:100%}.PaZoomable:focus,.PaZoomable:hover{outline:2px solid #f3e0bc}.InfiniteLoading-actionArea{grid-column:4;grid-column-end:span 6;text-align:center}.ContactForm-error{background-color:#fcc}.ContactForm-ended{background-color:#eee}.ContactForm-button{border:2px solid #bbb;padding:20px}.ContactForm-button:not(:disabled):not(.inProgress):focus,.ContactForm-button:not(:disabled):not(.inProgress):hover{background-color:blue;color:#fff}.ContactForm-button.inProgress:before{border-color:#88f transparent;border-style:solid;border-width:6px}.SideImage{display:flex;flex-direction:row;margin:0 auto;max-width:750px}.SideImage.right{flex-direction:row-reverse}.SideImage-side{background-color:#f0f0f0;padding:50px;width:50%}.SideImage-img{margin:0 auto;max-height:250px}.SideImage-text{padding:50px;width:50%}
package/theme/templates/home.liquid CHANGED
@@ -1,7 +1,7 @@
1
1
  {% layout 'layouts/main-layout.liquid' %}
2
2
  {% block %}
3
- {% set posts = docs(site.home.posts.children, limit: 4) %}
4
- {% set pages = docs(site.home.pages.children) %}
3
+ {% set posts = docs(site.home.routing.posts.children, limit: 4) %}
4
+ {% set pages = docs(site.home.routing.pages.children) %}
5
5
 
6
6
  <main>
7
7
  {% render 'partials/breadcrumb', doc: doc %}
@@ -10,7 +10,7 @@
10
10
  <section class="TileList Container pad">
11
11
  <h2>
12
12
  Latest posts
13
- {% set postsPage = doc(site.home.posts) %}
13
+ {% set postsPage = doc(site.home.routing.posts) %}
14
14
  {% if postsPage %}
15
15
  <a class="Mini" href="{{ postsPage.url }}">see all</a>
16
16
  {% endif %}
package/theme/templates/layouts/main-layout.liquid CHANGED
@@ -7,7 +7,7 @@
7
7
  {% if doc.type != 'home' and doc.title %}{{ doc.title }} -{%- endif %}
8
8
  {{ site.field.title }}
9
9
  </title>
10
- <link rel="stylesheet" href="{{ site.assetsUrl }}/css/index.css">
10
+ <link rel="stylesheet" href="{{ site.assetsUrl }}/index.css">
11
11
  </head>
12
12
 
13
13
  <body>
package/theme/templates/partials/footer.liquid CHANGED
@@ -1,7 +1,7 @@
1
1
  <div class="_revertedColors PageFooterArea">
2
2
  <footer class="PageFooter Container pad">
3
3
  <div class="Text">{{ site.field.footerMention | raw }}</div>
4
- {% set contactPage = doc(site.home.contactPage) %}
4
+ {% set contactPage = doc(site.home.routing.contactPage) %}
5
5
  {% if contactPage %}
6
6
  <a class="Btn" href="{{ contactPage.url }}">{{ contactPage.title }}</a>
7
7
  {% endif %}
package/theme/templates/partials/header.liquid CHANGED
@@ -37,8 +37,8 @@
37
37
  >
38
38
  </li>
39
39
 
40
- {% if site.home.pages %}
41
- {% set pages = docs(site.home.pages.children) %}
40
+ {% if site.home.routing.pages %}
41
+ {% set pages = docs(site.home.routing.pages.children) %}
42
42
  <li>
43
43
  <span class="Btn disabled">Pages</span>
44
44
  <ul class="Menu sub">
@@ -57,7 +57,7 @@
57
57
  </li>
58
58
  {% endif %}
59
59
 
60
- {% set postsPage = doc(site.home.posts) %}
60
+ {% set postsPage = doc(site.home.routing.posts) %}
61
61
  {% if postsPage %}
62
62
  <li>
63
63
  <a
@@ -70,7 +70,7 @@
70
70
  </li>
71
71
  {% endif %}
72
72
 
73
- {% set aboutPage = doc(site.home.aboutPage) %}
73
+ {% set aboutPage = doc(site.home.routing.aboutPage) %}
74
74
  {% if aboutPage %}
75
75
  <li>
76
76
  <a
@@ -83,7 +83,7 @@
83
83
  </li>
84
84
  {% endif %}
85
85
 
86
- {% set contactPage = doc(site.home.contactPage) %}
86
+ {% set contactPage = doc(site.home.routing.contactPage) %}
87
87
  {% if contactPage %}
88
88
  <li>
89
89
  <a
@@ -99,7 +99,7 @@
99
99
  </nav>
100
100
 
101
101
  <div>
102
- {% set searchPage = doc(site.home.searchPage) %}
102
+ {% set searchPage = doc(site.home.routing.searchPage) %}
103
103
  {% if searchPage %}
104
104
  {% out searchOpener(url: searchPage.url) %}
105
105
  {% endif %}
package/theme/templates/posts.liquid CHANGED
@@ -2,12 +2,12 @@
2
2
  {% block %}
3
3
  {% render 'partials/breadcrumb', doc: doc %}
4
4
 
5
- {% set tags = docs(site.home.posts.tags.children) %}
5
+ {% set tags = docs(site.home.routing.posts.tags.children) %}
6
6
  {% if tags %}
7
7
  <div class="Bg2 Pt Pb">
8
8
  <div class="Container pad">
9
9
  <hr class="Hr">
10
- <div class="Annotation">set tags = docs(site.home.posts.tags.children)</div>
10
+ <div class="Annotation">set tags = docs(site.home.routing.posts.tags.children)</div>
11
11
 
12
12
  Tags:
13
13
  {% for tag in tags %}
package/theme/templates/tag.liquid CHANGED
@@ -12,11 +12,11 @@
12
12
  </div>
13
13
  {% endif %}
14
14
 
15
- {% set posts = paginatedDocs(site.home.posts.children, by: 4, term: doc, labeledWith: "tags") %}
15
+ {% set posts = paginatedDocs(site.home.routing.posts.children, by: 4, term: doc, labeledWith: "tags") %}
16
16
  <div class="Container pad Mt Mb">
17
17
  <div class="Grid12">
18
18
  <div class="Annotation Column4 Span6">
19
- set posts = paginatedDocs(site.home.posts.children, by: 4, term: doc, labeledWith: "tags")
19
+ set posts = paginatedDocs(site.home.routing.posts.children, by: 4, term: doc, labeledWith: "tags")
20
20
  </div>
21
21
  </div>
22
22
  {% out infiniteLoading(class: "Grid12", paginatedDocs: posts, template: "partials/post-tile.public") %}
package/theme/assets/scss/_constants.scss DELETED
@@ -1,87 +0,0 @@
1
- :root {
2
- --paInteractiveColor: #99f;
3
- }
4
-
5
- @mixin for-phone {
6
- @media not all and (min-width: 640px) {
7
- @content;
8
- }
9
- }
10
-
11
- @mixin for-tablet-up {
12
- @media (min-width: 640px) {
13
- @content;
14
- }
15
- }
16
-
17
- @mixin for-phone-and-tablet {
18
- @media not all and (min-width: 992px) {
19
- @content;
20
- }
21
- }
22
-
23
- @mixin for-desktop {
24
- @media (min-width: 992px) {
25
- @content;
26
- }
27
- }
28
-
29
- $f6: 0.375rem;
30
- $f7: 0.4375rem;
31
- $f8: 0.5rem;
32
- $f9: 0.5625rem;
33
- $f10: 0.625rem;
34
- $f11: 0.6875rem;
35
- $f12: 0.75rem;
36
- $f13: 0.8125rem;
37
- $f14: 0.875rem;
38
- $f15: 0.9375rem;
39
- $f16: 1rem;
40
- $f17: 1.0625rem;
41
- $f18: 1.125rem;
42
- $f19: 1.1875rem;
43
- $f20: 1.25rem;
44
- $f21: 1.3125rem;
45
- $f22: 1.375rem;
46
- $f23: 1.4375rem;
47
- $f24: 1.5rem;
48
- $f25: 1.5625rem;
49
- $f26: 1.625rem;
50
- $f27: 1.6875rem;
51
- $f28: 1.75rem;
52
- $f29: 1.8125rem;
53
- $f30: 1.875rem;
54
- $f31: 1.9375rem;
55
- $f32: 2rem;
56
- $f33: 2.0625rem;
57
- $f34: 2.125rem;
58
- $f35: 2.1875rem;
59
- $f36: 2.25rem;
60
- $f37: 2.3125rem;
61
- $f38: 2.375rem;
62
- $f39: 2.4375rem;
63
- $f40: 2.5rem;
64
- $f41: 2.5625rem;
65
- $f42: 2.625rem;
66
- $f43: 2.6875rem;
67
- $f44: 2.75rem;
68
- $f45: 2.8125rem;
69
- $f46: 2.875rem;
70
- $f47: 2.9375rem;
71
- $f48: 3rem;
72
- $f49: 3.0625rem;
73
- $f50: 3.125rem;
74
- $f51: 3.1875rem;
75
- $f52: 3.25rem;
76
- $f53: 3.3125rem;
77
- $f54: 3.375rem;
78
- $f55: 3.4375rem;
79
- $f56: 3.5rem;
80
- $f57: 3.5625rem;
81
- $f58: 3.625rem;
82
- $f59: 3.6875rem;
83
- $f60: 3.75rem;
84
- $f61: 3.8125rem;
85
- $f62: 3.875rem;
86
- $f63: 3.9375rem;
87
- $f64: 4rem;
package/theme/assets/scss/index.scss DELETED
@@ -1,3 +0,0 @@
1
- @use "layout";
2
- @use "Text";
3
- @use "theme";