Adds a basic page.

2024-07-29 23:05:32 -07:00
7 changed files with 87 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
--- a/base.css
+++ b/base.css
@@ -0,0 +1,39 @@
+body {
+    padding: 8px;
+}
+
+.box {
+    border: 4px solid #28e;
+    border-radius: 4px;
+    padding: 8px;
+}
+
+.vertical-stack {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+.vertical-stack > * {
+    margin-bottom: 8px;
+}
+
+.vertical-stack > *:last-child {
+    margin-bottom: 0;
+}
+
+.action-button {
+    border: 0.5px solid #558;
+    background: hsl(228, 100%, 90%);
+    background: linear-gradient(150deg, hsl(228, 100%, 95%) 0%, hsl(228, 100%, 80%) 100%);   
+}
+
+.footer {
+    text-align: center;
+    font-size: small;
+    font-family: "Dosis", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 600;
+    font-style: normal;
+}
+
--- a/index.html
+++ b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <title>My Demo</title>
+  <meta name="viewport" content="width=device-width">
+  <meta charset="utf-8">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap" rel="stylesheet">
+  <link type="text/css" rel="stylesheet" href="reset.css" />
+  <link type="text/css" rel="stylesheet" href="base.css" />
+  <link type="text/css" rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div class="vertical-stack">
+    <fieldset id="demo" class="box">
+    <legend title="asdf">My Demo</legend>
+      <div id="output"></div>
+    </fieldset>
+
+    <section class="box">
+      <button id="btnGo" class="action-button">Go</button>
+    </section>
+  </div>
+  <footer class="footer">copyright &copy; 2024 <a href="https://sfcoder.me">Tom Hicks</a> licensed under <a href="https://opensource.org/license/gpl-2-0">GPL v2.0 or later</a></footer>
+  <script src="main.js"></script>
+</body>
+</html>
--- a/main.js
+++ b/main.js
@@ -0,0 +1,3 @@
+(()=>{
+    console.log('Ready');
+})();
--- a/package.json
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Tom Hicks <headhunter3@gmail.com>",
+  "license": "GLPv2",
+  "private": true
+}
--- a/reset.css
+++ b/reset.css
@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+fieldset {
+    margin: 0;
+}
--- a/styles.css
+++ b/styles.css