commit 4ea4d5d085d030414d98befacaeb83a69f2091a6 Author: Randy Jordan Date: Sat Mar 7 14:07:42 2026 -0600 Initial commit diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8aa2645 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) [year] [fullname] + +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..9e62f75 --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# vanilla + +## Description +Vanilla JS, HTML, and JS components. + +## Table of Contents + +- [Description](#description) +- [Features](#features) +- [Usage](#usage) +- [Credits / Resources](#credits--resources) +- [License](#license) + +## Features / TODOS +- [ ] Fix variables +- [ ] Add utility classes +- [ ] Component Todo list +- [ ] Fix icons hosting + +## Usage + +## Credits / Resources +[Tom Preston-Werner README Driven Development](https://tom.preston-werner.com/2010/08/23/readme-driven-development)
+[Make a README](https://www.makeareadme.com/)
+[Choose a LICENSE](https://choosealicense.com/)
+[CodePen](https://codepen.io/)
+[CodyHouse](https://codyhouse.co/)
+[Brad Traversy Design Resources](https://github.com/bradtraversy/design-resources-for-developers)
+[Ten modern layouts in one line of CSS](https://web.dev/articles/one-line-layouts)
+ + +## License +This project is licensed under MIT - see the [LICENSE](LICENSE) file for details. diff --git a/app.js b/app.js new file mode 100644 index 0000000..aff2ba4 --- /dev/null +++ b/app.js @@ -0,0 +1,2 @@ +console.log("Hello World!") + diff --git a/index.html b/index.html new file mode 100644 index 0000000..dde840b --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + + Document + + + +

Hello World!

+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..2a99c8d --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +:root { /* CSS Variables */ +/* Font Sizes */ + --fs-100: 0.625rem; + --fs-200: 0.75rem; + --fs-300: 0.875rem; + --fs-400: 1rem; + --fs-500: 1.125rem; + --fs-600: 1.25rem; + --fs-700: 1.5rem; + --fs-800: 2.5rem; + --fs-900: 3.5rem; + + --fw-regular: 400; + --fw-semi-bold: 500; + --fw-bold: 700; + + /* Color variables */ + --clr-bg-ltheme: #edebe9; + --clr-text-ltheme: #1b1b1b; + --clr-accent-ltheme: #ff8000; + --clr-primary-ltheme: #d4d4d2; + --clr-secondary-ltheme: #babcbb; + --clr-link-ltheme: blue; + --clr-border-ltheme: blue; + + --clr-bg-dtheme: #121212; + --clr-text-dtheme: #edebe9; + --clr-accent-dtheme: #3a3b9c; + --clr-primary-dtheme: #1b1b1b; + --clr-secondary-dtheme: #2d2d2d; + --clr-link-dtheme: blue; + --clr-border-dtheme: blue; + + /* General Colors */ + --black: #000; /* Black */ + --white: #fff; /* White */ + --clr-000: #636363; + --clr-100: #5A5A5A; + --clr-200: #515151; + --clr-300: #484848; + --clr-400: #3F3F3F; + --clr-500: #363636; + --clr-600: #2D2D2D; + --clr-700: #242424; + --clr-800: #1B1B1B; + --clr-900: #121212; + + /* Semantic Colors */ + --clr-success: #118c11; + --clr-info: #17a2b8; + --clr-warning: #ff8000; + --clr-danger: #d00000; +} + +/* CSS Resets */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* Remove default margins. */ +* { + margin: 0; + padding: 0; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Make images easiser to work with. */ +img,picture,svg, video { +display: block; +max-width: 100%; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu { + list-style: none; +} + +/* Form elements inherit font styles. */ +input, textarea, button, select { + font: inherit; +} + +/* Motion Reducted Media Query */ +@media screen and + (prefers-reduced-motion: reduce), + (update: slow) { + * { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +} + +/* Screen reader friendly hidden. */ +.visually-hidden:not(:focus):not(:active) { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} + +/* Body and core Themes */ + +body{ + display: grid; + min-width: 100vw; + min-height: 100vh; + align-items: start; + justify-items: center; + line-height: 1.5rem; + background-color: var(--clr-bg-ltheme); + color: var(--clr-text-ltheme); +} + +@media (prefers-color-scheme: dark) { + body{ + background-color: var(--clr-bg-dtheme); + color: var(--clr-text-dtheme); + } +} +