From ea7a0ad5a1e7189bc42066f62373574c7735068d Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer
Date: Sat, 1 Jan 2022 13:05:43 +0100
Subject: [PATCH] Add basic website for github pages
---
index.html | 33 +++++++++++++++++++++
page/skooma.html | 20 +++++++++++++
page/style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 128 insertions(+)
create mode 100644 index.html
create mode 100644 page/skooma.html
create mode 100644 page/style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..028a79d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,33 @@
+
+
+DarkWiiPlayer/JS
+A JavaScript micro-framework to make front-end easier
+
+Note: This website is still work in progress!
+
+
+ Skooma.js
+
+
+ Skooma lets you generate DOM nodes in JavaScript .
+
+
+
+
Code Sample :
+
+import {html} from 'skooma.js'
+
+let div = html.div([
+ html.h1('Hello, World!'),
+ html.p('Here is some text', {class: ["class_a", "class_b"]})
+ html.button("Click Me!", { click: event => console.log(event) })
+])
+
+
+
+ Read more
+
+
+
diff --git a/page/skooma.html b/page/skooma.html
new file mode 100644
index 0000000..3297b54
--- /dev/null
+++ b/page/skooma.html
@@ -0,0 +1,20 @@
+
+
+Skooma.js
+
+
+ Introduction & Scope
+
+ Skooma.js is a library for generating DOM nodes within JavaScript.
+
+
+ What are the benefits of Skooma?
+
+ Skooma is only a small ES6 module that uses meta-programming to
+ turn JavaScript into a DSL
+ that generates HTML and XML subtrees.
+
+ This means you're writing plain JavaScript code that needs no additional
+ transpilation steps and runs directly in the browser.
+
+
diff --git a/page/style.css b/page/style.css
new file mode 100644
index 0000000..9b84c6b
--- /dev/null
+++ b/page/style.css
@@ -0,0 +1,75 @@
+:root {
+ font-family: sans-serif;
+ --color-bg: white;
+ --color-fg: #222;
+ --color-ac: #fbb;
+ --color-hl: #f64;
+
+ --line-mid: .14rem;
+ --line-thick: .2rem;
+}
+
+* {
+ box-sizing: border-box;
+ color: var(--color-fg);
+}
+
+body {
+ background: var(--color-bg);
+
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ padding: 1em 2em;
+}
+
+body>section {
+ width: 100%;
+ max-width: 60em;
+}
+
+h2 {
+ padding: 0 1em 0 .2em;
+ width: max-content;
+ border-bottom: .1em solid var(--color-ac);
+}
+
+em {
+ font-style: normal;
+ font-weight: bold;
+}
+
+.button {
+ --color-primary: var(--color-hl);
+ --color-secondary: var(--color-bg);
+ display: inline-block;
+ transition: all .3s;
+ cursor: pointer;
+ border-radius: .3em;
+ border: var(--line-mid) var(--color-primary) solid;
+ padding: .2em .6em;
+ text-decoration: none;
+ color: var(--color-primary);
+ font-weight: bold;
+}
+
+.button:hover {
+ color: var(--color-secondary);
+ background-color: var(--color-primary);
+ text-shadow: .2em .3em .2em #0004;
+}
+
+pre>code {
+ display: block;
+ border-left: dashed var(--line-mid) var(--color-ac);
+ padding-left: 1.6em;
+}
+
+span[title] {
+ cursor: help;
+ border-bottom: dotted currentcolor .16em;
+}
+
+.all-unset {
+ all: unset;
+}