├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── demo.css
├── favicon.svg
├── github.jpg
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── sass
    ├── abstracts
    │   ├── _breakpoints.scss
    │   ├── _colors.scss
    │   ├── _font-families.scss
    │   ├── _font-sizes.scss
    │   ├── _index.scss
    │   ├── _mixins.scss
    │   └── _spacing.scss
    ├── base
    │   ├── _base.scss
    │   ├── _index.scss
    │   ├── _reset.scss
    │   └── _root.scss
    ├── components
    │   ├── _card.scss
    │   └── _index.scss
    ├── layout
    │   ├── _index.scss
    │   ├── _main-layout.scss
    │   └── _with-sidebar.scss
    ├── style.scss
    └── utilities
    │   ├── _colors.scss
    │   ├── _columns.scss
    │   ├── _container.scss
    │   ├── _flex.scss
    │   ├── _flow.scss
    │   ├── _font-sizes.scss
    │   ├── _grid.scss
    │   └── _index.scss
├── style.css
└── style.css.map


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Kevin Powell
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ![logo](github.jpg)
2 | 
3 | # demo-template
4 | A CSS "framework" that I'm using for my demos.
5 | 
6 | I am using Sass to generate a CSS file, which I can quickly use to put together my demo files for YouTube videos.
7 | 
8 | This is a work in progress.
9 | 


--------------------------------------------------------------------------------
/demo.css:
--------------------------------------------------------------------------------
 1 | header {
 2 |   /* --bg-deg: 10deg; */
 3 |   padding-block: max(10vh, 5rem);
 4 |   text-align: center;
 5 | 
 6 |   position: relative;
 7 | }
 8 | 
 9 | .example {
10 |   font-size: 1rem;
11 |   padding: var(--spacer);
12 | 
13 |   position: fixed;
14 |   inset: auto 1rem 1rem auto;
15 |   /* top: auto;
16 |   right: 1rem;
17 |   bottom: 1rem;
18 |   left: auto; */
19 | }
20 | 


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
 2 |   <defs>
 3 |     <style>
 4 |       .cls-1 {
 5 |         fill: url(#linear-gradient);
 6 |       }
 7 | 
 8 |       .cls-2 {
 9 |         fill: #fff;
10 |       }
11 |     </style>
12 |     <linearGradient id="linear-gradient" x1="9.44" y1="9.43" x2="90.57" y2="90.57" gradientUnits="userSpaceOnUse">
13 |       <stop offset="0" stop-color="#ff001e"/>
14 |       <stop offset="0.49" stop-color="#d400cf"/>
15 |       <stop offset="1" stop-color="#004bff"/>
16 |     </linearGradient>
17 |   </defs>
18 |   <g id="Layer_2" data-name="Layer 2">
19 |     <g id="Layer_1-2" data-name="Layer 1">
20 |       <g>
21 |         <path class="cls-1" d="M90.41,33.37V18.88C90.41,5.1,84.9,0,65.92,0H33.56c-18.55.1-24,5.13-24,19V33.37c0,7.75-3.16,10-9.59,10V56.63c6.53,0,9.59,2.25,9.59,10V81.12c0,13.65,5.42,18.78,24,18.88H65.92c19,0,24.49-5,24.49-19V66.63c0-7.75,3.16-10,9.59-10V43.37C93.47,43.37,90.41,41.12,90.41,33.37Z"/>
22 |         <g>
23 |           <path class="cls-2" d="M24.79,72.51h-11V26.67h11ZM25.12,48,37.49,26.67H49L36.17,47.24,50.26,72.51H37.56Z"/>
24 |           <path class="cls-2" d="M69.64,57.3h-5V72.51h-11V26.67H68.19c12.5,0,19.64,4.89,19.64,14.95C87.83,52.4,80.49,57.3,69.64,57.3ZM68.32,34.47H64.68V49.36h4c5,0,7.8-2.38,7.8-7.74C76.52,36.79,73.81,34.47,68.32,34.47Z"/>
25 |         </g>
26 |       </g>
27 |     </g>
28 |   </g>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/github.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/demo-template/abcfd1e8403d40ca2f7465ab73cf6b0e7ab5f5f7/github.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="icon" type="image/svg+xml" href="favicon.svg" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   <title></title>
 9 | 
10 |   <link rel="preconnect" href="https://fonts.googleapis.com">
11 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |   <link
13 |     href="https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Shade&family=Heebo:wght@100..900&display=swap"
14 |     rel="stylesheet">
15 | 
16 |   <link rel="stylesheet" href="style.css">
17 |   <link rel="stylesheet" href="demo.css">
18 | </head>
19 | 
20 | <body class="main-layout">
21 |   <header class="bg-gradient">
22 |     <h1><code>top: auto</code> works?</h1>
23 |   </header>
24 |   <main>
25 |     <div class="example bg-neutral-800 text-neutral-100">scroll up</div>
26 |   </main>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | import "./style.css";
2 | 
3 | document.querySelector("#app").innerHTML = `
4 |   <h1>Hello world!</h1>
5 |   <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
6 | `;
7 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "css-framework",
  3 |   "version": "0.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "anymatch": {
  8 |       "version": "3.1.2",
  9 |       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
 10 |       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
 11 |       "dev": true,
 12 |       "requires": {
 13 |         "normalize-path": "^3.0.0",
 14 |         "picomatch": "^2.0.4"
 15 |       }
 16 |     },
 17 |     "binary-extensions": {
 18 |       "version": "2.2.0",
 19 |       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
 20 |       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
 21 |       "dev": true
 22 |     },
 23 |     "braces": {
 24 |       "version": "3.0.2",
 25 |       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 26 |       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 27 |       "dev": true,
 28 |       "requires": {
 29 |         "fill-range": "^7.0.1"
 30 |       }
 31 |     },
 32 |     "chokidar": {
 33 |       "version": "3.5.2",
 34 |       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
 35 |       "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
 36 |       "dev": true,
 37 |       "requires": {
 38 |         "anymatch": "~3.1.2",
 39 |         "braces": "~3.0.2",
 40 |         "fsevents": "~2.3.2",
 41 |         "glob-parent": "~5.1.2",
 42 |         "is-binary-path": "~2.1.0",
 43 |         "is-glob": "~4.0.1",
 44 |         "normalize-path": "~3.0.0",
 45 |         "readdirp": "~3.6.0"
 46 |       }
 47 |     },
 48 |     "esbuild": {
 49 |       "version": "0.13.15",
 50 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.15.tgz",
 51 |       "integrity": "sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==",
 52 |       "dev": true,
 53 |       "requires": {
 54 |         "esbuild-android-arm64": "0.13.15",
 55 |         "esbuild-darwin-64": "0.13.15",
 56 |         "esbuild-darwin-arm64": "0.13.15",
 57 |         "esbuild-freebsd-64": "0.13.15",
 58 |         "esbuild-freebsd-arm64": "0.13.15",
 59 |         "esbuild-linux-32": "0.13.15",
 60 |         "esbuild-linux-64": "0.13.15",
 61 |         "esbuild-linux-arm": "0.13.15",
 62 |         "esbuild-linux-arm64": "0.13.15",
 63 |         "esbuild-linux-mips64le": "0.13.15",
 64 |         "esbuild-linux-ppc64le": "0.13.15",
 65 |         "esbuild-netbsd-64": "0.13.15",
 66 |         "esbuild-openbsd-64": "0.13.15",
 67 |         "esbuild-sunos-64": "0.13.15",
 68 |         "esbuild-windows-32": "0.13.15",
 69 |         "esbuild-windows-64": "0.13.15",
 70 |         "esbuild-windows-arm64": "0.13.15"
 71 |       }
 72 |     },
 73 |     "esbuild-android-arm64": {
 74 |       "version": "0.13.15",
 75 |       "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz",
 76 |       "integrity": "sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==",
 77 |       "dev": true,
 78 |       "optional": true
 79 |     },
 80 |     "esbuild-darwin-64": {
 81 |       "version": "0.13.15",
 82 |       "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz",
 83 |       "integrity": "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==",
 84 |       "dev": true,
 85 |       "optional": true
 86 |     },
 87 |     "esbuild-darwin-arm64": {
 88 |       "version": "0.13.15",
 89 |       "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz",
 90 |       "integrity": "sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==",
 91 |       "dev": true,
 92 |       "optional": true
 93 |     },
 94 |     "esbuild-freebsd-64": {
 95 |       "version": "0.13.15",
 96 |       "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz",
 97 |       "integrity": "sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==",
 98 |       "dev": true,
 99 |       "optional": true
100 |     },
101 |     "esbuild-freebsd-arm64": {
102 |       "version": "0.13.15",
103 |       "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz",
104 |       "integrity": "sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==",
105 |       "dev": true,
106 |       "optional": true
107 |     },
108 |     "esbuild-linux-32": {
109 |       "version": "0.13.15",
110 |       "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz",
111 |       "integrity": "sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==",
112 |       "dev": true,
113 |       "optional": true
114 |     },
115 |     "esbuild-linux-64": {
116 |       "version": "0.13.15",
117 |       "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz",
118 |       "integrity": "sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==",
119 |       "dev": true,
120 |       "optional": true
121 |     },
122 |     "esbuild-linux-arm": {
123 |       "version": "0.13.15",
124 |       "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz",
125 |       "integrity": "sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==",
126 |       "dev": true,
127 |       "optional": true
128 |     },
129 |     "esbuild-linux-arm64": {
130 |       "version": "0.13.15",
131 |       "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz",
132 |       "integrity": "sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==",
133 |       "dev": true,
134 |       "optional": true
135 |     },
136 |     "esbuild-linux-mips64le": {
137 |       "version": "0.13.15",
138 |       "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz",
139 |       "integrity": "sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==",
140 |       "dev": true,
141 |       "optional": true
142 |     },
143 |     "esbuild-linux-ppc64le": {
144 |       "version": "0.13.15",
145 |       "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz",
146 |       "integrity": "sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==",
147 |       "dev": true,
148 |       "optional": true
149 |     },
150 |     "esbuild-netbsd-64": {
151 |       "version": "0.13.15",
152 |       "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz",
153 |       "integrity": "sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==",
154 |       "dev": true,
155 |       "optional": true
156 |     },
157 |     "esbuild-openbsd-64": {
158 |       "version": "0.13.15",
159 |       "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz",
160 |       "integrity": "sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==",
161 |       "dev": true,
162 |       "optional": true
163 |     },
164 |     "esbuild-sunos-64": {
165 |       "version": "0.13.15",
166 |       "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz",
167 |       "integrity": "sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==",
168 |       "dev": true,
169 |       "optional": true
170 |     },
171 |     "esbuild-windows-32": {
172 |       "version": "0.13.15",
173 |       "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz",
174 |       "integrity": "sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==",
175 |       "dev": true,
176 |       "optional": true
177 |     },
178 |     "esbuild-windows-64": {
179 |       "version": "0.13.15",
180 |       "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz",
181 |       "integrity": "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==",
182 |       "dev": true,
183 |       "optional": true
184 |     },
185 |     "esbuild-windows-arm64": {
186 |       "version": "0.13.15",
187 |       "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz",
188 |       "integrity": "sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==",
189 |       "dev": true,
190 |       "optional": true
191 |     },
192 |     "fill-range": {
193 |       "version": "7.0.1",
194 |       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
195 |       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
196 |       "dev": true,
197 |       "requires": {
198 |         "to-regex-range": "^5.0.1"
199 |       }
200 |     },
201 |     "fsevents": {
202 |       "version": "2.3.2",
203 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
204 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
205 |       "dev": true,
206 |       "optional": true
207 |     },
208 |     "function-bind": {
209 |       "version": "1.1.1",
210 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
211 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
212 |       "dev": true
213 |     },
214 |     "glob-parent": {
215 |       "version": "5.1.2",
216 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
217 |       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
218 |       "dev": true,
219 |       "requires": {
220 |         "is-glob": "^4.0.1"
221 |       }
222 |     },
223 |     "has": {
224 |       "version": "1.0.3",
225 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
226 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
227 |       "dev": true,
228 |       "requires": {
229 |         "function-bind": "^1.1.1"
230 |       }
231 |     },
232 |     "is-binary-path": {
233 |       "version": "2.1.0",
234 |       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
235 |       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
236 |       "dev": true,
237 |       "requires": {
238 |         "binary-extensions": "^2.0.0"
239 |       }
240 |     },
241 |     "is-core-module": {
242 |       "version": "2.8.0",
243 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
244 |       "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
245 |       "dev": true,
246 |       "requires": {
247 |         "has": "^1.0.3"
248 |       }
249 |     },
250 |     "is-extglob": {
251 |       "version": "2.1.1",
252 |       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
253 |       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
254 |       "dev": true
255 |     },
256 |     "is-glob": {
257 |       "version": "4.0.3",
258 |       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
259 |       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
260 |       "dev": true,
261 |       "requires": {
262 |         "is-extglob": "^2.1.1"
263 |       }
264 |     },
265 |     "is-number": {
266 |       "version": "7.0.0",
267 |       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
268 |       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
269 |       "dev": true
270 |     },
271 |     "nanoid": {
272 |       "version": "3.1.30",
273 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
274 |       "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
275 |       "dev": true
276 |     },
277 |     "normalize-path": {
278 |       "version": "3.0.0",
279 |       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
280 |       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
281 |       "dev": true
282 |     },
283 |     "path-parse": {
284 |       "version": "1.0.7",
285 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
286 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
287 |       "dev": true
288 |     },
289 |     "picocolors": {
290 |       "version": "1.0.0",
291 |       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
292 |       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
293 |       "dev": true
294 |     },
295 |     "picomatch": {
296 |       "version": "2.3.0",
297 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
298 |       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
299 |       "dev": true
300 |     },
301 |     "postcss": {
302 |       "version": "8.4.4",
303 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
304 |       "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
305 |       "dev": true,
306 |       "requires": {
307 |         "nanoid": "^3.1.30",
308 |         "picocolors": "^1.0.0",
309 |         "source-map-js": "^1.0.1"
310 |       }
311 |     },
312 |     "readdirp": {
313 |       "version": "3.6.0",
314 |       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
315 |       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
316 |       "dev": true,
317 |       "requires": {
318 |         "picomatch": "^2.2.1"
319 |       }
320 |     },
321 |     "resolve": {
322 |       "version": "1.20.0",
323 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
324 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
325 |       "dev": true,
326 |       "requires": {
327 |         "is-core-module": "^2.2.0",
328 |         "path-parse": "^1.0.6"
329 |       }
330 |     },
331 |     "rollup": {
332 |       "version": "2.60.1",
333 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.1.tgz",
334 |       "integrity": "sha512-akwfnpjY0rXEDSn1UTVfKXJhPsEBu+imi1gqBA1ZkHGydUnkV/fWCC90P7rDaLEW8KTwBcS1G3N4893Ndz+jwg==",
335 |       "dev": true,
336 |       "requires": {
337 |         "fsevents": "~2.3.2"
338 |       }
339 |     },
340 |     "sass": {
341 |       "version": "1.43.5",
342 |       "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.5.tgz",
343 |       "integrity": "sha512-WuNm+eAryMgQluL7Mbq9M4EruyGGMyal7Lu58FfnRMVWxgUzIvI7aSn60iNt3kn5yZBMR7G84fAGDcwqOF5JOg==",
344 |       "dev": true,
345 |       "requires": {
346 |         "chokidar": ">=3.0.0 <4.0.0"
347 |       }
348 |     },
349 |     "source-map-js": {
350 |       "version": "1.0.1",
351 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
352 |       "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
353 |       "dev": true
354 |     },
355 |     "to-regex-range": {
356 |       "version": "5.0.1",
357 |       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
358 |       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
359 |       "dev": true,
360 |       "requires": {
361 |         "is-number": "^7.0.0"
362 |       }
363 |     },
364 |     "vite": {
365 |       "version": "2.6.14",
366 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.6.14.tgz",
367 |       "integrity": "sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==",
368 |       "dev": true,
369 |       "requires": {
370 |         "esbuild": "^0.13.2",
371 |         "fsevents": "~2.3.2",
372 |         "postcss": "^8.3.8",
373 |         "resolve": "^1.20.0",
374 |         "rollup": "^2.57.0"
375 |       }
376 |     }
377 |   }
378 | }
379 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-framework",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "serve": "vite preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "sass": "^1.43.5",
11 |     "vite": "^2.6.4"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/sass/abstracts/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | $breakpoints: (
2 |   small: 35em,
3 |   medium: 50em,
4 |   large: 65em
5 | )


--------------------------------------------------------------------------------
/sass/abstracts/_colors.scss:
--------------------------------------------------------------------------------
 1 | $colors: (
 2 |   neutral: (
 3 |     100: 0 0% 100%,
 4 |     200: 0 0% 90%,
 5 |     300: 0 0% 70%,
 6 |     400: 0 0% 60%,
 7 |     500: 0 0% 50%,
 8 |     600: 0 0% 40%,
 9 |     700: 0 0% 30%,
10 |     800: 0 0% 10%,
11 |     900: 0 0% 0%,
12 |   ),
13 |   primary: (
14 |     100: 214 100% 90%,
15 |     200: 214 100% 80%,
16 |     300: 214 100% 70%,
17 |     400: 214 100% 60%,
18 |     500: 214 100% 50%,
19 |     600: 214 100% 40%,
20 |     700: 214 100% 30%,
21 |     800: 214 100% 20%,
22 |     900: 214 100% 10%,
23 |   ),
24 |   secondary: (
25 |     100: 284 71% 90%,
26 |     200: 284 71% 80%,
27 |     300: 284 71% 70%,
28 |     400: 284 71% 60%,
29 |     500: 284 71% 50%,
30 |     600: 284 71% 40%,
31 |     700: 284 71% 30%,
32 |     800: 284 71% 20%,
33 |     900: 284 71% 10%,
34 |   ),
35 |   accent: (
36 |     100: 346 80% 90%,
37 |     200: 346 80% 80%,
38 |     300: 346 80% 70%,
39 |     400: 346 80% 60%,
40 |     500: 346 80% 50%,
41 |     600: 346 80% 40%,
42 |     700: 346 80% 30%,
43 |     800: 346 80% 20%,
44 |     900: 346 80% 10%,
45 |   )
46 | )


--------------------------------------------------------------------------------
/sass/abstracts/_font-families.scss:
--------------------------------------------------------------------------------
1 | 
2 | $ff-primary: 'Heebo', sans-serif;
3 | $ff-secondary: 'Bungee', cursive;
4 | $ff-accent: 'Bungee Shade', cursive;
5 | 


--------------------------------------------------------------------------------
/sass/abstracts/_font-sizes.scss:
--------------------------------------------------------------------------------
 1 | $font-sizes: (
 2 |   small (
 3 |     100: .625rem,
 4 |     200: .7625rem,
 5 |     300: .8975rem,
 6 |     400: 1.125rem,
 7 |     500: 1.25rem,
 8 |     600: 1.75rem,
 9 |     700: 2.25rem,
10 |     800: 2.75rem,
11 |     900: 3.25rem,
12 |   ),
13 |   medium (
14 |     100: .725rem,
15 |     200: .875rem,
16 |     300: 1rem,
17 |     400: 1.125rem,
18 |     500: 1.325rem,
19 |     600: 2rem,
20 |     700: 2.75rem,
21 |     800: 3.25rem,
22 |     900: 4rem,
23 |   ),
24 |   large (
25 |     100: .725rem,
26 |     200: .875rem,
27 |     300: 1rem,
28 |     400: 1.125rem,
29 |     500: 1.325rem,
30 |     600: 2rem,
31 |     700: 2.75rem,
32 |     800: 3.5rem,
33 |     900: 5rem,
34 |   ),
35 | )
36 | 
37 | // $base-font-sizes (
38 | //   small: 1.125rem,
39 | //   medium: 1.25rem,
40 | //   large: 1.5rem
41 | // )
42 | // TODO: build @for loop for a font-scale
43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/sass/abstracts/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'colors';
2 | @forward 'font-sizes';
3 | @forward 'font-families';
4 | @forward 'mixins';
5 | @forward 'spacing';


--------------------------------------------------------------------------------
/sass/abstracts/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @use 'breakpoints' as *;
 2 | 
 3 | @mixin mq($key) {
 4 | 
 5 |   $size: map-get($breakpoints, $key);
 6 | 
 7 |   @media only screen and (min-width: $size) {
 8 |     @content;
 9 |   }
10 | }


--------------------------------------------------------------------------------
/sass/abstracts/_spacing.scss:
--------------------------------------------------------------------------------
1 | $spacer: 1rem;


--------------------------------------------------------------------------------
/sass/base/_base.scss:
--------------------------------------------------------------------------------
1 | body {
2 |   font-family: var(--ff-primary);
3 | }
4 | 
5 | header {
6 |   
7 | }


--------------------------------------------------------------------------------
/sass/base/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'root';
2 | @forward 'reset';
3 | @forward 'base';


--------------------------------------------------------------------------------
/sass/base/_reset.scss:
--------------------------------------------------------------------------------
 1 | /* Box sizing rules */
 2 | *,
 3 | *::before,
 4 | *::after {
 5 |   box-sizing: border-box;
 6 | }
 7 | 
 8 | /* Remove default margin */
 9 | body,
10 | h1,
11 | h2,
12 | h3,
13 | h4,
14 | p,
15 | figure,
16 | blockquote,
17 | dl,
18 | dd {
19 |   margin: 0;
20 | }
21 | 
22 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
23 | ul[role='list'],
24 | ol[role='list'] {
25 |   list-style: none;
26 | }
27 | 
28 | /* Set core root defaults */
29 | html:focus-within {
30 |   scroll-behavior: smooth;
31 | }
32 | 
33 | /* Set core body defaults */
34 | body {
35 |   min-height: 100vh;
36 |   text-rendering: optimizeSpeed;
37 |   line-height: 1.5;
38 | }
39 | 
40 | /* A elements that don't have a class get default styles */
41 | a:not([class]) {
42 |   text-decoration-skip-ink: auto;
43 | }
44 | 
45 | /* Make images easier to work with */
46 | img,
47 | picture {
48 |   max-width: 100%;
49 |   display: block;
50 | }
51 | 
52 | /* Inherit fonts for inputs and buttons */
53 | input,
54 | button,
55 | textarea,
56 | select {
57 |   font: inherit;
58 | }
59 | 
60 | /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
61 | @media (prefers-reduced-motion: reduce) {
62 |   html:focus-within {
63 |     scroll-behavior: auto;
64 |   }
65 | 
66 |   *,
67 |   *::before,
68 |   *::after {
69 |     animation-duration: 0.01ms !important;
70 |     animation-iteration-count: 1 !important;
71 |     transition-duration: 0.01ms !important;
72 |     scroll-behavior: auto !important;
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/sass/base/_root.scss:
--------------------------------------------------------------------------------
 1 | @use '../abstracts' as *;
 2 | 
 3 | :root { 
 4 |   --ff-primary: #{$ff-primary};
 5 |   --ff-secondary: #{$ff-secondary};
 6 |   --ff-accent: #{$ff-accent};
 7 | 
 8 |   --spacer: #{$spacer};
 9 | 
10 |   @each $color, $shade in $colors {
11 |     
12 |     @each $property, $value in $shade {
13 |       --clr-#{$color}-#{$property}: #{$value};
14 |     } 
15 |   }
16 | 
17 |   @each $screen-size, $property in $font-sizes {
18 |     @if $screen-size == small {
19 |       @each $prop, $value in $property { 
20 |         --fs-#{$prop}: #{$value};
21 |       }
22 |     } @else { 
23 |       @include mq($screen-size) {
24 |         @each $prop,
25 |         $value in $property {
26 |           --fs-#{$prop}: #{$value};
27 |         }
28 |       }
29 |     }
30 |   }
31 | }


--------------------------------------------------------------------------------
/sass/components/_card.scss:
--------------------------------------------------------------------------------
1 | 
2 | .card {
3 |   padding: var(--spacer);
4 |   box-shadow: var(--shadow, var(--shadow-1));
5 | } 
6 | 
7 | 


--------------------------------------------------------------------------------
/sass/components/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'card';


--------------------------------------------------------------------------------
/sass/layout/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'main-layout';
2 | @forward 'with-sidebar';


--------------------------------------------------------------------------------
/sass/layout/_main-layout.scss:
--------------------------------------------------------------------------------
1 | @use '../utilities/grid' as *;
2 | 
3 | .main-layout {
4 |   @extend .grid !optional;
5 |   grid-template-rows: auto 1fr auto;
6 |   min-height: 100vh;
7 | }


--------------------------------------------------------------------------------
/sass/layout/_with-sidebar.scss:
--------------------------------------------------------------------------------
1 | @use '../utilities/grid' as *;
2 | 
3 | .with-sidebar {
4 |   @extend .grid !optional;
5 |   grid-template-columns: 1fr 20rem;
6 | }


--------------------------------------------------------------------------------
/sass/style.scss:
--------------------------------------------------------------------------------
1 | @use 'base';
2 | @use 'utilities';
3 | @use 'components';
4 | @use 'layout';
5 | 


--------------------------------------------------------------------------------
/sass/utilities/_colors.scss:
--------------------------------------------------------------------------------
 1 | @use '../abstracts'as *;
 2 | 
 3 | @each $color, $shade in $colors {
 4 | 
 5 |   @each $property, $value in $shade {
 6 |     .text-#{$color}-#{$property} {
 7 |       color: hsl(var(--clr-#{$color}-#{$property}));
 8 |     }
 9 | 
10 |     .bg-#{$color}-#{$property} {
11 |       background-color: hsl(var(--clr-#{$color}-#{$property}));
12 |     }
13 |   }
14 | }
15 | 
16 | .bg-gradient {
17 |   color: hsl(var(--clr-neutral-100));
18 |   background-image: 
19 |     linear-gradient(var(--bg-deg, -45deg),
20 |     hsl(var(--clr-primary-400)),
21 |     hsl(var(--clr-secondary-500)),
22 |     hsl(var(--clr-accent-500)));
23 | }
24 | 


--------------------------------------------------------------------------------
/sass/utilities/_columns.scss:
--------------------------------------------------------------------------------
 1 | @use 'grid' as *;
 2 | @use '../abstracts/' as *;
 3 | 
 4 | .even-columns {
 5 |   @extend .grid;
 6 | 
 7 |   @include mq(medium) {
 8 |     grid-auto-flow: column;
 9 |     grid-auto-columns: 1fr;
10 |   } 
11 | }


--------------------------------------------------------------------------------
/sass/utilities/_container.scss:
--------------------------------------------------------------------------------
1 | .container {
2 |   max-width: var(--width, 60ch);
3 |   margin-inline: auto;
4 |   padding-inline: var(--spacer);
5 | }


--------------------------------------------------------------------------------
/sass/utilities/_flex.scss:
--------------------------------------------------------------------------------
 1 | .flex {
 2 |   display: flex;
 3 |   gap: var(--gap, var(--spacer));
 4 | }
 5 |  
 6 | @mixin flex($align: center, $justify: between) {
 7 |   @extend .flex;
 8 |   align-items: $align;
 9 |   justify-content: $justify;
10 | }


--------------------------------------------------------------------------------
/sass/utilities/_flow.scss:
--------------------------------------------------------------------------------
1 | .flow > :where(:not(:first-child)) {
2 |   margin-inline-start: var(--flow-spacer, var(--spacer));
3 | }


--------------------------------------------------------------------------------
/sass/utilities/_font-sizes.scss:
--------------------------------------------------------------------------------
1 | @use '../abstracts/' as *;
2 | 
3 | @each $screen-size, $property in $font-sizes {
4 |   @if $screen-size == small {
5 |     @each $prop, $value in $property { 
6 |       .fs-#{$prop} { font-size: var(--fs-#{$prop}) }
7 |     }
8 |   }
9 | }


--------------------------------------------------------------------------------
/sass/utilities/_grid.scss:
--------------------------------------------------------------------------------
 1 | .grid {
 2 |   display: grid;
 3 |   gap: var(--gap, var(--spacer));
 4 | }
 5 | 
 6 | // @mixin grid($align: start, $justify: between) {
 7 | //   @extend .grid;
 8 | //   align-items: $align;
 9 | //   justify-content: $justify;
10 | // }


--------------------------------------------------------------------------------
/sass/utilities/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'colors';
2 | @forward 'font-sizes';
3 | @forward 'flow';
4 | @forward 'container';
5 | @forward 'flex';
6 | @forward 'columns';  


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --ff-primary: Heebo, sans-serif;
  3 |   --ff-secondary: Bungee, cursive;
  4 |   --ff-accent: Bungee Shade, cursive;
  5 |   --spacer: 1rem;
  6 |   --clr-neutral-100: 0 0% 100%;
  7 |   --clr-neutral-200: 0 0% 90%;
  8 |   --clr-neutral-300: 0 0% 70%;
  9 |   --clr-neutral-400: 0 0% 60%;
 10 |   --clr-neutral-500: 0 0% 50%;
 11 |   --clr-neutral-600: 0 0% 40%;
 12 |   --clr-neutral-700: 0 0% 30%;
 13 |   --clr-neutral-800: 0 0% 10%;
 14 |   --clr-neutral-900: 0 0% 0%;
 15 |   --clr-primary-100: 214 100% 90%;
 16 |   --clr-primary-200: 214 100% 80%;
 17 |   --clr-primary-300: 214 100% 70%;
 18 |   --clr-primary-400: 214 100% 60%;
 19 |   --clr-primary-500: 214 100% 50%;
 20 |   --clr-primary-600: 214 100% 40%;
 21 |   --clr-primary-700: 214 100% 30%;
 22 |   --clr-primary-800: 214 100% 20%;
 23 |   --clr-primary-900: 214 100% 10%;
 24 |   --clr-secondary-100: 284 71% 90%;
 25 |   --clr-secondary-200: 284 71% 80%;
 26 |   --clr-secondary-300: 284 71% 70%;
 27 |   --clr-secondary-400: 284 71% 60%;
 28 |   --clr-secondary-500: 284 71% 50%;
 29 |   --clr-secondary-600: 284 71% 40%;
 30 |   --clr-secondary-700: 284 71% 30%;
 31 |   --clr-secondary-800: 284 71% 20%;
 32 |   --clr-secondary-900: 284 71% 10%;
 33 |   --clr-accent-100: 346 80% 90%;
 34 |   --clr-accent-200: 346 80% 80%;
 35 |   --clr-accent-300: 346 80% 70%;
 36 |   --clr-accent-400: 346 80% 60%;
 37 |   --clr-accent-500: 346 80% 50%;
 38 |   --clr-accent-600: 346 80% 40%;
 39 |   --clr-accent-700: 346 80% 30%;
 40 |   --clr-accent-800: 346 80% 20%;
 41 |   --clr-accent-900: 346 80% 10%;
 42 |   --fs-100: 0.625rem;
 43 |   --fs-200: 0.7625rem;
 44 |   --fs-300: 0.8975rem;
 45 |   --fs-400: 1.125rem;
 46 |   --fs-500: 1.25rem;
 47 |   --fs-600: 1.75rem;
 48 |   --fs-700: 2.25rem;
 49 |   --fs-800: 2.75rem;
 50 |   --fs-900: 3.25rem;
 51 | }
 52 | @media only screen and (min-width: 50em) {
 53 |   :root {
 54 |     --fs-100: 0.725rem;
 55 |     --fs-200: 0.875rem;
 56 |     --fs-300: 1rem;
 57 |     --fs-400: 1.125rem;
 58 |     --fs-500: 1.325rem;
 59 |     --fs-600: 2rem;
 60 |     --fs-700: 2.75rem;
 61 |     --fs-800: 3.25rem;
 62 |     --fs-900: 4rem;
 63 |   }
 64 | }
 65 | @media only screen and (min-width: 65em) {
 66 |   :root {
 67 |     --fs-100: 0.725rem;
 68 |     --fs-200: 0.875rem;
 69 |     --fs-300: 1rem;
 70 |     --fs-400: 1.125rem;
 71 |     --fs-500: 1.325rem;
 72 |     --fs-600: 2rem;
 73 |     --fs-700: 2.75rem;
 74 |     --fs-800: 3.5rem;
 75 |     --fs-900: 5rem;
 76 |   }
 77 | }
 78 | 
 79 | /* Box sizing rules */
 80 | *,
 81 | *::before,
 82 | *::after {
 83 |   box-sizing: border-box;
 84 | }
 85 | 
 86 | /* Remove default margin */
 87 | body,
 88 | h1,
 89 | h2,
 90 | h3,
 91 | h4,
 92 | p,
 93 | figure,
 94 | blockquote,
 95 | dl,
 96 | dd {
 97 |   margin: 0;
 98 | }
 99 | 
100 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
101 | ul[role=list],
102 | ol[role=list] {
103 |   list-style: none;
104 | }
105 | 
106 | /* Set core root defaults */
107 | html:focus-within {
108 |   scroll-behavior: smooth;
109 | }
110 | 
111 | /* Set core body defaults */
112 | body {
113 |   min-height: 100vh;
114 |   text-rendering: optimizeSpeed;
115 |   line-height: 1.5;
116 | }
117 | 
118 | /* A elements that don't have a class get default styles */
119 | a:not([class]) {
120 |   text-decoration-skip-ink: auto;
121 | }
122 | 
123 | /* Make images easier to work with */
124 | img,
125 | picture {
126 |   max-width: 100%;
127 |   display: block;
128 | }
129 | 
130 | /* Inherit fonts for inputs and buttons */
131 | input,
132 | button,
133 | textarea,
134 | select {
135 |   font: inherit;
136 | }
137 | 
138 | /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
139 | @media (prefers-reduced-motion: reduce) {
140 |   html:focus-within {
141 |     scroll-behavior: auto;
142 |   }
143 | 
144 |   *,
145 | *::before,
146 | *::after {
147 |     animation-duration: 0.01ms !important;
148 |     animation-iteration-count: 1 !important;
149 |     transition-duration: 0.01ms !important;
150 |     scroll-behavior: auto !important;
151 |   }
152 | }
153 | body {
154 |   font-family: var(--ff-primary);
155 | }
156 | 
157 | .text-neutral-100 {
158 |   color: hsl(var(--clr-neutral-100));
159 | }
160 | 
161 | .bg-neutral-100 {
162 |   background-color: hsl(var(--clr-neutral-100));
163 | }
164 | 
165 | .text-neutral-200 {
166 |   color: hsl(var(--clr-neutral-200));
167 | }
168 | 
169 | .bg-neutral-200 {
170 |   background-color: hsl(var(--clr-neutral-200));
171 | }
172 | 
173 | .text-neutral-300 {
174 |   color: hsl(var(--clr-neutral-300));
175 | }
176 | 
177 | .bg-neutral-300 {
178 |   background-color: hsl(var(--clr-neutral-300));
179 | }
180 | 
181 | .text-neutral-400 {
182 |   color: hsl(var(--clr-neutral-400));
183 | }
184 | 
185 | .bg-neutral-400 {
186 |   background-color: hsl(var(--clr-neutral-400));
187 | }
188 | 
189 | .text-neutral-500 {
190 |   color: hsl(var(--clr-neutral-500));
191 | }
192 | 
193 | .bg-neutral-500 {
194 |   background-color: hsl(var(--clr-neutral-500));
195 | }
196 | 
197 | .text-neutral-600 {
198 |   color: hsl(var(--clr-neutral-600));
199 | }
200 | 
201 | .bg-neutral-600 {
202 |   background-color: hsl(var(--clr-neutral-600));
203 | }
204 | 
205 | .text-neutral-700 {
206 |   color: hsl(var(--clr-neutral-700));
207 | }
208 | 
209 | .bg-neutral-700 {
210 |   background-color: hsl(var(--clr-neutral-700));
211 | }
212 | 
213 | .text-neutral-800 {
214 |   color: hsl(var(--clr-neutral-800));
215 | }
216 | 
217 | .bg-neutral-800 {
218 |   background-color: hsl(var(--clr-neutral-800));
219 | }
220 | 
221 | .text-neutral-900 {
222 |   color: hsl(var(--clr-neutral-900));
223 | }
224 | 
225 | .bg-neutral-900 {
226 |   background-color: hsl(var(--clr-neutral-900));
227 | }
228 | 
229 | .text-primary-100 {
230 |   color: hsl(var(--clr-primary-100));
231 | }
232 | 
233 | .bg-primary-100 {
234 |   background-color: hsl(var(--clr-primary-100));
235 | }
236 | 
237 | .text-primary-200 {
238 |   color: hsl(var(--clr-primary-200));
239 | }
240 | 
241 | .bg-primary-200 {
242 |   background-color: hsl(var(--clr-primary-200));
243 | }
244 | 
245 | .text-primary-300 {
246 |   color: hsl(var(--clr-primary-300));
247 | }
248 | 
249 | .bg-primary-300 {
250 |   background-color: hsl(var(--clr-primary-300));
251 | }
252 | 
253 | .text-primary-400 {
254 |   color: hsl(var(--clr-primary-400));
255 | }
256 | 
257 | .bg-primary-400 {
258 |   background-color: hsl(var(--clr-primary-400));
259 | }
260 | 
261 | .text-primary-500 {
262 |   color: hsl(var(--clr-primary-500));
263 | }
264 | 
265 | .bg-primary-500 {
266 |   background-color: hsl(var(--clr-primary-500));
267 | }
268 | 
269 | .text-primary-600 {
270 |   color: hsl(var(--clr-primary-600));
271 | }
272 | 
273 | .bg-primary-600 {
274 |   background-color: hsl(var(--clr-primary-600));
275 | }
276 | 
277 | .text-primary-700 {
278 |   color: hsl(var(--clr-primary-700));
279 | }
280 | 
281 | .bg-primary-700 {
282 |   background-color: hsl(var(--clr-primary-700));
283 | }
284 | 
285 | .text-primary-800 {
286 |   color: hsl(var(--clr-primary-800));
287 | }
288 | 
289 | .bg-primary-800 {
290 |   background-color: hsl(var(--clr-primary-800));
291 | }
292 | 
293 | .text-primary-900 {
294 |   color: hsl(var(--clr-primary-900));
295 | }
296 | 
297 | .bg-primary-900 {
298 |   background-color: hsl(var(--clr-primary-900));
299 | }
300 | 
301 | .text-secondary-100 {
302 |   color: hsl(var(--clr-secondary-100));
303 | }
304 | 
305 | .bg-secondary-100 {
306 |   background-color: hsl(var(--clr-secondary-100));
307 | }
308 | 
309 | .text-secondary-200 {
310 |   color: hsl(var(--clr-secondary-200));
311 | }
312 | 
313 | .bg-secondary-200 {
314 |   background-color: hsl(var(--clr-secondary-200));
315 | }
316 | 
317 | .text-secondary-300 {
318 |   color: hsl(var(--clr-secondary-300));
319 | }
320 | 
321 | .bg-secondary-300 {
322 |   background-color: hsl(var(--clr-secondary-300));
323 | }
324 | 
325 | .text-secondary-400 {
326 |   color: hsl(var(--clr-secondary-400));
327 | }
328 | 
329 | .bg-secondary-400 {
330 |   background-color: hsl(var(--clr-secondary-400));
331 | }
332 | 
333 | .text-secondary-500 {
334 |   color: hsl(var(--clr-secondary-500));
335 | }
336 | 
337 | .bg-secondary-500 {
338 |   background-color: hsl(var(--clr-secondary-500));
339 | }
340 | 
341 | .text-secondary-600 {
342 |   color: hsl(var(--clr-secondary-600));
343 | }
344 | 
345 | .bg-secondary-600 {
346 |   background-color: hsl(var(--clr-secondary-600));
347 | }
348 | 
349 | .text-secondary-700 {
350 |   color: hsl(var(--clr-secondary-700));
351 | }
352 | 
353 | .bg-secondary-700 {
354 |   background-color: hsl(var(--clr-secondary-700));
355 | }
356 | 
357 | .text-secondary-800 {
358 |   color: hsl(var(--clr-secondary-800));
359 | }
360 | 
361 | .bg-secondary-800 {
362 |   background-color: hsl(var(--clr-secondary-800));
363 | }
364 | 
365 | .text-secondary-900 {
366 |   color: hsl(var(--clr-secondary-900));
367 | }
368 | 
369 | .bg-secondary-900 {
370 |   background-color: hsl(var(--clr-secondary-900));
371 | }
372 | 
373 | .text-accent-100 {
374 |   color: hsl(var(--clr-accent-100));
375 | }
376 | 
377 | .bg-accent-100 {
378 |   background-color: hsl(var(--clr-accent-100));
379 | }
380 | 
381 | .text-accent-200 {
382 |   color: hsl(var(--clr-accent-200));
383 | }
384 | 
385 | .bg-accent-200 {
386 |   background-color: hsl(var(--clr-accent-200));
387 | }
388 | 
389 | .text-accent-300 {
390 |   color: hsl(var(--clr-accent-300));
391 | }
392 | 
393 | .bg-accent-300 {
394 |   background-color: hsl(var(--clr-accent-300));
395 | }
396 | 
397 | .text-accent-400 {
398 |   color: hsl(var(--clr-accent-400));
399 | }
400 | 
401 | .bg-accent-400 {
402 |   background-color: hsl(var(--clr-accent-400));
403 | }
404 | 
405 | .text-accent-500 {
406 |   color: hsl(var(--clr-accent-500));
407 | }
408 | 
409 | .bg-accent-500 {
410 |   background-color: hsl(var(--clr-accent-500));
411 | }
412 | 
413 | .text-accent-600 {
414 |   color: hsl(var(--clr-accent-600));
415 | }
416 | 
417 | .bg-accent-600 {
418 |   background-color: hsl(var(--clr-accent-600));
419 | }
420 | 
421 | .text-accent-700 {
422 |   color: hsl(var(--clr-accent-700));
423 | }
424 | 
425 | .bg-accent-700 {
426 |   background-color: hsl(var(--clr-accent-700));
427 | }
428 | 
429 | .text-accent-800 {
430 |   color: hsl(var(--clr-accent-800));
431 | }
432 | 
433 | .bg-accent-800 {
434 |   background-color: hsl(var(--clr-accent-800));
435 | }
436 | 
437 | .text-accent-900 {
438 |   color: hsl(var(--clr-accent-900));
439 | }
440 | 
441 | .bg-accent-900 {
442 |   background-color: hsl(var(--clr-accent-900));
443 | }
444 | 
445 | .bg-gradient {
446 |   color: hsl(var(--clr-neutral-100));
447 |   background-image: linear-gradient(var(--bg-deg, -45deg), hsl(var(--clr-primary-400)), hsl(var(--clr-secondary-500)), hsl(var(--clr-accent-500)));
448 | }
449 | 
450 | .fs-100 {
451 |   font-size: var(--fs-100);
452 | }
453 | 
454 | .fs-200 {
455 |   font-size: var(--fs-200);
456 | }
457 | 
458 | .fs-300 {
459 |   font-size: var(--fs-300);
460 | }
461 | 
462 | .fs-400 {
463 |   font-size: var(--fs-400);
464 | }
465 | 
466 | .fs-500 {
467 |   font-size: var(--fs-500);
468 | }
469 | 
470 | .fs-600 {
471 |   font-size: var(--fs-600);
472 | }
473 | 
474 | .fs-700 {
475 |   font-size: var(--fs-700);
476 | }
477 | 
478 | .fs-800 {
479 |   font-size: var(--fs-800);
480 | }
481 | 
482 | .fs-900 {
483 |   font-size: var(--fs-900);
484 | }
485 | 
486 | .flow > :where(:not(:first-child)) {
487 |   margin-inline-start: var(--flow-spacer, var(--spacer));
488 | }
489 | 
490 | .container {
491 |   max-width: var(--width, 60ch);
492 |   margin-inline: auto;
493 |   padding-inline: var(--spacer);
494 | }
495 | 
496 | .flex {
497 |   display: flex;
498 |   gap: var(--gap, var(--spacer));
499 | }
500 | 
501 | .grid, .with-sidebar, .main-layout, .even-columns {
502 |   display: grid;
503 |   gap: var(--gap, var(--spacer));
504 | }
505 | 
506 | @media only screen and (min-width: 50em) {
507 |   .even-columns {
508 |     grid-auto-flow: column;
509 |     grid-auto-columns: 1fr;
510 |   }
511 | }
512 | 
513 | .card {
514 |   padding: var(--spacer);
515 |   box-shadow: var(--shadow, var(--shadow-1));
516 | }
517 | 
518 | .main-layout {
519 |   grid-template-rows: auto 1fr auto;
520 |   min-height: 100vh;
521 | }
522 | 
523 | .with-sidebar {
524 |   grid-template-columns: 1fr 20rem;
525 | }
526 | 
527 | /*# sourceMappingURL=style.css.map */
528 | 


--------------------------------------------------------------------------------
/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["sass/base/_root.scss","sass/abstracts/_mixins.scss","sass/base/_reset.scss","sass/base/_base.scss","sass/utilities/_colors.scss","sass/utilities/_font-sizes.scss","sass/utilities/_flow.scss","sass/utilities/_container.scss","sass/utilities/_flex.scss","sass/utilities/_grid.scss","sass/utilities/_columns.scss","sass/components/_card.scss","sass/layout/_main-layout.scss","sass/layout/_with-sidebar.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EAEA;EAKI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAOE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;ACbN;EDJF;IAuBU;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;;;ACnBR;EDJF;IAuBU;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;;;;AEzBV;AACA;AAAA;AAAA;EAGE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AACA;EACE;IACE;;;EAGF;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;ACvEJ;EACE;;;ACIE;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AALF;EACE;;;AAGF;EACE;;;AAKN;EACE;EACA,kBACE;;;ACbE;EAAe;;;AAAf;EAAe;;;AAAf;EAAe;;;AAAf;EAAe;;;AAAf;EAAe;;;AAAf;EAAe;;;AAAf;EAAe;;;AAAf;EAAe;;;AAAf;EAAe;;;ACLrB;EACE;;;ACDF;EACE;EACA;EACA;;;ACHF;EACE;EACA;;;ACFF;EACE;EACA;;;ARIA;ESHF;IAII;IACA;;;;ACPJ;EACE;EACA;;;ACDF;EAEE;EACA;;;ACHF;EAEE","file":"style.css"}


--------------------------------------------------------------------------------