diff --git a/docs/dark/index.html b/docs/dark/index.html new file mode 100644 index 0000000..c0e676a --- /dev/null +++ b/docs/dark/index.html @@ -0,0 +1,572 @@ + + + + + + Terminal CSS + + + + + + + +
+
+ + +
+
+
+

+ Modern and minimalistic CSS framework for terminal lovers ❤️ +

+
+

Goal

+

+ There are so many CSS frameworks out there with great features but + most of them come at the cost of bloated html code. + Terminal CSS is here for purists who want minimal overhead and + maximal control. +

+
+
+

Dark Version

+

To create your own Terminal CSS theme just edit the `:root` CSS Variables

+
+
+

Credits

+

+ This project is heavily inspired by + @egoist's + work - + hack.css +

+
+
+
+ +
+

Grid System

+

+ Terminal CSS doens't come with a build in grid system. It encourages + you to use your own - whether it's Flexbox or CSS Grid. +

+
+ random image + random image + random image + random image + random image + random image + random image +
+
+
+ +
+ + +
+
+
+

Lists

+
+
    +
  • This is a list item
    • +
  • So is this - there could be more
    • +
  • + Make sure to style list items to: +
      +
    • Not forgetting child list items
      • +
    • Not forgetting child list items
      • +
    • Not forgetting child list items
      • +
    • Not forgetting child list items
      • +
    +
    • +
  • A couple more
    • +
  • top level list items
    • +
+

Don't forget Ordered lists:

+
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. + Aliquam tincidunt mauris eu risus. +
      +
    1. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
      2. +
    2. Aliquam tincidunt mauris eu risus.
      3. +
    +
    3. +
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    4. +
  4. Aliquam tincidunt mauris eu risus.
    5. +
+

Description lists are also included.

+
+
Description list title 01
+
Description list description 01
+
Description list title 02
+
Description list description 02
+
Description list description 03
+
+
+
+
+

Typography

+

Level 1 Heading

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat + vitae, ultricies eget, tempor sit amet, ante. +

+

Level 2 Heading

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat + vitae, ultricies eget, tempor sit amet, ante. +

+

Level 3 Heading

+

+ Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat + vitae, ultricies eget, tempor sit amet, ante. +

+

Level 4 Heading

+
Level 5 Heading
+
Level 5 Heading
+
+
+
+

Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Most Downloaded Movies on BitTorrent, 2011 +
RankMovieDownloadsGrosses
torrentfreak.com
1Fast Five9,260,000$626,137,675
2The Hangover II8,840,000$581,464,305
3Thor8,330,000$449,326,618
4Source Code7,910,000$123,278,618
5I Am Number Four7,670,000$144,500,437
6Sucker Punch7,200,000$89,792,502
7127 Hours6,910,000$60,738,797
8Rango6,480,000$245,155,348
9The King’s Speech6,250,000$414,211,549
10Harry Potter and the Deathly Hallows Part 26,030,000$1,328,111,219
+
+ +

Special Elements

+

Terminal CSS also supports a range of special elements.

+ +

Blockquote

+
+

+ This is a properly formatted blockquote, btw. Measuring + programming progress by lines of code is like measuring aircraft + building progress by weight. +

+ +
+ +

Code Blocks

+ 
+            
+              :root {
+                    --global-font-size: 14px;
+                    --global-line-height: 1.4rem;
+                    --global-space: 10px;
+                    --font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
+                    --background-color: #fff;
+                    --page-width: 70em;
+                    --primary-color: rgb(206, 4, 105);
+                    --font-color: #151513;
+                    --tertiary-color: #727680;
+                    --grid-gap: 1em;
+              }                           
+            
+
+ +

Misc

+

+ I am the a tag example
+ I am the abbr tag example
+ I am the acronym tag example
+ I am the b tag example
+ I am the big tag example
+ I am the cite tag example
+ I am the code tag example
+ I am the del tag example
+ I am the dfn tag example
+ I am the em tag example
+ I am the i tag example
+ I am the ins tag example
+ I am the kbd tag example
+ I am the q tag example
+ I am the samp tag example
+ I am the small tag example
+ I am the span tag example
+ I am the strong tag example
+ I am the sub tag example
+ I am the sup tag example
+ I am the tt tag example
+ I am the var tag example
+ I am the small class example
+ I am the large class example
+ I am the quiet class example
+

+ +

+ Address +

+
+ Mozilla Foundation
+ 1981 Landings Drive
+ Building K
+ Mountain View, CA 94043-0801
+ USA +
+
+

Forms

+
+
+ Form legend +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+

Progress Bar

+

With only an arrow

+
+
+
+ +

With a percentage showing above the arrow

+
+
+
+ +

Without arrow

+
+
+
+ +
+

Buttons

+

+

+

+

+

+

+

+

Button Group

+
+ + + +
+ +
+

Cards

+
+
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. +
+
+
+

Alerts

+
Default message
+
Primary message
+
Error message
+
+

Media

+
+
+
Picsum
+
+
+
Media Left Element
+
This is the media content
+
+
+
+
+
Media Right Element
+
This is the media content
+
+
+
Picsum
+
+
+
+

Version: 0.2.0 Top

+ +
+
+
+ + + + diff --git a/docs/index.html b/docs/index.html index cab2781..6a1a8f5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,7 +6,6 @@ Terminal CSS -