trnck.dev
blog.trnck.dev
Responsive images
Shamelessly stolen from https://github.com/Meziklassociation/meziklasi
+93
-44
+3
-1
Gemfile
+3
-1
Gemfile
+6
-1
_config.yml
+6
-1
_config.yml
···
15
15
social_media:
16
16
x: filiptronicek
17
17
linkedin: filiptronicek
18
+
user:
19
+
name: "Filip Troníček"
20
+
login: filiptronicek
18
21
title: Filip's Blog
19
22
author: filiptronicek
20
-
repository: "filiptronicek/blog"
23
+
repository: "filiptronicek/blog"
24
+
picture:
25
+
suppress_warnings: true
+12
_data/picture.yml
+12
_data/picture.yml
+1
-1
_includes/header.html
+1
-1
_includes/header.html
···
17
17
{% assign meta_image = page.image | prepend: "/img/thumbnail/" | absolute_url %}
18
18
{% endif %}
19
19
{% else %}
20
-
{% assign page_title = user.name %}
20
+
{% assign page_title = site.title %}
21
21
{% assign meta_description = user.bio | strip_html | strip_newlines | xml_escape | truncate: 300 %}
22
22
{% assign meta_image = user.avatar_url %}
23
23
{% endif %}
+4
-21
_includes/masthead.html
+4
-21
_includes/masthead.html
···
11
11
</picture>
12
12
</a>
13
13
14
-
<h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed"><a href="{{ site.url }}{{ site.baseurl | append:'/' }}">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</a></h1>
14
+
<h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed"><a href="{{ site.url }}{{ site.baseurl | append:'/' }}">{% if site.title %}{{ site.title }}{% endif %}</a></h1>
15
15
<p class="mb-3 f4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">
16
16
{{ user.bio }}
17
17
</p>
18
18
19
19
{% if include.metadata %}
20
20
<div class="f4 mb-6">
21
-
{% if user.name %}
21
+
{% if site.user.name %}
22
22
<div class="{{ metadata_styles }}">
23
23
{% octicon mark-github height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %}
24
-
<a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
25
-
@{{ user.login }}
24
+
<a href="https://github.com/{{ site.user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
25
+
@{{ site.user.login }}
26
26
</a>
27
27
</div>
28
28
{% endif %}
29
-
{% if user.email %}
30
-
<div class="{{ metadata_styles }}">
31
-
{% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %}
32
-
<a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
33
-
{{ user.email }}
34
-
</a>
35
-
</div>
36
-
{% endif %}
37
-
{% if user.location %}
38
-
<div class="{{ metadata_styles }} {% if site.style == 'dark' %}text-white{% endif %}">
39
-
{% octicon location height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Location %}
40
-
{{ user.location }}
41
-
</div>
42
-
{% endif %}
43
29
{% if site.social_media %}
44
30
<div class="d-flex flex-wrap flex-items-start {% if site.layout == 'stacked' %}flex-justify-center mt-1 mt-md-3{% endif %}">
45
31
{% for account in site.social_media %}
···
52
38
</div>
53
39
{% endfor %}
54
40
</div>
55
-
{% endif %}
56
-
{% if user.hireable %}
57
-
<a href="https://www.linkedin.com/in/filiptronicek/" target="_blank"><span title="Hire me" class="d-inline-block f5 rounded-2 text-white bg-green py-1 px-2">Available for hire</span></a>
58
41
{% endif %}
59
42
</div>
60
43
{% endif %}
+6
-3
_layouts/post.html
+6
-3
_layouts/post.html
···
15
15
16
16
{% assign total_shareable_services = shareable_social_media | size %}
17
17
{% endif %}
18
-
<div class="article">
18
+
<article class="article">
19
19
{{ content }}
20
-
</div>
20
+
</article>
21
21
{% endcapture %}
22
22
23
23
{% if site.layout == 'stacked' %}
···
43
43
<div class="f4 {% if site.style == 'dark' %}text-white{% endif %}">
44
44
<p class="f5"><a href="{{ site.baseurl | append:'/' }}" class="d-flex flex-items-center {% if site.style == 'dark' %}text-white{% endif %}">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home</a></p>
45
45
<h1 class="f00-light lh-condensed">{{ page.title }}</h1>
46
-
<p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p>
46
+
<p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">
47
+
Published
48
+
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%b %d, %Y" }}</time>
49
+
</p>
47
50
{{ post_body }}
48
51
</div>
49
52
</div>
+8
-11
_posts/2019-09-14-roboschool_2019.md
+8
-11
_posts/2019-09-14-roboschool_2019.md
···
4
4
---
5
5
6
6
Hi everybody!
7
-
last week, I was in Germany for a week at the Technical University of Chemnitz, where I was attending the project RoboSchool for the week. The goal for the week was to build a working robot from scratch. With that in mind, we started with soldering the parts onto the mainboard, which we then connected to an Arduino Uno.
8
-
9
-
10
-
11
-
12
-
7
+
last week, I was in Germany for a week at the Technical University of Chemnitz, where I was attending the project RoboSchool for the week. The goal for the week was to build a working robot from scratch. With that in mind, we started with soldering the parts onto the mainboard, which we then connected to an Arduino Uno.
13
8
9
+
{% picture /img/martin.webp %}
10
+
{% picture /img/soldered_desk.webp %}
11
+
{% picture /img/robot.webp %}
14
12
15
13
Thanks to the [UNObot library](https://github.com/tuc-roboschool/UNObot) for the robot written by Florian Zylla, we were able to keep the code very easily readable. After a couple of hours developing and testing, we had to start all over again, because our code structure was just too sophisticated. We made a sketch and all the if statements were now far easier to understand. There was a parkour course, which we had to guide our robot trough. It was easy at first because we only needed to check if the robot is on a line and that was it. But then came the dashed lines. Most teams solved it with just letting the robot go straight when the sensors didn't see a line, but that was too bad for you know.... us, so we developed an Easy Exploring Algorithm (EEA). The point was to let the robot look around and if he doesn't see anything just go a little bit forward and repeat the process.
16
14
17
-
18
-
19
-
15
+
{% picture /img/robot_on_line.webp %}
16
+
{% picture /img/martin_coding.webp %}
20
17
21
18
I hope you enjoyed this post. See you again soon,
22
19
Filip
23
20
24
-
25
21
Extra code :)
26
-
<script src="https://gist.github.com/filiptronicek/eedffddc9f21584490f461c5c634b31b.js"></script>
22
+
23
+
<script src="https://gist.github.com/filiptronicek/eedffddc9f21584490f461c5c634b31b.js"></script>
+2
-1
_posts/2020-08-06-terminal-tricks.md
+2
-1
_posts/2020-08-06-terminal-tricks.md
···
17
17
With the introduction of Windows Subsystem for Linux version 2, you can do even more, because of the deeper integration of Linux into the Terminal. You can even have a GUI!
18
18
19
19
You can have a lot of them running at once, just like this:
20
-
20
+
21
+
{% picture /img/terminal.png --alt Desktop setup with multiple tabs %}
21
22
22
23
### References
23
24
1. How to install WSL (2) on Windows 10 (Microsoft Docs): https://docs.microsoft.com/en-us/windows/wsl/install-win10
+51
-5
assets/styles.scss
+51
-5
assets/styles.scss
···
52
52
}
53
53
54
54
.article {
55
+
55
56
h1,
56
57
h2,
57
58
h3,
···
78
79
padding-left: 16px;
79
80
margin-bottom: 0px;
80
81
}
82
+
83
+
img {
84
+
width: 100%;
85
+
height: 100%;
86
+
max-width: 100%;
87
+
display: block;
88
+
}
89
+
90
+
@media (min-width: 768px) {
91
+
img {
92
+
max-width: 80%;
93
+
}
94
+
}
95
+
96
+
@media (min-width: 1200px) {
97
+
img {
98
+
max-width: 60%;
99
+
}
100
+
}
81
101
}
82
102
83
103
.min-height-full {
84
104
min-height: 100vh;
85
105
}
86
-
img {
87
-
max-width: 60%;
88
-
}
89
-
h1.text-white > a:nth-child(1) {
106
+
107
+
h1.text-white>a:nth-child(1) {
90
108
text-decoration: none;
91
109
color: white !important;
92
110
}
···
108
126
width: 100%;
109
127
}
110
128
}
129
+
111
130
@media screen and (max-width: 600px) {
131
+
112
132
table,
113
133
thead,
114
134
tbody,
···
117
137
tr {
118
138
display: block;
119
139
}
140
+
120
141
thead tr {
121
142
position: absolute;
122
143
top: -9999px;
123
144
left: -9999px;
124
145
}
146
+
125
147
tr {
126
148
margin-bottom: 0.5rem;
127
149
}
150
+
128
151
td {
129
152
border: none;
130
153
border-bottom: 1px solid #ddd;
131
154
position: relative;
132
155
padding-left: 50%;
133
156
}
157
+
134
158
td:before {
135
159
position: absolute;
136
160
top: 6px;
···
146
170
table {
147
171
border-color: #444;
148
172
}
173
+
149
174
th,
150
175
td {
151
176
border-color: #444;
152
177
}
178
+
153
179
th {
154
180
background-color: #333;
155
181
}
182
+
156
183
tr:nth-child(even) {
157
184
background-color: #222;
158
185
}
186
+
159
187
tr:hover {
160
188
background-color: #444;
161
189
}
190
+
162
191
h1,
163
192
h2,
164
193
h3,
165
194
h4 {
166
195
color: #e4e4e4 !important;
167
196
}
197
+
168
198
body {
169
199
background-color: #444 !important;
170
200
color: #e4e4e4 !important;
171
201
}
202
+
172
203
a {
173
204
color: #e39777 !important;
174
205
}
206
+
175
207
img {
176
208
filter: grayscale(30%) !important;
177
209
}
210
+
178
211
.bg-gray-light {
179
212
background-color: rgb(48, 48, 48) !important;
180
213
}
214
+
181
215
.text-gray,
182
216
.text-gray-dark,
183
217
.text-gray-light {
184
218
color: #cac7c7 !important;
185
219
}
220
+
186
221
.border {
187
222
border: none !important;
188
223
}
224
+
189
225
.bg-white {
190
226
background: rgb(45, 45, 45) !important;
191
227
}
228
+
192
229
.octicon {
193
230
filter: invert(1);
194
231
}
232
+
195
233
.link-gray-dark,
196
234
.contrib-number {
197
235
color: #e4e4e4 !important;
198
236
}
237
+
199
238
.border-md-right,
200
239
.border-md-bottom {
201
240
border: none !important;
202
241
}
203
242
}
243
+
204
244
.twitter-timeline {
205
245
margin-top: 150px;
206
246
}
247
+
207
248
html {
208
249
content: "";
209
250
}
251
+
210
252
@media (prefers-color-scheme: light) {
211
253
html {
212
254
content: "light";
213
255
}
256
+
214
257
th {
215
258
background-color: #f2f2f2;
216
259
}
217
260
}
261
+
218
262
@media (prefers-color-scheme: dark) {
219
263
html {
220
264
content: "dark";
221
265
}
222
266
}
267
+
223
268
.lh-condensed a:hover {
224
269
text-decoration: none;
225
270
}
271
+
226
272
.logo:hover {
227
273
filter: brightness(var(--hover-brightness));
228
-
}
274
+
}