prettier

Author: mertcanozdemir

_layouts/about.liquid

@@ -15,46 +15,48 @@ layout: default
   </header>
 
   <article>
-    {% if page.profile %}
-      <div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
-        {% if page.profile.image %}
-          {% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
-          {% if page.profile.image_circular %}
-            {% assign profile_image_class = 'img-fluid z-depth-1 rounded-circle' %}
-          {% else %}
-            {% assign profile_image_class = 'img-fluid z-depth-1 rounded' %}
+    <div
+      class="profile-container"
+      style="{% if page.profile.align == 'right' %}float: right; margin-left: 20px;{% else %}float: left; margin-right: 20px;{% endif %} max-width: 30%;"
+    >
+      {% if page.profile %}
+        <div class="profile">
+          {% if page.profile.image %}
+            {% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
+            {% if page.profile.image_circular %}
+              {% assign profile_image_class = 'img-fluid z-depth-1 rounded-circle' %}
+            {% else %}
+              {% assign profile_image_class = 'img-fluid z-depth-1 rounded' %}
+            {% endif %}
+            {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
+            {%
+              include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
+              cache_bust=true
+            %}
           {% endif %}
-          {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
-          {%
-            include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
-            cache_bust=true
-          %}
-        {% endif %}
-        {% if page.profile.more_info %}
-          <div class="more-info">{{ page.profile.more_info }}</div>
-        {% endif %}
-      </div>
-    {% endif %}
+          {% if page.profile.more_info %}
+            <div class="more-info">{{ page.profile.more_info }}</div>
+          {% endif %}
+        </div>
+      {% endif %}
 
-    <!-- Added GIF section below profile picture with caption and size control -->
-    {% if page.header_gif and page.header_gif.enable %}
-      <div
-        class="gif-container"
-        style="clear: both; margin-top: 20px; margin-bottom: 20px; max-width: {{ page.header_gif.width | default: '100%' }}; margin-left: auto; margin-right: auto;"
-      >
-        <img
-          src="{{ page.header_gif.file | prepend: '/assets/img/' | relative_url }}"
-          alt="{{ page.header_gif.alt }}"
-          class="img-fluid z-depth-1"
-          style="width: 50%;"
-        >
-        {% if page.header_gif.caption %}
-          <div class="caption" style="text-align: center; margin-top: 10px; font-style: italic; color: #6c757d;">
-            {{ page.header_gif.caption }}
-          </div>
-        {% endif %}
-      </div>
-    {% endif %}
+      <!-- GIF placed below profile picture, aligned to the same side -->
+      {% if page.header_gif and page.header_gif.enable %}
+        <div class="gif-container" style="margin-top: 20px; margin-bottom: 20px; width: 100%;">
+          <img
+            src="{{ page.header_gif.file | prepend: '/assets/img/' | relative_url }}"
+            alt="{{ page.header_gif.alt }}"
+            class="img-fluid z-depth-1"
+            style="width: 100%;"
+          >
+          {% if page.header_gif.caption %}
+            <div class="caption" style="text-align: center; margin-top: 10px; font-style: italic; color: #6c757d; font-size: 0.9em;">
+              {{ page.header_gif.caption }}
+            </div>
+          {% endif %}
+        </div>
+      {% endif %}
+    </div>
 
     <div class="clearfix">{{ content }}</div>