Fix right-aligned text layout

luost26 · Jul 17, 2024 · 73c4e06 · 73c4e06
1 parent 434cdab
commit 73c4e06
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/_data/profile.yml b/_data/profile.yml
@@ -45,3 +45,5 @@ awards:
   date: 2024
 - name: Award Name 1 
   date: 2021
+- name: A quick brown fox jumps over the lazy dog and runs away award
+  date: 2021
diff --git a/_includes/widgets/experience_card.html b/_includes/widgets/experience_card.html
@@ -13,9 +13,12 @@ <h6>Education</h6>
                                 <li class="media mb-1">
                                     <img src="{{ item.logo | relative_url }}" alt="{{ item.name }}" style="width: 18px;" class="mr-1 mt-1">
                                     <div class="media-body">
-                                        <p class="my-0">{{ item.name }}</p>
-                                        <p class="small my-0">{{ item.dept }}</p>
-                                        <p class="small my-0">{{ item.position }} <em class="float-right">{{ item.date }}</em></p>
+                                        <div>{{ item.name }}</div>
+                                        <div class="small">{{ item.dept }}</div>
+                                        <div class="small d-flex">
+                                            <div>{{ item.position }}</div>
+                                            <div class="mt-auto ml-auto no-break"><em>{{ item.date }}</em></div>
+                                        </div>
                                     </div>
                                 </li>
                                 {% endfor %}
@@ -31,7 +34,12 @@ <h6>Education</h6>
                             <h6>Honors & Awards</h6>
                             <ul class="list small pl-3 mb-1">
                                 {% for item in site.data.profile.awards %}
-                                <li>{{ item.name }} <em class="float-right">{{ item.date }}</em></li>
+                                <li>
+                                    <div class="d-flex">
+                                        <div>{{ item.name }}</div>
+                                        <div class="ml-auto mt-auto no-break"><em>{{ item.date }}</em></div>
+                                    </div>
+                                </li>
                                 {% endfor %}
                             </ul>
                         </div>
@@ -47,9 +55,12 @@ <h6>Experience</h6>
                                 <li class="media mb-1">
                                     <img src="{{ item.logo | relative_url }}" alt="{{ item.name }}" style="width: 18px;" class="mr-1 mt-1">
                                     <div class="media-body">
-                                        <p class="my-0">{{ item.name }}</p>
-                                        <p class="small my-0">{{ item.dept }}</p>
-                                        <p class="small my-0">{{ item.position }} <em class="float-right">{{ item.date }}</em></p>
+                                        <div>{{ item.name }}</div>
+                                        <div class="small">{{ item.dept }}</div>
+                                        <div class="small d-flex">
+                                            <div>{{ item.position }}</div>
+                                            <div class="mt-auto ml-auto no-break"><em>{{ item.date }}</em></div>
+                                        </div>
                                     </div>
                                 </li>
                                 {% endfor %}

diff --git a/_includes/widgets/news_card.html b/_includes/widgets/news_card.html
@@ -9,9 +9,9 @@ <h6 class="p-3 mb-0 border-bottom border-gray"><i class="fas fa-rss"></i> News</
             <div class="mr-3 text-muted my-1">{{ year.name }}</div>
             <div class="media-body">
                 {% for item in year.items %}
-                <div class="my-1">
-                    {{ item.title }}
-                    <div class="float-right text-muted"><i>{{ item.date | date: "%b %d" }}</i></div>
+                <div class="my-1 d-flex">
+                    <div>{{ item.title }}</div>
+                    <div class="ml-auto mt-auto text-muted no-break"><i>{{ item.date | date: "%b %d" }}</i></div>
                 </div>
                 {% endfor %}
             </div>