Design improvements

mnapoli · Mar 2, 2021 · 5ce1819 · 5ce1819
1 parent 1ba4a75
commit 5ce1819
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/views/home.html.twig b/views/home.html.twig
@@ -4,7 +4,7 @@
 
 {% block content %}
 
-    <header class="sm:text-lg text-gray-400 font-light py-4 sm:py-8">
+    <header class="sm:text-lg text-gray-500 font-light py-4 sm:py-8">
         <p>Opening PHP's <a class="underline" href="http://news.php.net/php.internals">#internals</a> mailing list to the outside.</p>
         <noscript>
             Your browser either doesn't support javascript or it is disabled.
@@ -17,8 +17,8 @@
     {# Search #}
     <div class="mb-4 relative">
         <input id="search-input" type="text" placeholder="Search..."
-               class="w-full px-4 py-2 transition border-b border-transparent focus:border-red-400">
-        <a class="absolute right-0 top-0 mt-4" href="https://www.algolia.com/" target="_blank"><img class="w-10 text-gray-500 opacity-75" src="{{ assetsBaseUrl }}/assets/images/algolia.svg" alt="Algolia"></a>
+               class="w-full px-4 py-2 transition border-b border-transparent border-gray-200 focus:border-red-400">
+        <a class="absolute right-0 top-0 mt-4" href="https://www.algolia.com/" target="_blank"><img class="w-10 text-gray-500 opacity-50" src="{{ assetsBaseUrl }}/assets/images/algolia.svg" alt="Algolia"></a>
     </div>
     <div id="search-container" class="px-6 py-4 bg-white rounded-lg border border-gray-50 shadow-lg">
         <h3 class="font-bold text-lg mb-4">Search results</h3>

diff --git a/views/layout.html.twig b/views/layout.html.twig
@@ -40,9 +40,9 @@
 </head>
 <body class="antialiased">
 
-    <nav class="bg-white text-gray-600 font-light w-full">
+    <nav class="bg-white text-gray-600 font-light w-full shadow">
         <div class="container max-w-4xl flex items-center">
-            <a class="block px-2 py-3" href="/"><img src="{{ assetsBaseUrl }}/assets/images/logo.svg" alt="externals" class="w-10 sm:w-20"></a>
+            <a class="block px-1 py-3 mr-4" href="/"><img src="{{ assetsBaseUrl }}/assets/images/logo.svg" alt="externals" class="w-10 sm:w-16"></a>
             <div class="flex-grow flex items-center text-sm sm:text-base">
                 <a class="block px-2 sm:px-4 py-2 sm:py-3" href="/">Latest</a>
                 <a class="block px-2 sm:px-4 py-2 sm:py-3" href="/top">Top</a>
@@ -64,7 +64,7 @@
         </div>
     </nav>
 
-    <div class="container max-w-4xl mt-2 sm:mt-8">
+    <div class="container max-w-4xl mt-4 sm:mt-8">
         {% block content %}{% endblock %}
     </div>
 

diff --git a/views/threads/thread-list.html.twig b/views/threads/thread-list.html.twig
@@ -1,6 +1,6 @@
 {% for thread in threads %}
     <div class="my-4 sm:my-8 flex items-center group {% if thread.votes < -1 %}opacity-25{% endif %}">
-        <div class="mr-8 text-sm text-gray-300 text-center vote-actions">
+        <div class="mr-4 sm:mr-8 text-sm text-gray-300 text-center vote-actions">
             <a class="vote-action upvote text-2xl font-bold leading-none {{ (thread.userVote == 1) ? 'active' }}"
                href="#" data-email-id="{{ thread.number }}" title="Upvote">
                 &blacktriangle;
@@ -12,7 +12,7 @@
             </a>
         </div>
         <div class="flex-grow">
-            <a class="block text-gray-800 sm:text-xl mb-1 {% if user and not thread.isRead and thread.userVote >= 0 %}font-bold{% endif %}" href="message/{{ thread.number }}">
+            <a class="block text-gray-800 sm:text-lg mb-1 {% if user and not thread.isRead and thread.userVote >= 0 %}font-bold{% endif %}" href="message/{{ thread.number }}">
                 {{ thread.subject }}
             </a>
             <div class="text-gray-400 text-xs sm:text-sm">

diff --git a/web/assets/images/logo.svg b/web/assets/images/logo.svg