Report an error tile + better callout

_includes/footer.html

@@ -28,7 +28,7 @@ <h6>Contact us</h6>
         <ul class="mb-0 list-unstyled">
           <li><i class="fas fa-envelope me-2"></i><a href="mailto:[email protected]">[email protected]</a></li>
           <li><i class="fab fa-github me-2"></i><a href="https://github.com/usegalaxy-be">usegalaxy-be</a></li>
-          <li> <i class="fab fa-twitter me-2"></i><a href="https://twitter.com/ELIXIRnodeBE">ELIXIRnodeBE</a></li>
+          <li> <i class="fab fa-x-twitter me-2"></i><a href="https://twitter.com/ELIXIRnodeBE">ELIXIRnodeBE</a></li>
         </ul>
       </div>
 

_includes/notices.html

@@ -3,9 +3,11 @@
     <div>
         <h5>{{ notice.title }}</h5>
         {% assign messages = notice.messages | sort:'date' | reverse %}
-        {% for message in messages %}
-        <div>{% if message.date %}[{{ message.date | date: "%-d %B %Y %H:%M" }}] {% endif %}{{ message.message | markdownify }}</div>
-        {% endfor %}
+        <div class="notice-message d-flex flex-column gap-2">
+            {% for message in messages %}
+            {% if message.date %}[{{ message.date | date: "%-d %B %Y %H:%M" }}] {% endif %}{{ message.message | markdownify }}
+            {% endfor %}
+        </div>
     </div>
     <div >
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

assets/css/main.scss

@@ -7,8 +7,8 @@ permalink: assets/css/main
 
 /*-----Theme colors-----*/
 
-$galaxy-blue:#003399;
-$galaxy-yellow: #D0BD2B;
+$galaxy-blue: #003399;
+$galaxy-yellow: #d0bd2b;
 
 $primary: #25537b;
 $light: #f8f9fa;
@@ -17,44 +17,57 @@ $dark: #2c3143;
 
 /*-----Bootstrap variables-----*/
 
-
 @import "bootstrap/variables";
 
-
 .btn-galaxy {
   --bs-btn-font-weight: 600;
-  --bs-btn-color: #2c3143!important;
-  --bs-btn-bg: #dee2e6!important;
-  --bs-btn-border-color: #bdc6d0!important;
-  --bs-btn-hover-color: #2c3143!important;
-  --bs-btn-hover-bg: #c1c9d0!important;
-  --bs-btn-hover-border-color: #c1c9d0!important;
-  --bs-btn-active-color: #2c3143!important;
-  --bs-btn-active-bg: #c1c9d0!important;
-  --bs-btn-active-border-color: #bac2cb!important;
+  --bs-btn-color: #2c3143 !important;
+  --bs-btn-bg: #dee2e6 !important;
+  --bs-btn-border-color: #bdc6d0 !important;
+  --bs-btn-hover-color: #2c3143 !important;
+  --bs-btn-hover-bg: #c1c9d0 !important;
+  --bs-btn-hover-border-color: #c1c9d0 !important;
+  --bs-btn-active-color: #2c3143 !important;
+  --bs-btn-active-bg: #c1c9d0 !important;
+  --bs-btn-active-border-color: #bac2cb !important;
 }
 
 .btn-galaxy:focus {
-  box-shadow: 0 0 0 0.2rem rgba(195,199,206,.5)!important;
+  box-shadow: 0 0 0 0.2rem rgba(195, 199, 206, 0.5) !important;
 }
 
-
 $link-color: $blue-link;
 $link-decoration: none;
 $card-cap-padding-y: $card-spacer-y;
-$box-shadow-sm: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
-$box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px, rgba($primary, .1) 0px 8px 20px,;
+$box-shadow-sm:
+  rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
+  rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+$box-shadow:
+  rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
+  rgba(60, 64, 67, 0.15) 0px 1px 3px 1px,
+  rgba($primary, 0.1) 0px 8px 20px;
 // Font changes
 @font-face {
   font-family: "Atkinson Hyperlegible";
-  src: 
+  src:
     url("../webfonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"),
     url("../webfonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"),
     url("../webfonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"),
     url("../webfonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2");
 }
 
-$font-family-base: "Atkinson Hyperlegible", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+$font-family-base:
+  "Atkinson Hyperlegible",
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  "Helvetica Neue",
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol";
 $font-size-base: 0.85rem;
 $lead-font-size: 1rem;
 $card-title-size: 0.95rem;
@@ -63,7 +76,6 @@ $h1-font-size: $font-size-base * 2;
 $h2-font-size: $font-size-base * 1.5;
 $h3-font-size: $font-size-base * 1.3;
 
-
 // Create new theme colors
 $custom-colors: (
   "galaxy-blue": $galaxy-blue,
@@ -73,7 +85,6 @@ $custom-colors: (
 // Merge the maps
 $theme-colors: map-merge($theme-colors, $custom-colors);
 
-
 /*-----Include other SASS files-----*/
 
 @import "bootstrap/bootstrap";
@@ -113,7 +124,8 @@ main {
     font-weight: bold;
   }
 
-  b, strong {
+  b,
+  strong {
     font-weight: bold;
   }
 
@@ -137,8 +149,8 @@ main {
 }
 
 // Hover shadow
-.shadow-hover{
-    &:hover {
+.shadow-hover {
+  &:hover {
     box-shadow: $box-shadow !important;
   }
 }
@@ -151,3 +163,8 @@ main {
 .ena-img {
   max-width: 140px;
 }
+
+// Notices
+.notice-message p {
+  margin-bottom: 0;
+}

index.html

@@ -105,11 +105,11 @@ <h2 class="mt-0">June 24-29, 2024</h2>
     </div>
 </div> -->
 
-<div class="row mb-4">
-    <div class="col">
-        <div class="card rounded border-0 shadow-sm shadow-hover">
+<div class="row">
+    <div class="col-12 col-md-8 mb-4">
+        <div class="card rounded border-0 shadow-sm shadow-hover h-100">
             <div class="card-body">
-                <div class="d-grid gap-5 d-md-flex">
+                <div class="d-grid gap-4 d-md-flex">
                     <div>
                         <h2 class="mt-0">Training Infrastructure as a Service (TIaaS)</h2>
                         <p>
@@ -134,6 +134,23 @@ <h2 class="mt-0">Training Infrastructure as a Service (TIaaS)</h2>
             </div>
         </div>
     </div>
+    <div class="col-12 col-md-4 mb-4">
+        <div class="card rounded border-0 shadow-sm h-100">
+            <div class="card-body d-flex gap-4">
+                <div>
+                    <h2 class="mt-0">How to report an error</h2>
+                    <p>If you are encountering errors, please submit a report by clicking on the bug icon (<i class="fa-solid fa-bug"></i>) in a red dataset in your history.</p>
+                    <a class="btn btn-sm btn-galaxy px-3" type="button" href="https://training.galaxyproject.org/training-material/faqs/galaxy/analysis_troubleshooting.html">
+                        Learn more<i class="fa-solid fa-arrow-up-right-from-square ms-2 fa-sm"></i>
+                    </a>
+
+                </div>
+                <div class="d-flex align-items-center">
+                    <span class="text-primary fa-3x"><i class="fa-solid fa-bug"></i></span>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <div class="row">