From a55eeb6404eb816a4de2e6d86bf6e6d7302aee48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Tue, 6 Aug 2024 16:38:37 +0000 Subject: [PATCH] Responsive images Shamelessly stolen from https://github.com/Meziklassociation/meziklasi --- Gemfile | 4 +- _config.yml | 7 +++- _data/picture.yml | 12 ++++++ _includes/header.html | 2 +- _includes/masthead.html | 25 ++----------- _layouts/post.html | 9 +++-- _posts/2019-09-14-roboschool_2019.md | 19 ++++------ _posts/2020-08-06-terminal-tricks.md | 3 +- assets/styles.scss | 56 +++++++++++++++++++++++++--- 9 files changed, 93 insertions(+), 44 deletions(-) create mode 100644 _data/picture.yml diff --git a/Gemfile b/Gemfile index 12feb27..31c5c8c 100644 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,8 @@ source 'https://rubygems.org' -gem "github-pages", "~> 231", group: :jekyll_plugins +group :jekyll_plugins do + gem 'jekyll_picture_tag', '~> 2.0' +end gem "jekyll-github-metadata" gem "jekyll-octicons" gem "jemoji" diff --git a/_config.yml b/_config.yml index cab63ec..bff93cb 100644 --- a/_config.yml +++ b/_config.yml @@ -15,6 +15,11 @@ defaults: social_media: x: filiptronicek linkedin: filiptronicek +user: + name: "Filip Troníček" + login: filiptronicek title: Filip's Blog author: filiptronicek -repository: "filiptronicek/blog" \ No newline at end of file +repository: "filiptronicek/blog" +picture: + suppress_warnings: true diff --git a/_data/picture.yml b/_data/picture.yml new file mode 100644 index 0000000..6133e70 --- /dev/null +++ b/_data/picture.yml @@ -0,0 +1,12 @@ +presets: + default: + markup: picture + formats: [avif, original] + widths: [600, 800, 1200, 1800] + link_source: true + quality: 75 + format_quality: + avif: 75 + strip_metadata: true + keep: attention + dimension_attributes: true diff --git a/_includes/header.html b/_includes/header.html index c4de42e..ca37754 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -17,7 +17,7 @@ {% assign meta_image = page.image | prepend: "/img/thumbnail/" | absolute_url %} {% endif %} {% else %} - {% assign page_title = user.name %} + {% assign page_title = site.title %} {% assign meta_description = user.bio | strip_html | strip_newlines | xml_escape | truncate: 300 %} {% assign meta_image = user.avatar_url %} {% endif %} diff --git a/_includes/masthead.html b/_includes/masthead.html index d5b7d06..1c07677 100644 --- a/_includes/masthead.html +++ b/_includes/masthead.html @@ -11,35 +11,21 @@ -

{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}

+

{% if site.title %}{{ site.title }}{% endif %}

{{ user.bio }}

{% if include.metadata %}
- {% if user.name %} + {% if site.user.name %}
{% octicon mark-github height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %} - - @{{ user.login }} + + @{{ site.user.login }}
{% endif %} - {% if user.email %} -
- {% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %} - - {{ user.email }} - -
- {% endif %} - {% if user.location %} -
- {% octicon location height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Location %} - {{ user.location }} -
- {% endif %} {% if site.social_media %}
{% for account in site.social_media %} @@ -53,8 +39,5 @@ {% endfor %}
{% endif %} - {% if user.hireable %} - Available for hire - {% endif %}
{% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index bd11c5c..f8544ff 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -15,9 +15,9 @@ {% assign total_shareable_services = shareable_social_media | size %} {% endif %} -
+
{{ content }} -
+ {% endcapture %} {% if site.layout == 'stacked' %} @@ -43,7 +43,10 @@

{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home

{{ page.title }}

-

Published {{ page.date | date: "%b %d, %Y"}}

+

+ Published + +

{{ post_body }}
diff --git a/_posts/2019-09-14-roboschool_2019.md b/_posts/2019-09-14-roboschool_2019.md index b4020fb..975deed 100644 --- a/_posts/2019-09-14-roboschool_2019.md +++ b/_posts/2019-09-14-roboschool_2019.md @@ -4,23 +4,20 @@ layout: post --- Hi everybody! -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. - - -![image](/img/martin.webp) -![image](/img/soldered_desk.webp) -![image](/img/robot.webp) +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. +{% picture /img/martin.webp %} +{% picture /img/soldered_desk.webp %} +{% picture /img/robot.webp %} 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. - -![image](/img/robot_on_line.webp) -![image](/img/martin_coding.webp) +{% picture /img/robot_on_line.webp %} +{% picture /img/martin_coding.webp %} I hope you enjoyed this post. See you again soon, Filip - Extra code :) - \ No newline at end of file + + diff --git a/_posts/2020-08-06-terminal-tricks.md b/_posts/2020-08-06-terminal-tricks.md index f0c6aa8..27d1cec 100644 --- a/_posts/2020-08-06-terminal-tricks.md +++ b/_posts/2020-08-06-terminal-tricks.md @@ -17,7 +17,8 @@ You can have Linux in the Terminal, too! Just download Ubuntu, Alpine, Debian, o 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! You can have a lot of them running at once, just like this: -![Desktop setup with multiple tabs](/img/terminal.png) + +{% picture /img/terminal.png --alt Desktop setup with multiple tabs %} ### References 1. How to install WSL (2) on Windows 10 (Microsoft Docs): https://docs.microsoft.com/en-us/windows/wsl/install-win10 diff --git a/assets/styles.scss b/assets/styles.scss index 0458d91..fd972b3 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -52,6 +52,7 @@ } .article { + h1, h2, h3, @@ -78,15 +79,32 @@ padding-left: 16px; margin-bottom: 0px; } + + img { + width: 100%; + height: 100%; + max-width: 100%; + display: block; + } + + @media (min-width: 768px) { + img { + max-width: 80%; + } + } + + @media (min-width: 1200px) { + img { + max-width: 60%; + } + } } .min-height-full { min-height: 100vh; } -img { - max-width: 60%; -} -h1.text-white > a:nth-child(1) { + +h1.text-white>a:nth-child(1) { text-decoration: none; color: white !important; } @@ -108,7 +126,9 @@ table { width: 100%; } } + @media screen and (max-width: 600px) { + table, thead, tbody, @@ -117,20 +137,24 @@ table { tr { display: block; } + thead tr { position: absolute; top: -9999px; left: -9999px; } + tr { margin-bottom: 0.5rem; } + td { border: none; border-bottom: 1px solid #ddd; position: relative; padding-left: 50%; } + td:before { position: absolute; top: 6px; @@ -146,83 +170,105 @@ table { table { border-color: #444; } + th, td { border-color: #444; } + th { background-color: #333; } + tr:nth-child(even) { background-color: #222; } + tr:hover { background-color: #444; } + h1, h2, h3, h4 { color: #e4e4e4 !important; } + body { background-color: #444 !important; color: #e4e4e4 !important; } + a { color: #e39777 !important; } + img { filter: grayscale(30%) !important; } + .bg-gray-light { background-color: rgb(48, 48, 48) !important; } + .text-gray, .text-gray-dark, .text-gray-light { color: #cac7c7 !important; } + .border { border: none !important; } + .bg-white { background: rgb(45, 45, 45) !important; } + .octicon { filter: invert(1); } + .link-gray-dark, .contrib-number { color: #e4e4e4 !important; } + .border-md-right, .border-md-bottom { border: none !important; } } + .twitter-timeline { margin-top: 150px; } + html { content: ""; } + @media (prefers-color-scheme: light) { html { content: "light"; } + th { background-color: #f2f2f2; } } + @media (prefers-color-scheme: dark) { html { content: "dark"; } } + .lh-condensed a:hover { text-decoration: none; } + .logo:hover { filter: brightness(var(--hover-brightness)); -} +} \ No newline at end of file -- 2.51.2