From f8b5f3ade29671b2dbe518a75c77c19d0656bdc8 Mon Sep 17 00:00:00 2001 From: Randy Jordan Date: Fri, 17 Jul 2026 21:49:17 -0500 Subject: [PATCH] Initial commit --- LICENSE.md | 21 +++++++++ README.md | 35 +++++++++++++++ app.js | 2 + index.html | 18 ++++++++ style.css | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 204 insertions(+) create mode 100644 LICENSE.md create mode 100644 README.md create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..074265c --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) [2026] [Randy Jordan] + +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..636aba9 --- /dev/null +++ b/README.md @@ -0,0 +1,35 @@ +# vanilla + +## Description +Vanilla JS, HTML and CSS components. + +## Table of Contents + +* [Features](#features) +* [Todos](#todos) +* [Usage](#usage) +* [Acknowledgments](#acknowledgments) +* [License](#license) + + +## Features + +## Todos + +## Usage + +```bash + +``` + +## Acknowledgments +[CodyHouse](https://codyhouse.co/)
+[Free Front End](https://freefrontend.com/)
+[Tailwind CSS](https://tailwindcss.com/)
+[Brad Traversy Design Resources](https://github.com/bradtraversy/design-resources-for-developers)
+ + + +## License +This project is licensed under the MIT License - see the [MIT License](LICENSE.md) 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..6599a69 --- /dev/null +++ b/style.css @@ -0,0 +1,128 @@ +: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); + } +}