diff --git a/_includes/avatar.html b/_includes/avatar.html
index 0ef7fad..5c10d6a 100644
--- a/_includes/avatar.html
+++ b/_includes/avatar.html
@@ -1,7 +1,7 @@
 <img height="{{include.height}}"
-  width="{{include.width}}"
-  class="{{include.class}}"
-  {% if post.author and post.avatar %}
-  alt="{{locale.alt_text_prefix}} {{post.author}}"
-  {% endif %}
-  src="{% if post.avatar contains '://' %}{% elsif post.avatar %}{{ site.baseurl }}/hackergotchi/{% else %}{{ site.baseurl }}/hackergotchi/default.png{% endif %}{{ post.avatar }}"/>
+	width="{{include.width}}"
+	class="{{include.class}}"
+	{% if post.author and post.avatar %}
+	alt="{{locale.alt_text_prefix}} {{post.author}}"
+	{% endif %}
+	src="{% if post.avatar contains '://' %}{% elsif post.avatar %}{{ site.baseurl }}/hackergotchi/{% else %}{{ site.baseurl }}/hackergotchi/default.png{% endif %}{{ post.avatar }}"/>
diff --git a/_includes/calendar.html b/_includes/calendar.html
index ad40c73..00f41c8 100644
--- a/_includes/calendar.html
+++ b/_includes/calendar.html
@@ -5,9 +5,9 @@
 <h3 class="text-center font-weight-bold">
 {% include icons/calendar.svg %}
 {% if page.locale.id == 'en' %}
-  {{ post.created_at | date: '%a' }}, {{ post.created_at | date_to_string: "ordinal", "US" }}
+	{{ post.created_at | date: '%a' }}, {{ post.created_at | date_to_string: "ordinal", "US" }}
 {% else %}
-  {{ post.created_at | localize_date }}
+	{{ post.created_at | localize_date }}
 {% endif %}
 </h3>
 {% endif %}
diff --git a/_includes/main-info.html b/_includes/main-info.html
index 4f2dd24..24b2f04 100644
--- a/_includes/main-info.html
+++ b/_includes/main-info.html
@@ -1,38 +1,38 @@
 <div class="py-3 mb-3 border-bottom bg-light map-container">
-  <div class="map">
-    {% include map.svg %}
-  </div>
-  <div class="container">
-    <div class="row col-md-10 mx-auto">
-      <div class="col-md-auto d-flex">
-        <img class="mx-auto"
-          {% if locale.logo_alt_text %}
-          alt="{{locale.logo_alt_text}}"
-          {% endif %}
-          src="{{ site.baseurl }}/assets/images/logo.svg"/>
-      </div>
-      <div class="col-md my-auto">
-        <h2>{% if page.locale.name == 'Global' %}{{ locale.welcome }}{% else %}{{ locale.welcome_lang }}{% endif %}</h2>
-        {% capture project %}
-          <a href="https://opensuse.org">{{ locale.subtitle_project }}</a>
-        {% endcapture %}
-        <h5>{{ locale.subtitle | replace: '$project', project }}</h5>
-      </div>
-      <div class="col-12 text-center">
-      {% assign sorted = site.tags | sort %}
-      {% for tag in sorted %}
-      {% assign lang = site.localization.locales_set[tag.first] %}
-        <a class="mx-2" href="{{ site.baseurl }}/{{ tag.first }}/">{{ lang.name }}</a>
-      {% endfor %}
-      </div>
-    </div>
-  </div>
+	<div class="map">
+		{% include map.svg %}
+	</div>
+	<div class="container">
+		<div class="row col-md-10 mx-auto">
+			<div class="col-md-auto d-flex">
+				<img class="mx-auto"
+					{% if locale.logo_alt_text %}
+					alt="{{locale.logo_alt_text}}"
+					{% endif %}
+					src="{{ site.baseurl }}/assets/images/logo.svg"/>
+			</div>
+			<div class="col-md my-auto">
+				<h2>{% if page.locale.name == 'Global' %}{{ locale.welcome }}{% else %}{{ locale.welcome_lang }}{% endif %}</h2>
+				{% capture project %}
+					<a href="https://opensuse.org">{{ locale.subtitle_project }}</a>
+				{% endcapture %}
+				<h5>{{ locale.subtitle | replace: '$project', project }}</h5>
+			</div>
+			<div class="col-12 text-center">
+			{% assign sorted = site.tags | sort %}
+			{% for tag in sorted %}
+			{% assign lang = site.localization.locales_set[tag.first] %}
+				<a class="mx-2" href="{{ site.baseurl }}/{{ tag.first }}/">{{ lang.name }}</a>
+			{% endfor %}
+			</div>
+		</div>
+	</div>
 </div>
 <div class="container">
-  <div class="row col-md-10 mx-auto">
-    {% capture instructions %}
-    <a href="https://en.opensuse.org/openSUSE:Planet">{{ locale.addnotice_instructions }}</a>
-    {% endcapture %}
-    <div class="alert alert-info w-100">{{ locale.addnotice | replace: '$instructions', instructions }}</div>
-  </div>
+	<div class="row col-md-10 mx-auto">
+		{% capture instructions %}
+		<a href="https://en.opensuse.org/openSUSE:Planet">{{ locale.addnotice_instructions }}</a>
+		{% endcapture %}
+		<div class="alert alert-info w-100">{{ locale.addnotice | replace: '$instructions', instructions }}</div>
+	</div>
 </div>
diff --git a/_includes/single-post.html b/_includes/single-post.html
index 5608cfc..e19581d 100644
--- a/_includes/single-post.html
+++ b/_includes/single-post.html
@@ -5,58 +5,83 @@
 	<div class="col-12 col-md-8 p-0">
 		<div class="card mb-3 card-sm-border-0">
 			<div class="row m-0 border-bottom">
-			<div class="col-auto d-md-none d-flex p-0">
-			{% include avatar.html width="48px" class="my-auto mr-2" %}
-			</div>
-			<div class="col card-header d-flex justify-content-between pl-1 pl-md-3 border-0">
-				<div>
-				{% capture post_author %}
-				<a href="{{ post.link }}">{{ post.author }}</a>
-				<a href="{{ post.rss }}">{% include icons/feed.svg %}</a>
-				{% endcapture %}
-				{% capture post_language %}
-				{% assign lang = site.localization.locales_set[post.tags.first] %}
-				<a class="text-muted" href="{{ site.baseurl }}/{{ post.tags.first }}/">{{ lang.name }}</a>
-				{% endcapture %}
-				{% capture post_time %}
-				<a class="text-muted" href="{{ post.original_link }}">{{ post.created_at | date: "%H:%M" }}</a>
-				{% endcapture %}
-				<span class="text-muted">
-				{% if include.language %}
-				  {{ locale.postedinat | replace: '$author', post_author | replace: '$language', post_language | replace: '$time', post_time }}
-				{% else %}
-				  {{ locale.postedat | replace: '$author', post_author | replace: '$time', post_time }}
-				{% endif %}
-				</span>
+				<div class="col-auto d-md-none d-flex p-0">
+					{% include avatar.html width="48px" class="my-auto mr-2" %}
 				</div>
-				<div>
-				{% if post.member %}
-					<a title="openSUSE Member" href="{% if post.connect %}https://connect.opensuse.org/pg/profile/{{ post.connect }}{% else %}https://en.opensuse.org/openSUSE:Members{% endif %}" class="badge badge-success"><img src="{{ site.baseurl }}/assets/images/profile/member.svg"/> Member</a>
-				{% elsif post.connect %}
-					<a href="https://connect.opensuse.org/pg/profile/{{ post.connect }}"><img title="Profile on Connect" src="{{ site.baseurl }}/assets/images/profile/connect.svg"/></a>
-				{% endif %}
-				{% if post.irc %}
-				<a title="{{ post.irc }} on Libera" href="irc://irc.libera.chat/{{ post.irc }},isnick" class="badge badge-dark"><img src="{{ site.baseurl }}/assets/images/profile/irc.svg"/> {{ post.irc }}</a>
-				{% endif %}
-				{% if post.gsoc %}
-				<a href="https://summerofcode.withgoogle.com/"><img title="Google Summer of Code" src="{{ site.baseurl }}/assets/images/profile/gsoc.svg"/></a>
-				{% endif %}
+				<div class="col card-header d-flex justify-content-between pl-1 pl-md-3 border-0">
+					<div>
+						{% capture post_author %}
+						<a href="{{ post.link }}">{{ post.author }}</a>
+						<a href="{{ post.rss }}">{% include icons/feed.svg %}</a>
+						{% endcapture %}
+						{% capture post_language %}
+						{% assign lang = site.localization.locales_set[post.tags.first] %}
+						<a class="text-muted" href="{{ site.baseurl }}/{{ post.tags.first }}/">{{ lang.name }}</a>
+						{% endcapture %}
+						{% capture post_time %}
+						<a class="text-muted" href="{{ post.original_link }}">{{ post.created_at | date: "%H:%M" }}</a>
+						{% endcapture %}
+						<span class="text-muted">
+							{% if include.language %}
+							  {{ locale.postedinat | replace: '$author', post_author | replace: '$language', post_language | replace: '$time', post_time }}
+							{% else %}
+							  {{ locale.postedat | replace: '$author', post_author | replace: '$time', post_time }}
+							{% endif %}
+						</span>
+					</div>
 				</div>
 			</div>
-			</div>
 			<div class="card-body">
 				<a href="{{ post.original_link }}">
 					<h2>{{ post.title }}</h2>
 				</a>
 				<div class="roller">
-					<input class="roller-input" id="{{ post.guid | slugify }}" type="checkbox">
-					<label class="roller-label btn btn-primary mt-3" for="{{ post.guid | slugify }}" role="button">
-						<span class="show-more">{{ locale.showmore }}</span>
-						<span class="show-less">{{ locale.showless }}</span>
-					</label>
-					<div class="roller-item">{{ post.content }}</div>
+					<script type="text/javascript">
+						function toggleButton(id) {
+							function expand(e) {
+								const elementToChange = document.getElementById(`content_${id}`);
+								if (e.target.getAttribute('aria-expanded') === 'true') {
+									elementToChange.style.maxHeight = "50vh";
+									setTimeout(function () {
+										e.target.scrollIntoView({behavior: "smooth", block: "start"});
+									}, 250);
+									return
+								}
+								elementToChange.style.maxHeight = "100%";
+								return
+							}
+
+							function buttonStyle(e) {
+								if (e.target.getAttribute('aria-expanded') === 'true') {
+									e.target.setAttribute('aria-expanded', 'false');
+									e.target.innerHTML = "{{ locale.showmore }}";
+									return
+								}
+								e.target.setAttribute('aria-expanded', 'true');
+								e.target.innerHTML = "{{ locale.showless }}";
+								return
+							}
+
+							const button = document.getElementById(`button_${id}`)
+							button.addEventListener('click', expand);
+							button.addEventListener('click', buttonStyle);
+						}
+
+						document.addEventListener("DOMContentLoaded", function () {
+							toggleButton('{{ post.guid | slugify }}')
+						});
+					</script>
+					<div class="roller-item"
+						id="content_{{ post.guid | slugify }}">
+						{{ post.content }}
+					</div>
+					<button class="roller-button btn btn-primary mt-3"
+						id="button_{{ post.guid | slugify }}"
+						aria-expanded="false">
+						{{ locale.showmore }}
+					</button>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/assets/css/app.css b/assets/css/app.css
index 8612710..6725d9a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -58,34 +58,16 @@
   transition: all .15s ease;
   overflow: hidden;
 }
+
 .roller {
   position: relative;
-  margin-bottom: 3rem!important;
+  margin-bottom: 3rem !important;
 }
-.roller-label {
+
+.roller-button {
   position: absolute;
   top: 100%;
 }
-.roller-input {
-  display: none;
-}
-.roller-label .show-less {
-  display: none;
-}
-.roller-label .show-more {
-  display: block;
-}
-.roller-input:checked + .roller-label .show-less {
-  display: block;
-}
-.roller-input:checked + .roller-label .show-more {
-  display: none;
-}
-.roller-input:checked ~ .roller-item {
-  max-height: 100%;
-  transition: all .15s ease;
-  overflow: hidden;
-}
 
 .avatar {
   width: calc(100% - 1rem);