diff --git a/app/template/style-guide/README.md b/app/template/style-guide/README.md
new file mode 100644
index 00000000..6be420ca
--- /dev/null
+++ b/app/template/style-guide/README.md
@@ -0,0 +1,106 @@
+
+
+ 
+ 
+
+
+
+
+///// — CODEMO DIGITAL NOMAD — \\\\\
+
+
+
+
+
Codemo Digital Nomad Style Guide
+The purpose of this style guide is to provide a set of rules for website.
+
+---
+
+[](https://gigamaster.github.io/codemo/)
+
+---
+
+
+
+
+///// — Style Guide — \\\\\
+
+
+
+### Color Palette
+Logo and brand colors
+
+| | `square` | `round` | `circle` | | `square` | `round` | `circle` |
+|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
+|`#9e8e61`|
|
|
|`#3e6598`|
|
|
|
+|`#2f4d74`|
|
|
|`#213550`|
|
|
|
+|`#121d2b`|
|
|
|`#f1f1f1`|
|
|
|
+
+
+### Gradients
+CSS gradients, linear and radial
+
+### Textures
+CSS background patterns
+
+### Layouts
+Responsive grid layout sections
+
+### Components
+Modular elements
+
+### Iconography
+Scalable vectors Icons
+
+### Typography
+Fonts
+HTML Text Formatting
+Highlight source code
+
+### Form elements
+Forms and control elements
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+---
+
+### License
+
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+[web]: https://gigamaster.github.io/codemo/web-app/
+[dpaint]: https://gigamaster.github.io/codemo/web-app/dpaint/
+[drawio]: https://gigamaster.github.io/codemo/web-app/drawio/
diff --git a/app/template/style-guide/assets/icons.css b/app/template/style-guide/assets/icons.css
new file mode 100644
index 00000000..1e568c29
--- /dev/null
+++ b/app/template/style-guide/assets/icons.css
@@ -0,0 +1,90 @@
+[class^="icon"] {
+ background-color:currentColor;
+ display:inline-block;
+ width:1em;
+ height:1em;
+ mask-image:var(--svg);
+ mask-repeat:no-repeat;
+ mask-size:100% 100%;
+ vertical-align:-.175em;}
+.icon-card{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='39' height='26.897' x='4.5' y='10.552' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' rx='2.017' ry='2.017'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M9.88 27.362h13.448M9.879 32.07h29.587'/%3E%3C/svg%3E")
+}
+.icon-codemo{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='currentColor' d='M 127.27 64 C 127.27 98.886 98.888 127.27 64 127.27 C 29.114 127.27 0.73 98.887 0.73 64 C 0.73 29.113 29.114 0.73 64 0.73 C 98.887 0.73 127.27 29.114 127.27 64 Z M 63.469 103.176 L 63.42 84.7 L 39.222 73.506 C 38.506 73.176 38.059 72.446 38.089 71.656 L 38.384 63.856 L 29.38 59.24 C 28.491 59.953 27.414 60.394 26.28 60.508 C 22.997 60.847 20.06 58.461 19.72 55.178 C 19.531 53.102 20.437 51.078 22.111 49.836 C 25.806 47.093 31.085 49.379 31.612 53.951 C 31.682 54.629 31.629 55.291 31.482 55.921 L 41.279 60.946 C 41.955 61.294 42.37 62.001 42.342 62.761 L 42.05 70.503 L 63.42 80.387 L 63.42 67.663 L 50.61 60.933 C 49.966 60.595 49.562 59.928 49.562 59.2 L 49.562 43.248 L 43.297 38.446 C 40.704 39.891 37.444 39.215 35.64 36.858 C 32.842 33.204 35.049 27.892 39.613 27.297 C 44.176 26.701 47.673 31.268 45.907 35.518 L 52.709 40.728 C 53.193 41.097 53.477 41.671 53.476 42.28 L 53.476 58.016 L 63.419 63.24 L 63.419 28.596 C 61.225 27.838 59.67 25.877 59.431 23.568 C 59.37 22.985 59.396 22.397 59.507 21.821 C 60.376 17.303 65.81 15.42 69.288 18.432 C 72.767 21.444 71.68 27.092 67.333 28.598 L 67.333 49.842 L 81.401 42.965 L 81.401 37.895 C 79.205 37.14 77.648 35.178 77.411 32.868 C 77.07 29.584 79.458 26.646 82.743 26.308 C 86.026 25.968 88.964 28.354 89.303 31.638 C 89.586 34.398 87.934 36.989 85.313 37.898 L 85.313 44.188 C 85.314 44.935 84.888 45.616 84.216 45.943 L 67.332 54.2 L 67.332 90.992 L 75.4 87.262 L 75.42 70.342 C 75.42 69.636 75.803 68.986 76.42 68.636 L 96.49 57.366 L 96.49 53.76 C 95.33 53.358 94.322 52.609 93.602 51.614 C 90.908 47.887 93.259 42.64 97.834 42.17 C 99.483 41.996 101.129 42.515 102.38 43.603 C 105.85 46.621 104.753 52.264 100.404 53.76 L 100.404 58.504 C 100.404 59.21 100.021 59.864 99.404 60.21 L 79.334 71.486 L 79.314 88.512 C 79.312 89.273 78.87 89.965 78.179 90.285 L 67.336 95.302 L 67.336 105.522 L 91.936 93.062 L 91.936 87.972 C 89.741 87.214 88.184 85.252 87.946 82.942 C 87.692 80.764 88.651 78.621 90.445 77.36 C 94.21 74.713 99.428 77.133 99.838 81.717 C 100.12 84.476 98.468 87.067 95.848 87.975 L 95.848 94.265 C 95.848 95.003 95.433 95.678 94.775 96.012 L 67.335 109.912 L 67.335 120.9 L 67.334 120.902 C 97.926 120.943 121.008 94.315 121.008 64 C 121.008 32.566 95.435 6.99 64.002 6.99 C 32.566 6.99 6.992 32.566 6.992 64 C 6.992 91.815 33.349 120.943 63.42 120.993 L 63.404 107.033 C 63.404 107.033 49.498 102.013 47.637 101.257 C 46.445 100.773 47.523 96.57 46.608 96.041 C 44.303 95.086 39.366 92.448 39.366 92.448 C 36.784 95.141 32.394 94.837 30.208 91.813 C 27.514 88.085 29.866 82.837 34.442 82.368 C 38.202 81.977 41.375 85.133 41.005 88.895 L 49.901 94.077 C 51.505 94.784 50.354 98.478 51.327 98.725 L 63.469 103.176 Z' style=''%3E%3C/path%3E%3C/svg%3E");
+}
+.icon-code{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M17.592 37.092L4.5 24l13.092-13.092m2.824 26.202l7.218-26.219m2.774.017L43.5 24L30.408 37.092'/%3E%3C/svg%3E")
+}
+.icon-chevron{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E")
+}
+.icon-color{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'%3E%3C/path%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7m0-4h.01'%3E%3C/path%3E%3Cpath d='m11 8l2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'%3E%3C/path%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-build{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Crect width='20' height='8' x='2' y='6' rx='1'/%3E%3Cpath d='M17 14v7M7 14v7M17 3v3M7 3v3m3 8L2.3 6.3M14 6l7.7 7.7M8 6l8 8'/%3E%3C/g%3E%3C/svg%3E");
+}
+.icon-css{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='m20 4l-2 14.5l-6 2l-6-2L4 4z'/%3E%3Cpath d='M8.5 8h7L11 12h4l-.5 3.5l-2.5.75l-2.5-.75l-.1-.5'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-edit{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M5.5 42.5v-7.293l21.386-21.328l7.162 7.248L12.624 42.5ZM38.146 6.245a2.556 2.556 0 0 0-3.607 0l-4.119 4.109l7.214 7.196l4.12-4.11a2.54 2.54 0 0 0 0-3.597Z'/%3E%3C/svg%3E")
+}
+.icon-git{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-graphic{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-html{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='m20 4l-2 14.5l-6 2l-6-2L4 4z'/%3E%3Cpath d='M15.5 8h-7l.5 4h6l-.5 3.5l-2.5.75l-2.5-.75l-.1-.5'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-js{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='m20 4l-2 14.5l-6 2l-6-2L4 4z'/%3E%3Cpath d='M7.5 8h3v8l-2-1m8-7H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-layout-grid{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M17.5 5.5h-8a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-8a4 4 0 0 0-4-4m21 0h-8a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-8a4 4 0 0 0-4-4m-21 21h-8a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-8a4 4 0 0 0-4-4m21 0h-8a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-8a4 4 0 0 0-4-4'/%3E%3C/svg%3E")
+}
+.icon-layout-list{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M7.14 34.07a2.64 2.64 0 1 1 2.64-2.64a2.64 2.64 0 0 1-2.64 2.64m0-7.43A2.65 2.65 0 1 1 9.78 24a2.65 2.65 0 0 1-2.64 2.65Zm0-7.43a2.64 2.64 0 1 1 2.64-2.64a2.64 2.64 0 0 1-2.64 2.64m5.61 12.17H43.5m-30.74-7.43h19.57m-19.58-7.43h9.01'/%3E%3C/svg%3E")
+}
+.icon-responsive{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11 13.6V21H3.6a.6.6 0 0 1-.6-.6V13h7.4a.6.6 0 0 1 .6.6m0 7.4h3M3 13v-3m3-7H3.6a.6.6 0 0 0-.6.6V6m11-3h-4m11 7v4M18 3h2.4a.6.6 0 0 1 .6.6V6m-3 15h2.4a.6.6 0 0 0 .6-.6V18m-10-8h3v3'/%3E%3C/svg%3E%0A")
+}
+.icon-search{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21l-4.3-4.3'/%3E%3C/g%3E%3C/svg%3E")
+}
+.icon-settings{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 8h9m4 0h3m-9 8h9M4 16h3'/%3E%3Ccircle cx='9' cy='16' r='2'/%3E%3Ccircle cx='15' cy='8' r='2'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-share{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 1 0 0 2a1 1 0 0 0 0-2m-2 1a2 2 0 1 1 .491 1.313L5.956 7.581a2 2 0 0 1 0 .838l4.535 2.268a2 2 0 1 1-.447.894L5.508 9.313a2 2 0 1 1 0-2.627l4.536-2.267A2 2 0 0 1 10 4M3 8a1 1 0 1 0 2 0a1 1 0 0 0-2 0m8 4a1 1 0 1 0 2 0a1 1 0 0 0-2 0'/%3E%3C/svg%3E");
+}
+.icon-table{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M14.75 5.5v37M5.5 14.75h37m-18.5 0V42.5m9.25-27.75V42.5M14.75 24H42.5m-27.75 9.25H42.5M9.5 5.5h29a4 4 0 0 1 4 4v29a4 4 0 0 1-4 4h-29a4 4 0 0 1-4-4v-29a4 4 0 0 1 4-4'/%3E%3C/svg%3E")
+}
+.icon-template{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-themes{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='currentColor' d='M4.5 4.5H12A1.5 1.5 0 0 1 13.5 6v.5m-7.5 7H2A1.5 1.5 0 0 1 .5 12V3.5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v1'/%3E%3Cpath stroke='currentColor' d='M9 8.5h6a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H9a.5.5 0 0 1-.5-.5V9a.5.5 0 0 1 .5-.5m-.5 2h7m-5 .5v4'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-tree{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17 11h3a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2v1H9.01V5a2 2 0 0 0-2-2H4c-1.1 0-2 .9-2 2v4a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V8h2v7.01c0 1.65 1.34 2.99 2.99 2.99H15v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2v1h-1.01c-.54 0-.99-.45-.99-.99V8h2v1c0 1.1.9 2 2 2'%3E%3C/path%3E%3C/svg%3E")
+}
+.icon-typo{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E%0A")
+}
+.icon-updir{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M19 9v7h-3v-6H6v3L1 8.5L6 4v3h11c1.104 0 2 .897 2 2'/%3E%3C/svg%3E");
+}
+.icon-video{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='m16 13l5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect width='14' height='12' x='2' y='6' rx='2'/%3E%3C/g%3E%3C/svg%3E%0A")
+}
+.icon-view2{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M.2 10a11 11 0 0 1 19.6 0A11 11 0 0 1 .2 10m9.8 4a4 4 0 1 0 0-8a4 4 0 0 0 0 8m0-2a2 2 0 1 1 0-4a2 2 0 0 1 0 4'/%3E%3C/svg%3E");
+}
+.icon-view{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M3 24.248c14 14.588 28 13.863 42 0c-13.51-14.65-27.497-15.127-42 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M30.517 21.44a7 7 0 1 1-3.71-3.853L24.004 24z'/%3E%3C/svg%3E")
+}
\ No newline at end of file
diff --git a/app/template/style-guide/assets/root.css b/app/template/style-guide/assets/root.css
new file mode 100644
index 00000000..15371281
--- /dev/null
+++ b/app/template/style-guide/assets/root.css
@@ -0,0 +1,265 @@
+:root {
+ --bg-body: hsl(0, 0%, 10%);
+
+ --color: hsl(44, 24%, 50%);
+ --color75: hsla(44, 24%, 50%, 0.75);
+ --color50: hsla(44, 24%, 50%, 0.50);
+ --color25: hsla(44, 24%, 50%, 0.25);
+
+ --blue: hsl(214, 42%, 42%);
+ --blue10: hsl(214, 42%, 12%);
+ --blue20: hsl(214, 42%, 22%);
+ --blue30: hsl(214, 42%, 32%);
+
+ --dark: hsl(0, 0%, 8%);
+ --dark10: hsl(44, 24%, 10%);
+ --dark20: hsl(44, 24%, 20%);
+ --dark30: hsl(44, 24%, 30%);
+ --dark40: hsl(44, 24%, 40%);
+
+ --light: hsl(0, 0%, 94%);
+ --primary: hsl(44, 24%, 50%);
+ --secondary: hsl(0, 0%, 50%);
+
+ --dot-bg: var(--bg-body);
+ --dot-color: var(--color25);
+ --dot-size: 1px;
+ --dot-space: 20px;
+
+ --dot-var: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
+ linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
+ var(--dot-color);
+ --bg-dots: radial-gradient(circle, var(--color50) 1px, var(--bg-body) 1px) 50% 50% / 10px 10px;
+ --bg-dots-10: radial-gradient(var(--color50) 0.5px, var(--color25) 0.5px) 50% 50% / 10px 10px;
+ --bg-grid-5: repeating-linear-gradient(0deg, var(--color25), var(--bg-body) 4px, transparent 1px, transparent 5px),
+ repeating-linear-gradient(-90deg, var(--color25), var(--bg-body), 4px, transparent 1px, transparent 5px) 5px 5px;
+ --bg-grid-10: linear-gradient(90deg, var(--color25) 1px, transparent 1px 10px) 50% 50% / 10px 10px,
+ linear-gradient(var(--color25) 1px, transparent 1px 10px) 50% 50% / 10px 10px;
+ --bg-lines: repeating-linear-gradient(45deg, var(--color25) 0 1px, transparent 0 5px) var(--bg-body);
+ --bg-linear: linear-gradient(120deg, hsl(44, 23%, 49%), hsl(46, 23%, 25%));
+ --bg-linear-dark: linear-gradient(120deg, hsl(44 24% 25% / 1), hsl(0, 0%, 7%));
+ --bg-secondary: linear-gradient(120deg, hsl(0 0% 25% / 1), hsl(0 0% 8% / 1));
+ --bg-stripes: repeating-linear-gradient(45deg, var(--bg-body), var(--primary) 1px, transparent 1px, transparent 5px),
+ repeating-linear-gradient(-45deg, var(--primary), var(--bg-body), 1px, transparent 1px, transparent 5px) 5px 5px;
+ --bg-radial: radial-gradient(75% 75% at center, var(--color25), #00000010);
+
+ /* Fluid Type - default size */
+ --min-font-size: 16;
+ --max-font-size: 30;
+ --fluid-type: var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) * ((100vw - 420px) / (1200 - 420));
+
+ --scrollbar-color-thumb: var(--color25);
+ --scrollbar-color-track: var(--bg-body);
+ --scrollbar-width: thin;
+ }
+
+ /* modern-normalize v3.0.1, MIT License, https://github.com/sindresorhus/modern-normalize */
+ *,::after,::before{box-sizing:border-box}
+ html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}
+ body{margin:0}
+ b,strong{font-weight:bolder}
+ code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}
+ small{font-size:80%}
+ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+ sub{bottom:-.25em}
+ sup{top:-.5em}
+ table{border-color:currentcolor}
+ button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
+ [type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
+ legend{padding:0}
+ progress{vertical-align:baseline}
+ ::-webkit-inner-spin-button,
+ ::-webkit-outer-spin-button{height:auto}
+ [type=search]{-webkit-appearance:textfield;outline-offset:-2px}
+ ::-webkit-search-decoration{-webkit-appearance:none}
+ ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+ summary{display:list-item}
+
+ /* Custom normalise */
+ *, *::before, *::after {box-sizing:border-box;}
+ h1,h2,h3,h4,h5,h6,figure,p,ol,ul{margin:0;}
+ ol[role="list"],ul[role="list"]{list-style:none;padding-inline:0;}/* safari */
+ h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
+ img {display:block;max-inline-size:100%;} /* device dpi */
+ /* Text Selection */
+ ::-moz-selection{background-color:transparent;color:var(--primary)}
+ ::selection {background-color:var(--primary);color: var(--dark);}
+ /* Scrollbar Modern browsers */
+ @supports (scrollbar-width: auto) {
+ * {
+ scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
+ scrollbar-width: var(--scrollbar-width);
+ }
+ }
+ /* Google Font */
+ .nunito {
+ font-family: "Nunito Sans", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 300;
+ font-style: normal;
+ font-variation-settings:
+ "wdth" 100,
+ "YTLC" 500;
+ }
+
+ /* CSS gradients & patterns */
+ .bg-dots {background: var(--bg-dots)}
+ .bg-dots-10 {background: var(--bg-dots-10)}
+ .bg-grid-5 {background: var(--bg-grid-5)}
+ .bg-grid-10 {background: var(--bg-grid-10)}
+ .bg-lines {background: var(--bg-lines)}
+ .bg-linear {background: var(--bg-linear)}
+ .bg-linear-dark {background: var(--bg-linear-dark)}
+ .bg-linear2 {background: linear-gradient(120deg, hsl(0, 0%, 52%), hsl(0, 0%, 7%))}
+ .bg-radial {background: var(--bg-radial)}
+ .bg-secondary{background: var(--bg-secondary)}
+ .bg-stripes {background: var(--bg-stripes)}
+ .blur {
+ position: fixed;
+ bottom: 0;
+ z-index: 2;
+ inset: 0 0 auto;
+ height: 10vh;
+ backdrop-filter: blur(8px);
+ mask-image: linear-gradient(rgba(0 0 0 / 0), rgb(0 0 0));
+ bottom: 0;
+ margin-top: auto;
+ }
+ /* CSS color palette */
+ .dark {background: var(--dark)}
+ .light {background: var(--light)}
+ .secondary {background: var(--secondary)}
+ .primary {background: var(--primary)}
+
+ .dark-text {color: var(--dark)}
+ .light-text {color: var(--light)}
+ .secondary-text {color: var(--secondary)}
+ .primary-text {color: var(--primary)}
+
+ /* HTML default elements */
+ html,
+ body {
+ background: var(--bg-body);
+ counter-reset: component section;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ scroll-behavior: smooth;
+ scrollbar-gutter: stable;
+ width: 100%;
+ }
+
+ a:link, a:visited {
+ color: var(--primary);
+ text-decoration: none;
+ }
+ a:active, a:hover {
+ color: var(--secondary);
+ }
+
+ abbr {
+ border-bottom: dotted 1px var(--secondary);
+ cursor: help;
+ }
+ address {
+ display: inline-block;
+ }
+ blockquote {
+ display: block;
+ font-style: italic;
+ width: 100%;
+ }
+ cite {
+ font-size: 0.875rem;
+ }
+ code, del, ins, mark, pre, samp, var {
+ background: hsl(0, 0%, 15%);
+ border-radius: 0.25em;
+ font-size: 0.75rem;
+ padding: 0.25em 0.5em;
+ }
+pre {
+ display: block;
+ /* margin: 1rem 0; */
+ overflow-x: auto;
+ padding: 0.5em;
+ width: 100%;
+ white-space: pre-wrap;
+ word-break: break-all;
+ word-wrap: break-word;
+ }
+ del {
+ background: hsl(0, 25%, 25%);
+ color: hsl(0, 80%, 55%);
+ }
+ h1, h2, h3, h4 {
+ font-family: "Nunito Sans", sans-serif;
+ font-weight: 400;
+ }
+ h1 {
+ font-size: 2rem;
+ font-weight: 500;
+ }
+ h2 {font-size: 1.75rem;}
+ h3 {font-size: 1.5rem;}
+ h4 {font-size: 1.25rem;}
+ h5 {
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: 0.03rem;
+ text-transform: uppercase;
+ }
+ h6 {
+ font-size: 0.625rem;
+ font-weight: 600;
+ letter-spacing: 0.03rem;
+ text-transform: uppercase;
+ }
+ hr {
+ margin: 2.5rem 0;
+ display: block;
+ border: none;
+ height: 1px;
+ background: var(--primary);
+ background: linear-gradient(to right, hsl(0, 0%, 10%), var(--primary), hsl(0, 0%, 10%));
+ width: 100%;
+ }
+ ins {
+ background: hsl(142, 35%, 20%);
+ color: hsl(142, 70%, 50%);
+ }
+ kbd {
+ align-items: center;
+ background: var(--bg-linear-dark);
+ border: 1px solid var(--color25);
+ border-radius: 3px;
+ box-shadow: var(--color25);
+ color: var(--primary);
+ display: inline-flex;
+ font-size: 10px;
+ justify-content: center;
+ padding: 0 4px;
+ margin: auto 2px;
+ position: relative;
+ width: 24px;
+ height: 22px;
+ }
+ mark {
+ background: hsl(40, 70%, 50%);
+ }
+ .muted {
+ color: var(--secondary);
+ }
+ q {
+ font-style: italic;
+ }
+ samp {
+ font-family: monospace;
+ }
+ ul {
+ list-style: none;
+ padding-left: 1rem;
+ }
+ var {
+ font-style: italic;
+ }
\ No newline at end of file
diff --git a/app/template/style-guide/assets/style.css b/app/template/style-guide/assets/style.css
new file mode 100644
index 00000000..127710a6
--- /dev/null
+++ b/app/template/style-guide/assets/style.css
@@ -0,0 +1,878 @@
+/* Codemo Layout */
+body > header {
+ align-items: center;
+ background: var(--color25);
+ color: var(--light);
+ backdrop-filter: blur(10px);
+ display: flex;
+ height: 2.5rem;
+ justify-content: space-between;
+ left: 0;
+ mix-blend-mode: screen;
+ padding-left: 2.5rem;
+ position: fixed;
+ right: 0;
+ top: 0;
+ width: 100%;
+ z-index: 10;
+}
+body > header .brand {
+ font-size: 1rem;
+ letter-spacing: 1.2px;
+}
+body > header .version {
+ background: var(--color25);
+ color: var(--light);
+ border-radius: 0.25rem;
+ display: inherit;
+ font-size: 12px;
+ letter-spacing: 1.2px;
+ margin: auto 0.5rem;
+ padding: 0.25rem;
+}
+
+aside {
+ --theme-1--white: oklch(64.95% 0.0647 90.34);
+ background: hsla(0, 0%, 7%, 0.4);
+ color: #858585;
+
+ background: light-dark(oklch(var(--theme-1--white)), oklch(var(--theme-1--black)));
+ color: light-dark(oklch(var(--theme-1--black)), oklch(var(--theme-1--white)));
+ display: block;
+ flex: 0 1 auto;
+ height: 100vh;
+ padding: 2.5rem 2.5rem 3rem;
+ position: fixed;
+ width: 300px;
+}
+aside .menu {
+ cursor: n-resize;
+ height: 100%;
+ overflow-y: auto;
+ scrollbar-width: none;
+}
+aside .menu .category {
+ margin: 1rem 0;
+}
+aside .menu .category a {
+ color: #fff;
+ font-size: 1.25rem;
+ text-decoration: none;
+}
+:where(.category) p, ul {
+ font-size: 0.875rem;
+}
+aside .menu .category::before {
+ color: #858585;
+ counter-increment: component;
+ content: counter(component) ". ";
+ display: block;
+ font-size: 1.5rem;
+ font-weight: 100;
+ padding-bottom: 3px;
+}
+
+main {
+/* color: #aaaaaa;
+
+ background: light-dark(oklch(var(--theme-1--black)), oklch(var(--theme-1--white)));
+ color: light-dark(oklch(var(--theme-1--white)), oklch(var(--theme-1--black))); */
+ flex: 0 1 auto;
+ margin-left: 0;
+ padding: 2.5rem;
+ scroll-padding-top: 3rem;
+ width: 100%;
+}
+
+footer {
+ font-size: 0.875rem;
+ margin-left: 0;
+ padding: 0 2.5rem 2.5rem;
+ width: 100%;
+}
+
+/* -|-|-|- grid -|-|-|- */
+.grid {
+ --width:100vw; /* 100vw for device screen width */
+ --w1:1200px;/* first breakpoint*/
+ --n:6; /* 6 items */
+ --w2:800px; /* second breakpoint*/
+ --m:4; /* 4 items */
+ --w3:400px; /* third breakpoint*/
+ --p:2; /* 2 items */
+
+ display:grid;
+ grid-template-columns:
+ repeat(auto-fill,
+ minmax(clamp(clamp(clamp(
+ 100%/(var(--n) + 1) + 0.1%,
+ (var(--w1) - var(--width))*1000,
+ 100%/(var(--m) + 1) + 0.1%),
+ (var(--w2) - var(--width))*1000,
+ 100%/(var(--p) + 1) + 0.1%),
+ (var(--w3) - var(--width))*1000,
+ 100%), 1fr));
+ gap:1rem;
+ position:relative; /* relative here */
+}
+.grid.container {
+ --width:100%; /* 100% for container width */
+ overflow:hidden;
+ resize:horizontal;
+}
+.grid > div {
+ height: 84px;
+ mask: linear-gradient(#000 0 0); /* clip the overflow */
+}
+.grid > div::before {
+ content:"";
+ position:absolute;
+ inset:0;
+}
+.grid.space {
+ --w1:900px; /* 1st breakpoint*/
+ --n:8; /* 8 items */
+ --w2:500px;/* 2nd breakpoint*/
+ --m:4; /* 4 items */
+ --w3:300px;/* 3rd breakpoint*/
+ --p:2; /* 2 items */
+ padding: 1rem;
+}
+:where(#layout) :is(.grid, .flexbox-grid) > div {
+ background: var(--color25);
+ border: 1px dotted var(--color25);
+ padding: 0.5rem;
+}
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: flex-start;
+}
+.col {
+ flex-direction: column;
+}
+.col-3 > div {
+ width: calc(100% / 3 - 1rem);
+}
+.col {
+ flex-direction: row;
+}
+.flexbox-grid {
+ --min: 30ch;
+
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.flexbox-grid > * {
+ flex: 1 1 var(--min);
+}
+
+/* Resize responsive */
+div.resize {
+ border: 1px dotted var(--color25);
+ margin: 0.5rem;
+ min-height: 5rem;
+ min-width: 380px;
+ max-width: 100%;
+ overflow: auto;
+ padding: 0.5rem;
+ resize: horizontal;
+ width: 100%;
+}
+/* Table responsive */
+.table-grid {
+ width: 100%;
+}
+.table-grid-header {
+ text-align: left;
+}
+.table-grid tr {
+ transition: background 0.3s ease-in-out;
+}
+.table-grid tr:hover {
+ background: var(--color25);
+}
+.table-row {
+ border-bottom: 1px solid var(--color25);
+ display: grid;
+ grid-template-columns: 1fr 3fr 1fr;
+ grid-gap: 1rem;
+}
+:where(.table-row) th, td {
+ padding: 0.5rem 1rem;
+}
+.table-row th {
+ font-weight: 600;
+ text-align: left;
+}
+
+
+@media (max-width: 600px) {
+ .term-grid {
+ grid-template-columns: 1fr;
+ grid-gap: 0.5em;
+ }
+
+ .data-alt {
+ margin-top: -10px;
+ font-style: italic;
+ order: 1;
+ }
+
+ .data-cell {
+ order: 2;
+ }
+
+ .table-grid-header {
+ display: none;
+ }
+}
+
+/* Sections */
+section {
+ min-height: 200px;
+ scroll-margin-top: 4rem;
+ width: 100%;
+}
+section .section-title {
+ font-weight: 100;
+ margin-bottom: 0.125rem;
+ margin-top: 2.5rem;
+}
+section .section-title::before {
+ color: #4c4c4c;
+ counter-increment: section;
+ /* content: ". " counter(section) " "; */
+ content: counter(section) ". ";
+ display: block;
+ /* font-size: 1.5rem; */
+ font-weight: 100;
+ padding-bottom: 3px;
+}
+section :is(.section-title+p) {
+ margin-bottom: 2rem;
+}
+/* Fluid Type - Responsive */
+section .section-title {
+ --min-font-size: 20;
+ --max-font-size: 32;
+ font-size:
+ clamp(
+ var(--min-font-size) * 1px,
+ var(--fluid-type),
+ var(--max-font-size) * 1px
+ );
+}
+
+section :is(.section-title+p) {
+ --min-font-size: 14;
+ --max-font-size: 20;
+ font-size:
+ clamp(
+ var(--min-font-size) * 1px,
+ var(--fluid-type),
+ var(--max-font-size) * 1px
+ );
+ border-top: 1px dotted var(--color25);
+}
+
+article {
+ margin-bottom: 3rem;
+}
+article > p {
+ margin-bottom: 0.5rem;
+}
+
+/* Intro cover */
+section#intro {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ padding: 2rem;
+ padding-top: 4rem;
+ text-align: center;
+}
+#intro h1 {
+ font-size: calc(0.75em + 10vmin);
+}
+#intro img {
+ width: calc(0.75em + 10vmin);
+}
+#intro h2 {
+ color: var(--primary);
+ font-size: calc(0.75em + 4vmin);
+}
+
+/* Iconography */
+section#icons div {
+ align-items: center;
+ background: #212121;
+ border: 1px solid #272318;
+ border-radius: 0.325rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 0.25rem;
+ text-align: center;
+}
+#icons div i {
+ font-size: 2.5rem;
+ margin-top: 0.5rem;
+}
+#icons div span {
+ background: #2f2f2f;
+ border-radius: 0.25rem;
+ display: block;
+ font-size: 10px;
+ padding: 0.25em;
+ position: relative;
+ width: 100%;
+}
+
+/* Typography */
+section#typo div.font h1 {
+ font-family: inherit;
+ font-size: 64px;
+ font-weight: 600;
+ line-height: 44px;
+ height: 44px;
+ margin-bottom: 5px;
+}
+
+div.font.nunito {
+}
+div.font.system-ui {
+ font-family: system-ui, sans-serif;
+}
+div.font.serif * {
+ font-family: serif;
+}
+div.font.monospace * {
+ font-family: monospace;
+}
+div.font.emoji * {
+ font-family: "Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color";
+}
+.var-normal {font-variant-emoji: normal !important;}
+.var-text {font-variant-emoji: text !important;}
+.var-emoji {font-variant-emoji: emoji !important;}
+.var-unicode {font-variant-emoji: unicode !important;}
+
+/* Aspect-Ration */
+article#aspect-ratio div {
+ background: var(--bg-linear-dark);
+ border: 1px solid var(--color25);
+ border-radius: 0.375em;
+ display: inline-flex;
+ height: auto;
+ justify-content: center;
+ margin-right: 0.5rem;
+ width: calc(19% - 0.5rem);
+}
+#aspect-ratio div:nth-child(1) {aspect-ratio: 1/1;}
+#aspect-ratio div:nth-child(2) {aspect-ratio: 0.5;}
+#aspect-ratio div:nth-child(3) {aspect-ratio: 1;}
+#aspect-ratio div:nth-child(4) {aspect-ratio: 1/0.5;}
+#aspect-ratio div:nth-child(5) {aspect-ratio: 16/9; margin:0}
+
+/* Notification */
+:is(article#notification) .info, .error, .success, .warning {
+ border-radius: 0.375rem;
+ margin: 1.5rem 0;
+ padding: 0.5em;
+}
+.info {
+ background: hsla(242, 50%, 55%, 0.15);
+ border: solid 1px hsl(242, 50%, 55%);
+ color: hsl(242, 55%, 75%);
+}
+.error {
+ background: hsla(5, 50%, 55%, 0.15);
+ border: solid 1px hsl(5, 50%, 55%);
+ color: hsl(5, 55%, 75%);
+}
+.success {
+ background: hsla(120, 50%, 55%, 0.15);
+ border: solid 1px hsl(120, 50%, 55%);
+ color: hsl(120, 55%, 75%);
+}
+.warning {
+ background: hsla(35, 50%, 55%, 0.15);
+ border: solid 1px hsl(35, 50%, 55%);
+ color: hsl(35, 55%, 75%);
+}
+
+/* Colors */
+.swatches {
+/* display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: space-between; */
+}
+.swatches .card {
+ width: 100%;
+}
+@media screen and (min-width: 900px) {
+ .swatches .card {
+ width: calc(100%/3 - 1rem);
+ }
+}
+.logo {
+ border-radius: 3px;
+ padding: 1rem;
+ height: 80px;
+}
+.logo h1 * {
+ display: inline-block;
+}
+.logo img {
+ vertical-align: -0.125em;
+}
+
+.swatches ul.swatch {
+ border-radius: 3px;
+ padding: 0;
+ position: relative;
+ width: 100%;
+}
+.swatches ul.swatch .color {
+ padding: 1rem;
+ height: 120px;
+}
+.swatches ul.swatch .name,
+.swatches ul.swatch .value {
+ border: 1px solid var(--secondary);
+ border-radius: 3px;
+ display: inline-block;
+ font-size: 0.5rem;
+ margin: 3px 0;
+ padding: 4px 6px 3px;
+ z-index: 2;
+}
+.swatches ul.swatch .name {
+ background: var(--light);
+ color: var(--dark);
+}
+.swatches ul.swatch .value {
+ background: var(--dark);
+ color: var(--secondary);
+}
+.swatches ul.swatch .shade {
+ display: flex;
+ justify-content: space-between;
+ height: 48px;
+ padding: 0 1rem;
+}
+.swatches ul.swatch .shade:nth-of-type(2) {
+ background: rgba(0, 0, 0, 0.25);
+}
+.swatches ul.swatch .shade:nth-of-type(3) {
+ background: rgba(0, 0, 0, 0.5);
+}
+.swatches ul.swatch .shade:nth-of-type(4) {
+ background: rgba(0, 0, 0, 0.75);
+}
+.swatches ul.swatch .shade.clear {
+ background: transparent;
+ padding: 0;
+}
+.swatches ul.swatch .shade--depth {
+ align-self: center;
+ border-radius: 2px;
+ filter: contrast(50%) invert(50%) opacity(75%);
+ font-size: 0.6rem;
+ font-weight: 500;
+ mix-blend-mode: screen;
+ padding: 3px;
+ position: relative;
+}
+.swatches.opacity .swatch::before {
+ background: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.50) 50%);
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ height: 100%;
+ width: 70%;
+}
+
+/* Form elements
+ button,
+fieldset,
+input,
+legend,
+select,
+textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: transparent;
+ border: none;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+} */
+
+::placeholder {
+ color: var(--secondary);
+}
+
+button, .button {
+ align-items: center;
+ background: #404040;
+ border: 1px solid #2f2f2f;
+ border-radius: 0.25rem;
+ color: var(--light);
+ cursor: pointer;
+ display: inline-flex;
+ font-weight: 300;
+ height: 36px;
+ justify-content: center;
+ line-height: 1.5;
+ outline: none;
+ padding: 0 1rem;
+ position: relative;
+ text-decoration: none;
+ text-rendering: optimizeLegibility;
+ transition: all 0.3s ease-in-out;
+ user-select: none;
+ white-space: nowrap;
+}
+button.hover,
+button:hover, .button:hover {
+ background-color: var(--primary);
+ color: var(--light);
+}
+button.focus,
+button:focus, .button:focus {
+ background-color: var(--primary);
+ color: var(--light);
+ box-shadow: 0 0 0 2px var(--color25);
+}
+
+fieldset {
+ border: 1px dotted var(--color25);
+ border-radius: 0.25rem;
+ margin: 1rem 0;
+ padding: 0.8rem;
+}
+fieldset legend {
+ background-color: #333;
+ border: 1px solid black;
+ border-radius: 0.25rem;
+ color: #ddd;
+ margin: 0 0.5rem;
+ padding: 0.25rem 1rem;
+}
+fieldset > label {
+ width: auto;
+}
+
+form {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 1rem 0;
+}
+
+form.responsive input {
+ flex: 1 1 10ch;
+ margin: .5rem
+}
+
+form.reponsive input[type="email"] {
+ flex: 3 1 30ch;
+}
+
+input, select, textarea {
+ accent-color: var(--color);
+ background: var(--color25); /* #404040; */
+ border: 1px solid #2f2f2f;
+ border-radius: 0.25rem;
+ color: #EFF3F8;
+ font-weight: 300;
+ height: 2rem;
+ outline: 0;
+ padding: 0.5rem;
+ transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+input:hover {
+ border-color: var(--color25);
+}
+
+input:focus, select:focus, textarea:focus {
+ border-color: var(--color25);
+ box-shadow: 0 0 0 2px var(--color25);
+}
+
+input:required + span {
+ padding-right: 1rem;
+}
+
+input:invalid + span::after {
+ position: absolute;
+ content: "✖";
+ padding-left: 0.5rem;
+}
+
+input:valid + span::after {
+ position: absolute;
+ content: "✓";
+ padding-left: 0.5rem;
+}
+
+:is(input[type="color"], select) {
+ padding: 0.25rem;
+}
+
+/* Input Checkbox & Radio */
+input[type='checkbox']:not([role="switch"]),
+input[type='radio'] {
+ box-shadow: none;
+ cursor: pointer;
+ margin-right: 2rem;
+ height: 0px;
+ position: relative;
+ width: 0px;
+}
+input[type='checkbox']:not([role="switch"]):checked::before,
+input[type='radio']:checked::before {
+ background-color: var(--color25);
+ border: 1px solid var(--primary);
+ border-radius: 3px;
+ content: "";
+ display: block;
+ height: 24px;
+ transition: all 0.2s linear;
+ width: 24px;
+}
+input[type='radio']:checked::before {
+ border-radius: 50%;
+}
+input[type='checkbox']::before,
+input[type='radio']::before {
+ background-color: var(--color25);
+ border: 1px solid var(--color25);
+ border-radius: 3px;
+ content: "";
+ display: block;
+ height: 24px;
+ width: 24px;
+}
+input[type='radio']::before {
+ border-radius: 50%;
+}
+input[type='checkbox']:not([role="switch"])::after,
+input[type='radio']::after {
+ border: 1px solid var(--secondary);
+ border-width: 0;
+ content: "";
+ display: block;
+ height: 0;
+ left: 50px;
+ top: 0;
+ transform: rotate(180deg);
+ transition: all 0.1s linear;
+ width: 0;
+}
+input[type='checkbox']:not([role="switch"]):checked::after,
+input[type='radio']:checked::after {
+ border: solid var(--primary);
+ border-width: 0 2px 2px 0;
+ box-shadow: none;
+ content: "";
+ display: block;
+ height: 16px;
+ left: 8px;
+ position: absolute;
+ top: 2px;
+ transform: rotate(45deg);
+ width: 8px;
+}
+
+input[type='radio']:checked::after {
+ border-width: 8px;
+ border-radius: 50%;
+ height: 8px;
+ left: 4px;
+ top: 4px;
+ width: 8px;
+}
+
+input[type='checkbox']:disabled,
+input[type='radio']:disabled {
+ background: var(--color25);
+ border: 1px solid var(--secondary);
+ cursor: not-allowed;
+}
+
+input[type='checkbox'][role="switch"] {
+ appearance: none;
+ border: 1px solid var(--color25);
+ font-size: 1em;
+ height: 1.25rem;
+ margin-right: 0.5rem;
+ position: relative;
+ width: 2rem;
+}
+
+input[type='checkbox'][role="switch"]::before {
+ background: currentcolor;
+ background-color: var(--color25);
+ border: 1px solid var(--color25);
+ border-radius: 50%;
+ box-sizing: border-box;
+ content: "";
+ height: 0.8em;
+ left: 25%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ transition: left 0.5s;
+ width: 0.8em;
+}
+
+input[type='checkbox'][role="switch"]:checked::before {
+ background-color: var(--color75);
+ border: 1px solid var(--primary);
+ left: 75%;
+}
+
+input[type='checkbox'][role="switch"].basic[disabled] {
+ cursor: not-allowed;
+}
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ border: 1px solid var(--color50);
+}
+
+label {
+ display: inline-block;
+ width: calc(33% - 1rem);
+ padding: 0.5rem;
+}
+label:has([type=checkbox]:not([role="switch"]), [type=radio]) {
+ cursor: pointer;
+ display: inline-flex;
+ margin-bottom: calc(1rem * .375);
+ width: -moz-fit-content;
+ width: fit-content;
+}
+/* The
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+
+
+ Responsive Form
+
+
+
+
+
+
+
+
+
+
+