Styling and template nits

mozilla · Nov 7, 2024 · d50b3d6 · d50b3d6
1 parent 36d7794
commit d50b3d6
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 18 deletions.
diff --git a/app/views/templates/base.html.twig b/app/views/templates/base.html.twig
@@ -7,7 +7,7 @@
     <link rel="alternate" type="application/rss+xml" title="Feed to get alerted of Firefox releases" href="/rss/">
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" media="screen">
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-icons.css" media="screen">
-    <link rel="stylesheet" href="/style/base.css?version=43" type="text/css" media="all">
+    <link rel="stylesheet" href="/style/base.css?version=44" type="text/css" media="all">
 {% if branch != '' %}
     <link rel="icon" type="image/svg+xml" href="/assets/img/site_icon_dev.svg">
 {% else %}
@@ -38,7 +38,7 @@
 
     {% include 'menu.html.twig' %}
     {% block header %}{% endblock %}
-    {% block main   %}{% endblock %}
+    {% block main %}{% endblock %}
     <script src="/assets/jquery/jquery.slim.min.js"></script>
     <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
     {% block footer %}{% endblock %}

diff --git a/app/views/templates/calendar.html.twig b/app/views/templates/calendar.html.twig
@@ -9,7 +9,7 @@
 
 {% block header %}
   <header class="mx-auto">
-    <h1>Firefox Release Calendar</h1>
+    <h1 class="fw-semibold">Firefox Release Calendar</h1>
   </header>
 {% endblock %}
 

diff --git a/app/views/templates/calendar_monthly.html.twig b/app/views/templates/calendar_monthly.html.twig
@@ -10,7 +10,7 @@
 
 {% block header %}
   <header class="mx-auto">
-    <h1>Upcoming Firefox release milestones</h1>
+    <h1 class="fw-semibold">Upcoming Firefox release milestones</h1>
   </header>
 {% endblock %}
 

diff --git a/app/views/templates/esr_release.html.twig b/app/views/templates/esr_release.html.twig
@@ -9,9 +9,9 @@
 
 {% block main %}
   {% if constant('ESR_NEXT') %}
-  <h2 class="mx-auto w-50  mb-3 text-center">Firefox <abbr title="Extended Support Release ">ESR</abbr> {{ current_ESR|number_format }} & {{ next_ESR|number_format }}</h2>
+  <h1 class="mx-auto w-50  mb-3 text-center">Firefox <abbr title="Extended Support Release ">ESR</abbr> {{ current_ESR|number_format }} & {{ next_ESR|number_format }}</h1>
   {% else %}
-  <h2 class="mx-auto w-50  mb-3 text-center">Firefox {{ constant('MAIN_ESR') }} <abbr title="Extended Support Release ">ESR</abbr></h2>
+  <h1 class="mx-auto w-50  mb-3 text-center">Firefox {{ constant('MAIN_ESR') }} <abbr title="Extended Support Release ">ESR</abbr></h1>
   {% endif %}
 
   <div class="w-50 alert alert-primary mx-auto text-center mb-3" role="alert">Version shipping to end-users on the <b class="text-danger">ESR</b> channel</div>

diff --git a/app/views/templates/future_release.html.twig b/app/views/templates/future_release.html.twig
@@ -43,15 +43,15 @@
 {% if release == '135' %}
   {% set alert = alert ~ '
 
-<div class="alert alert-warning d-flex align-top p-2" role="alert">
-  <svg class="bi flex-shrink-0 me-2 text-warning" width="24" height="24" role="img" aria-label="Warning:">
+<div class="alert alert-warning d-flex flex-row justify-content-center align-top p-2 text-center" role="alert">
+  <svg class="me-2" width="24" height="24" role="img" aria-label="Warning:">
     <use xlink:href="#exclamation-triangle-fill"/>
     <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
     <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
   </symbol>
 </svg>
 </svg>
-  <div>
+  <div class="">
     Nightly milestones might be adjusted to EOY staff availability.
   </div>
 </div>
@@ -338,8 +338,10 @@
 {% endblock %}
 
 {% block footer %}
+{% if not fallback_content %}
   {%  include 'footer_UTC_warning.html.twig' %}
   <footer class="d-flex justify-content-center text-white-50 mt-0">Working days exclude week-ends and the current day</footer>
+{% endif %}
 
   <script nonce="{{constant('NONCE')}}">
   $(function () {

diff --git a/app/views/templates/nightly.html.twig b/app/views/templates/nightly.html.twig
@@ -200,7 +200,7 @@
     {% endfor %}
     </ol>
 {% else %}
-<p>No Nightly build released yet today</p>
+<p class="text-center mt-5">No Nightly build released yet today</p>
 {% endfor %}
 {% endblock %}
 

diff --git a/app/views/templates/overview.html.twig b/app/views/templates/overview.html.twig
@@ -10,7 +10,7 @@
 {% set tooltip_defaults = ' data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" ' %}
 
 {% block header %}
-  <h1 class="text-center fw-bold">Firefox Trains</h1>
+  <h1 class="text-center fw-semibold">Firefox Trains</h1>
 {% endblock %}
 
 {% block main %}

diff --git a/app/views/templates/regular.html.twig b/app/views/templates/regular.html.twig
@@ -1,7 +1,7 @@
 {% extends 'base.html.twig' %}
 
 {% block header %}
-  <header><h1>{{ page_title  }}</h1></header>
+  <header><h1 class="fw-semibold">{{ page_title  }}</h1></header>
 {% endblock %}
 
 {% block main %}

diff --git a/public/style/base.css b/public/style/base.css
@@ -48,10 +48,14 @@
   --bg-purple: #20123a;
 }
 
+html {
+    height: 100%;
+    background-color: #2a0c55;
+}
 
 body {
     font-family: Inter,X-LocaleSpecific,sans-serif;
-    background-color: #20123a;
+    background-color: #2a0c55;
     color: white;
 }
 
@@ -72,6 +76,14 @@ nav svg {
     margin-top: 0.5em;
 }
 
+h1 {
+    font-weight: 400;
+}
+
+h2, h3 {
+    font-weight: 300;
+}
+
 .table {
     margin: 0 auto;
     width: 100%;
@@ -87,11 +99,8 @@ nav svg {
     box-shadow: unset !important;
 }
 
-/* home page */
-h1, h2, h3 {
-    font-weight: 300;
-}
 
+/* home page */
 #homepage h1 {
     font-size: 3.5rem;
     margin-bottom: 2em;
@@ -117,7 +126,7 @@ body[id^='release_'] caption {
 .table-fxt-clean,
 .table-fxt-clean th,
 .table-fxt-clean td  {
-    border-color: lavender;
+    border-color: #320f640d;
 }
 
 .table-fxt-clean {