Add basic website for github pages

This commit is contained in:
Talia 2022-01-01 13:05:43 +01:00
parent 5f955416fe
commit ea7a0ad5a1
No known key found for this signature in database
GPG key ID: AD727AD22802D0D6
3 changed files with 128 additions and 0 deletions

33
index.html Normal file
View file

@ -0,0 +1,33 @@
<link rel="stylesheet" href="page/style.css">
<h1>DarkWiiPlayer/JS</h1>
<p>A JavaScript <em>micro-framework</em> to make front-end <em>easier</em></p>
<p>Note: <b>This website is still work in progress!</b></p>
<section>
<h2>Skooma.js</h2>
<p>
Skooma lets you <strong>generate DOM nodes in JavaScript</strong>.
</p>
<p>
<h3 class="all-unset"><b>Code Sample</b>:</h3>
<pre><code>
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) })
])
</code></pre>
</p>
<a class="button" href="page/skooma.html">Read more</a>
</section>
<section>
<h2>Listener</h2>
</section>

20
page/skooma.html Normal file
View file

@ -0,0 +1,20 @@
<link rel="stylesheet" href="style.css">
<h1>Skooma.js</h1>
<section>
<h2>Introduction & Scope</h2>
<p>
Skooma.js is a library for generating DOM nodes within JavaScript.
</p>
<h3>What are the benefits of Skooma?</h3>
<p>
Skooma is only a small ES6 module that uses meta-programming to
turn JavaScript into a <span title="Domain-Specific Language">DSL</span>
that generates HTML and XML subtrees.
<br>
This means you're writing plain JavaScript code that needs no additional
transpilation steps and runs directly in the browser.
</p>
</section>

75
page/style.css Normal file
View file

@ -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;
}