@kadal/theme-bricks 0.0.0-stage → 0.4.1

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 (13) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +48 -2
  3. package/assets/page-1.svg +13 -0
  4. package/assets/page-3.svg +5 -0
  5. package/assets/page-4.svg +6 -0
  6. package/assets/page-5.svg +6 -0
  7. package/assets/page-6.svg +7 -0
  8. package/assets/page-8.svg +5 -0
  9. package/assets/page-9.svg +7 -0
  10. package/index.tsx +43 -0
  11. package/package.json +98 -4
  12. package/polygons.tsx +200 -0
  13. package/style.css +429 -0
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 Slidev.js Team (the original theme, @slidev/theme-bricks)
4
+ Copyright (c) 2026 Mithunish Prabhakaran (the Kadal Deck port, @kadal/theme-bricks)
5
+
6
+ Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ of this software and associated documentation files (the "Software"), to deal
8
+ in the Software without restriction, including without limitation the rights
9
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ copies of the Software, and to permit persons to whom the Software is
11
+ furnished to do so, subject to the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be included in all
14
+ copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,49 @@
1
- # Temporary Holding Version
1
+ # @kadal/theme-bricks
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ **Bricks**, a theme for [Kadal Deck](https://deck.kadal.cc): Slidev's bricks theme, ported.
4
+ Building blocks in coral, butter, rose and sky on a cream page, a different arrangement behind
5
+ each layout, Sigmar One for headings and Signika Negative for words. Light only.
6
+
7
+ ```bash
8
+ npm install @kadal/theme-bricks
9
+ ```
10
+
11
+ ```yaml
12
+ ---
13
+ theme: bricks
14
+ ---
15
+ ```
16
+
17
+ ## Layouts
18
+
19
+ | layout | frontmatter / slots | what |
20
+ |---|---|---|
21
+ | `cover` | | the title in the display face over a heap of blocks |
22
+ | `intro` | `::left::` | the title, big, in the right-hand column |
23
+ | `default` | | blocks in three corners, generous margins |
24
+ | `section` | `::right::` | the title low in the left column, the `right` slot centred in the other |
25
+ | `items` | `cols` (4), `::items::` | a title over a grid of items |
26
+ | `quote`, `fact`, `statement` | | a centred line among blocks |
27
+ | `blank` | | the bare page |
28
+
29
+ ## Components
30
+
31
+ `<Polygon1 />` to `<Polygon11 />`: the blocks themselves. Size them as in Slidev,
32
+ `<Polygon7 w="20" h="20" m="auto" />` (Uno's spacing scale: 20 is 5rem), or with any CSS length,
33
+ `className` or `style`. Without an `aria-label` a block is decoration, hidden from screen readers.
34
+
35
+ ## Develop
36
+
37
+ The preview deck (`preview/deck.mdx`) is the original theme's own example deck, slide for slide:
38
+
39
+ ```bash
40
+ npm run dev # the preview deck, live
41
+ npm run check # lint it
42
+ ```
43
+
44
+ ## Licence and attribution
45
+
46
+ MIT. This package is a port of [`@slidev/theme-bricks`](https://github.com/slidevjs/themes), MIT License,
47
+ Copyright (c) 2021 Slidev.js Team (the theme by Inès Fendi). The look, the layouts and their frontmatter are
48
+ theirs; the React layouts and the stylesheet were rewritten for Kadal Deck. The full notice is in
49
+ [LICENSE](./LICENSE).
package/assets/page-1.svg ADDED
@@ -0,0 +1,13 @@
1
+ <svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M106.278 504.467C108.847 500.201 115.194 500.741 117.007 505.379L158.934 612.672C160.474 616.611 157.564 620.864 153.335 620.856L46.9156 620.653C42.2526 620.644 39.3815 615.552 41.7871 611.557L106.278 504.467Z" fill="#F07A6B"/>
3
+ <path d="M307.322 322H207.322C200.695 322 195.322 316.627 195.322 310V213.414C195.322 211.223 195.905 209.073 197.093 207.233C218.574 173.96 269.585 131.763 317.5 207.14C318.683 209.001 319.322 211.232 319.322 213.438V310C319.322 316.627 313.949 322 307.322 322Z" fill="#F9D56E"/>
4
+ <path d="M596.322 267.421C596.322 264.237 599.861 262.329 602.521 264.08L659.569 301.625L711.662 335.909C714.978 338.091 713.433 343.25 709.463 343.25H600.322C598.113 343.25 596.322 341.459 596.322 339.25V267.421Z" fill="#72A6E2"/>
5
+ <path d="M266.822 395H216.322C213.008 395 210.322 397.686 210.322 401V562C210.322 565.314 213.008 568 216.322 568H389.822C393.136 568 395.822 565.314 395.822 562V520.5C395.822 517.186 393.136 514.5 389.822 514.5H339.822C336.508 514.5 333.822 511.814 333.822 508.5V459.5C333.822 456.186 331.136 453.5 327.822 453.5H278.822C275.508 453.5 272.822 450.814 272.822 447.5V401C272.822 397.686 270.136 395 266.822 395Z" fill="#E29B94"/>
6
+ <path d="M73.322 440V329.563C73.322 325.138 77.948 322.235 81.9322 324.16L158.932 361.362C161.005 362.364 162.322 364.463 162.322 366.765V440C162.322 443.314 159.636 446 156.322 446H79.322C76.0083 446 73.322 443.314 73.322 440Z" fill="#72A6E2"/>
7
+ <path d="M611.322 463C559 463 516.157 503.59 512.566 554.999C512.296 558.856 515.456 562 519.322 562H703.322C707.188 562 710.348 558.856 710.078 554.999C706.487 503.59 663.644 463 611.322 463Z" fill="#F9D56E"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M642.322 575C642.322 571.134 645.456 568 649.322 568H794.322C798.188 568 801.322 571.134 801.322 575V767C801.322 770.866 798.188 774 794.322 774H764.891C761.025 774 757.891 770.866 757.891 767V682.5V682.001C757.891 682 757.891 682 757.89 682C757.89 682 757.89 682 757.89 681.999C757.692 654.892 741.455 633 721.454 633C701.453 633 685.216 654.892 685.018 681.999C685.018 682 685.018 682 685.017 682C685.017 682 685.016 682 685.016 682.001V682.5V767C685.016 770.866 681.882 774 678.016 774H649.322C645.456 774 642.322 770.866 642.322 767V575Z" fill="#E29B94"/>
9
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M527.145 456C530.473 456 533.176 453.29 533.038 449.965C530.355 385.307 490.927 334 442.682 334C394.437 334 355.01 385.307 352.327 449.965C352.189 453.29 354.892 456 358.22 456H383.034C386.325 456 388.982 453.342 389.21 450.059C391.782 412.998 414.741 384 442.682 384C470.624 384 493.583 412.998 496.155 450.059C496.383 453.342 499.04 456 502.33 456H527.145Z" fill="#F07A6B"/>
10
+ <path d="M412.399 602.248C413.554 599.096 416.554 597 419.911 597H483.956C487.906 597 491.264 599.882 491.863 603.786L504.908 688.786C505.652 693.632 501.902 698 497.001 698H388.773C383.213 698 379.348 692.469 381.261 687.248L412.399 602.248Z" fill="#72A6E2"/>
11
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M303.322 647C303.322 643.686 300.636 641 297.322 641H144.322C141.008 641 138.322 643.686 138.322 647V727C138.322 730.314 141.008 733 144.322 733H170.154C174.176 733 177.059 729.098 176.608 725.102C176.419 723.427 176.322 721.725 176.322 720C176.322 695.147 196.469 675 221.322 675C246.175 675 266.322 695.147 266.322 720C266.322 721.725 266.225 723.427 266.036 725.102C265.585 729.098 268.467 733 272.49 733H297.322C300.636 733 303.322 730.314 303.322 727V647Z" fill="#F9D56E"/>
12
+ <path d="M409.322 755.5C409.322 787.256 383.578 813 351.822 813C320.066 813 294.322 787.256 294.322 755.5C294.322 723.744 320.066 698 351.822 698C383.578 698 409.322 723.744 409.322 755.5Z" fill="#F07A6B"/>
13
+ </svg>
package/assets/page-3.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M713.881 919L750.633 919C759.128 919 766 912.111 766 903.63L766 786.37C766 777.889 759.128 771 750.633 771L624.367 771C615.872 771 609 777.889 609 786.37L609 816.595C609 825.076 615.872 831.965 624.367 831.965L654.121 831.965L654.121 861.023C654.121 869.504 660.993 876.393 669.488 876.393L698.515 876.393L698.515 903.63C698.515 912.111 705.387 919 713.881 919Z" stroke="#F9D56E" stroke-width="22"/>
3
+ <path d="M1416.5 122C1464.82 122 1504 82.8249 1504 34.5C1504 -13.8249 1464.82 -53 1416.5 -53C1368.18 -53 1329 -13.8249 1329 34.5C1329 82.8249 1368.18 122 1416.5 122Z" stroke="#72A6E2" stroke-width="22"/>
4
+ <path d="M205.772 289C153.45 289 110.608 329.59 107.016 380.999C106.747 384.856 109.906 388 113.772 388H297.772C301.638 388 304.798 384.856 304.529 380.999C300.937 329.59 258.095 289 205.772 289Z" fill="#E29B94"/>
5
+ </svg>
package/assets/page-4.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1257.64 161.378C1254.75 157.925 1256.83 152.653 1261.29 152.144L1357.01 141.225L1444.41 131.254C1449.97 130.619 1453 137.613 1448.71 141.206L1330.93 239.991C1328.55 241.991 1324.99 241.67 1322.98 239.274L1257.64 161.378Z" fill="#72A6E2"/>
3
+ <path d="M320.5 607C265.673 607 220.78 666.86 217.017 742.675C216.734 748.363 220.045 753 224.096 753H416.904C420.955 753 424.266 748.363 423.983 742.675C420.22 666.86 375.327 607 320.5 607Z" fill="#F9D56E"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1354 672.937C1354 668.001 1358 664 1362.94 664H1548.06C1553 664 1557 668.001 1557 672.937V918.063C1557 922.999 1553 927 1548.06 927H1510.49C1505.55 927 1501.55 922.999 1501.55 918.063V810.182V809.545C1501.55 809.544 1501.55 809.544 1501.55 809.544C1501.55 809.544 1501.55 809.543 1501.55 809.543C1501.3 774.935 1480.57 746.985 1455.03 746.985C1429.49 746.985 1408.76 774.935 1408.51 809.543C1408.51 809.543 1408.51 809.544 1408.51 809.544C1408.51 809.544 1408.51 809.544 1408.51 809.545V810.182V918.063C1408.51 922.999 1404.51 927 1399.57 927H1362.94C1358 927 1354 922.999 1354 918.063V672.937Z" fill="#E29B94"/>
5
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M59.8977 -1.52835e-05C56.5703 -1.55744e-05 53.8672 2.71043 54.0051 6.03501C56.6876 70.6926 96.1154 122 144.36 122C192.605 122 232.033 70.6927 234.716 6.03503C234.854 2.71045 232.151 -2.24698e-07 228.823 -5.15593e-07L204.009 -2.68497e-06C200.718 -2.97264e-06 198.061 2.6583 197.833 5.94099C195.261 43.0022 172.302 72 144.36 72C116.419 72 93.4602 43.0021 90.8882 5.94098C90.6604 2.65829 88.003 -1.28265e-05 84.7125 -1.31142e-05L59.8977 -1.52835e-05Z" fill="#F07A6B"/>
6
+ </svg>
package/assets/page-5.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M178.388 740H131.563C128.491 740 126 742.484 126 745.549V894.451C126 897.516 128.491 900 131.563 900H292.437C295.509 900 298 897.516 298 894.451V856.069C298 853.005 295.509 850.52 292.437 850.52H246.075C243.003 850.52 240.512 848.036 240.512 844.971V799.653C240.512 796.588 238.021 794.104 234.949 794.104H189.515C186.442 794.104 183.951 791.62 183.951 788.555V745.549C183.951 742.484 181.461 740 178.388 740Z" fill="#E29B94"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1546 7.8913C1546 3.53306 1542.45 0 1538.07 0H1335.93C1331.55 0 1328 3.53306 1328 7.8913V113.109C1328 117.467 1331.55 121 1335.93 121H1370.06C1375.37 121 1379.18 115.868 1378.58 110.612C1378.33 108.41 1378.21 106.171 1378.21 103.902C1378.21 71.2153 1404.82 44.7174 1437.66 44.7174C1470.5 44.7174 1497.12 71.2153 1497.12 103.902C1497.12 106.171 1496.99 108.41 1496.74 110.612C1496.14 115.868 1499.95 121 1505.26 121H1538.07C1542.45 121 1546 117.467 1546 113.109V7.8913Z" fill="#F07A6B"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1655.62 893C1659.79 893 1663.17 889.601 1662.99 885.431C1659.64 804.344 1610.33 740 1550 740C1489.67 740 1440.36 804.344 1437.01 885.431C1436.83 889.601 1440.21 893 1444.38 893H1475.41C1479.52 893 1482.85 889.666 1483.13 885.549C1486.35 839.071 1515.06 802.705 1550 802.705C1584.94 802.705 1613.65 839.071 1616.87 885.549C1617.15 889.666 1620.48 893 1624.59 893H1655.62Z" fill="#F9D56E"/>
5
+ <path d="M165.17 492.266C169.537 497.022 168.371 503.344 163.129 503.339L50.6806 503.225L-51.9994 503.121C-58.5359 503.115 -63.96 493.893 -59.7182 489.998L56.8981 382.924C59.2585 380.757 63.6282 381.675 66.658 384.975L165.17 492.266Z" fill="#72A6E2"/>
6
+ </svg>
package/assets/page-6.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1527 744.354C1529.13 746.678 1528.56 749.767 1526 749.765L1471.04 749.709L1420.86 749.658C1417.67 749.655 1415.02 745.149 1417.09 743.245L1474.08 690.918C1475.24 689.859 1477.37 690.307 1478.85 691.92L1527 744.354Z" fill="#E29B94"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1554 824.935C1554 821.657 1551.33 819 1548.04 819H1395.96C1392.67 819 1390 821.657 1390 824.935V904.065C1390 907.343 1392.67 910 1395.96 910H1421.64C1425.64 910 1428.5 906.141 1428.05 902.187C1427.87 900.531 1427.77 898.847 1427.77 897.141C1427.77 872.559 1447.79 852.63 1472.5 852.63C1497.2 852.63 1517.22 872.559 1517.22 897.141C1517.22 898.847 1517.13 900.531 1516.94 902.187C1516.49 906.141 1519.36 910 1523.35 910H1548.04C1551.33 910 1554 907.343 1554 904.065V824.935Z" fill="#F07A6B"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1534 753.565C1534 751.044 1531.98 749 1529.49 749H1414.51C1412.02 749 1410 751.044 1410 753.565V814.435C1410 816.956 1412.02 819 1414.51 819H1433.92C1436.95 819 1439.11 816.031 1438.77 812.99C1438.63 811.716 1438.56 810.421 1438.56 809.109C1438.56 790.199 1453.7 774.87 1472.38 774.87C1491.05 774.87 1506.19 790.199 1506.19 809.109C1506.19 810.421 1506.12 811.716 1505.98 812.99C1505.64 816.031 1507.81 819 1510.83 819H1529.49C1531.98 819 1534 816.956 1534 814.435V753.565Z" fill="#F9D56E"/>
5
+ <path d="M166.141 762.031C161.9 764.189 157.642 762.11 158.684 758.389L181.036 678.577L201.447 605.699C202.746 601.06 210.368 599.036 212.293 602.818L265.214 706.818C266.285 708.923 264.768 711.844 261.825 713.341L166.141 762.031Z" fill="#72A6E2"/>
6
+ <path d="M1224 159.5C1224 193.466 1196.47 221 1162.5 221C1128.53 221 1101 193.466 1101 159.5C1101 125.534 1128.53 98 1162.5 98C1196.47 98 1224 125.534 1224 159.5Z" fill="#F9D56E"/>
7
+ </svg>
package/assets/page-8.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M558 500C558 592.232 483.232 667 391 667C298.768 667 224 592.232 224 500C224 407.768 298.768 333 391 333C483.232 333 558 407.768 558 500Z" fill="#F9D56E"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M365 613.239C365 609.241 362.232 606 358.818 606H201.182C197.768 606 195 609.241 195 613.239V709.761C195 713.759 197.768 717 201.182 717H227.797C231.941 717 234.911 712.292 234.446 707.47C234.252 705.45 234.152 703.396 234.152 701.315C234.152 671.33 254.909 647.022 280.515 647.022C306.121 647.022 326.879 671.33 326.879 701.315C326.879 703.396 326.779 705.45 326.584 707.47C326.119 712.292 329.089 717 333.233 717H358.818C362.232 717 365 713.759 365 709.761V613.239Z" fill="#F07A6B"/>
4
+ <path d="M571.054 324.378C575.842 325.251 578.137 328.927 575.072 330.817L509.348 371.356L449.334 408.374C445.513 410.73 438.006 407.94 438.65 404.403L456.367 307.165C456.726 305.196 459.71 304.092 463.032 304.697L571.054 324.378Z" fill="#E29B94"/>
5
+ </svg>
package/assets/page-9.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1066.5 93C1006.91 93 958.109 158.19 954.018 240.756C953.711 246.95 957.31 252 961.714 252H1171.29C1175.69 252 1179.29 246.95 1178.98 240.756C1174.89 158.19 1126.09 93 1066.5 93Z" fill="#F9D56E"/>
3
+ <path d="M1488.21 421.46L1500.89 426.106L1488.21 421.46L1440.09 552.747C1433.9 569.631 1446.41 587.5 1464.37 587.5H1631.63C1647.47 587.5 1659.6 573.389 1657.2 557.72L1637.04 426.433C1635.1 413.81 1624.24 404.5 1611.47 404.5H1512.5C1501.65 404.5 1491.95 411.269 1488.21 421.46Z" stroke="#F07A6B" stroke-width="27" stroke-linejoin="round"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M481 743.478C481 737.139 476.621 732 471.218 732H221.782C216.379 732 212 737.139 212 743.478V896.522C212 902.861 216.379 908 221.782 908H263.896C270.454 908 275.153 900.536 274.418 892.89C274.11 889.687 273.952 886.43 273.952 883.13C273.952 835.586 306.798 797.043 347.315 797.043C387.833 797.043 420.679 835.586 420.679 883.13C420.679 886.43 420.521 889.687 420.213 892.89C419.477 900.536 424.177 908 430.734 908H471.218C476.621 908 481 902.861 481 896.522V743.478Z" fill="#72A6E2"/>
5
+ <path d="M109 381.5C109 423.75 74.7498 458 32.5 458C-9.74978 458 -44 423.75 -44 381.5C-44 339.25 -9.74978 305 32.5 305C74.7498 305 109 339.25 109 381.5Z" fill="#E29B94"/>
6
+ <path d="M55.4783 416.069C54.0189 411.309 58.6591 406.945 63.3216 408.693L171.181 449.141C175.141 450.626 176.363 455.632 173.533 458.775L102.311 537.847C99.1898 541.312 93.4825 540.048 92.1159 535.59L55.4783 416.069Z" fill="#F9D56E"/>
7
+ </svg>
package/index.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import type { CSSProperties } from "react";
2
+
3
+ import type { LayoutProps } from "@kadal/deck";
4
+
5
+ import { POLYGONS } from "./polygons.tsx";
6
+
7
+ /**
8
+ * Bricks: Slidev's bricks theme (@slidev/theme-bricks, MIT, © 2021 Slidev.js Team) for Kadal Deck.
9
+ *
10
+ * Its layouts, with Slidev's names, slots and frontmatter:
11
+ *
12
+ * cover · intro · default · section · items · quote · fact · statement · blank
13
+ *
14
+ * Each draws its own arrangement of coloured blocks behind the slide (assets/page-*.svg, painted
15
+ * by style.css on `.deck-slide.layout-<name>` so they reach the slide's edges). cover, intro,
16
+ * default, section, quote, fact and statement are the engine's layouts of those names, placed by
17
+ * style.css: `intro` takes a `::left::` slot beside the title, `section` a `::right::` one. The
18
+ * two Slidev adds are here: `items`, a title over an `::items::` slot laid out in `cols:` columns
19
+ * (4 by default), and `blank`, the bare page.
20
+ *
21
+ * The components are the blocks themselves, <Polygon1 /> to <Polygon11 /> (polygons.tsx).
22
+ */
23
+
24
+ function Items({ frontmatter, children }: LayoutProps) {
25
+ const cols = Number(frontmatter.cols);
26
+ const style = { "--bricks-cols": Number.isFinite(cols) && cols >= 1 ? Math.floor(cols) : 4 };
27
+ return (
28
+ <div className="deck-layout deck-layout-items" style={style as CSSProperties}>
29
+ {children}
30
+ </div>
31
+ );
32
+ }
33
+
34
+ function Blank({ children }: LayoutProps) {
35
+ return <div className="deck-layout deck-layout-blank">{children}</div>;
36
+ }
37
+
38
+ export * from "./polygons.tsx";
39
+
40
+ export default {
41
+ layouts: { items: Items, blank: Blank },
42
+ components: POLYGONS,
43
+ };
package/package.json CHANGED
@@ -1,6 +1,100 @@
1
1
  {
2
2
  "name": "@kadal/theme-bricks",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "0.4.1",
4
+ "description": "Bricks: Slidev's bricks theme, ported to Kadal Deck. Building blocks in coral, butter, rose and sky on a cream page, with the Polygon components.",
5
+ "keywords": [
6
+ "kadal-theme",
7
+ "kadal-deck",
8
+ "presentation",
9
+ "slides",
10
+ "theme",
11
+ "slidev-port"
12
+ ],
13
+ "homepage": "https://deck.kadal.cc/docs/",
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "git+https://github.com/kadalcc/deck.git",
17
+ "directory": "packages/theme-bricks"
18
+ },
19
+ "bugs": {
20
+ "url": "https://github.com/kadalcc/deck/issues"
21
+ },
22
+ "license": "MIT",
23
+ "author": "Mithunish Prabhakaran <pmithunish@gmail.com>",
24
+ "type": "module",
25
+ "files": [
26
+ "style.css",
27
+ "index.tsx",
28
+ "polygons.tsx",
29
+ "assets",
30
+ "README.md",
31
+ "LICENSE"
32
+ ],
33
+ "exports": {
34
+ ".": "./index.tsx",
35
+ "./style.css": "./style.css",
36
+ "./package.json": "./package.json"
37
+ },
38
+ "kadal": {
39
+ "theme": {
40
+ "name": "bricks",
41
+ "title": "Bricks",
42
+ "description": "Building blocks on a cream page: Sigmar One headings, a block arrangement per layout, Polygon1–11.",
43
+ "colorScheme": "light",
44
+ "themeConfig": {},
45
+ "config": {
46
+ "fonts": {
47
+ "sans": "Signika Negative",
48
+ "serif": "Sigmar One",
49
+ "mono": "Fira Code"
50
+ }
51
+ },
52
+ "shiki": {
53
+ "light": "vitesse-light",
54
+ "dark": "vitesse-light"
55
+ },
56
+ "defaults": {},
57
+ "layouts": [
58
+ "items",
59
+ "blank"
60
+ ],
61
+ "components": [
62
+ "Polygon1",
63
+ "Polygon2",
64
+ "Polygon3",
65
+ "Polygon4",
66
+ "Polygon5",
67
+ "Polygon6",
68
+ "Polygon7",
69
+ "Polygon8",
70
+ "Polygon9",
71
+ "Polygon10",
72
+ "Polygon11"
73
+ ]
74
+ }
75
+ },
76
+ "publishConfig": {
77
+ "access": "public",
78
+ "provenance": true
79
+ },
80
+ "scripts": {
81
+ "dev": "kadal-deck dev -C preview",
82
+ "build": "kadal-deck build -C preview",
83
+ "check": "kadal-deck check -C preview",
84
+ "typecheck": "tsc --noEmit"
85
+ },
86
+ "peerDependencies": {
87
+ "@kadal/deck": "^0.4.1",
88
+ "react": "^19.2.0"
89
+ },
90
+ "devDependencies": {
91
+ "@kadal/deck": "workspace:*",
92
+ "@types/react": "^19.2.0",
93
+ "@types/react-dom": "^19.2.0",
94
+ "@vitejs/plugin-react": "^6.0.2",
95
+ "react": "^19.2.7",
96
+ "react-dom": "^19.2.7",
97
+ "typescript": "^6.0.3",
98
+ "vite": "^8.0.16"
99
+ }
100
+ }
package/polygons.tsx ADDED
@@ -0,0 +1,200 @@
1
+ import type { CSSProperties, ReactNode, SVGProps } from "react";
2
+
3
+ /**
4
+ * The bricks theme's shapes as components, <Polygon1 /> to <Polygon11 />: the same eleven blocks
5
+ * the slide backgrounds are built from (Slidev's bricks theme, MIT, © 2021 Slidev.js Team). Each draws at
6
+ * its natural size unless told otherwise.
7
+ *
8
+ * Slidev's examples size them with UnoCSS attributes (`<Polygon7 w="20" h="20" m="auto" />`), so
9
+ * the same three props work here: a number is Uno's spacing scale (a quarter of a Slidev rem
10
+ * each, so 20 is 5rem), `auto` and `full` mean what they say, and anything else (`120px`, `30%`)
11
+ * is used as written. Other SVG props (className, style, aria-label…) pass through; without an
12
+ * aria-label the shape is decoration and hidden from screen readers.
13
+ */
14
+ export interface PolygonProps extends SVGProps<SVGSVGElement> {
15
+ /** Width: Uno spacing (`20` = 5rem), `full`, `auto`, or any CSS length. */
16
+ w?: string | number;
17
+ /** Height, as `w`. */
18
+ h?: string | number;
19
+ /** Margin on every side, as `w` (`auto` centres it in its cell). */
20
+ m?: string | number;
21
+ }
22
+
23
+ /** Uno's spacing scale at Kadal's scale: n quarters of a Slidev rem. */
24
+ function size(v: string | number | undefined): string | undefined {
25
+ if (v === undefined || v === "") return undefined;
26
+ const s = String(v).trim();
27
+ if (s === "auto") return "auto";
28
+ if (s === "full") return "100%";
29
+ if (/^-?\d+(\.\d+)?$/.test(s)) return `calc(var(--bricks-rem, 1rem) * ${Number(s) / 4})`;
30
+ return s;
31
+ }
32
+
33
+ function shape(name: string, width: number, height: number, body: ReactNode) {
34
+ function Polygon({ w, h, m, style, ...rest }: PolygonProps) {
35
+ const sized: CSSProperties = {
36
+ display: "block",
37
+ ...(size(w) ? { width: size(w) } : null),
38
+ ...(size(h) ? { height: size(h) } : null),
39
+ ...(size(m) ? { margin: size(m) } : null),
40
+ ...style,
41
+ };
42
+ const labelled = rest["aria-label"] !== undefined || rest["aria-labelledby"] !== undefined;
43
+ return (
44
+ <svg
45
+ width={width}
46
+ height={height}
47
+ viewBox={`0 0 ${width} ${height}`}
48
+ fill="none"
49
+ xmlns="http://www.w3.org/2000/svg"
50
+ role={labelled ? "img" : undefined}
51
+ aria-hidden={labelled ? undefined : true}
52
+ {...rest}
53
+ style={sized}
54
+ >
55
+ {body}
56
+ </svg>
57
+ );
58
+ }
59
+ Polygon.displayName = name;
60
+ return Polygon;
61
+ }
62
+
63
+ export const Polygon1 = shape(
64
+ "Polygon1",
65
+ 260,
66
+ 130,
67
+ <>
68
+ <path
69
+ d="M130 0C60.551 0 3.82149 54.4583 0.185194 123.001C-0.019615 126.862 3.13401 130 7 130H253C256.866 130 260.02 126.862 259.815 123.001C256.179 54.4583 199.449 0 130 0Z"
70
+ fill="#F9D56E"
71
+ />
72
+ </>,
73
+ );
74
+ export const Polygon2 = shape(
75
+ "Polygon2",
76
+ 199,
77
+ 198,
78
+ <>
79
+ <ellipse cx="99.5" cy="99" rx="99.5" ry="99" fill="#F07A6B" />
80
+ </>,
81
+ );
82
+ export const Polygon3 = shape(
83
+ "Polygon3",
84
+ 269,
85
+ 178,
86
+ <>
87
+ <path
88
+ d="M0 13.0257C0 7.44576 6.20941 4.10883 10.8628 7.18806L134.5 89L249.599 165.162C255.385 168.991 252.675 178 245.736 178H7C3.13401 178 0 174.866 0 171V13.0257Z"
89
+ fill="#72A6E2"
90
+ />
91
+ </>,
92
+ );
93
+ export const Polygon4 = shape(
94
+ "Polygon4",
95
+ 179,
96
+ 227,
97
+ <>
98
+ <path
99
+ d="M166 227H13C5.8203 227 0 221.18 0 214V68.7803C0 66.4106 0.624451 64.1009 1.89385 62.0998C32.6023 13.6896 107.174 -49.2374 177.032 61.9763C178.301 63.997 179 66.4202 179 68.8064V214C179 221.18 173.18 227 166 227Z"
100
+ fill="#F9D56E"
101
+ />
102
+ </>,
103
+ );
104
+ export const Polygon5 = shape(
105
+ "Polygon5",
106
+ 238,
107
+ 256,
108
+ <>
109
+ <path
110
+ d="M118.588 25.214C121.157 20.9489 127.503 21.4877 129.315 26.1248L202.859 214.271C204.399 218.21 201.489 222.464 197.259 222.456L10.5944 222.1C5.93118 222.091 3.06049 216.999 5.4667 213.004L118.588 25.214Z"
111
+ fill="#F07A6B"
112
+ />
113
+ </>,
114
+ );
115
+ export const Polygon6 = shape(
116
+ "Polygon6",
117
+ 300,
118
+ 202,
119
+ <>
120
+ <path
121
+ fillRule="evenodd"
122
+ clipRule="evenodd"
123
+ d="M294.051 202C297.378 202 300.077 199.277 299.986 195.95C297 87.0448 230.992 0 150 0C69.0083 0 2.99981 87.0449 0.0142689 195.95C-0.0769163 199.277 2.62153 202 5.949 202H54.9887C58.2793 202 60.9443 199.347 61.0945 196.06C63.9833 132.845 102.683 82.7869 150 82.7869C197.317 82.7869 236.017 132.845 238.905 196.06C239.056 199.347 241.721 202 245.011 202H294.051Z"
124
+ fill="#F07A6B"
125
+ />
126
+ </>,
127
+ );
128
+ export const Polygon7 = shape(
129
+ "Polygon7",
130
+ 247,
131
+ 137,
132
+ <>
133
+ <path
134
+ fillRule="evenodd"
135
+ clipRule="evenodd"
136
+ d="M247 6C247 2.68629 244.314 0 241 0H6C2.68629 0 0 2.6863 0 6V131C0 134.314 2.68629 137 6 137H51.6524C55.6781 137 58.5617 133.104 57.8723 129.137C57.2232 125.402 56.8848 121.561 56.8848 117.641C56.8848 80.6322 87.0446 50.6304 124.248 50.6304C161.452 50.6304 191.612 80.6322 191.612 117.641C191.612 121.561 191.274 125.402 190.625 129.137C189.935 133.104 192.819 137 196.845 137H241C244.314 137 247 134.314 247 131V6Z"
137
+ fill="#F9D56E"
138
+ />
139
+ </>,
140
+ );
141
+ export const Polygon8 = shape(
142
+ "Polygon8",
143
+ 159,
144
+ 206,
145
+ <>
146
+ <path
147
+ fillRule="evenodd"
148
+ clipRule="evenodd"
149
+ d="M0 7C0 3.13401 3.13401 0 7 0H152C155.866 0 159 3.13401 159 7.00001V199C159 202.866 155.866 206 152 206H122.569C118.703 206 115.569 202.866 115.569 199V114.5V114.001C115.569 114 115.569 114 115.569 114C115.568 114 115.568 114 115.568 113.999C115.37 86.8917 99.1328 65 79.1319 65C59.1311 65 42.8941 86.8917 42.6963 113.999C42.6963 114 42.6959 114 42.6954 114C42.6949 114 42.6944 114 42.6944 114.001V114.5V199C42.6944 202.866 39.5604 206 35.6944 206H7C3.13401 206 0 202.866 0 199V7Z"
150
+ fill="#E29B94"
151
+ />
152
+ </>,
153
+ );
154
+ export const Polygon9 = shape(
155
+ "Polygon9",
156
+ 150,
157
+ 212,
158
+ <>
159
+ <path
160
+ d="M0 206V9.55543C0 5.13239 4.62276 2.22969 8.60661 4.15121L146.607 70.7125C148.681 71.7132 150 73.8133 150 76.1167V206C150 209.314 147.314 212 144 212H6C2.68629 212 0 209.314 0 206Z"
161
+ fill="#72A6E2"
162
+ />
163
+ </>,
164
+ );
165
+ export const Polygon10 = shape(
166
+ "Polygon10",
167
+ 229,
168
+ 214,
169
+ <>
170
+ <path
171
+ d="M71.1563 0H6C2.68629 0 0 2.68629 0 6V208C0 211.314 2.6863 214 6 214H223C226.314 214 229 211.314 229 208V153.821C229 150.507 226.314 147.821 223 147.821H158.461C155.147 147.821 152.461 145.135 152.461 141.821V78.3642C152.461 75.0505 149.775 72.3642 146.461 72.3642H83.1563C79.8426 72.3642 77.1563 69.6779 77.1563 66.3642V6C77.1563 2.68629 74.47 0 71.1563 0Z"
172
+ fill="#E29B94"
173
+ />
174
+ </>,
175
+ );
176
+ export const Polygon11 = shape(
177
+ "Polygon11",
178
+ 203,
179
+ 159,
180
+ <>
181
+ <path
182
+ d="M56.3026 5.24908C57.4571 2.09639 60.4573 0 63.8148 0H171.742C175.692 0 179.051 2.88274 179.65 6.78695L201.587 149.787C202.33 154.632 198.581 159 193.679 159H11.4491C5.8897 159 2.02525 153.469 3.93691 148.249L56.3026 5.24908Z"
183
+ fill="#72A6E2"
184
+ />
185
+ </>,
186
+ );
187
+
188
+ export const POLYGONS = {
189
+ Polygon1,
190
+ Polygon2,
191
+ Polygon3,
192
+ Polygon4,
193
+ Polygon5,
194
+ Polygon6,
195
+ Polygon7,
196
+ Polygon8,
197
+ Polygon9,
198
+ Polygon10,
199
+ Polygon11,
200
+ };
package/style.css ADDED
@@ -0,0 +1,429 @@
1
+ /* Bricks — a port of Slidev's bricks theme (@slidev/theme-bricks, MIT, © 2021 Slidev.js Team;
2
+ the theme by Inès Fendi) to Kadal Deck: building blocks in coral, butter, rose and sky on a
3
+ cream page, a heavy display face (Sigmar One) for the headings and Signika Negative for the
4
+ words. Light only, as in Slidev.
5
+
6
+ Every layout has its own arrangement of blocks behind it (assets/page-*.svg, the theme's own
7
+ drawings, without their clip-path group: Vite inlines files this small as data: URLs, where a
8
+ `url(#clip0)` breaks), painted on the slide itself so it reaches the edges whatever the padding.
9
+
10
+ Units. Slidev draws on a 980px-wide canvas with a 16px rem and a 1.1rem body; Kadal draws on a
11
+ 1920px one. Everything here is in `--bricks-rem`, one Slidev rem at Kadal's scale, worked out
12
+ from the slide's base size the way Slidev's body is (1.1rem), so the proportions are Slidev's
13
+ exactly and a deck that changes --deck-base-size scales the whole theme with it.
14
+
15
+ The page colour (#fbf6e5) is the one Slidev's own screenshots of the theme show; the published
16
+ stylesheet leaves the page to the host. */
17
+
18
+ .theme-bricks {
19
+ --bricks-rem: calc(var(--deck-base-size) / 1.1);
20
+ color-scheme: light;
21
+ /* colour */
22
+ --deck-bg: #fbf6e5;
23
+ --deck-fg: #181818;
24
+ --deck-muted: #6f6a5c;
25
+ --deck-accent: var(--theme-primary, #f07a6b);
26
+ --deck-accent-2: var(--theme-secondary, #72a6e2);
27
+ --deck-surface: rgba(24, 24, 24, 0.05);
28
+ --deck-border: rgba(24, 24, 24, 0.14);
29
+ --deck-live: var(--theme-primary, #f07a6b);
30
+ /* type: config.fonts loads Signika Negative, Sigmar One and Fira Code */
31
+ --deck-heading-font: "Sigmar One", ui-serif, Georgia, serif;
32
+ --deck-body-font: "Signika Negative", ui-sans-serif, system-ui, sans-serif;
33
+ --deck-mono-font: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
34
+ --deck-serif-font: "Sigmar One", ui-serif, Georgia, serif;
35
+ --deck-base-size: 34.5px;
36
+ /* code */
37
+ --deck-code-bg: #f3ecd7;
38
+ --deck-code-fg: #1b1b1b;
39
+ --deck-code-active: rgba(249, 213, 110, 0.35);
40
+ /* shape */
41
+ --deck-radius: calc(var(--bricks-rem) * 0.25);
42
+ --deck-pad: calc(var(--bricks-rem) * 3.5);
43
+ --deck-transition: 500ms;
44
+ --deck-controls-color: var(--deck-fg);
45
+ }
46
+
47
+ /* ── the page ─────────────────────────────────────────────────────────── */
48
+ .theme-bricks .deck-slide {
49
+ padding: calc(var(--bricks-rem) * 2.5) calc(var(--bricks-rem) * 3.5);
50
+ line-height: 1.5;
51
+ background-repeat: no-repeat;
52
+ background-position: center;
53
+ background-size: cover;
54
+ }
55
+ .theme-bricks .deck-slide-background {
56
+ inset: calc(var(--bricks-rem) * -2.5) calc(var(--bricks-rem) * -3.5);
57
+ }
58
+
59
+ /* ── type (Slidev's layouts-base.css and the theme's layouts.css) ─────── */
60
+ .theme-bricks .deck-slide :is(h1, h2, h3, h4, h5, h6) {
61
+ font-family: var(--deck-heading-font);
62
+ font-weight: 400;
63
+ letter-spacing: normal;
64
+ margin: 0;
65
+ text-wrap: wrap;
66
+ }
67
+ .theme-bricks .deck-slide h1 {
68
+ font-size: calc(var(--bricks-rem) * 2.25);
69
+ line-height: calc(var(--bricks-rem) * 2.5);
70
+ margin-bottom: var(--bricks-rem);
71
+ margin-inline-start: -0.05em;
72
+ }
73
+ .theme-bricks .deck-slide h2 {
74
+ font-size: calc(var(--bricks-rem) * 1.875);
75
+ line-height: calc(var(--bricks-rem) * 2.25);
76
+ }
77
+ .theme-bricks .deck-slide h3 {
78
+ font-size: calc(var(--bricks-rem) * 1.5);
79
+ line-height: calc(var(--bricks-rem) * 2);
80
+ }
81
+ .theme-bricks .deck-slide h4 {
82
+ font-size: calc(var(--bricks-rem) * 1.25);
83
+ line-height: calc(var(--bricks-rem) * 1.75);
84
+ }
85
+ .theme-bricks .deck-slide h5 {
86
+ font-size: var(--bricks-rem);
87
+ line-height: calc(var(--bricks-rem) * 1.5);
88
+ }
89
+ .theme-bricks .deck-slide h6 {
90
+ font-size: calc(var(--bricks-rem) * 0.875);
91
+ line-height: calc(var(--bricks-rem) * 1.25);
92
+ padding-top: calc(var(--bricks-rem) * 0.25);
93
+ text-transform: uppercase;
94
+ letter-spacing: 0.1em;
95
+ font-weight: 500;
96
+ margin-inline-start: -0.05em;
97
+ }
98
+ .theme-bricks .deck-slide h6:not(.opacity-100) {
99
+ opacity: 0.4;
100
+ }
101
+ .theme-bricks .deck-slide p {
102
+ margin: var(--bricks-rem) 0;
103
+ line-height: calc(var(--bricks-rem) * 1.5);
104
+ }
105
+ .theme-bricks .deck-slide h1 + p {
106
+ margin-top: calc(var(--bricks-rem) * -0.5);
107
+ margin-bottom: var(--bricks-rem);
108
+ opacity: 0.5;
109
+ }
110
+ .theme-bricks .deck-slide :is(p, ul, table) + h2 {
111
+ margin-top: calc(var(--bricks-rem) * 2.5);
112
+ }
113
+ .theme-bricks .deck-slide :is(ul, ol) {
114
+ margin: 0;
115
+ padding: 0;
116
+ }
117
+ .theme-bricks .deck-slide ul {
118
+ list-style: disc;
119
+ }
120
+ .theme-bricks .deck-slide ol {
121
+ list-style: decimal;
122
+ }
123
+ .theme-bricks .deck-slide li {
124
+ margin: 0 0 0 1.1em;
125
+ padding-inline-start: 0.2em;
126
+ line-height: 1.8em;
127
+ }
128
+ .theme-bricks .deck-slide blockquote {
129
+ margin: 0;
130
+ padding: calc(var(--bricks-rem) * 0.25) calc(var(--bricks-rem) * 0.5);
131
+ font-size: calc(var(--bricks-rem) * 0.875);
132
+ line-height: calc(var(--bricks-rem) * 1.25);
133
+ font-style: normal;
134
+ color: var(--deck-code-fg);
135
+ background: var(--deck-code-bg);
136
+ border: 0;
137
+ border-inline-start: 1px solid var(--deck-accent);
138
+ border-radius: calc(var(--bricks-rem) * 0.25);
139
+ }
140
+ .theme-bricks .deck-slide blockquote > * {
141
+ margin-block: 0;
142
+ }
143
+ .theme-bricks .deck-slide table {
144
+ width: 100%;
145
+ font-size: 1em;
146
+ line-height: calc(var(--bricks-rem) * 1.5);
147
+ }
148
+ .theme-bricks .deck-slide :is(th, td) {
149
+ padding: calc(var(--bricks-rem) * 0.75) calc(var(--bricks-rem) * 0.5);
150
+ border-bottom: 1px solid var(--deck-border);
151
+ }
152
+ .theme-bricks .deck-slide th {
153
+ text-align: left;
154
+ font-size: 1em;
155
+ font-weight: 400;
156
+ text-transform: none;
157
+ letter-spacing: normal;
158
+ color: inherit;
159
+ }
160
+ .theme-bricks .deck-slide a {
161
+ color: inherit;
162
+ text-decoration: none;
163
+ border-bottom: 1px dashed currentColor;
164
+ }
165
+ .theme-bricks .deck-slide a:hover {
166
+ color: var(--deck-accent);
167
+ border-bottom-style: solid;
168
+ }
169
+ .theme-bricks .deck-slide :is(b, strong) {
170
+ font-weight: 600;
171
+ }
172
+ .theme-bricks .deck-slide :not(pre) > code {
173
+ font-family: var(--deck-mono-font);
174
+ font-size: 0.9em;
175
+ font-weight: 300;
176
+ padding: calc(var(--bricks-rem) * 0.125) calc(var(--bricks-rem) * 0.375);
177
+ background: var(--deck-code-bg);
178
+ border-radius: calc(var(--bricks-rem) * 0.25);
179
+ }
180
+ .theme-bricks .deck-slide :is(kbd, .deck-kbd) {
181
+ font-family: var(--deck-mono-font);
182
+ font-size: calc(var(--bricks-rem) * 0.75);
183
+ padding: calc(var(--bricks-rem) * 0.125) calc(var(--bricks-rem) * 0.25);
184
+ border: 1px solid var(--deck-border);
185
+ border-bottom-width: 2px;
186
+ border-radius: calc(var(--bricks-rem) * 0.25);
187
+ background: rgba(156, 163, 175, 0.05);
188
+ box-shadow: none;
189
+ }
190
+
191
+ /* ── code: Slidev's 12px / 18px blocks with a 4px corner and no border ── */
192
+ .theme-bricks .deck-code-block {
193
+ margin: calc(var(--bricks-rem) * 0.25) 0;
194
+ border: 0;
195
+ border-radius: calc(var(--bricks-rem) * 0.25);
196
+ }
197
+ .theme-bricks pre.deck-code,
198
+ .theme-bricks .shiki-magic-move-wrap {
199
+ font-size: calc(var(--bricks-rem) * 0.75);
200
+ line-height: calc(var(--bricks-rem) * 1.125);
201
+ padding: calc(var(--bricks-rem) * 0.5) 0;
202
+ }
203
+ .theme-bricks .shiki-magic-move-wrap {
204
+ padding-inline: calc(var(--bricks-rem) * 0.5);
205
+ }
206
+ .theme-bricks pre.deck-code .line {
207
+ padding: 0 calc(var(--bricks-rem) * 0.5);
208
+ }
209
+ .theme-bricks pre.deck-code .line.is-dim {
210
+ opacity: 0.3;
211
+ }
212
+ .theme-bricks .deck-code-title {
213
+ font-size: calc(var(--bricks-rem) * 0.75);
214
+ padding: calc(var(--bricks-rem) * 0.5);
215
+ border-bottom-color: var(--deck-border);
216
+ }
217
+
218
+ /* bricks: h1–h3 and the subtitle in the display face; round bullets */
219
+ .theme-bricks .deck-slide :is(h1, h2, h3) {
220
+ font-family: var(--deck-serif-font);
221
+ }
222
+ .theme-bricks .deck-slide h1 + p {
223
+ margin-top: calc(var(--bricks-rem) * -1);
224
+ font-family: var(--deck-serif-font);
225
+ }
226
+ .theme-bricks .deck-slide h3 {
227
+ font-size: calc(var(--bricks-rem) * 0.875);
228
+ line-height: calc(var(--bricks-rem) * 1.25);
229
+ padding-top: calc(var(--bricks-rem) * 0.5);
230
+ text-transform: uppercase;
231
+ letter-spacing: 0.1em;
232
+ font-weight: 500;
233
+ margin-inline-start: -0.05em;
234
+ }
235
+ .theme-bricks .deck-slide h3:not(.opacity-100) {
236
+ opacity: 0.4;
237
+ }
238
+
239
+ /* ── the layouts ──────────────────────────────────────────────────────── */
240
+ /* the blocks behind each layout */
241
+ .theme-bricks .deck-slide.layout-cover {
242
+ background-image: url("./assets/page-1.svg");
243
+ }
244
+ .theme-bricks .deck-slide.layout-section {
245
+ background-image: url("./assets/page-3.svg");
246
+ }
247
+ .theme-bricks .deck-slide.layout-fact {
248
+ background-image: url("./assets/page-4.svg");
249
+ }
250
+ .theme-bricks .deck-slide:is(.layout-default, .layout-quote) {
251
+ background-image: url("./assets/page-5.svg");
252
+ }
253
+ .theme-bricks .deck-slide.layout-items {
254
+ background-image: url("./assets/page-6.svg");
255
+ }
256
+ .theme-bricks .deck-slide.layout-intro {
257
+ background-image: url("./assets/page-8.svg");
258
+ }
259
+ .theme-bricks .deck-slide.layout-statement {
260
+ background-image: url("./assets/page-9.svg");
261
+ }
262
+
263
+ /* default: 4em × 5em of page, the words from the top */
264
+ .theme-bricks .deck-slide.layout-default {
265
+ padding: calc(var(--bricks-rem) * 4.4) calc(var(--bricks-rem) * 5.5);
266
+ }
267
+ .theme-bricks .deck-layout-default {
268
+ justify-content: flex-start;
269
+ }
270
+ .theme-bricks .deck-layout-center {
271
+ justify-content: center;
272
+ }
273
+
274
+ /* cover: everything in the display face, centred top to bottom */
275
+ .theme-bricks .deck-layout-cover {
276
+ align-items: stretch;
277
+ text-align: start;
278
+ font-family: var(--deck-serif-font);
279
+ }
280
+ .theme-bricks .deck-layout-cover h1 {
281
+ font-size: calc(var(--bricks-rem) * 3.75);
282
+ line-height: calc(var(--bricks-rem) * 5);
283
+ }
284
+ .theme-bricks .deck-layout-cover h1 + p {
285
+ font-size: calc(var(--bricks-rem) * 1.5);
286
+ line-height: calc(var(--bricks-rem) * 2);
287
+ margin-top: calc(var(--bricks-rem) * -1.5);
288
+ }
289
+
290
+ /* quote, fact, statement, items, intro: centred, with 3.75rem above and below */
291
+ .theme-bricks .deck-slide:is(.layout-quote, .layout-fact, .layout-statement, .layout-items, .layout-intro) {
292
+ padding-block: calc(var(--bricks-rem) * 3.75);
293
+ }
294
+ .theme-bricks :is(.deck-layout-quote, .deck-layout-fact, .deck-layout-statement) {
295
+ justify-content: center;
296
+ align-items: stretch;
297
+ text-align: center;
298
+ padding-inline: 0;
299
+ font-size: 1em;
300
+ font-style: normal;
301
+ }
302
+ .theme-bricks .deck-layout-fact > :is(h1, h2, p, .deck-counter) {
303
+ font-weight: 400;
304
+ letter-spacing: normal;
305
+ }
306
+ .theme-bricks :is(.deck-layout-quote, .deck-layout-fact, .deck-layout-statement) h1 {
307
+ font-size: calc(var(--bricks-rem) * 3.75);
308
+ line-height: calc(var(--bricks-rem) * 3.75);
309
+ }
310
+
311
+ /* intro: an optional ::left:: slot, then the title centred in the wider right column */
312
+ .theme-bricks .deck-layout-intro {
313
+ display: grid;
314
+ grid-template-columns: 3fr 4fr;
315
+ align-content: center;
316
+ text-align: center;
317
+ }
318
+ .theme-bricks .deck-layout-intro > :not(.deck-slot-left) {
319
+ grid-column: 2;
320
+ }
321
+ .theme-bricks .deck-layout-intro > .deck-slot-left {
322
+ grid-column: 1;
323
+ grid-row: 1 / span 20;
324
+ align-self: stretch;
325
+ }
326
+ .theme-bricks .deck-layout-intro > .deck-slot-default {
327
+ align-self: center;
328
+ }
329
+ .theme-bricks .deck-layout-intro h1 {
330
+ font-size: calc(var(--bricks-rem) * 4.5);
331
+ line-height: calc(var(--bricks-rem) * 5);
332
+ }
333
+
334
+ /* items: a title, then the ::items:: slot in `cols:` columns */
335
+ .theme-bricks .deck-layout-items {
336
+ justify-content: flex-start;
337
+ text-align: center;
338
+ }
339
+ .theme-bricks .deck-layout-items h1 {
340
+ font-size: calc(var(--bricks-rem) * 3);
341
+ line-height: calc(var(--bricks-rem) * 3.75);
342
+ }
343
+ .theme-bricks .deck-layout-items > .deck-slot-items {
344
+ display: grid;
345
+ grid-template-columns: repeat(var(--bricks-cols, 4), minmax(0, 1fr));
346
+ padding: 5% calc(var(--bricks-rem) * 2.5) 0;
347
+ }
348
+ .theme-bricks .deck-layout-items > .deck-slot-items > p:has(> svg) {
349
+ margin: 0;
350
+ display: contents;
351
+ }
352
+
353
+ /* section: two columns; the title low in the left one, the ::right:: slot centred in the right */
354
+ .theme-bricks .deck-layout-section {
355
+ display: grid;
356
+ grid-template-columns: 1fr 1fr;
357
+ justify-content: stretch;
358
+ align-items: start;
359
+ }
360
+ .theme-bricks .deck-layout-section > .deck-slot-default {
361
+ grid-column: 1;
362
+ padding: 45% calc(var(--bricks-rem) * 0.5) 0;
363
+ }
364
+ .theme-bricks .deck-layout-section > .deck-slot-right {
365
+ grid-column: 2;
366
+ align-self: center;
367
+ padding-top: 10%;
368
+ }
369
+ /* no slots: everything is the left column's */
370
+ .theme-bricks .deck-layout-section:not(:has(> .deck-slot)) {
371
+ display: block;
372
+ padding: 22.5% calc(50% + var(--bricks-rem) * 0.5) 0 calc(var(--bricks-rem) * 0.5);
373
+ }
374
+ .theme-bricks .deck-layout-section h1 {
375
+ font-size: calc(var(--bricks-rem) * 3);
376
+ line-height: calc(var(--bricks-rem) * 3.75);
377
+ }
378
+ .theme-bricks .deck-layout-section h2 {
379
+ font-size: calc(var(--bricks-rem) * 1.5);
380
+ line-height: calc(var(--bricks-rem) * 2);
381
+ }
382
+ .theme-bricks .deck-layout-section h2 + p {
383
+ margin-top: 0;
384
+ }
385
+
386
+ /* the engine's other layouts, on the plain page */
387
+ .theme-bricks .deck-slide.layout-end {
388
+ background: #000;
389
+ }
390
+ .theme-bricks .deck-layout-end {
391
+ color: rgba(255, 255, 255, 0.85);
392
+ font-size: calc(var(--bricks-rem) * 1.25);
393
+ letter-spacing: 0.1em;
394
+ user-select: none;
395
+ }
396
+ .theme-bricks .deck-layout-end:empty::before {
397
+ content: "END";
398
+ }
399
+ .theme-bricks .deck-layout-full {
400
+ padding: 0;
401
+ }
402
+ .theme-bricks :is(.deck-layout-two-cols, .deck-layout-two-cols-header) {
403
+ column-gap: var(--bricks-rem);
404
+ }
405
+ .theme-bricks .deck-layout-two-cols-header > .deck-slot-bottom {
406
+ align-self: end;
407
+ }
408
+ .theme-bricks :is(.deck-layout-image-left, .deck-layout-image-right) .deck-layout-image-content,
409
+ .theme-bricks :is(.deck-layout-iframe-left, .deck-layout-iframe-right) .deck-layout-iframe-content {
410
+ justify-content: flex-start;
411
+ padding: calc(var(--bricks-rem) * 2.5) calc(var(--bricks-rem) * 3.5);
412
+ }
413
+ .theme-bricks .deck-layout-image .deck-layout-image-content:empty {
414
+ display: none;
415
+ }
416
+ .theme-bricks :is(.deck-layout-iframe, .deck-layout-iframe-left, .deck-layout-iframe-right) {
417
+ padding: 0;
418
+ gap: 0;
419
+ }
420
+ .theme-bricks .deck-frame.deck-layout-iframe-pane {
421
+ border: 0;
422
+ border-radius: 0;
423
+ box-shadow: none;
424
+ }
425
+
426
+ /* ── chrome ───────────────────────────────────────────────────────────── */
427
+ .theme-bricks .deck-progress span {
428
+ background: linear-gradient(90deg, #f07a6b, #f9d56e, #e29b94, #72a6e2);
429
+ }