diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 767059c..0adc0cd 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -2,7 +2,5 @@ "recommendations": [ "dbaeumer.vscode-eslint", "csstools.postcss", - "eamodio.gitlens", - "donjayamanne.githistory" ] } diff --git a/README.md b/README.md index 6956927..764fe42 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Option #1: Use any pre-processor ```js -import 'rstrtt' +import "rstrtt"; ``` Option #2: hot-link the css files: @@ -18,15 +18,15 @@ Option #2: hot-link the css files: - - - - - - -

Hello, World!

- + + + + + + +

Hello, World!

+ ``` -For more usages and style guideline head to [the website](https://cppccn.github.io/rstrtt/)! +For more usages and style guideline head to [the website](https://cppccn.xyz/rstrtt/)! diff --git a/docs/app.js b/docs/app.js deleted file mode 100644 index e69de29..0000000 diff --git a/docs/carbon.html b/docs/carbon.html deleted file mode 100644 index 6d5f0b5..0000000 --- a/docs/carbon.html +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/components.html b/docs/components.html deleted file mode 100644 index 854f2e2..0000000 --- a/docs/components.html +++ /dev/null @@ -1,313 +0,0 @@ - -

<hr>

-
-

List

- -

Blockquote

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.
-

Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
<form class="form">
-  <fieldset class="form-group">
-    <label for="username">USERNAME:</label>
-    <input id="username" type="text" placeholder="type your name..." class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="email">EMAIL:</label>
-    <input id="email" type="email" placeholder="" class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="country">COUNTRY:</label>
-    <select id="country" class="form-control">
-      <option>China</option>
-      <option>U.S.</option>
-      <option>U.K.</option>
-      <option>Japan</option>
-    </select>
-  </fieldset>
-  <fieldset class="form-group form-textarea">
-    <label for="message">MESSAGE:</label>
-    <textarea id="message" rows="5" class="form-control"></textarea>
-  </fieldset>
-  <div class="form-actions">
-    <button type="button" class="btn btn-primary btn-block">Submit</button>
-  </div>
-</form>
-
- -
Stateful Form
-
-
- - -
-
- - -
-
.form-group.form-success
-.form-group.form-error
-.form-group.form-warning
-
- -
Help Block
-
-
- - -
In this format: +86 xxx xxx xxxxx
-
-
- - -
-
<fieldset class="form-group form-success">
-  <label for="phone">Phone Number:</label>
-  <input id="phone" type="text" placeholder="" class="form-control">
-  <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
-</fieldset>
-
- -

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
editorspeedextensioninterface
sublime908070
atom608580
vscode806560
- -

Progress bar

-
-
-
<!-- with only an arrow -->
-<div class="progress-bar">
-  <div class="progress-bar-filled" style="width: 40%"></div>
-</div>
-
-<!-- with a percentage showing above the arrow -->
-<div class="progress-bar progress-bar-show-percent">
-  <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
-</div>
-
- -

Buttons

-
- - - - - - -
-
- - - - - - -
-
- -
<button class="btn btn-default">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-error">Error</button>
-
-<button class="btn btn-primary btn-ghost">Ghost Button</button>
-
-<button class="btn btn-primary btn-block">Block Level Button</button>
-
- -

Button group

-
-
- - - -
-
<div class="btn-group">
-  <button class="btn btn-success btn-ghost">Left</button>
-  <button class="btn btn-success btn-ghost">Middle</button>
-  <button class="btn btn-success btn-ghost">Right</button>
-</div>
-
- -

Card

-
-
-
-
title
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
-
-
-
-
<div class="card">
-  <header class="card-header">title</header>
-  <div class="card-content">
-    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
-  </div>
-</div>
-
- -

Alerts

-
-
Success message
-
Info message
-
Warning message
-
Error message
-
<div class="alert alert-success">Success message</div>
-<div class="alert alert-info">Info message</div>
-<div class="alert alert-warning">Warning message</div>
-<div class="alert alert-error">Error message</div>
-
- -

Menu

-
-
-
-
item #1 -
»
item #2 -
»
item #3 -
»
-
-
-
 <div class="menu">
-   <a class="menu-item">
-     item #1 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item active">
-     item #2 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item">
-     item #3 <div class="pull-right">»</div>
-   </a>
- </div>
-
- -

Media

-

This is useful if you intend to display a list of items, like the Twitter timeline.

-
-
-
-
e
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
e
-
-
<!-- left align -->
-<div class="media">
-  <div class="media-left">
-    <div class="avatarholder">e</div>
-  </div>
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-</div>
-
-<!-- right align -->
-<div class="media">
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-  <div class="media-right">
-    <div class="avatarholder">e</div>
-  </div>
-</div>
-
- -

Loading

-

hack.css gives you a default loading element, but you can find more at CSS-only loaders.

-
-
-
-
- -
-
-
Loading in an alert box…
-
<div class="loading"></div>
-
-<button class="btn btn-info btn-ghost">
-  Loading&hellip;
-  <span class="loading"></span>
-</button>
-
-<div class="alert alert-info">
-  <span class="loading"></span>
-  Loading in an alert box&hellip;
-</div>
-
diff --git a/docs/dark-grey.css b/docs/dark-grey.css deleted file mode 100644 index fa926b8..0000000 --- a/docs/dark-grey.css +++ /dev/null @@ -1 +0,0 @@ -.dark-grey{background-color:#181818;color:#ccc}.dark-grey pre{background-color:#181818;padding:0;border:none}.dark-grey pre code{color:#00bcd4}.dark-grey h1 a,.dark-grey h2 a,.dark-grey h3 a,.dark-grey h4 a,.dark-grey h5 a{color:#ccc}.dark-grey code,.dark-grey strong{color:#fff}.dark-grey code{font-weight:100}.dark-grey table{color:#ccc}.dark-grey table td,.dark-grey table th{border-color:#444}.dark-grey table tbody td:first-child{color:#fff}.dark-grey .form-group label{color:#ccc;border-color:rgba(95,95,95,.78)}.dark-grey .form-group.form-textarea label:after{background-color:#181818}.dark-grey .form-control{color:#ccc;border-color:rgba(95,95,95,.78)}.dark-grey .form-control:focus{border-color:#ccc;color:#ccc}.dark-grey textarea.form-control{color:#ccc}.dark-grey .card{border-color:rgba(95,95,95,.78)}.dark-grey .card .card-header{background-color:transparent;color:#ccc;border-bottom:1px solid rgba(95,95,95,.78)}.dark-grey .btn.btn-ghost.btn-default{border-color:#ababab;color:#ababab}.dark-grey .btn.btn-ghost.btn-default:focus,.dark-grey .btn.btn-ghost.btn-default:hover{border-color:#9c9c9c;color:#9c9c9c;z-index:1}.dark-grey .btn.btn-ghost.btn-default:focus,.dark-grey .btn.btn-ghost.btn-default:hover{border-color:#e0e0e0;color:#e0e0e0}.dark-grey .btn.btn-ghost.btn-primary:focus,.dark-grey .btn.btn-ghost.btn-primary:hover{border-color:#64b5f6;color:#64b5f6}.dark-grey .btn.btn-ghost.btn-success:focus,.dark-grey .btn.btn-ghost.btn-success:hover{border-color:#81c784;color:#81c784}.dark-grey .btn.btn-ghost.btn-info:focus,.dark-grey .btn.btn-ghost.btn-info:hover{border-color:#4dd0e1;color:#4dd0e1}.dark-grey .btn.btn-ghost.btn-error:focus,.dark-grey .btn.btn-ghost.btn-error:hover{border-color:#e57373;color:#e57373}.dark-grey .btn.btn-ghost.btn-warning:focus,.dark-grey .btn.btn-ghost.btn-warning:hover{border-color:#ffb74d;color:#ffb74d}.dark-grey .avatarholder,.dark-grey .placeholder{background-color:transparent;border-color:#333}.dark-grey .menu .menu-item{color:#ccc;border-color:rgba(95,95,95,.78)}.dark-grey .menu .menu-item.active,.dark-grey .menu .menu-item:hover{color:#fff;border-color:#ccc} \ No newline at end of file diff --git a/docs/dark-grey.html b/docs/dark-grey.html deleted file mode 100644 index 086983b..0000000 --- a/docs/dark-grey.html +++ /dev/null @@ -1,345 +0,0 @@ - - - - - - - dark-grey mode of hack.css - - - - - - - -
-

« Back to home

-

Dark-grey mode

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.

- -

Usage

<link rel="stylesheet" href="/path/to/hack.css" />
-<link rel="stylesheet" href="/path/to/dark-grey.css" />
-<body class="hack dark-grey">
-  ...
-</body>
-
- -

Components

-

<hr>

-
-

List

- -

Blockquote

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.
-

Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 
<form class="form">
-  <fieldset class="form-group">
-    <label for="username">USERNAME:</label>
-    <input id="username" type="text" placeholder="type your name..." class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="email">EMAIL:</label>
-    <input id="email" type="email" placeholder="" class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="country">COUNTRY:</label>
-    <select id="country" class="form-control">
-      <option>China</option>
-      <option>U.S.</option>
-      <option>U.K.</option>
-      <option>Japan</option>
-    </select>
-  </fieldset>
-  <fieldset class="form-group form-textarea">
-    <label for="message">MESSAGE:</label>
-    <textarea id="message" rows="5" class="form-control"></textarea>
-  </fieldset>
-  <div class="form-actions">
-    <button type="button" class="btn btn-primary btn-block">Submit</button>
-  </div>
-</form>
-
- -
Stateful Form
-
-
- - -
-
- - -
- 
.form-group.form-success
-.form-group.form-error
-.form-group.form-warning
-
- -
Help Block
-
-
- - -
In this format: +86 xxx xxx xxxxx
-
-
- - -
- 
<fieldset class="form-group form-success">
-  <label for="phone">Phone Number:</label>
-  <input id="phone" type="text" placeholder="" class="form-control">
-  <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
-</fieldset>
-
- -

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
editorspeedextensioninterface
sublime908070
atom608580
vscode806560
- -

Progress bar

-
-
- 
<!-- with only an arrow -->
-<div class="progress-bar">
-  <div class="progress-bar-filled" style="width: 40%"></div>
-</div>
-
-<!-- with a percentage showing above the arrow -->
-<div class="progress-bar progress-bar-show-percent">
-  <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
-</div>
-
- -

Buttons

-
- - - - - - -
-
- - - - - - -
-
- - 
<button class="btn btn-default">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-error">Error</button>
-
-<button class="btn btn-primary btn-ghost">Ghost Button</button>
-
-<button class="btn btn-primary btn-block">Block Level Button</button>
-
- -

Button group

-
-
- - - -
- 
<div class="btn-group">
-  <button class="btn btn-success btn-ghost">Left</button>
-  <button class="btn btn-success btn-ghost">Middle</button>
-  <button class="btn btn-success btn-ghost">Right</button>
-</div>
-
- -

Card

-
-
-
-
title
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
-
-
-
- 
<div class="card">
-  <header class="card-header">title</header>
-  <div class="card-content">
-    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
-  </div>
-</div>
-
- -

Alerts

-
-
Success message
-
Info message
-
Warning message
-
Error message
- 
<div class="alert alert-success">Success message</div>
-<div class="alert alert-info">Info message</div>
-<div class="alert alert-warning">Warning message</div>
-<div class="alert alert-error">Error message</div>
-
- -

Menu

-
-
-
-
item #1 -
»
item #2 -
»
item #3 -
»
-
-
- 
 <div class="menu">
-   <a class="menu-item">
-     item #1 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item active">
-     item #2 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item">
-     item #3 <div class="pull-right">»</div>
-   </a>
- </div>
-
- -

Media

-

This is useful if you intend to display a list of items, like the Twitter timeline.

-
-
-
-
e
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
e
-
- 
<!-- left align -->
-<div class="media">
-  <div class="media-left">
-    <div class="avatarholder">e</div>
-  </div>
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-</div>
-
-<!-- right align -->
-<div class="media">
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-  <div class="media-right">
-    <div class="avatarholder">e</div>
-  </div>
-</div>
-
- -

Loading

-

hack.css gives you a default loading element, but you can find more at CSS-only loaders.

-
-
-
-
- -
-
-
Loading in an alert box…
- 
<div class="loading"></div>
-
-<button class="btn btn-info btn-ghost">
-  Loading&hellip;
-  <span class="loading"></span>
-</button>
-
-<div class="alert alert-info">
-  <span class="loading"></span>
-  Loading in an alert box&hellip;
-</div>
-
- - - -
- - diff --git a/docs/dark.css b/docs/dark.css deleted file mode 100644 index 2f1a04c..0000000 --- a/docs/dark.css +++ /dev/null @@ -1 +0,0 @@ -.dark{color:#ccc}.dark,.dark pre{background-color:#000}.dark pre{padding:0;border:none}.dark pre code{color:#00bcd4}.dark h1 a,.dark h2 a,.dark h3 a,.dark h4 a,.dark h5 a{color:#ccc}.dark code,.dark strong{color:#fff}.dark code{font-weight:100}.dark table{color:#ccc}.dark table td,.dark table th{border-color:#444}.dark table tbody td:first-child{color:#fff}.dark .form-group label{color:#ccc;border-color:rgba(95,95,95,.78)}.dark .form-group.form-textarea label:after{background-color:#000}.dark .form-control{color:#ccc;border-color:rgba(95,95,95,.78)}.dark .form-control:focus{border-color:#ccc;color:#ccc}.dark textarea.form-control{color:#ccc}.dark .card{border-color:rgba(95,95,95,.78)}.dark .card .card-header{background-color:transparent;color:#ccc;border-bottom:1px solid rgba(95,95,95,.78)}.dark .btn.btn-ghost.btn-default{border-color:#ababab;color:#ababab}.dark .btn.btn-ghost.btn-default:focus,.dark .btn.btn-ghost.btn-default:hover{border-color:#9c9c9c;color:#9c9c9c;z-index:1}.dark .btn.btn-ghost.btn-default:focus,.dark .btn.btn-ghost.btn-default:hover{border-color:#e0e0e0;color:#e0e0e0}.dark .btn.btn-ghost.btn-primary:focus,.dark .btn.btn-ghost.btn-primary:hover{border-color:#64b5f6;color:#64b5f6}.dark .btn.btn-ghost.btn-success:focus,.dark .btn.btn-ghost.btn-success:hover{border-color:#81c784;color:#81c784}.dark .btn.btn-ghost.btn-info:focus,.dark .btn.btn-ghost.btn-info:hover{border-color:#4dd0e1;color:#4dd0e1}.dark .btn.btn-ghost.btn-error:focus,.dark .btn.btn-ghost.btn-error:hover{border-color:#e57373;color:#e57373}.dark .btn.btn-ghost.btn-warning:focus,.dark .btn.btn-ghost.btn-warning:hover{border-color:#ffb74d;color:#ffb74d}.dark .avatarholder,.dark .placeholder{background-color:transparent;border-color:#333}.dark .menu .menu-item{color:#ccc;border-color:rgba(95,95,95,.78)}.dark .menu .menu-item.active,.dark .menu .menu-item:hover{color:#fff;border-color:#ccc} \ No newline at end of file diff --git a/docs/dark.html b/docs/dark.html deleted file mode 100644 index f5ccd3d..0000000 --- a/docs/dark.html +++ /dev/null @@ -1,345 +0,0 @@ - - - - - - - dark mode of hack.css - - - - - - - -
-

« Back to home

-

Dark mode

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.

- -

Usage

<link rel="stylesheet" href="/path/to/hack.css" />
-<link rel="stylesheet" href="/path/to/dark.css" />
-<body class="hack dark">
-  ...
-</body>
-
- -

Components

-

<hr>

-
-

List

- -

Blockquote

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.
-

Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 
<form class="form">
-  <fieldset class="form-group">
-    <label for="username">USERNAME:</label>
-    <input id="username" type="text" placeholder="type your name..." class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="email">EMAIL:</label>
-    <input id="email" type="email" placeholder="" class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="country">COUNTRY:</label>
-    <select id="country" class="form-control">
-      <option>China</option>
-      <option>U.S.</option>
-      <option>U.K.</option>
-      <option>Japan</option>
-    </select>
-  </fieldset>
-  <fieldset class="form-group form-textarea">
-    <label for="message">MESSAGE:</label>
-    <textarea id="message" rows="5" class="form-control"></textarea>
-  </fieldset>
-  <div class="form-actions">
-    <button type="button" class="btn btn-primary btn-block">Submit</button>
-  </div>
-</form>
-
- -
Stateful Form
-
-
- - -
-
- - -
- 
.form-group.form-success
-.form-group.form-error
-.form-group.form-warning
-
- -
Help Block
-
-
- - -
In this format: +86 xxx xxx xxxxx
-
-
- - -
- 
<fieldset class="form-group form-success">
-  <label for="phone">Phone Number:</label>
-  <input id="phone" type="text" placeholder="" class="form-control">
-  <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
-</fieldset>
-
- -

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
editorspeedextensioninterface
sublime908070
atom608580
vscode806560
- -

Progress bar

-
-
- 
<!-- with only an arrow -->
-<div class="progress-bar">
-  <div class="progress-bar-filled" style="width: 40%"></div>
-</div>
-
-<!-- with a percentage showing above the arrow -->
-<div class="progress-bar progress-bar-show-percent">
-  <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
-</div>
-
- -

Buttons

-
- - - - - - -
-
- - - - - - -
-
- - 
<button class="btn btn-default">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-error">Error</button>
-
-<button class="btn btn-primary btn-ghost">Ghost Button</button>
-
-<button class="btn btn-primary btn-block">Block Level Button</button>
-
- -

Button group

-
-
- - - -
- 
<div class="btn-group">
-  <button class="btn btn-success btn-ghost">Left</button>
-  <button class="btn btn-success btn-ghost">Middle</button>
-  <button class="btn btn-success btn-ghost">Right</button>
-</div>
-
- -

Card

-
-
-
-
title
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
-
-
-
- 
<div class="card">
-  <header class="card-header">title</header>
-  <div class="card-content">
-    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
-  </div>
-</div>
-
- -

Alerts

-
-
Success message
-
Info message
-
Warning message
-
Error message
- 
<div class="alert alert-success">Success message</div>
-<div class="alert alert-info">Info message</div>
-<div class="alert alert-warning">Warning message</div>
-<div class="alert alert-error">Error message</div>
-
- -

Menu

-
-
-
-
item #1 -
»
item #2 -
»
item #3 -
»
-
-
- 
 <div class="menu">
-   <a class="menu-item">
-     item #1 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item active">
-     item #2 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item">
-     item #3 <div class="pull-right">»</div>
-   </a>
- </div>
-
- -

Media

-

This is useful if you intend to display a list of items, like the Twitter timeline.

-
-
-
-
e
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
e
-
- 
<!-- left align -->
-<div class="media">
-  <div class="media-left">
-    <div class="avatarholder">e</div>
-  </div>
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-</div>
-
-<!-- right align -->
-<div class="media">
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-  <div class="media-right">
-    <div class="avatarholder">e</div>
-  </div>
-</div>
-
- -

Loading

-

hack.css gives you a default loading element, but you can find more at CSS-only loaders.

-
-
-
-
- -
-
-
Loading in an alert box…
- 
<div class="loading"></div>
-
-<button class="btn btn-info btn-ghost">
-  Loading&hellip;
-  <span class="loading"></span>
-</button>
-
-<div class="alert alert-info">
-  <span class="loading"></span>
-  Loading in an alert box&hellip;
-</div>
-
- - - -
- - diff --git a/docs/github.html b/docs/github.html deleted file mode 100644 index fd12eba..0000000 --- a/docs/github.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/hack-btf.css b/docs/hack-btf.css deleted file mode 100644 index a7ad263..0000000 --- a/docs/hack-btf.css +++ /dev/null @@ -1,940 +0,0 @@ -html { - font-size: 12px -} - -* { - box-sizing: border-box; - text-rendering: geometricPrecision -} - -body { - font-size: 1rem; - line-height: 1.5rem; - margin: 0; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; - word-wrap: break-word -} - -h1, -h2, -h3, -h4, -h5, -h6 { - line-height: 1.3em -} - -fieldset { - border: none; - padding: 0; - margin: 0 -} - -pre { - padding: 2rem; - margin: 1.75rem 0; - background-color: #fff; - border: 1px solid #ccc; - overflow: auto -} - -code[class*=language-], -pre[class*=language-], -pre code { - font-weight: 100; - text-shadow: none; - margin: 1.75rem 0 -} - -a { - cursor: pointer; - color: #ff2e88; - text-decoration: none; - border-bottom: 1px solid #ff2e88 -} - -a:hover { - background-color: #ff2e88; - color: #fff -} - -.grid { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap -} - -.grid.\-top { - -ms-flex-align: start; - align-items: flex-start -} - -.grid.\-middle { - -ms-flex-align: center; - align-items: center -} - -.grid.\-bottom { - -ms-flex-align: end; - align-items: flex-end -} - -.grid.\-stretch { - -ms-flex-align: stretch; - align-items: stretch -} - -.grid.\-baseline { - -ms-flex-align: baseline; - align-items: baseline -} - -.grid.\-left { - -ms-flex-pack: start; - justify-content: flex-start -} - -.grid.\-center { - -ms-flex-pack: center; - justify-content: center -} - -.grid.\-right { - -ms-flex-pack: end; - justify-content: flex-end -} - -.grid.\-between { - -ms-flex-pack: justify; - justify-content: space-between -} - -.grid.\-around { - -ms-flex-pack: distribute; - justify-content: space-around -} - -.cell { - -ms-flex: 1; - flex: 1; - box-sizing: border-box -} - -@media screen and (min-width:768px) { - .cell.\-1of12 { - -ms-flex: 0 0 8.33333%; - flex: 0 0 8.33333% - } - - .cell.\-2of12 { - -ms-flex: 0 0 16.66667%; - flex: 0 0 16.66667% - } - - .cell.\-3of12 { - -ms-flex: 0 0 25%; - flex: 0 0 25% - } - - .cell.\-4of12 { - -ms-flex: 0 0 33.33333%; - flex: 0 0 33.33333% - } - - .cell.\-5of12 { - -ms-flex: 0 0 41.66667%; - flex: 0 0 41.66667% - } - - .cell.\-6of12 { - -ms-flex: 0 0 50%; - flex: 0 0 50% - } - - .cell.\-7of12 { - -ms-flex: 0 0 58.33333%; - flex: 0 0 58.33333% - } - - .cell.\-8of12 { - -ms-flex: 0 0 66.66667%; - flex: 0 0 66.66667% - } - - .cell.\-9of12 { - -ms-flex: 0 0 75%; - flex: 0 0 75% - } - - .cell.\-10of12 { - -ms-flex: 0 0 83.33333%; - flex: 0 0 83.33333% - } - - .cell.\-11of12 { - -ms-flex: 0 0 91.66667%; - flex: 0 0 91.66667% - } -} - -@media screen and (max-width:768px) { - .grid { - -ms-flex-direction: column; - flex-direction: column - } - - .cell { - -ms-flex: 0 0 auto; - flex: 0 0 auto - } -} - -.hack, -.hack blockquote, -.hack code, -.hack em, -.hack h1, -.hack h2, -.hack h3, -.hack h4, -.hack h5, -.hack h6, -.hack strong { - font-size: 1rem; - font-style: normal; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif -} - -.hack blockquote, -.hack code, -.hack em, -.hack strong { - line-height: 20px -} - -.hack blockquote, -.hack code, -.hack footer, -.hack h1, -.hack h2, -.hack h3, -.hack h4, -.hack h5, -.hack h6, -.hack header, -.hack li, -.hack ol, -.hack p, -.hack section, -.hack ul { - float: none; - margin: 0; - padding: 0 -} - -.hack blockquote, -.hack h1, -.hack ol, -.hack p, -.hack ul { - margin-top: 20px; - margin-bottom: 20px -} - -.hack h1 { - position: relative; - display: inline-block; - display: table-cell; - padding: 20px 0 30px; - margin: 0; - overflow: hidden -} - -.hack h1:after { - content: "===================================================================================================="; - position: absolute; - bottom: 10px; - left: 0 -} - -.hack h1+* { - margin-top: 0 -} - -.hack h2, -.hack h3, -.hack h4, -.hack h5, -.hack h6 { - position: relative; - margin-bottom: 1.75rem -} - -.hack h2:before, -.hack h3:before, -.hack h4:before, -.hack h5:before, -.hack h6:before { - display: inline -} - -.hack h2:before { - content: "## " -} - -.hack h3:before { - content: "### " -} - -.hack h4:before { - content: "#### " -} - -.hack h5:before { - content: "##### " -} - -.hack h6:before { - content: "###### " -} - -.hack li { - position: relative; - display: block; - padding-left: 20px -} - -.hack li:after { - position: absolute; - top: 0; - left: 0 -} - -.hack ul>li:after { - content: "-" -} - -.hack ol { - counter-reset: a -} - -.hack ol>li:after { - content: counter(a) "."; - counter-increment: a -} - -.hack blockquote { - position: relative; - padding-left: 17px; - padding-left: 2ch; - overflow: hidden -} - -.hack blockquote:after { - content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>"; - white-space: pre; - position: absolute; - top: 0; - left: 0; - line-height: 20px -} - -.hack em:after, -.hack em:before { - content: "*"; - display: inline -} - -.hack pre code:after, -.hack pre code:before { - content: "" -} - -.hack code { - font-weight: 700 -} - -.hack code:after, -.hack code:before { - content: "`"; - display: inline -} - -.hack hr { - position: relative; - height: 20px; - overflow: hidden; - border: 0; - margin: 20px 0 -} - -.hack hr:after { - content: "----------------------------------------------------------------------------------------------------"; - position: absolute; - top: 0; - left: 0; - line-height: 20px; - width: 100%; - word-wrap: break-word -} - -@-moz-document url-prefix() { - .hack h1 { - display: block - } -} - -.hack-ones ol>li:after { - content: "1." -} - -p { - margin: 0 0 1.75rem -} - -.container { - max-width: 70rem -} - -.container, -.container-fluid { - margin: 0 auto; - padding: 0 1rem -} - -.inner { - padding: 1rem -} - -.inner2x { - padding: 2rem -} - -.pull-left { - float: left -} - -.pull-right { - float: right -} - -.progress-bar { - height: 8px; - opacity: .8; - background-color: #ccc; - margin-top: 12px -} - -.progress-bar.progress-bar-show-percent { - margin-top: 38px -} - -.progress-bar-filled { - background-color: gray; - height: 100%; - transition: width .3s ease; - position: relative; - width: 0 -} - -.progress-bar-filled:before { - content: ""; - border: 6px solid transparent; - border-top-color: gray; - position: absolute; - top: -12px; - right: -6px -} - -.progress-bar-filled:after { - color: gray; - content: attr(data-filled); - display: block; - font-size: 12px; - white-space: nowrap; - position: absolute; - border: 6px solid transparent; - top: -38px; - right: 0; - -ms-transform: translateX(50%); - transform: translateX(50%) -} - -table { - width: 100%; - border-collapse: collapse; - margin: 1.75rem 0; - color: #778087 -} - -table td, -table th { - vertical-align: top; - border: 1px solid #ccc; - line-height: 15px; - padding: 10px -} - -table thead th { - font-size: 10px -} - -table tbody td:first-child { - font-weight: 700; - color: #333 -} - -.form { - width: 30rem -} - -.form-group { - margin-bottom: 1.75rem; - overflow: auto -} - -.form-group label { - border-bottom: 2px solid #ccc; - color: #333; - width: 10rem; - display: inline-block; - height: 38px; - line-height: 38px; - padding: 0; - float: left; - position: relative -} - -.form-group.form-success label { - color: #4caf50 !important; - border-color: #4caf50 !important -} - -.form-group.form-warning label { - color: #ff9800 !important; - border-color: #ff9800 !important -} - -.form-group.form-error label { - color: #f44336 !important; - border-color: #f44336 !important -} - -.form-control { - outline: none; - border: none; - border-bottom: 2px solid #ccc; - padding: .5rem 0; - width: 20rem; - height: 38px; - background-color: transparent -} - -.form-control:focus { - border-color: #555 -} - -.form-group.form-textarea label:after { - position: absolute; - content: ""; - width: 2px; - background-color: #fff; - right: -2px; - top: 0; - bottom: 0 -} - -textarea.form-control { - height: auto; - resize: none; - padding: 1rem 0; - border-bottom: 2px solid #ccc; - border-left: 2px solid #ccc; - padding: .5rem -} - -select.form-control { - border-radius: 0; - background-color: transparent; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none -} - -.help-block { - color: #999; - margin-top: .5rem -} - -.form-actions { - margin-bottom: 1.75rem -} - -.btn { - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - cursor: pointer; - outline: none; - padding: .65rem 2rem; - font-size: 1rem; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - position: relative; - z-index: 1 -} - -.btn:active { - box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12) -} - -.btn.btn-ghost { - border-color: #757575; - color: #757575; - background-color: transparent -} - -.btn.btn-ghost:focus, -.btn.btn-ghost:hover { - border-color: #424242; - color: #424242; - z-index: 2 -} - -.btn.btn-ghost:hover { - background-color: transparent -} - -.btn-block { - width: 100%; - display: -ms-flexbox; - display: flex -} - -.btn-default { - color: #fff; - background-color: #e0e0e0; - border: 1px solid #e0e0e0; - color: #333 -} - -.btn-default:focus:not(.btn-ghost), -.btn-default:hover { - background-color: #dcdcdc; - border-color: #dcdcdc -} - -.btn-success { - color: #fff; - background-color: #4caf50; - border: 1px solid #4caf50 -} - -.btn-success:focus:not(.btn-ghost), -.btn-success:hover { - background-color: #43a047; - border-color: #43a047 -} - -.btn-success.btn-ghost { - border-color: #4caf50; - color: #4caf50 -} - -.btn-success.btn-ghost:focus, -.btn-success.btn-ghost:hover { - border-color: #388e3c; - color: #388e3c; - z-index: 2 -} - -.btn-error { - color: #fff; - background-color: #f44336; - border: 1px solid #f44336 -} - -.btn-error:focus:not(.btn-ghost), -.btn-error:hover { - background-color: #e53935; - border-color: #e53935 -} - -.btn-error.btn-ghost { - border-color: #f44336; - color: #f44336 -} - -.btn-error.btn-ghost:focus, -.btn-error.btn-ghost:hover { - border-color: #d32f2f; - color: #d32f2f; - z-index: 2 -} - -.btn-warning { - color: #fff; - background-color: #ff9800; - border: 1px solid #ff9800 -} - -.btn-warning:focus:not(.btn-ghost), -.btn-warning:hover { - background-color: #fb8c00; - border-color: #fb8c00 -} - -.btn-warning.btn-ghost { - border-color: #ff9800; - color: #ff9800 -} - -.btn-warning.btn-ghost:focus, -.btn-warning.btn-ghost:hover { - border-color: #f57c00; - color: #f57c00; - z-index: 2 -} - -.btn-info { - color: #fff; - background-color: #00bcd4; - border: 1px solid #00bcd4 -} - -.btn-info:focus:not(.btn-ghost), -.btn-info:hover { - background-color: #00acc1; - border-color: #00acc1 -} - -.btn-info.btn-ghost { - border-color: #00bcd4; - color: #00bcd4 -} - -.btn-info.btn-ghost:focus, -.btn-info.btn-ghost:hover { - border-color: #0097a7; - color: #0097a7; - z-index: 2 -} - -.btn-primary { - color: #fff; - background-color: #2196f3; - border: 1px solid #2196f3 -} - -.btn-primary:focus:not(.btn-ghost), -.btn-primary:hover { - background-color: #1e88e5; - border-color: #1e88e5 -} - -.btn-primary.btn-ghost { - border-color: #2196f3; - color: #2196f3 -} - -.btn-primary.btn-ghost:focus, -.btn-primary.btn-ghost:hover { - border-color: #1976d2; - color: #1976d2; - z-index: 2 -} - -.btn-group { - overflow: auto -} - -.btn-group .btn { - float: left -} - -.btn-group .btn-ghost:not(:first-child) { - margin-left: -1px -} - -.card { - border: 1px solid #ccc -} - -.card .card-header { - color: #333; - text-align: center; - background-color: #ddd; - padding: .5rem 0 -} - -.alert { - color: #ccc; - padding: 1rem; - border: 1px solid #ccc; - margin-bottom: 1.75rem -} - -.alert-success { - color: #4caf50; - border-color: #4caf50 -} - -.alert-error { - color: #f44336; - border-color: #f44336 -} - -.alert-info { - color: #00bcd4; - border-color: #00bcd4 -} - -.alert-warning { - color: #ff9800; - border-color: #ff9800 -} - -.media:not(:last-child) { - margin-bottom: 1.25rem -} - -.media-left { - padding-right: 1rem -} - -.media-left, -.media-right { - display: table-cell; - vertical-align: top -} - -.media-right { - padding-left: 1rem -} - -.media-body { - display: table-cell; - vertical-align: top -} - -.media-heading { - font-size: 1.16667rem; - font-weight: 700 -} - -.media-content { - margin-top: .3rem -} - -.avatarholder, -.placeholder { - background-color: #f0f0f0; - text-align: center; - color: #b9b9b9; - font-size: 1rem; - border: 1px solid #f0f0f0 -} - -.avatarholder { - width: 48px; - height: 48px; - line-height: 46px; - font-size: 2rem; - background-size: cover; - background-position: 50%; - background-repeat: no-repeat -} - -.avatarholder.rounded { - border-radius: 33px -} - -.loading { - display: inline-block; - content: " "; - height: 20px; - width: 20px; - margin: 0 .5rem; - animation: a .6s infinite linear; - border: 2px solid #e91e63; - border-right-color: transparent; - border-radius: 50% -} - -.btn .loading { - margin-bottom: 0; - width: 14px; - height: 14px -} - -.btn div.loading { - float: left -} - -.alert .loading { - margin-bottom: -5px -} - -@keyframes a { - 0% { - transform: rotate(0deg) - } - - to { - transform: rotate(1turn) - } -} - -.menu { - width: 100% -} - -.menu .menu-item { - display: block; - color: #616161; - border-color: #616161 -} - -.menu .menu-item.active, -.menu .menu-item:hover { - color: #000; - border-color: #000; - background-color: transparent -} - -@media screen and (max-width:768px) { - .form-group label { - display: block; - border-bottom: none; - width: 100% - } - - .form-group.form-textarea label:after { - display: none - } - - .form-control { - width: 100% - } - - textarea.form-control { - border-left: none; - padding: .5rem 0 - } - - pre::-webkit-scrollbar { - height: 3px - } -} - -@media screen and (max-width:480px) { - .form { - width: 100% - } -} diff --git a/docs/hack.css b/docs/hack.css deleted file mode 100644 index 661a838..0000000 --- a/docs/hack.css +++ /dev/null @@ -1 +0,0 @@ -html{font-size:12px}*{box-sizing:border-box;text-rendering:geometricPrecision}body{font-size:1rem;line-height:1.5rem;margin:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;word-wrap:break-word}h1,h2,h3,h4,h5,h6{line-height:1.3em}fieldset{border:none;padding:0;margin:0}pre{padding:2rem;margin:1.75rem 0;background-color:#fff;border:1px solid #ccc;overflow:auto}code[class*=language-],pre[class*=language-],pre code{font-weight:100;text-shadow:none;margin:1.75rem 0}a{cursor:pointer;color:#ff2e88;text-decoration:none;border-bottom:1px solid #ff2e88}a:hover{background-color:#ff2e88;color:#fff}.grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid.\-top{-ms-flex-align:start;align-items:flex-start}.grid.\-middle{-ms-flex-align:center;align-items:center}.grid.\-bottom{-ms-flex-align:end;align-items:flex-end}.grid.\-stretch{-ms-flex-align:stretch;align-items:stretch}.grid.\-baseline{-ms-flex-align:baseline;align-items:baseline}.grid.\-left{-ms-flex-pack:start;justify-content:flex-start}.grid.\-center{-ms-flex-pack:center;justify-content:center}.grid.\-right{-ms-flex-pack:end;justify-content:flex-end}.grid.\-between{-ms-flex-pack:justify;justify-content:space-between}.grid.\-around{-ms-flex-pack:distribute;justify-content:space-around}.cell{-ms-flex:1;flex:1;box-sizing:border-box}@media screen and (min-width:768px){.cell.\-1of12{-ms-flex:0 0 8.33333%;flex:0 0 8.33333%}.cell.\-2of12{-ms-flex:0 0 16.66667%;flex:0 0 16.66667%}.cell.\-3of12{-ms-flex:0 0 25%;flex:0 0 25%}.cell.\-4of12{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%}.cell.\-5of12{-ms-flex:0 0 41.66667%;flex:0 0 41.66667%}.cell.\-6of12{-ms-flex:0 0 50%;flex:0 0 50%}.cell.\-7of12{-ms-flex:0 0 58.33333%;flex:0 0 58.33333%}.cell.\-8of12{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%}.cell.\-9of12{-ms-flex:0 0 75%;flex:0 0 75%}.cell.\-10of12{-ms-flex:0 0 83.33333%;flex:0 0 83.33333%}.cell.\-11of12{-ms-flex:0 0 91.66667%;flex:0 0 91.66667%}}@media screen and (max-width:768px){.grid{-ms-flex-direction:column;flex-direction:column}.cell{-ms-flex:0 0 auto;flex:0 0 auto}}.hack,.hack blockquote,.hack code,.hack em,.hack h1,.hack h2,.hack h3,.hack h4,.hack h5,.hack h6,.hack strong{font-size:1rem;font-style:normal;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif}.hack blockquote,.hack code,.hack em,.hack strong{line-height:20px}.hack blockquote,.hack code,.hack footer,.hack h1,.hack h2,.hack h3,.hack h4,.hack h5,.hack h6,.hack header,.hack li,.hack ol,.hack p,.hack section,.hack ul{float:none;margin:0;padding:0}.hack blockquote,.hack h1,.hack ol,.hack p,.hack ul{margin-top:20px;margin-bottom:20px}.hack h1{position:relative;display:inline-block;display:table-cell;padding:20px 0 30px;margin:0;overflow:hidden}.hack h1:after{content:"====================================================================================================";position:absolute;bottom:10px;left:0}.hack h1+*{margin-top:0}.hack h2,.hack h3,.hack h4,.hack h5,.hack h6{position:relative;margin-bottom:1.75rem}.hack h2:before,.hack h3:before,.hack h4:before,.hack h5:before,.hack h6:before{display:inline}.hack h2:before{content:"## "}.hack h3:before{content:"### "}.hack h4:before{content:"#### "}.hack h5:before{content:"##### "}.hack h6:before{content:"###### "}.hack li{position:relative;display:block;padding-left:20px}.hack li:after{position:absolute;top:0;left:0}.hack ul>li:after{content:"-"}.hack ol{counter-reset:a}.hack ol>li:after{content:counter(a) ".";counter-increment:a}.hack blockquote{position:relative;padding-left:17px;padding-left:2ch;overflow:hidden}.hack blockquote:after{content:">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";white-space:pre;position:absolute;top:0;left:0;line-height:20px}.hack em:after,.hack em:before{content:"*";display:inline}.hack pre code:after,.hack pre code:before{content:""}.hack code{font-weight:700}.hack code:after,.hack code:before{content:"`";display:inline}.hack hr{position:relative;height:20px;overflow:hidden;border:0;margin:20px 0}.hack hr:after{content:"----------------------------------------------------------------------------------------------------";position:absolute;top:0;left:0;line-height:20px;width:100%;word-wrap:break-word}@-moz-document url-prefix(){.hack h1{display:block}}.hack-ones ol>li:after{content:"1."}p{margin:0 0 1.75rem}.container{max-width:70rem}.container,.container-fluid{margin:0 auto;padding:0 1rem}.inner{padding:1rem}.inner2x{padding:2rem}.pull-left{float:left}.pull-right{float:right}.progress-bar{height:8px;opacity:.8;background-color:#ccc;margin-top:12px}.progress-bar.progress-bar-show-percent{margin-top:38px}.progress-bar-filled{background-color:gray;height:100%;transition:width .3s ease;position:relative;width:0}.progress-bar-filled:before{content:"";border:6px solid transparent;border-top-color:gray;position:absolute;top:-12px;right:-6px}.progress-bar-filled:after{color:gray;content:attr(data-filled);display:block;font-size:12px;white-space:nowrap;position:absolute;border:6px solid transparent;top:-38px;right:0;-ms-transform:translateX(50%);transform:translateX(50%)}table{width:100%;border-collapse:collapse;margin:1.75rem 0;color:#778087}table td,table th{vertical-align:top;border:1px solid #ccc;line-height:15px;padding:10px}table thead th{font-size:10px}table tbody td:first-child{font-weight:700;color:#333}.form{width:30rem}.form-group{margin-bottom:1.75rem;overflow:auto}.form-group label{border-bottom:2px solid #ccc;color:#333;width:10rem;display:inline-block;height:38px;line-height:38px;padding:0;float:left;position:relative}.form-group.form-success label{color:#4caf50!important;border-color:#4caf50!important}.form-group.form-warning label{color:#ff9800!important;border-color:#ff9800!important}.form-group.form-error label{color:#f44336!important;border-color:#f44336!important}.form-control{outline:none;border:none;border-bottom:2px solid #ccc;padding:.5rem 0;width:20rem;height:38px;background-color:transparent}.form-control:focus{border-color:#555}.form-group.form-textarea label:after{position:absolute;content:"";width:2px;background-color:#fff;right:-2px;top:0;bottom:0}textarea.form-control{height:auto;resize:none;padding:1rem 0;border-bottom:2px solid #ccc;border-left:2px solid #ccc;padding:.5rem}select.form-control{border-radius:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none}.help-block{color:#999;margin-top:.5rem}.form-actions{margin-bottom:1.75rem}.btn{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;outline:none;padding:.65rem 2rem;font-size:1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;z-index:1}.btn:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}.btn.btn-ghost{border-color:#757575;color:#757575;background-color:transparent}.btn.btn-ghost:focus,.btn.btn-ghost:hover{border-color:#424242;color:#424242;z-index:2}.btn.btn-ghost:hover{background-color:transparent}.btn-block{width:100%;display:-ms-flexbox;display:flex}.btn-default{color:#fff;background-color:#e0e0e0;border:1px solid #e0e0e0;color:#333}.btn-default:focus:not(.btn-ghost),.btn-default:hover{background-color:#dcdcdc;border-color:#dcdcdc}.btn-success{color:#fff;background-color:#4caf50;border:1px solid #4caf50}.btn-success:focus:not(.btn-ghost),.btn-success:hover{background-color:#43a047;border-color:#43a047}.btn-success.btn-ghost{border-color:#4caf50;color:#4caf50}.btn-success.btn-ghost:focus,.btn-success.btn-ghost:hover{border-color:#388e3c;color:#388e3c;z-index:2}.btn-error{color:#fff;background-color:#f44336;border:1px solid #f44336}.btn-error:focus:not(.btn-ghost),.btn-error:hover{background-color:#e53935;border-color:#e53935}.btn-error.btn-ghost{border-color:#f44336;color:#f44336}.btn-error.btn-ghost:focus,.btn-error.btn-ghost:hover{border-color:#d32f2f;color:#d32f2f;z-index:2}.btn-warning{color:#fff;background-color:#ff9800;border:1px solid #ff9800}.btn-warning:focus:not(.btn-ghost),.btn-warning:hover{background-color:#fb8c00;border-color:#fb8c00}.btn-warning.btn-ghost{border-color:#ff9800;color:#ff9800}.btn-warning.btn-ghost:focus,.btn-warning.btn-ghost:hover{border-color:#f57c00;color:#f57c00;z-index:2}.btn-info{color:#fff;background-color:#00bcd4;border:1px solid #00bcd4}.btn-info:focus:not(.btn-ghost),.btn-info:hover{background-color:#00acc1;border-color:#00acc1}.btn-info.btn-ghost{border-color:#00bcd4;color:#00bcd4}.btn-info.btn-ghost:focus,.btn-info.btn-ghost:hover{border-color:#0097a7;color:#0097a7;z-index:2}.btn-primary{color:#fff;background-color:#2196f3;border:1px solid #2196f3}.btn-primary:focus:not(.btn-ghost),.btn-primary:hover{background-color:#1e88e5;border-color:#1e88e5}.btn-primary.btn-ghost{border-color:#2196f3;color:#2196f3}.btn-primary.btn-ghost:focus,.btn-primary.btn-ghost:hover{border-color:#1976d2;color:#1976d2;z-index:2}.btn-group{overflow:auto}.btn-group .btn{float:left}.btn-group .btn-ghost:not(:first-child){margin-left:-1px}.card{border:1px solid #ccc}.card .card-header{color:#333;text-align:center;background-color:#ddd;padding:.5rem 0}.alert{color:#ccc;padding:1rem;border:1px solid #ccc;margin-bottom:1.75rem}.alert-success{color:#4caf50;border-color:#4caf50}.alert-error{color:#f44336;border-color:#f44336}.alert-info{color:#00bcd4;border-color:#00bcd4}.alert-warning{color:#ff9800;border-color:#ff9800}.media:not(:last-child){margin-bottom:1.25rem}.media-left{padding-right:1rem}.media-left,.media-right{display:table-cell;vertical-align:top}.media-right{padding-left:1rem}.media-body{display:table-cell;vertical-align:top}.media-heading{font-size:1.16667rem;font-weight:700}.media-content{margin-top:.3rem}.avatarholder,.placeholder{background-color:#f0f0f0;text-align:center;color:#b9b9b9;font-size:1rem;border:1px solid #f0f0f0}.avatarholder{width:48px;height:48px;line-height:46px;font-size:2rem;background-size:cover;background-position:50%;background-repeat:no-repeat}.avatarholder.rounded{border-radius:33px}.loading{display:inline-block;content:" ";height:20px;width:20px;margin:0 .5rem;animation:a .6s infinite linear;border:2px solid #e91e63;border-right-color:transparent;border-radius:50%}.btn .loading{margin-bottom:0;width:14px;height:14px}.btn div.loading{float:left}.alert .loading{margin-bottom:-5px}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.menu{width:100%}.menu .menu-item{display:block;color:#616161;border-color:#616161}.menu .menu-item.active,.menu .menu-item:hover{color:#000;border-color:#000;background-color:transparent}@media screen and (max-width:768px){.form-group label{display:block;border-bottom:none;width:100%}.form-group.form-textarea label:after{display:none}.form-control{width:100%}textarea.form-control{border-left:none;padding:.5rem 0}pre::-webkit-scrollbar{height:3px}}@media screen and (max-width:480px){.form{width:100%}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index b8a1d3a..5256d58 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,452 +1,464 @@ - - - - - hack.css - - - - - -
-

hack.css - dead simple css framework

-

As you can see, this website is proudly built using hack.css.

-
New! - dark, - dark-grey, - solarized-dark and - standard modes are now available! -
- -

Use cases

-

hack.css is perfect for the homepage of your open-source projects! happy <coding> !

-

How to use?

-

Install via npm by running npm install -S hack and load it with your preferred pre-processor.

-

You can also simply hot-link the url of the css file.

-

The last step is to add the .hack class to your body element.


-
+ + + + + rstrtt.css + + + -

User guide

-

Basic

-

Use .container to centralize the main content.

-

Use flexbox to make layouts.

-
-
-
-
4
-
-
-
4
-
-
-
4
-
-
-
-
-
4
-
-
-
8
-
-
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
+ +

rstrtt.css

+

User guide

+

Basic

+

Use .container to centralize the main content.

+

Use flexbox to make layouts.

+
+
+
+
4
+
+
+
4
-

.grid modifiers

+
+
4
+
+
+
+
+
4
+
+
+
8
+
+
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+

.grid modifiers

+ +

.cell modifiers

+ +

Components

+

<hr>

+
+

List

+ +

Blockquote

+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas + facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa + expedita.
+

Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ 

+  <form class="form">
+    <fieldset class="form-group">
+      <label for="username">USERNAME:</label>
+      <input id="username" type="text" placeholder="type your name..." class="form-control">
+    </fieldset>
+    <fieldset class="form-group">
+      <label for="email">EMAIL:</label>
+      <input id="email" type="email" placeholder="" class="form-control">
+    </fieldset>
+    <fieldset class="form-group">
+      <label for="country">COUNTRY:</label>
+      <select id="country" class="form-control">
+        <option>China</option>
+        <option>U.S.</option>
+        <option>U.K.</option>
+        <option>Japan</option>
+      </select>
+    </fieldset>
+    <fieldset class="form-group form-textarea">
+      <label for="message">MESSAGE:</label>
+      <textarea id="message" rows="5" class="form-control"></textarea>
+    </fieldset>
+    <div class="form-actions">
+      <button type="button" class="btn btn-primary btn-block">Submit</button>
+    </div>
+  </form>
+
-
Stateful Form
-
-
- - -
-
- - -
- 
.form-group.form-success
-.form-group.form-error
-.form-group.form-warning
-
+
Stateful Form
+
+
+ + +
+
+ + +
+
+ 
.form-group.form-success
+  .form-group.form-error
+  .form-group.form-warning
+
-
Help Block
-
-
- - -
In this format: +86 xxx xxx xxxxx
-
-
- - -
- 
<fieldset class="form-group form-success">
+  
Help Block

+  

+    

+      
+      
+      
In this format: +86 xxx xxx xxxxx

+    

+    

+      
+      
+    

+  

+  

+  <fieldset class="form-group form-success">
   <label for="phone">Phone Number:</label>
   <input id="phone" type="text" placeholder="" class="form-control">
   <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
-</fieldset>
-

+  </fieldset>
+
-

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
editorspeedextensioninterface
sublime908070
atom608580
vscode806560
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
editorspeedextensioninterface
sublime908070
atom608580
vscode806560
-

Progress bar

-
-
-
+

Progress bar

+
+
+
-
<!-- with only an arrow -->
-<div class="progress-bar">
-  <div class="progress-bar-filled" style="width: 40%"></div>
-</div>
+  

+  <!-- with only an arrow -->
+  <div class="progress-bar">
+    <div class="progress-bar-filled" style="width: 40%"></div>
+  </div>
 
-<!-- with a percentage showing above the arrow -->
-<div class="progress-bar progress-bar-show-percent">
-  <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
-</div>
-

+  <!-- with a percentage showing above the arrow -->
+  <div class="progress-bar progress-bar-show-percent">
+    <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
+  </div>
+
-

Buttons

-
- - - - - - -
-
- - - - - - -
-
- - 
<button class="btn btn-default">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-error">Error</button>
+  
Buttons

+  

+    
+    
+    
+    
+    
+    
+  

+  

+    
+    
+    
+    
+    
+    
+  

+  

+    
+  

+  

+  <button class="btn btn-default">Default</button>
+  <button class="btn btn-primary">Primary</button>
+  <button class="btn btn-success">Success</button>
+  <button class="btn btn-info">Info</button>
+  <button class="btn btn-warning">Warning</button>
+  <button class="btn btn-error">Error</button>
 
-<button class="btn btn-primary btn-ghost">Ghost Button</button>
+  <button class="btn btn-primary btn-ghost">Ghost Button</button>
 
-<button class="btn btn-primary btn-block">Block Level Button</button>
-

+  <button class="btn btn-primary btn-block">Block Level Button</button>
+
-

Button group

-
-
- - - -
- 
<div class="btn-group">
-  <button class="btn btn-success btn-ghost">Left</button>
-  <button class="btn btn-success btn-ghost">Middle</button>
-  <button class="btn btn-success btn-ghost">Right</button>
-</div>
+  
Button group

+  

+    

+      
+      
+      
+    

+  

+  

+  <div class="btn-group">
+    <button class="btn btn-success btn-ghost">Left</button>
+    <button class="btn btn-success btn-ghost">Middle</button>
+    <button class="btn btn-success btn-ghost">Right</button>
+  </div>
 

 
-      
Card

-      

-        

-          

-            
title

-            

-              
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.

-            

+  
Card

+  

+    

+      

+        
title

+        

+          
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in
+            doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
           

         

-      
<div class="card">
-  <header class="card-header">title</header>
-  <div class="card-content">
-    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
+      

+    

+  

+  

+  <div class="card">
+    <header class="card-header">title</header>
+    <div class="card-content">
+      <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
+    </div>
   </div>
-</div>
-

-
-      
Alerts

-      

-        
Success message

-        
Info message

-        
Warning message

-        
Error message

-      
<div class="alert alert-success">Success message</div>
-<div class="alert alert-info">Info message</div>
-<div class="alert alert-warning">Warning message</div>
-<div class="alert alert-error">Error message</div>
-

+
-

Menu

-
-
-
-
item #1 -
»
item #2 -
»
item #3 -
»
-
-
- 
 <div class="menu">
-   <a class="menu-item">
-     item #1 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item active">
-     item #2 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item">
-     item #3 <div class="pull-right">»</div>
-   </a>
- </div>
-
+

Alerts

+
+
Success message
+
Info message
+
Warning message
+
Error message
+
+ 

+  <div class="alert alert-success">Success message</div>
+  <div class="alert alert-info">Info message</div>
+  <div class="alert alert-warning">Warning message</div>
+  <div class="alert alert-error">Error message</div>
+
-

Media

-

This is useful if you intend to display a list of items, like the Twitter timeline.

-
-
-
-
e
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
+

Menu

+
+
+
+
item #1 +
»
item #2 +
»
item #3 +
»
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
e
-
- 
<!-- left align -->
-<div class="media">
-  <div class="media-left">
-    <div class="avatarholder">e</div>
-  </div>
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
+
+
+ 

+  <div class="menu">
+    <a class="menu-item">
+      item #1 <div class="pull-right">»</div>
+    </a>
+    <a class="menu-item active">
+      item #2 <div class="pull-right">»</div>
+    </a>
+    <a class="menu-item">
+      item #3 <div class="pull-right">»</div>
+    </a>
   </div>
-</div>
+
-<!-- right align --> -<div class="media"> - <div class="media-body"> - <div class="media-heading">EGOIST @egoist</div> - <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div> +

Media

+

This is useful if you intend to display a list of items, like the Twitter timeline.

+
+
+
+
e
+
+
+
EGOIST @egoist
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, + doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi + molestias alias et incidunt est.
+
+
+
+
+
+
EGOIST @egoist
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, + doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi + molestias alias et incidunt est.
+
+
+
e
+
+
+ 

+  <!-- left align -->
+  <div class="media">
+    <div class="media-left">
+      <div class="avatarholder">e</div>
+    </div>
+    <div class="media-body">
+      <div class="media-heading">EGOIST @egoist</div>
+      <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
+    </div>
   </div>
-  <div class="media-right">
-    <div class="avatarholder">e</div>
+
+  <!-- right align -->
+  <div class="media">
+    <div class="media-body">
+      <div class="media-heading">EGOIST @egoist</div>
+      <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
+    </div>
+    <div class="media-right">
+      <div class="avatarholder">e</div>
+    </div>
   </div>
-</div>
-
+ -

Loading

-

hack.css gives you a default loading element, but you can find more at CSS-only loaders.

-
-
-
-
- -
-
-
Loading in an alert box…
- 
<div class="loading"></div>
+  
 Loading

+  
hack.css gives you a default loading element, but you can find more at CSS-only loaders.

+  

+    

+  

+  

+    
+  

+  

+    
Loading in an alert box…

+  

+  

+  <div class="loading"></div>
 
-<button class="btn btn-info btn-ghost">
-  Loading&hellip;
-  <span class="loading"></span>
-</button>
+  <button class="btn btn-info btn-ghost">
+    Loading&hellip;
+    <span class="loading"></span>
+  </button>
 
-<div class="alert alert-info">
-  <span class="loading"></span>
-  Loading in an alert box&hellip;
-</div>
-

+  <div class="alert alert-info">
+    <span class="loading"></span>
+    Loading in an alert box&hellip;
+  </div>
+
+
+ + -
Version 0.8.0 Build 1490883343
-
- - - diff --git a/docs/rstrtt.css b/docs/rstrtt.css new file mode 100644 index 0000000..fd7d539 --- /dev/null +++ b/docs/rstrtt.css @@ -0,0 +1,2 @@ +html{font-size:12px}*{text-rendering:geometricPrecision;-webkit-box-sizing:border-box;box-sizing:border-box}body{word-wrap:break-word;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;line-height:1.5rem;margin:0}h1,h2,h3,h4,h5,h6{line-height:1.3em}fieldset{border:none;margin:0;padding:0}pre{background-color:#fff;border:1px solid #ccc;margin:1.75rem 0;overflow:auto;padding:2rem}code[class*=language-],pre[class*=language-],pre code{font-weight:100;margin:1.75rem 0;text-shadow:none}p{color:#222}h1,h2,h3,h4,h5,h6,strong{color:#000}a{color:#00f;cursor:pointer}a,a:visited{-webkit-text-decoration:underline solid .1em;text-decoration:underline solid .1em}a:visited{color:purple}a:hover{background-color:#00f;color:#fff}a:hover:visited{background-color:purple}b{font-weight:700}em{font-style:italic}u{text-decoration:underline}.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid.\-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.grid.\-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.grid.\-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.grid.\-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.grid.\-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.grid.\-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.grid.\-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.grid.\-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.grid.\-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.grid.\-around{-ms-flex-pack:distribute;justify-content:space-around}.cell{-webkit-box-flex:1;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1;flex:1}@media screen and (min-width:768px){.cell.\-1of12{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%}.cell.\-2of12{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%}.cell.\-3of12{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%}.cell.\-4of12{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%}.cell.\-5of12{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%}.cell.\-6of12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%}.cell.\-7of12{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%}.cell.\-8of12{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%}.cell.\-9of12{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%}.cell.\-10of12{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%}.cell.\-11of12{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%}}@media screen and (max-width:768px){.grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cell{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}}.rstrtt,.rstrtt blockquote,.rstrtt code,.rstrtt em,.rstrtt h1,.rstrtt h2,.rstrtt h3,.rstrtt h4,.rstrtt h5,.rstrtt h6,.rstrtt strong{-webkit-font-feature-settings:"calt" 1;font-feature-settings:"calt" 1;text-rendering:optimizeLegibility;font-family:Fira Code,Jetbrains Mono;margin:0}.rstrtt h1{font-size:3rem}.rstrtt h2{font-size:2rem}.rstrtt h3{font-size:1.8rem}.rstrtt h4{font-size:1.6rem}.rstrtt h5{font-size:1.4rem}.rstrtt h6{font-size:1.2rem}.rstrtt,.rstrtt blockquote,.rstrtt code,.rstrtt em,.rstrtt strong{font-size:1rem}.rstrtt,.rstrtt blockquote,.rstrtt code,.rstrtt h1,.rstrtt h2,.rstrtt h3,.rstrtt h4,.rstrtt h5,.rstrtt h6{font-style:normal}.rstrtt blockquote,.rstrtt code,.rstrtt em,.rstrtt strong{line-height:20px}.rstrtt blockquote,.rstrtt code,.rstrtt footer,.rstrtt h1,.rstrtt h2,.rstrtt h3,.rstrtt h4,.rstrtt h5,.rstrtt h6,.rstrtt header,.rstrtt li,.rstrtt ol,.rstrtt p,.rstrtt section,.rstrtt ul{float:none;margin:0;padding:0}.rstrtt blockquote,.rstrtt h1,.rstrtt ol,.rstrtt p,.rstrtt ul{margin-bottom:20px;margin-top:20px}.rstrtt h1,.rstrtt h2,.rstrtt h3,.rstrtt h4,.rstrtt h5,.rstrtt h6{margin-bottom:1.75rem;position:relative}.rstrtt h1:before,.rstrtt h2:before,.rstrtt h3:before,.rstrtt h4:before,.rstrtt h5:before,.rstrtt h6:before{color:rgba(95,95,95,.78);display:inline}.rstrtt h1:before{content:"# "}.rstrtt h2:before{content:"## "}.rstrtt h3:before{content:"### "}.rstrtt h4:before{content:"#### "}.rstrtt h5:before{content:"##### "}.rstrtt h6:before{content:"###### "}.rstrtt li{display:block;padding-left:20px;position:relative}.rstrtt li:after{left:0;position:absolute;top:0}.rstrtt ul>li:after{content:"-"}.rstrtt ol{counter-reset:ol}.rstrtt ol>li:after{content:counter(ol) ".";counter-increment:ol}.rstrtt ol li:nth-child(n+10):after{left:-7px}.rstrtt em:after,.rstrtt em:before{color:rgba(95,95,95,.78);content:"_";display:inline}.rstrtt strong:after,.rstrtt strong:before{color:rgba(95,95,95,.78);content:"**";display:inline}.rstrtt pre code:after,.rstrtt pre code:before{content:""}.rstrtt code{font-weight:700}.rstrtt code:after,.rstrtt code:before{color:rgba(95,95,95,.78);content:"`";display:inline}.rstrtt hr{border:.1rem solid #000}@-moz-document url-prefix(){.rstrtt h1{display:block}}.rstrtt-ones ol>li:after{content:"1."}p{margin:0 0 1.75rem}.container{max-width:70rem}.container,.container-fluid{margin:0 auto;padding:0 1rem}.inner{padding:1rem}.inner2x{padding:2rem}.pull-left{float:left}.pull-right{float:right}.rstrtt blockquote{overflow:hidden;padding-left:2ch;position:relative}.rstrtt blockquote:after{content:">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";left:0;line-height:20px;position:absolute;top:0;white-space:pre}.btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;justify-content:center;outline:none;padding:.65rem 2rem;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.btn:active{-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.12);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}.btn.btn-ghost{background-color:transparent;border-color:#757575;color:#757575;&:focus,&:hover{border-color:#424242;color:#424242;z-index:2}}.btn.btn-ghost:hover{background-color:transparent}.btn-block{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.btn-default{background-color:#e0e0e0;border:1px solid #e0e0e0;color:#fff;color:#333;&:focus:not(.btn-ghost),&:hover{background-color:#dcdcdc;border-color:#dcdcdc}}.btn-success{background-color:#4caf50;border:1px solid #4caf50;color:#fff;&:focus:not(.btn-ghost),&:hover{background-color:#43a047;border-color:#43a047}}.btn-success.btn-ghost{border-color:#4caf50;color:#4caf50;&:focus,&:hover{border-color:#388e3c;color:#388e3c;z-index:2}}.btn-error{background-color:#f44336;border:1px solid #f44336;color:#fff;&:focus:not(.btn-ghost),&:hover{background-color:#e53935;border-color:#e53935}}.btn-error.btn-ghost{border-color:#f44336;color:#f44336;&:focus,&:hover{border-color:#d32f2f;color:#d32f2f;z-index:2}}.btn-warning{background-color:#ff9800;border:1px solid #ff9800;color:#fff;&:focus:not(.btn-ghost),&:hover{background-color:#fb8c00;border-color:#fb8c00}}.btn-warning.btn-ghost{border-color:#ff9800;color:#ff9800;&:focus,&:hover{border-color:#f57c00;color:#f57c00;z-index:2}}.btn-info{background-color:#00bcd4;border:1px solid #00bcd4;color:#fff;&:focus:not(.btn-ghost),&:hover{background-color:#00acc1;border-color:#00acc1}}.btn-info.btn-ghost{border-color:#00bcd4;color:#00bcd4;&:focus,&:hover{border-color:#0097a7;color:#0097a7;z-index:2}}.btn-primary{background-color:#2196f3;border:1px solid #2196f3;color:#fff;&:focus:not(.btn-ghost),&:hover{background-color:#1e88e5;border-color:#1e88e5}}.btn-primary.btn-ghost{border-color:#2196f3;color:#2196f3;&:focus,&:hover{border-color:#1976d2;color:#1976d2;z-index:2}}.btn-group{overflow:auto}.btn-group .btn{float:left}.btn-group .btn-ghost:not(:first-child){margin-left:-1px}.form{width:30rem}.form-group{margin-bottom:1.75rem;overflow:auto}.form-group label{border-bottom:2px solid #ccc;color:#333;display:inline-block;float:left;height:38px;line-height:38px;padding:0;position:relative;width:10rem}.form-group.form-success label{border-color:#4caf50!important;color:#4caf50!important}.form-group.form-warning label{border-color:#ff9800!important;color:#ff9800!important}.form-group.form-error label{border-color:#f44336!important;color:#f44336!important}.form-control{background-color:transparent;border:none;border-bottom:2px solid #ccc;height:38px;outline:none;padding:.5rem 0;width:20rem}.form-control:focus{border-color:#555}.form-group.form-textarea label:after{background-color:#fff;bottom:0;content:"";position:absolute;right:-2px;top:0;width:2px}textarea.form-control{border-bottom:2px solid #ccc;border-left:2px solid #ccc;height:auto;padding:.5rem;resize:none}select.form-control{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;background-color:transparent;border-radius:0}.help-block{color:#999;margin-top:.5rem}.form-actions{margin-bottom:1.75rem}.progress-bar{background-color:#ccc;height:8px;margin-top:12px;opacity:.8;&.progress-bar-show-percent{margin-top:38px}}.progress-bar-filled{background-color:grey;height:100%;position:relative;-webkit-transition:width .3s ease;transition:width .3s ease;width:0;&:before{border:6px solid transparent;border-top-color:grey;content:"";right:-6px;top:-12px}&:after,&:before{position:absolute}&:after{border:6px solid transparent;color:grey;content:attr(data-filled);display:block;font-size:12px;right:0;top:-38px;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);white-space:nowrap}}.progress-bar-filled-success{background-color:#43a047;height:100%;position:relative;-webkit-transition:width .3s ease;transition:width .3s ease;width:0;&:before{border:6px solid transparent;border-top-color:#43a047;content:"";right:-6px;top:-12px}&:after,&:before{position:absolute}&:after{border:6px solid transparent;color:#43a047;content:attr(data-filled);display:block;font-size:12px;right:0;top:-38px;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);white-space:nowrap}}.progress-bar-filled-error{background-color:#e53935;height:100%;position:relative;-webkit-transition:width .3s ease;transition:width .3s ease;width:0;&:before{border:6px solid transparent;border-top-color:#e53935;content:"";right:-6px;top:-12px}&:after,&:before{position:absolute}&:after{border:6px solid transparent;color:#e53935;content:attr(data-filled);display:block;font-size:12px;right:0;top:-38px;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);white-space:nowrap}}table{border-collapse:collapse;color:#778087;margin:1.75rem 0;width:100%}table td,table th{border:1px solid #ccc;line-height:15px;padding:10px;vertical-align:top}table thead th{font-size:10px}table tbody td:first-child{color:#333;font-weight:700}.card{border:1px solid #ccc}.card .card-header{background-color:#ddd;color:#333;padding:.5rem 0;text-align:center}.alert{border:1px solid #ccc;color:#ccc;margin-bottom:1.75rem;padding:1rem}.alert-success{border-color:#4caf50;color:#4caf50}.alert-error{border-color:#f44336;color:#f44336}.alert-info{border-color:#00bcd4;color:#00bcd4}.alert-warning{border-color:#ff9800;color:#ff9800}.media:not(:last-child){margin-bottom:1.25rem}.media-left{padding-right:1rem}.media-left,.media-right{display:table-cell;vertical-align:top}.media-right{padding-left:1rem}.media-body{display:table-cell;vertical-align:top}.media-heading{font-size:1.16667rem;font-weight:700}.media-content{margin-top:.3rem}.avatarholder,.placeholder{background-color:#f0f0f0;border:1px solid #f0f0f0;color:#b9b9b9;font-size:1rem;text-align:center}.avatarholder{background-position:50%;background-repeat:no-repeat;background-size:cover;font-size:2rem;height:48px;line-height:46px;width:48px}.avatarholder.rounded{border-radius:33px}.loading{-webkit-animation:rotate .6s linear infinite;animation:rotate .6s linear infinite;border-radius:50%;border:2px solid #e91e63;border-right-color:transparent;content:" ";display:inline-block;height:20px;margin:0 .5rem;width:20px}.btn .loading{height:14px;margin-bottom:0;width:14px}.btn div.loading{float:left}.alert .loading{margin-bottom:-5px}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.menu{width:100%}.menu .menu-item{border-color:#616161;color:#616161;display:block}.menu .menu-item.active,.menu .menu-item:hover{background-color:transparent;border-color:#000;color:#000}@media screen and (max-width:768px){.form-group label{border-bottom:none;display:block;width:100%}.form-group.form-textarea label:after{display:none}.form-control{width:100%}textarea.form-control{border-left:none;padding:.5rem 0}pre::-webkit-scrollbar{height:3px}}@media screen and (max-width:480px){.form{width:100%}} +/*# sourceMappingURL=rstrtt.css.map */ diff --git a/docs/site-dark.css b/docs/site-dark.css deleted file mode 100644 index e69de29..0000000 diff --git a/docs/site.css b/docs/site.css deleted file mode 100644 index db2b9f6..0000000 --- a/docs/site.css +++ /dev/null @@ -1,78 +0,0 @@ -.main { - padding: 20px 10px; -} - -.hack h1 { - padding-top: 0; -} - -.example { - margin-bottom: 20px; -} - -.example .btn { - margin-bottom: 10px; -} - -footer.footer { - border-top: 1px solid #ccc; - margin-top: 80px; - margin-top: 5rem; - padding: 48px 0; - padding: 3rem 0; -} - -.grid-example { - padding: 0 2px; - background-color: #ccc; - margin-bottom: 16px; - margin-bottom: 1rem; -} - -.grid-example .cell { - text-align: center; - border: 1px solid #ccc; - padding: 4px 2px; - color: #999; -} - -.grid-example .cell .content { - background-color: #ddd; -} - -:not(pre) > code[class*="language-"], pre[class*="language-"] { - background-color: transparent; - font-weight: normal; -} - -#carbonads { - position: absolute; - -webkit-transform: translateX(-160px); - transform: translateX(-160px); - width: 150px; - border: 1px solid #00bcd4; - padding: 5px; - text-align: center; - margin-top: 40px; -} - -#carbonads a { - text-decoration: none; - border-bottom: none; -} - -.carbon-img:hover { - background-color: transparent; -} - -.carbon-text { - text-align: left; - margin-top: 10px; - display: block; -} - -.carbon-poweredby { - display: block; - text-align: center; - margin-top: 10px; -} diff --git a/docs/solarized-dark.css b/docs/solarized-dark.css deleted file mode 100644 index 4c29736..0000000 --- a/docs/solarized-dark.css +++ /dev/null @@ -1 +0,0 @@ -.solarized-dark{background-color:#073642;color:#78909c}.solarized-dark h1,.solarized-dark h2,.solarized-dark h3,.solarized-dark h4,.solarized-dark h5,.solarized-dark h6{color:#1e88e5}.solarized-dark h1 a,.solarized-dark h2 a,.solarized-dark h3 a,.solarized-dark h4 a,.solarized-dark h5 a,.solarized-dark h6 a{color:#1e88e5;border-bottom-color:#1e88e5}.solarized-dark h1 a:hover,.solarized-dark h2 a:hover,.solarized-dark h3 a:hover,.solarized-dark h4 a:hover,.solarized-dark h5 a:hover,.solarized-dark h6 a:hover{background-color:#1e88e5;color:#fff}.solarized-dark pre{background-color:#073642;padding:0;border:none}.solarized-dark pre code{color:#009688}.solarized-dark h1 a,.solarized-dark h2 a,.solarized-dark h3 a,.solarized-dark h4 a,.solarized-dark h5 a{color:#78909c}.solarized-dark code,.solarized-dark strong{color:#90a4ae}.solarized-dark code{font-weight:100}.solarized-dark .progress-bar-filled{background-color:#558b2f}.solarized-dark .progress-bar-filled:after,.solarized-dark .progress-bar-filled:before{color:#90a4ae}.solarized-dark table{color:#78909c}.solarized-dark table td,.solarized-dark table th{border-color:#b0bec5}.solarized-dark table tbody td:first-child{color:#b0bec5}.solarized-dark .form-group label{color:#78909c;border-color:#90a4ae}.solarized-dark .form-group.form-textarea label:after{background-color:#073642}.solarized-dark .form-control{color:#78909c;border-color:#90a4ae}.solarized-dark .form-control:focus{border-color:#cfd8dc;color:#cfd8dc}.solarized-dark textarea.form-control{color:#78909c}.solarized-dark .card{border-color:#90a4ae}.solarized-dark .card .card-header{background-color:transparent;color:#78909c;border-bottom:1px solid #90a4ae}.solarized-dark .btn.btn-ghost.btn-default{border-color:#607d8b;color:#607d8b}.solarized-dark .btn.btn-ghost.btn-default:focus,.solarized-dark .btn.btn-ghost.btn-default:hover{border-color:#90a4ae;color:#90a4ae;z-index:1}.solarized-dark .btn.btn-ghost.btn-default:focus,.solarized-dark .btn.btn-ghost.btn-default:hover{border-color:#e0e0e0;color:#e0e0e0}.solarized-dark .btn.btn-ghost.btn-primary:focus,.solarized-dark .btn.btn-ghost.btn-primary:hover{border-color:#64b5f6;color:#64b5f6}.solarized-dark .btn.btn-ghost.btn-success:focus,.solarized-dark .btn.btn-ghost.btn-success:hover{border-color:#81c784;color:#81c784}.solarized-dark .btn.btn-ghost.btn-info:focus,.solarized-dark .btn.btn-ghost.btn-info:hover{border-color:#4dd0e1;color:#4dd0e1}.solarized-dark .btn.btn-ghost.btn-error:focus,.solarized-dark .btn.btn-ghost.btn-error:hover{border-color:#e57373;color:#e57373}.solarized-dark .btn.btn-ghost.btn-warning:focus,.solarized-dark .btn.btn-ghost.btn-warning:hover{border-color:#ffb74d;color:#ffb74d}.solarized-dark .avatarholder,.solarized-dark .placeholder{background-color:transparent;border-color:#90a4ae}.solarized-dark .menu .menu-item{color:#78909c;border-color:#90a4ae}.solarized-dark .menu .menu-item.active,.solarized-dark .menu .menu-item:hover{color:#fff;border-color:#78909c} \ No newline at end of file diff --git a/docs/solarized-dark.html b/docs/solarized-dark.html deleted file mode 100644 index 389a6c1..0000000 --- a/docs/solarized-dark.html +++ /dev/null @@ -1,345 +0,0 @@ - - - - - - - solarized-dark mode of hack.css - - - - - - - -
-

« Back to home

-

Solarized Dark mode

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.

- -

Usage

<link rel="stylesheet" href="/path/to/hack.css" />
-<link rel="stylesheet" href="/path/to/solarized-dark.css" />
-<body class="hack solarized-dark">
-  ...
-</body>
-
- -

Components

-

<hr>

-
-

List

-
    -
  • foo -
      -
    • sub foo
      • -
    • sub bar
      • -
    • sub baz
      • -
    -
    • -
  • bar
    • -
  • baz
    • -
-

Blockquote

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.
-

Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 
<form class="form">
-  <fieldset class="form-group">
-    <label for="username">USERNAME:</label>
-    <input id="username" type="text" placeholder="type your name..." class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="email">EMAIL:</label>
-    <input id="email" type="email" placeholder="" class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="country">COUNTRY:</label>
-    <select id="country" class="form-control">
-      <option>China</option>
-      <option>U.S.</option>
-      <option>U.K.</option>
-      <option>Japan</option>
-    </select>
-  </fieldset>
-  <fieldset class="form-group form-textarea">
-    <label for="message">MESSAGE:</label>
-    <textarea id="message" rows="5" class="form-control"></textarea>
-  </fieldset>
-  <div class="form-actions">
-    <button type="button" class="btn btn-primary btn-block">Submit</button>
-  </div>
-</form>
-
- -
Stateful Form
-
-
- - -
-
- - -
- 
.form-group.form-success
-.form-group.form-error
-.form-group.form-warning
-
- -
Help Block
-
-
- - -
In this format: +86 xxx xxx xxxxx
-
-
- - -
- 
<fieldset class="form-group form-success">
-  <label for="phone">Phone Number:</label>
-  <input id="phone" type="text" placeholder="" class="form-control">
-  <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
-</fieldset>
-
- -

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
editorspeedextensioninterface
sublime908070
atom608580
vscode806560
- -

Progress bar

-
-
- 
<!-- with only an arrow -->
-<div class="progress-bar">
-  <div class="progress-bar-filled" style="width: 40%"></div>
-</div>
-
-<!-- with a percentage showing above the arrow -->
-<div class="progress-bar progress-bar-show-percent">
-  <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
-</div>
-
- -

Buttons

-
- - - - - - -
-
- - - - - - -
-
- - 
<button class="btn btn-default">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-error">Error</button>
-
-<button class="btn btn-primary btn-ghost">Ghost Button</button>
-
-<button class="btn btn-primary btn-block">Block Level Button</button>
-
- -

Button group

-
-
- - - -
- 
<div class="btn-group">
-  <button class="btn btn-success btn-ghost">Left</button>
-  <button class="btn btn-success btn-ghost">Middle</button>
-  <button class="btn btn-success btn-ghost">Right</button>
-</div>
-
- -

Card

-
-
-
-
title
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
-
-
-
- 
<div class="card">
-  <header class="card-header">title</header>
-  <div class="card-content">
-    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
-  </div>
-</div>
-
- -

Alerts

-
-
Success message
-
Info message
-
Warning message
-
Error message
- 
<div class="alert alert-success">Success message</div>
-<div class="alert alert-info">Info message</div>
-<div class="alert alert-warning">Warning message</div>
-<div class="alert alert-error">Error message</div>
-
- -

Menu

-
-
-
-
item #1 -
»
item #2 -
»
item #3 -
»
-
-
- 
 <div class="menu">
-   <a class="menu-item">
-     item #1 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item active">
-     item #2 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item">
-     item #3 <div class="pull-right">»</div>
-   </a>
- </div>
-
- -

Media

-

This is useful if you intend to display a list of items, like the Twitter timeline.

-
-
-
-
e
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
e
-
- 
<!-- left align -->
-<div class="media">
-  <div class="media-left">
-    <div class="avatarholder">e</div>
-  </div>
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-</div>
-
-<!-- right align -->
-<div class="media">
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-  <div class="media-right">
-    <div class="avatarholder">e</div>
-  </div>
-</div>
-
- -

Loading

-

hack.css gives you a default loading element, but you can find more at CSS-only loaders.

-
-
-
-
- -
-
-
Loading in an alert box…
- 
<div class="loading"></div>
-
-<button class="btn btn-info btn-ghost">
-  Loading&hellip;
-  <span class="loading"></span>
-</button>
-
-<div class="alert alert-info">
-  <span class="loading"></span>
-  Loading in an alert box&hellip;
-</div>
-
- - - -
- - diff --git a/docs/standard.css b/docs/standard.css deleted file mode 100644 index 79fef56..0000000 --- a/docs/standard.css +++ /dev/null @@ -1 +0,0 @@ -html{font-size:14px}.standard{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,Ubuntu,segoe ui,arial,sans-serif}.standard h1{font-size:2em;font-weight:700;margin:.67em 0}.standard h2{font-size:1.5em;font-weight:700;margin:.83em 0}.standard h3{font-size:1.17em;font-weight:700}.standard h3,.standard p{margin:1.75rem 0}.standard ol,.standard ul{display:block;list-style-type:disc;padding-left:20px;margin:1.75rem 0}.standard ol ul,.standard ul ul{margin:.75rem 0;list-style-type:square}.standard ol{list-style-type:decimal}.standard li{display:list-item;padding-left:0}.standard blockquote{margin:1.75rem 0;padding-left:10px;border-left:5px solid #f0f0f0}.standard pre{margin:1.75rem 0;white-space:pre}.standard hr{border:0;height:1px;display:block;background-color:#e2e2e2;margin:1.75rem 0} \ No newline at end of file diff --git a/docs/standard.html b/docs/standard.html deleted file mode 100644 index a05af2e..0000000 --- a/docs/standard.html +++ /dev/null @@ -1,344 +0,0 @@ - - - - - - - standard mode of hack.css - - - - - - -
-

-

Usage

<link rel="stylesheet" href="/path/to/hack.css" />
-<link rel="stylesheet" href="/path/to/standard.css" />
-<body class="standard">
-  ...
-</body>
-
- -

Components

-

<hr>

-
-

List

-
    -
  • foo -
      -
    • sub foo
      • -
    • sub bar
      • -
    • sub baz
      • -
    -
    • -
  • bar
    • -
  • baz
    • -
-

Blockquote

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.
-

Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 
<form class="form">
-  <fieldset class="form-group">
-    <label for="username">USERNAME:</label>
-    <input id="username" type="text" placeholder="type your name..." class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="email">EMAIL:</label>
-    <input id="email" type="email" placeholder="" class="form-control">
-  </fieldset>
-  <fieldset class="form-group">
-    <label for="country">COUNTRY:</label>
-    <select id="country" class="form-control">
-      <option>China</option>
-      <option>U.S.</option>
-      <option>U.K.</option>
-      <option>Japan</option>
-    </select>
-  </fieldset>
-  <fieldset class="form-group form-textarea">
-    <label for="message">MESSAGE:</label>
-    <textarea id="message" rows="5" class="form-control"></textarea>
-  </fieldset>
-  <div class="form-actions">
-    <button type="button" class="btn btn-primary btn-block">Submit</button>
-  </div>
-</form>
-
- -
Stateful Form
-
-
- - -
-
- - -
- 
.form-group.form-success
-.form-group.form-error
-.form-group.form-warning
-
- -
Help Block
-
-
- - -
In this format: +86 xxx xxx xxxxx
-
-
- - -
- 
<fieldset class="form-group form-success">
-  <label for="phone">Phone Number:</label>
-  <input id="phone" type="text" placeholder="" class="form-control">
-  <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
-</fieldset>
-
- -

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
editorspeedextensioninterface
sublime908070
atom608580
vscode806560
- -

Progress bar

-
-
- 
<!-- with only an arrow -->
-<div class="progress-bar">
-  <div class="progress-bar-filled" style="width: 40%"></div>
-</div>
-
-<!-- with a percentage showing above the arrow -->
-<div class="progress-bar progress-bar-show-percent">
-  <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
-</div>
-
- -

Buttons

-
- - - - - - -
-
- - - - - - -
-
- - 
<button class="btn btn-default">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-error">Error</button>
-
-<button class="btn btn-primary btn-ghost">Ghost Button</button>
-
-<button class="btn btn-primary btn-block">Block Level Button</button>
-
- -

Button group

-
-
- - - -
- 
<div class="btn-group">
-  <button class="btn btn-success btn-ghost">Left</button>
-  <button class="btn btn-success btn-ghost">Middle</button>
-  <button class="btn btn-success btn-ghost">Right</button>
-</div>
-
- -

Card

-
-
-
-
title
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
-
-
-
- 
<div class="card">
-  <header class="card-header">title</header>
-  <div class="card-content">
-    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
-  </div>
-</div>
-
- -

Alerts

-
-
Success message
-
Info message
-
Warning message
-
Error message
- 
<div class="alert alert-success">Success message</div>
-<div class="alert alert-info">Info message</div>
-<div class="alert alert-warning">Warning message</div>
-<div class="alert alert-error">Error message</div>
-
- -

Menu

-
-
-
-
item #1 -
»
item #2 -
»
item #3 -
»
-
-
- 
 <div class="menu">
-   <a class="menu-item">
-     item #1 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item active">
-     item #2 <div class="pull-right">»</div>
-   </a>
-   <a class="menu-item">
-     item #3 <div class="pull-right">»</div>
-   </a>
- </div>
-
- -

Media

-

This is useful if you intend to display a list of items, like the Twitter timeline.

-
-
-
-
e
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
-
-
-
EGOIST @egoist
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
-
-
-
e
-
- 
<!-- left align -->
-<div class="media">
-  <div class="media-left">
-    <div class="avatarholder">e</div>
-  </div>
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-</div>
-
-<!-- right align -->
-<div class="media">
-  <div class="media-body">
-    <div class="media-heading">EGOIST @egoist</div>
-    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
-  </div>
-  <div class="media-right">
-    <div class="avatarholder">e</div>
-  </div>
-</div>
-
- -

Loading

-

hack.css gives you a default loading element, but you can find more at CSS-only loaders.

-
-
-
-
- -
-
-
Loading in an alert box…
- 
<div class="loading"></div>
-
-<button class="btn btn-info btn-ghost">
-  Loading&hellip;
-  <span class="loading"></span>
-</button>
-
-<div class="alert alert-info">
-  <span class="loading"></span>
-  Loading in an alert box&hellip;
-</div>
-
- - - -
- - diff --git a/src/css/rstrtt.css b/src/css/rstrtt.css index edaedc0..5747c35 100644 --- a/src/css/rstrtt.css +++ b/src/css/rstrtt.css @@ -1,9 +1,10 @@ -@import './vars'; -@import './mixins'; -@import './reset.css'; -@import './grid.css'; -@import './markdown.css'; -@import './layout.css'; -@import './components.css'; -@import './responsive.css'; -/* @import './pygments/emacs.css'; */ +@import "./vars"; +@import "./mixins"; +@import "./reset.css"; +@import "./grid.css"; +@import "./markdown.css"; +@import "./layout.css"; +@import "./components.css"; +@import "./responsive.css"; +/* @import "./pygments/emacs.css"; */ +/* @import "./themes/dark.css"; */ diff --git a/src/css/themes/dark-grey.css b/src/css/themes/dark-grey.css deleted file mode 100644 index 6f17559..0000000 --- a/src/css/themes/dark-grey.css +++ /dev/null @@ -1,122 +0,0 @@ -@import "color-preset"; -@import "../vars.css"; -@import "../mixins.css"; - -.dark-grey { - background-color: $dark-grey-bg; - color: #ccc; - - & pre { - background-color: $dark-grey-bg; - padding: 0; - border: none; - & code { - color: $cyan; - } - } - - & h1 a, - & h2 a, - & h3 a, - & h4 a, - & h5 a { - color: #ccc; - } - - & strong, - & code { - color: white; - } - - & code { - font-weight: 100; - } - - /** - * table - */ - & table { - color: #ccc; - } - & table td, - & table th { - border-color: #444; - } - - & table tbody td:first-child { - color: white; - } - - /** - * Form - */ - & .form-group { - & label { - color: #ccc; - border-color: $light-grey; - } - &.form-textarea label:after { - background-color: $dark-grey-bg; - } - } - - & .form-control { - color: #ccc; - border-color: $light-grey; - &:focus { - border-color: #ccc; - color: #ccc; - } - } - - & textarea.form-control { - color: #ccc; - } - - /** - * Card - */ - & .card { - border-color: $light-grey; - & .card-header { - background-color: transparent; - color: #ccc; - border-bottom: 1px solid $light-grey; - } - } - - /** - * Buttons - */ - & .btn.btn-ghost.btn-default { - @mixin button-ghost #ababab, #9c9c9c; - } - - & .btn.btn-ghost { - @mixin buttons-ghost-dark $grey-300, $blue-300, $green-300, $cyan-300, $red-300, $orange-300; - } - - /** - * Holders - */ - & .placeholder, - & .avatarholder { - background-color: transparent; - border-color: #333; - } - - /** - * Menu - */ - & .menu { - & .menu-item { - color: #ccc; - border-color: $light-grey; - - &:hover, &.active { - color: white; - border-color: #ccc; - } - } - } -} diff --git a/src/css/themes/dark.css b/src/css/themes/dark.css index 894ff4b..66e572d 100644 --- a/src/css/themes/dark.css +++ b/src/css/themes/dark.css @@ -1,8 +1,7 @@ -@import "color-preset"; @import "../vars.css"; @import "../mixins.css"; -.dark { +@media (prefers-color-scheme: dark) { background-color: black; color: #ccc; @@ -93,7 +92,8 @@ } & .btn.btn-ghost { - @mixin buttons-ghost-dark $grey-300, $blue-300, $green-300, $cyan-300, $red-300, $orange-300; + @mixin buttons-ghost-dark $grey-300, $blue-300, $green-300, $cyan-300, + $red-300, $orange-300; } /** @@ -113,7 +113,8 @@ color: #ccc; border-color: $light-grey; - &:hover, &.active { + &:hover, + &.active { color: white; border-color: #ccc; } diff --git a/src/css/themes/newtype.css b/src/css/themes/newtype.css deleted file mode 100644 index d33e3a3..0000000 --- a/src/css/themes/newtype.css +++ /dev/null @@ -1,58 +0,0 @@ -.red, .yellow, .green, .cyan, .purple, .pink { - background: black; - color: white; - text-decoration: underline solid 0.05em; - text-decoration-skip-ink: none; -} - -.red:hover, .yellow:hover, .green:hover, .cyan:hover, .purple:hover, .pink:hover { - text-decoration-color: white; -} - -.red { - text-decoration-color: $red; -} - -.red:hover { - background: $red; -} - -.yellow { - text-decoration-color: $yellow; -} - -.yellow:hover { - background: $yellow; -} - -.green { - text-decoration-color: $green; -} - -.green:hover { - background: $green; -} - -.cyan { - text-decoration-color: $cyan; -} - -.cyan:hover { - background: $cyan; -} - -.purple { - text-decoration-color: $purple; -} - -.purple:hover { - background: $purple; -} - -.pink { - text-decoration-color: $pink; -} - -.pink:hover { - background: $pink; -} diff --git a/src/css/themes/solarized-dark.css b/src/css/themes/solarized-dark.css deleted file mode 100644 index 96c2da8..0000000 --- a/src/css/themes/solarized-dark.css +++ /dev/null @@ -1,150 +0,0 @@ -@import "color-preset"; -@import "../vars.css"; -@import "../mixins.css"; - -.solarized-dark { - background-color: $solarized-dark-color-bg; - color: $blue-grey-400; - - & h1, - & h2, - & h3, - & h4, - & h5, - & h6 { - color: $blue-600; - & a { - color: $blue-600; - border-bottom-color: $blue-600; - } - & a:hover { - background-color: $blue-600; - color: $white; - } - } - - & pre { - background-color: $solarized-dark-color-bg; - padding: 0; - border: none; - & code { - color: $teal; - } - } - - & h1 a, - & h2 a, - & h3 a, - & h4 a, - & h5 a { - color: $blue-grey-400; - } - - & strong, - & code { - color: $blue-grey-300; - } - - & code { - font-weight: 100; - } - - /** - * Progress bar - */ - & .progress-bar-filled { - background-color: $light-green-800; - } - - & .progress-bar-filled:before, & .progress-bar-filled:after { - color: $blue-grey-300; - } - - /** - * table - */ - & table { - color: $blue-grey-400; - } - & table td, - & table th { - border-color: $blue-grey-200; - } - - & table tbody td:first-child { - color: $blue-grey-200; - } - - /** - * Form - */ - & .form-group { - & label { - color: $blue-grey-400; - border-color: $blue-grey-300; - } - &.form-textarea label:after { - background-color: $solarized-dark-color-bg; - } - } - - & .form-control { - color: $blue-grey-400; - border-color: $blue-grey-300; - &:focus { - border-color: $blue-grey-100; - color: $blue-grey-100; - } - } - - & textarea.form-control { - color: $blue-grey-400; - } - - /** - * Card - */ - & .card { - border-color: $blue-grey-300; - & .card-header { - background-color: transparent; - color: $blue-grey-400; - border-bottom: 1px solid $blue-grey-300; - } - } - - /** - * Buttons - */ - & .btn.btn-ghost.btn-default { - @mixin button-ghost $blue-grey, $blue-grey-300; - } - - & .btn.btn-ghost { - @mixin buttons-ghost-dark $grey-300, $blue-300, $green-300, $cyan-300, $red-300, $orange-300; - } - - /** - * Holders - */ - & .placeholder, - & .avatarholder { - background-color: transparent; - border-color: $blue-grey-300; - } - - /** - * Menu - */ - & .menu { - & .menu-item { - color: $blue-grey-400; - border-color: $blue-grey-300; - - &:hover, &.active { - color: white; - border-color: $blue-grey-400; - } - } - } -} diff --git a/src/css/themes/standard.css b/src/css/themes/standard.css deleted file mode 100644 index cd0e31d..0000000 --- a/src/css/themes/standard.css +++ /dev/null @@ -1,66 +0,0 @@ -html { - font-size: 14px; -} - -.standard { - font-family: -apple-system, BlinkMacSystemFont, - 'avenir next', avenir, - helvetica, 'helvetica neue', - Ubuntu, - 'segoe ui', arial, - sans-serif; -} - -.standard h1 { - font-size: 2em; - font-weight: bold; - margin: 0.67em 0; -} -.standard h2 { - font-size: 1.5em; - font-weight: bold; - margin: 0.83em 0; -} -.standard h3 { - font-size: 1.17em; - font-weight: bold; - margin: 1.75rem 0; -} -.standard p { - margin: 1.75rem 0; -} -.standard ul, -.standard ol { - display: block; - list-style-type: disc; - padding-left: 20px; - margin: 1.75rem 0; - & ul { - margin: .75rem 0; - list-style-type: square; - } -} -.standard ol { - list-style-type: decimal; -} -.standard li { - display: list-item; - padding-left: 0; -} -.standard blockquote { - margin: 1.75rem 0; - padding-left: 10px; - border-left: 5px solid #f0f0f0; -} -.standard pre { - margin: 1.75rem 0; - white-space: pre; -} - -.standard hr { - border: 0; - height: 1px; - display: block; - background-color: #e2e2e2; - margin: 1.75rem 0; -} diff --git a/src/sections/alertinfo.tsx b/src/sections/alertinfo.tsx index 31bf2bd..f8c59eb 100644 --- a/src/sections/alertinfo.tsx +++ b/src/sections/alertinfo.tsx @@ -2,10 +2,7 @@ import * as React from 'react' function AlertInfo () { return
New! - dark, - dark-grey, - solarized-dark and - standard modes are now available! + dark mode are now available!
}