-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (111 loc) · 4.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=1">
<link rel="shortcut icon" href="logo.png">
<link rel="stylesheet" href="style.min.css">
<title>Light and Shite</title>
</head>
<body>
<header>
<div class="nav">
<a href="#"><img src="logo.png"></a>
<ul class="navbar-list">
<li><a href="#">Home</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="https://github.com/alexjj/light-and-shite">Get it</a></li>
</ul>
</nav>
</header>
<div id="content">
<h1>Light and Shite</h1>
<em><small>Version 0.1</small></em>
<p>A simple CSS style with features I found lacking in other lightweight CSS stylesheets</p>
<h2>Features</h2>
<ul>
<li>Clear, readible text</li>
<li>Simple and minimal</li>
<li>Responsive text and images</li>
<li>Nav bar</li>
<li>Footer</li>
<li>Easy to extend and customise</li>
</ul>
<h2>How to use it</h2>
<p>Download it from the <a href="https://github.com/alexjj/light-and-shite" target="_blank">Github repo</a> and link it in your html <code><link rel="stylesheet" href="style.min.css"></code>.</p>
<h2 id="demo">Demonstration</h2>
<p>This whole page is built with light and shite. Here's some stock text
to demonstrate:</p>
<h3>Headings</h3>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3>Base Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus, augue sed
vestibulum porttitor, lorem mi accumsan nisl, vitae tempor nulla dolor non
turpis. Sed gravida augue id ullamcorper convallis. Aenean iaculis risus sit
amet dui efficitur, sit amet dignissim purus fringilla. Suspendisse vel ante
eget metus hendrerit porttitor sed sed velit. Phasellus vitae consectetur
tortor. Morbi accumsan urna iaculis nisi rutrum, in pharetra enim cursus.
Maecenas quis nisl mauris.</p>
<p>Yr banh mi jean shorts wolf narwhal. Hashtag bicycle rights cronut, sint
gastropub ipsum narwhal schlitz godard heirloom in bitters minim. Live-edge
kinfolk squid in leggings, you probably haven't heard of them dreamcatcher
adipisicing mollit tbh neutra ramps chicharrones minim. Mollit lyft pabst wolf
blog pariatur, put a bird on it edison bulb occaecat next level. Vinyl ex
celiac, est in asymmetrical 90's trust fund elit incididunt narwhal ad meh
excepteur. Humblebrag eu pug, shaman dolor fashion axe pok pok vice
single-origin coffee affogato. Shoreditch freegan organic cloud bread. </p>
<p>Seitan tempor fam eu, cronut +1 poutine fugiat sunt. Try-hard photo booth prism
consequat, franzen distillery ugh iPhone irure veniam sriracha nostrud
skateboard synth. Et selfies mustache +1 blue bottle readymade. Pour-over pabst
anim, cillum single-origin coffee pickled small batch franzen +1 adipisicing
esse. Dolore voluptate 3 wolf moon, pabst wolf excepteur hoodie listicle
adipisicing officia eu succulents nulla. Aliqua ullamco cillum pok pok gentrify
3 wolf moon four dollar toast twee. Ut minim flannel lorem, austin locavore
taiyaki wolf labore tempor PBR&B pariatur craft beer. </p>
<h3>Other text styles</h3>
<strong>Bolded</strong><br>
<em>Italicized</em><br>
<u>Underlined</u><br>
<h3>Lists</h3>
<ul>
<li>Item 1</li>
<li>
Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<h3>Code tags</h3>
<code>A simple <code> tag, ideal for a single line or smaller</code>
<pre><code># Larger blocks of code should be surrounded by <pre>
void kernel_halt(void)
{
kernel_shutdown_prepare(SYSTEM_HALT);
migrate_to_reboot_cpu();
syscore_shutdown();
pr_emerg("System halted\n");
kmsg_dump(KMSG_DUMP_HALT);
machine_halt();
}</code></pre>
<h3>Images</h3>
<img src="mountains.jpg">
<h2>What about ...?</h2>
<p>What about tables, buttons, forms, icons, alerts, progress bars, badges, quotations, jumbotrons, dropdowns, etc.?
Well I don't need them or want them. I guess that's why it's light <em>and shite</em>.</p>
<h4>License</h4>
<p>Distributed with a <a href="https://raw.githubusercontent.com/alexjj/light-and-shite/master/LICENSE" target="_blank">MIT License</a></p>
</div>
<div id="footer">
<p>What a nice footer 👣</p>
<p>©2018 Alex Johnstone <font color="#009966">🍂</font><font color="#663300">💩</font></p>
</div>
</body>
</html>