-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (115 loc) · 4.71 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
<html>
<head>
<title>Poke: Button specific React UI Components</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Poke's aim is to provide designers & front-end developers with an easy-to-use button toolkit. ">
<meta name="keywords" content="ui,ux,designer,developer,gregory,worrall">
<meta property="og:url" content="https://github.com/gregjw/poke" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Poke" />
<meta property="og:description" content="Poke's aim is to provide designers & front-end developers with an easy-to-use button toolkit. "/>
<meta property="og:image" content="http://i.imgur.com/d21NJPt.png" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://github.com/gregjw/poke">
<meta name="twitter:site" content="@gregjwww">
<meta name="twitter:creator" content="@gregjwww">
<meta name="twitter:title" content="Poke">
<meta name="twitter:description" content="Poke's aim is to provide designers & front-end developers with an easy-to-use button toolkit. ">
<meta name="twitter:image" content="http://i.imgur.com/d21NJPt.png">
<link rel="shortcut icon" type="image/png" href="http://i.imgur.com/d21NJPt.png"/>
<style>
body{
background-color: #FFF;
margin: 0;
padding: 0;
}
@font-face {
font-family: 'Apercu';
src: local('Apercu'), url('https://s3-us-west-2.amazonaws.com/feathercfm/assets/Apercu.otf') format('opentype');
}
.tag{
font-size: 65px;
font-family: 'Apercu', sans-serif;
font-weight: bolder;
padding-top: 35vh;
padding-bottom: 50vh;
transition: .25s;
color: #EEE;
text-align: center;
cursor: pointer;
}
.tag:hover{
transition: .25s;
color: #AAA;
cursor: pointer;
}
.tag:active{
box-shadow: inset 0 0px 8px rgba(0,0,0,.75);
}
p{
font-size: 22px;
font-family: 'Apercu', sans-serif;
color: #aaa;
text-align: left;
width: 625px;
letter-spacing: 0.01em;
line-height: 150%;
}
a{
transition: .2s;
font-weight: bolder;
text-decoration: none;
color: #2C3979;
opacity: .8;
}
a:hover{
transition: .2s;
font-weight: bolder;
opacity: .5;
}
@media (max-width:450px) {
.mobile{
width: 95%;
margin-top: 50px;
}
.tag{
display: none;
}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
}
.first-container{
height: 100%;
top: 0;
margin-bottom: 150px;
}
</style>
</head>
<body id="body">
<a href="https://github.com/gregjw/poke">
<div class="first-container">
<div class="tag"><img alt="react-poke" src="http://i.imgur.com/d21NJPt.png" height="250px"></div>
</div>
</a>
<p class="mobile center" id="text">
Poke is a component library specifically for buttons, built on top of styled-components.
<br><br>
Brought to you by <a href="https://feather-cfm.com">Feather</a> and our design community, <a href="https://uiux.blog">Human Friendly</a>.
<br><br>
Poke's aim is to provide designers & front-end developers with an easy-to-use button toolkit.
<br><br>
The ramp for front-end basics is getting shorter to shorter and the team at Feather thought that an incredibly specific component library would be pretty useful for developers, in the age of Bootstrap and Foundation, where the majority of developers are used to having a highly-usable tool at their fingertips within seconds.
<br><br>
We want to emphasise that Poke is an evolving codebase & completely open design project, please feel free to submit a pull request and contribute your own button sets.
<br><br><br><br><br><br>
I have <a href="https://twitter.com/gregjwww">Twitter</a> and <a href="mailto:[email protected]">an email address</a>, say hi!
<div style="display:block;height:150px;"></div>
</p>
<a href="https://js.org" target="_blank" title="JS.ORG | JavaScript Community">
<img src="https://logo.js.org/dark_horz.png" width="102" alt="JS.ORG Logo"/></a>
<!-- alternatives [bright|dark]_[horz|vert|tiny].png (width[horz:102,vert:50,tiny:77]) -->
</body>
</html>