Merge pull request #30 from AnySoftKeyboard/fix/language-flag-alignment

Fix: Align language names and add borders to flags

Author: menny

css/screen.scss

@@ -12,3 +12,15 @@
 @import "forms";
 @import "navigation";
 @import "footer";
+
+.flag-container {
+  display: inline-block;
+  width: 50px; /* Adjust as needed */
+  text-align: center;
+  margin-right: 12px;
+}
+
+.language-flag {
+  border: 1px solid black;
+  vertical-align: middle;
+}

languages.html

@@ -6,7 +6,7 @@
 <section>
 	{% for language in site.data.languages.languages %}
 	<div>
-	<p class="languages-list"><img src="{{ language.icon }}" alt="{{ language.name }} flag" style="height: 32px; width: auto; padding-right: 12px; vertical-align: middle;"> {{ language.name }}
+	<p class="languages-list"><span class="flag-container"><img src="{{ language.icon }}" alt="{{ language.name }} flag" class="language-flag" style="height: 32px; width: auto; vertical-align: middle;"></span> {{ language.name }}
 
 	{% if language.github == nil %}
 	<img class="no-link-found not-full-icon" src="/images/github.png" width="32px" height="32px"/></a>