Improve event title and language switcher style (#206)

* Improve style of event titles and language switcher

* Update gitignore to include Mac-related stuff

.gitignore

@@ -1,4 +1,12 @@
+# PHP
 /vendor/
+
+# JetBrains IDE
+.idea
+
+# Mac OS
+.DS_Store
+
+# Misc
 *.env
 metas.php
-.idea

css/i18n.css

@@ -0,0 +1,40 @@
+.language-switcher {
+    position: relative;
+    display: inline-block;
+}
+
+.language-switcher select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    padding: 8px 32px 8px 12px;
+    font-size: 16px;
+    border: 1px solid var(--primary-color);
+    border-radius: 6px;
+    background-color: white;
+    cursor: pointer;
+    min-width: 140px;
+    transition: all 0.2s ease;
+}
+
+.language-switcher::after {
+    content: '▼';
+    font-size: 12px;
+    color: #666;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.language-switcher select:hover {
+    border-color: #999;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.language-switcher select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: var(--box-shadow);
+}

css/style.css

@@ -104,6 +104,18 @@ a .link.color-border {
     background-color: initial;
 }
 
+.box .name {
+    font-size: 100%;
+    color: var(--text-color);
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    text-align: center;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    max-width: 100%;
+}
+
 .box.today {
     background-color: var(--success-color-light);
 }
@@ -166,11 +178,11 @@ p.date {
         height: 150px;
     }
 
-    p.name {
+    .box .name {
         font-size: 70%;
     }
 
-    p.date {
+    .box .date {
         font-size: 50%;
     }
 }

index.php

@@ -36,6 +36,7 @@ function sortByDate(Event $a, Event $b): int
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="css/style.css<?= $FILE_REVISION; ?>">
     <link rel="stylesheet" href="css/icons.css<?= $FILE_REVISION; ?>">
+    <link rel="stylesheet" href="css/i18n.css<?= $FILE_REVISION; ?>">
     <title><?= $i18n['title'] ?></title>
 </head>
 
@@ -47,8 +48,8 @@ function sortByDate(Event $a, Event $b): int
 
     <div class="container">
         <label>
-            <div class="select-container">
-                <select id="lang-selection" aria-description="Select language">
+            <div class="language-switcher">
+                <select id="lang-selection" aria-label="Select language">
                     <option value='de' <?= $i18n->getLanguage() === 'de' ? 'selected' : '' ?>>🇩🇪 Deutsch</option>
                     <option value="en" <?= $i18n->getLanguage() === 'en' ? 'selected' : '' ?>>🇬🇧 English</option>
                 </select>