mirror of
https://github.com/jdan/98.css.git
synced 2025-08-31 17:42:07 +02:00
closing notes, readme, etc
This commit is contained in:
Jordan Scales
26
docs/98.css
26
docs/98.css
@@ -1,3 +1,9 @@
|
||||
/**
|
||||
* 98.css
|
||||
* Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
|
||||
* https://github.com/jdan/98.css/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Color */
|
||||
--surface: #c0c0c0;
|
||||
@@ -387,7 +393,7 @@ a:focus {
|
||||
outline: 1px dotted #0000ff;
|
||||
}
|
||||
|
||||
ul.treeview {
|
||||
ul.tree-view {
|
||||
display: block;
|
||||
background: #ffffff;
|
||||
box-shadow: inset -1px -1px #ffffff,
|
||||
@@ -397,36 +403,36 @@ ul.treeview {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.treeview li {
|
||||
ul.tree-view li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.treeview a {
|
||||
ul.tree-view a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul.treeview a:focus {
|
||||
ul.tree-view a:focus {
|
||||
background-color: #000080;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
ul.treeview ul,
|
||||
ul.treeview li {
|
||||
ul.tree-view ul,
|
||||
ul.tree-view li {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
ul.treeview ul {
|
||||
ul.tree-view ul {
|
||||
margin-left: 16px;
|
||||
padding-left: 16px;
|
||||
/* Goes down too far */
|
||||
border-left: 1px dotted #808080;
|
||||
}
|
||||
|
||||
ul.treeview ul > li {
|
||||
ul.tree-view ul > li {
|
||||
position: relative;
|
||||
}
|
||||
ul.treeview ul > li::before {
|
||||
ul.tree-view ul > li::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -437,7 +443,7 @@ ul.treeview ul > li::before {
|
||||
}
|
||||
|
||||
/* Cover the bottom of the left dotted border */
|
||||
ul.treeview ul > li:last-child::after {
|
||||
ul.tree-view ul > li:last-child::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
100
docs/backup.html
100
docs/backup.html
@@ -1,100 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/style.css?t=1"></style>
|
||||
<style>
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--dialog-blue);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog" style="width: 400px">
|
||||
<div class="menubar">
|
||||
<div class="menubar-title">
|
||||
Windows 98 Example
|
||||
</div>
|
||||
|
||||
<div class="menubar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<section>This is an example window with some controls.</section>
|
||||
|
||||
<fieldset>
|
||||
<legend>I think it's</legend>
|
||||
<div class="field-row">
|
||||
<input checked id="cool" type="radio" value="cool" name="answer">
|
||||
<label for="cool">Cool</label>
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<input id="meh" type="radio" value="meh" name="answer">
|
||||
<label for="meh">Meh</label>
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<input disabled id="idk" type="radio" value="idk" name="answer">
|
||||
<label for="idk">Idk</label>
|
||||
</div>
|
||||
|
||||
<div class="field-row-stacked" style="max-width: 160px">
|
||||
<label for="reason">Reason:</label>
|
||||
<select>
|
||||
<option>Nostalgia</option>
|
||||
<option>It looks sharp</option>
|
||||
<option>It's confusing</option>
|
||||
<option>It looks dated</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Checkboxes</legend>
|
||||
<div class="field-row">
|
||||
<input checked id="option1" type="checkbox">
|
||||
<label for="option1">Option 1</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input id="option2" type="checkbox">
|
||||
<label for="option2">Option 2</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input checked disabled id="option2" type="checkbox">
|
||||
<label for="option2">Option 2</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input disabled id="option2" type="checkbox">
|
||||
<label for="option2">Option 2</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<section>
|
||||
<div class="field-row-stacked" style="max-width: 168px">
|
||||
<label for="else">Anything else to add?</label>
|
||||
<input type="text" id="else">
|
||||
<textarea rows=8></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="field-row align-right">
|
||||
<button>OK</button>
|
||||
<button>Cancel</button>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="https://google.com">Learn more</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -20,7 +20,7 @@ aside {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
aside .treeview {
|
||||
aside .tree-view {
|
||||
width: 100%;
|
||||
/* TODO: Move scrollbar into the recessed region? */
|
||||
overflow-y: scroll;
|
||||
|
||||
103
docs/index.html
103
docs/index.html
@@ -9,7 +9,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<aside>
|
||||
<ul class="treeview">
|
||||
<ul class="tree-view">
|
||||
<li><a href="#intro">Intro</a></li>
|
||||
<li>
|
||||
<a href="#components">Components</a>
|
||||
@@ -30,7 +30,7 @@
|
||||
<li><a href="#tree-view">TreeView</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#extras">Extras</a></li>
|
||||
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
@@ -83,8 +83,10 @@
|
||||
This means 98.css is compatible with your frontend framework of choice.
|
||||
</p>
|
||||
|
||||
<p>You can install 98.css from the GitHub releases page, or from npm.</p>
|
||||
<pre><code>npm install 98.css</code></pre>
|
||||
<p>
|
||||
You can install 98.css from the <a href="https://github.com/jdan/98.css/releases">GitHub releases page</a>, or <a href="https://www.npmjs.com/package/98.css">from npm</a>.
|
||||
</p>
|
||||
<pre style="width: 360px"><code>npm install 98.css</code></pre>
|
||||
|
||||
<h2 id="components">Components</h2>
|
||||
|
||||
@@ -735,8 +737,101 @@
|
||||
— Microsoft Windows User Experience p. 178
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
To render a tree view, use an <code>ul</code> element with the
|
||||
<code>tree-view</code> class. The children of this list (<code>li</code>
|
||||
elements), can contain whatever you'd like.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<ul class="tree-view">
|
||||
<li>We can put</li>
|
||||
<li><strong style="color: purple">✨ Whatever ✨</strong></li>
|
||||
<li>We want in here</li>
|
||||
</ul>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We can put<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: purple"</span>></span>✨ Whatever ✨<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We want in here<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To make this a tree, we can nest further <code>ul</code> elements
|
||||
(no class needed on these). This will provide them with a nice dotted
|
||||
border and indentation to illustrate the structure of the tree.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<ul class="tree-view">
|
||||
<li>Table of Contents</li>
|
||||
<li>What is web development?</li>
|
||||
<li>
|
||||
CSS
|
||||
<ul>
|
||||
<li>Selectors</li>
|
||||
<li>Specificity</li>
|
||||
<li>Properties</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
JavaScript
|
||||
<ul>
|
||||
<li>Avoid at all costs</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>HTML</li>
|
||||
<li>Special Thanks</li>
|
||||
</ul>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Table of Contents<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>What is web development?<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
CSS
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Selectors<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Specificity<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Properties<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
JavaScript
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Avoid at all costs<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Special Thanks<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
|
||||
|
||||
<p>
|
||||
98.css is <a href="https://github.com/jdan/98.css/blob/master/LICENSE">MIT licensed</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Refer to <a href="https://github.com/jdan/98.css/issues">the Github issues page</a> to see bugs
|
||||
in my CSS or report new ones. I'd really like to see your pull requests (especially those new to
|
||||
open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like
|
||||
to make it a fun place to build your open-source muscle.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Thank you for checking my little project out, I hope it brought you some joy today. Consider
|
||||
<a href="https://github.com/jdan/98.css/stargazers">starring/following along on Github</a> and maybe
|
||||
subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
|
||||
</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<aside>
|
||||
<ul class="treeview">
|
||||
<ul class="tree-view">
|
||||
<li><a href="#intro">Intro</a></li>
|
||||
<li>
|
||||
<a href="#components">Components</a>
|
||||
@@ -30,7 +30,7 @@
|
||||
<li><a href="#tree-view">TreeView</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#extras">Extras</a></li>
|
||||
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
@@ -83,8 +83,10 @@
|
||||
This means 98.css is compatible with your frontend framework of choice.
|
||||
</p>
|
||||
|
||||
<p>You can install 98.css from the GitHub releases page, or from npm.</p>
|
||||
<pre><code>npm install 98.css</code></pre>
|
||||
<p>
|
||||
You can install 98.css from the <a href="https://github.com/jdan/98.css/releases">GitHub releases page</a>, or <a href="https://www.npmjs.com/package/98.css">from npm</a>.
|
||||
</p>
|
||||
<pre style="width: 360px"><code>npm install 98.css</code></pre>
|
||||
|
||||
<h2 id="components">Components</h2>
|
||||
|
||||
@@ -533,8 +535,70 @@
|
||||
— Microsoft Windows User Experience p. 178
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
To render a tree view, use an <code>ul</code> element with the
|
||||
<code>tree-view</code> class. The children of this list (<code>li</code>
|
||||
elements), can contain whatever you'd like.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<ul class="tree-view">
|
||||
<li>We can put</li>
|
||||
<li><strong style="color: purple">✨ Whatever ✨</strong></li>
|
||||
<li>We want in here</li>
|
||||
</ul>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
To make this a tree, we can nest further <code>ul</code> elements
|
||||
(no class needed on these). This will provide them with a nice dotted
|
||||
border and indentation to illustrate the structure of the tree.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<ul class="tree-view">
|
||||
<li>Table of Contents</li>
|
||||
<li>What is web development?</li>
|
||||
<li>
|
||||
CSS
|
||||
<ul>
|
||||
<li>Selectors</li>
|
||||
<li>Specificity</li>
|
||||
<li>Properties</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
JavaScript
|
||||
<ul>
|
||||
<li>Avoid at all costs</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>HTML</li>
|
||||
<li>Special Thanks</li>
|
||||
</ul>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
|
||||
|
||||
<p>
|
||||
98.css is <a href="https://github.com/jdan/98.css/blob/master/LICENSE">MIT licensed</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Refer to <a href="https://github.com/jdan/98.css/issues">the Github issues page</a> to see bugs
|
||||
in my CSS or report new ones. I'd really like to see your pull requests (especially those new to
|
||||
open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like
|
||||
to make it a fun place to build your open-source muscle.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Thank you for checking my little project out, I hope it brought you some joy today. Consider
|
||||
<a href="https://github.com/jdan/98.css/stargazers">starring/following along on Github</a> and maybe
|
||||
subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
|
||||
</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
docs/window.png
Normal file
BIN
docs/window.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Reference in New Issue
Block a user