-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
81 lines (78 loc) · 2.98 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
<!DOCTYPE html>
<html>
<head>
<title>Holo Web</title>
<link rel="stylesheet" type="text/css" href="holo-base-elements.css" />
<link rel="stylesheet" type="text/css" href="holo-ics-dark-elements.css" />
<link rel="stylesheet" type="text/css" href="holo-ics-light-elements.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" type="text/css" href="holo-base-widgets.css" />
<link rel="stylesheet" type="text/css" href="holo-ics-dark-widgets.css" />
<link rel="stylesheet" type="text/css" href="holo-ics-light-widgets.css" media="(prefers-color-scheme: light)" />
<style type="text/css">
h2 {
text-transform: uppercase;
font-size: 90%;
margin: 0;
padding: 4px 8px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #262626;
border-bottom-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.75);
}
@media (prefers-color-scheme: light) {
h2 {
color: rgba(0, 0, 0, 0.75);
}
}
</style>
<script type="text/javascript" src="holo-touch.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" sizes="128x128" href="icon_128.png" />
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="icon_128.png" />
</head>
<body>
<header class="holo-actionBar">
<span class="holo-title" role="heading" aria-level="1">
<img src="icon_48.png" />
Holo Web
</span>
</header>
<p>
Holo Web is a CSS library that attempts to imitate the Android “Holo” themes with CSS. Simply adding the stylesheets will instantly Holo-theme any site. With a few tweaks, the site can also add more Android-like UI elements, such as Holo-themed action bars.
</p>
<h2>Demos</h2>
<ul class="holo-list">
<li>
<a role="button" href="demo-hc-light.html">Honeycomb Light</a>
</li>
<li>
<a role="button" href="demo-hc-dark.html">Honeycomb Dark</a>
</li>
<li>
<a role="button" href="demo-ics-light.html">Ice Cream Sandwich Light</a>
</li>
<li>
<a role="button" href="demo-ics-dark.html">Ice Cream Sandwich Dark</a>
</li>
<li>
<a role="button" href="demo-kk-light.html">KitKat Light</a>
</li>
<li>
<a role="button" href="demo-kk-dark.html">KitKat Dark</a>
</li>
</ul>
<p>
Developed by <a href="http://zmyaro.com" target="_blank">Zachary Yaro</a>.
</p>
<p>
Find out more about Holo Web on <a href="https://github.com/zmyaro/holo-web" target="_blank">GitHub</a>.
</p>
<p>
Following Google's replacement of Holo design on Android with Material Design, active development of Holo Web has ceased. You may wish to try its spiritual successor, <a href="https://materialz.dev" target="_blank">MaterialZ</a>.
</p>
</body>
</html>