Fix: Align language names and add borders to flags

This commit addresses the visual layout of the languages page:

1.  Language Name Alignment:
    - Wraps flag images in a `<span>` with class `flag-container`.
    - The `flag-container` has a fixed width and right margin, ensuring that language names following the flags are vertically aligned, regardless of individual flag widths.

2.  Flag Borders:
    - Adds a `1px solid black` border to all language flags via the `language-flag` CSS class.

These changes improve the readability and visual consistency of the language list. The specific files modified are `languages.html` and `css/screen.scss`.

Author: google-labs-jules[bot]

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>