Skip to content

Commit 7450003

Browse files
author
Pietro Albini
committed
Redesigned the website!
1 parent 09820e3 commit 7450003

File tree

4 files changed

+219
-71
lines changed

4 files changed

+219
-71
lines changed

‎website/_static/fonts/bitter.ttf‎

-25.3 KB
Binary file not shown.

‎website/_static/fonts/dejavu.ttf‎

-738 KB
Binary file not shown.

‎website/_static/style.css‎

Lines changed: 150 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,94 @@
11
@charset "utf-8";
22

3-
@font-face {
4-
font-family: 'Bitter';
5-
font-style: normal;
6-
font-weight: 700;
7-
src: url('fonts/bitter.ttf') format('truetype');
8-
}
9-
10-
@font-face {
11-
font-family: 'DejaVu';
12-
font-style: normal;
13-
font-weight: 400;
14-
src: url('fonts/dejavu.ttf') format('truetype');
15-
}
16-
173
body {
18-
font-family: 'DejaVu', sans-serif;
4+
font-family: DejaVu Sans;
195
color: #333;
206
margin: 0;
217
}
228

239
div.wrapper {
24-
width: 45em;
10+
width: 50em;
2511
margin: auto;
2612
}
2713

14+
div.row {
15+
padding: 0.5em 0;
16+
}
17+
18+
hr {
19+
border: 0;
20+
border-bottom: 0.1em dotted #ccc;
21+
margin: 0;
22+
}
23+
24+
2825
h1 {
2926
text-align: center;
30-
margin-bottom: 1em;
3127
font-size: 2.5em;
3228
font-family: 'Bitter', serif;
33-
margin: 0.4em 0;
29+
margin: 0.3em 0 0 0;
3430
}
3531

36-
hr {
37-
width: 40%;
38-
margin: 1.5em auto;
39-
border: 0;
40-
border-bottom: 0.1em dotted #ccc;
32+
h2 {
33+
text-align: center;
34+
font-size: 1.2em;
35+
font-family: 'Bitter', serif;
36+
font-weight: 400;
37+
line-height: 1.3em;
38+
word-spacing: 0.1em;
39+
margin: 0.3em 0 1em 0;
40+
color: #aaa;
4141
}
4242

43+
4344
p {
44-
line-height: 1.4em;
45+
line-height: 1.5em;
46+
}
47+
48+
49+
50+
div.cleared:after {
51+
content: "";
52+
height: 0;
53+
visibility: hidden;
54+
display: block;
55+
clear: both;
56+
}
57+
58+
div.cleared div.left {
59+
width: 48%;
60+
float: left;
61+
}
62+
63+
div.cleared div.right {
64+
width: 48%;
65+
float: right;
66+
}
67+
68+
div.vcenter-text {
69+
display: table;
70+
}
71+
72+
div.vcenter-text > p {
73+
display: table-cell;
74+
vertical-align: middle;
75+
text-align: center;
76+
}
77+
78+
79+
80+
div.motto {
81+
height: 13.4em;
82+
}
83+
84+
div.motto p {
85+
font-weight: 300;
86+
font-size: 1.8em;
4587
}
4688

4789
nav ul {
4890
text-align: center;
49-
margin: 1em 0;
91+
margin: 0;
5092
padding: 0;
5193
}
5294

@@ -57,31 +99,29 @@ nav ul li {
5799

58100
nav ul li a {
59101
color: #179cde;
60-
padding: 0 0.7em;
102+
padding: 0.5em 0.7em;
61103
display: block;
62-
font-weight: bold;
63104
font-family: 'Bitter', serif;
64105
font-size: 1.2em;
65-
text-align: center;
66106
text-decoration: none;
67-
transition: .2s all ease-in-out;
68-
border-radius: 3px;
107+
word-spacing: 0.1em;
108+
transition: .2s color ease-in-out;
69109
}
70110

71111
nav ul li a:hover {
72-
color: #555;
112+
color: #54a9eb;
73113
}
74114

75115
footer ul {
76-
margin: 1em 0;
116+
margin: 0 0 1em 0;
77117
text-align: center;
78118
padding: 0;
79119
}
80120

81121
footer ul li {
82122
list-style: none;
83123
display: inline-block;
84-
font-size: 0.85em;
124+
font-size: 0.91em;
85125
color: #aaa;
86126
margin: 0 0.5em;
87127
}
@@ -96,20 +136,94 @@ footer ul li a:hover {
96136
border-bottom-color: #aaa;
97137
}
98138

99-
@media all and (max-width: 47em) {
139+
140+
141+
pre {
142+
font-family: "Hack", monospace;
143+
font-size: 0.81em;
144+
line-height: 1.4em;
145+
}
146+
147+
pre span.ck {
148+
font-weight: bold;
149+
color: #179cde;
150+
}
151+
152+
pre span.cs {
153+
color: #00af00;
154+
}
155+
156+
pre span.cc {
157+
color: #888;
158+
}
159+
160+
pre span.cd {
161+
font-weight: bold;
162+
color: #444;
163+
}
164+
165+
pre span.less {
166+
opacity: 0.4;
167+
transition: .2s opacity ease-out;
168+
}
169+
170+
pre:hover span.less {
171+
opacity: 0.7;
172+
}
173+
174+
175+
176+
@media all and (max-width: 52em) {
100177

101178
div.wrapper {
102179
width: auto;
103180
padding: 0 1em;
104181
}
105182

183+
div.cleared div.left, div.cleared div.right {
184+
float: none;
185+
width: 100%;
186+
}
187+
188+
div.pre-container {
189+
text-align: center;
190+
overflow-x: auto;
191+
margin: 0 -1em;
192+
padding: 0 1em;
193+
}
194+
195+
div.pre-container pre {
196+
display: inline-block;
197+
text-align: left;
198+
}
199+
200+
div.motto {
201+
height: auto;
202+
padding: 0.8em 0;
203+
}
204+
205+
nav ul {
206+
margin: 0.3em 0 0.7em 0;
207+
}
208+
106209
nav ul li, footer ul li {
107-
display: block;
108-
margin-bottom: 0.5em;
210+
display: inline-block;
211+
}
212+
213+
nav ul li a {
214+
padding: 0.2em 0.7em;
109215
}
110216

111217
nav ul li:last-child, footer ul li:last-child {
112218
margin-bottom: 0;
113219
}
114220

221+
footer {
222+
margin-bottom: 2em;
223+
}
224+
225+
footer ul li {
226+
margin: 0.3em 0.5em;
227+
}
228+
115229
}

‎website/index.html‎

Lines changed: 69 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,82 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>botogram - A microframework for telegram bots</title>
7-
8-
<link rel="stylesheet" href="/_static/style.css">
6+
<title>botogram - Python framework for Telegram bots</title>
97
</head>
108
<body>
11-
<div class="wrapper">
12-
<h1>botogram</h1>
13-
<hr>
14-
<div>
9+
<link rel="stylesheet" href="_static/style.css">
10+
11+
<div class="row">
12+
<div class="wrapper">
13+
<h1>botogram</h1>
14+
<h2>Python framework for Telegram bots</h2>
15+
</div>
16+
</div>
17+
<hr>
18+
<div class="row">
19+
<div class="wrapper">
20+
<div class="cleared">
21+
<div class="left pre-container">
22+
<pre>
23+
<span class="less"><span class="ck">import</span> botogram
24+
bot = botogram.create(<span class="cs">"API-KEY"</span>)
25+
</span>
26+
<span class="cd">@bot.command</span>(<span class="cs">"hello"</span>)
27+
<span class="ck">def</span> hello_command(chat, message, args):
28+
<span class="cc">"""Say hello to the world!"""</span>
29+
chat.send(<span class="cs">"Hello world"</span>)
30+
<span class="less">
31+
<span class="ck">if</span> __name__ == <span class="cs">"__main__"</span>:
32+
bot.run()
33+
</span></pre>
34+
</div>
35+
<div class="right vcenter-text motto">
36+
<p>Just focus on your bots.</p>
37+
</div>
38+
</div>
39+
<nav>
40+
<ul>
41+
<li><a href="https://github.com/pietroalbini/botogram">
42+
Source code
43+
</a></li>
44+
<li><a href="https://botogram.pietroalbini.io/docs">
45+
Documentation
46+
</a></li>
47+
<li><a href="https://telegram.me/botogram_framework">
48+
Telegram channel
49+
</a></li>
50+
</ul>
51+
</nav>
52+
</div>
53+
</div>
54+
<hr>
55+
<div class="row">
56+
<div class="wrapper">
1557
<p>
16-
botogram is a MIT-licensed microframework, which aims to
17-
simplify the creation of Telegram bots. It offers a
18-
concise, simple API, which allows you to spend all your
19-
creativity in the bot, without worrying about anything
20-
else.
58+
botogram is a Python framework, which allows you to focus
59+
just on creating your Telegram bots, without worrying
60+
about the underlying Bots API.
2161
</p>
2262
<p>
23-
It also provides a robust, fully scalable bot runner
24-
process, which will be able to process fastly high
25-
workloads. And as if this isn’t enough, it has builtin
26-
support for commands, with an automatically-generated /help
27-
command.
63+
While most of the libraries for Telegram out there just
64+
wrap the Bots API, botogram focuses heavily on the
65+
development experience, aiming to provide you the best API
66+
possible. Most of the Telegram implementation details are
67+
managed by botogram, so you can just focus on your bot.
2868
</p>
2969
</div>
30-
<hr>
31-
<nav>
32-
<ul>
33-
<li><a href="https://github.com/pietroalbini/botogram">
34-
Fork on GitHub
35-
</a></li>
36-
<li><a href="/docs">Read the documentation</a></li>
37-
</ul>
38-
</nav>
39-
<hr>
40-
<footer>
41-
<ul>
42-
<li>Copyright &copy; 2015
43-
<a href="http://pietroalbini.io">Pietro Albini</a>
44-
</li>
45-
<li>botogram is released under the MIT license.</li>
46-
</ul>
47-
</footer>
4870
</div>
71+
<footer>
72+
<ul>
73+
<li>Copyright &copy; 2015-2016
74+
<a href="https://pietroalbini.io">Pietro Albini</a>
75+
</li>
76+
<li>botogram is released under the MIT license.</li>
77+
</ul>
78+
</footer>
79+
80+
<link rel="stylesheet" href="https://assets.pietroalbini.io/fonts/bitter/include.min.css">
81+
<link rel="stylesheet" href="https://assets.pietroalbini.io/fonts/dejavu-sans/include.min.css">
82+
<link rel="stylesheet" href="https://assets.pietroalbini.io/fonts/hack/include.min.css">
4983
</body>
5084
</html>

0 commit comments

Comments
 (0)