Message styling (default to light for now)

4 files changed, 19 insertions, 25 deletions

diff --git a/pydis_site/settings.py b/pydis_site/settings.py
index cc741117..93867101 100644
--- a/pydis_site/settings.py
+++ b/pydis_site/settings.py
@@ -295,7 +295,7 @@ CRISPY_TEMPLATE_PACK = "bulma"
 
 # Custom settings for django-simple-bulma
 BULMA_SETTINGS = {
-    "variables": {
+    "variables": {  # If you update these colours, please update the notification.css file
         "green": "#21c65c",  # Accessibility: Better contrast with the light text
         "primary": "#7289DA",
         "link": "$primary",
@@ -303,6 +303,8 @@ BULMA_SETTINGS = {
         "dimensions": "16 24 32 48 64 96 128 256 512",  # Possible image dimensions
         "navbar-height": "4.75rem",
         "footer-padding": "1rem 1.5rem 1rem",
+
+        "notification-background-color": "#33353C",  # Discord embed background colour
     }
 }
 
diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index 256bec2c..87175922 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -77,25 +77,3 @@ div.card.has-equal-height {
 button.is-size-navbar-menu {
     font-size: 14px;
 }
-
-/* On-page message styling */
-
-@keyframes message-slide-in {
-    0% {
-        transform: translateX(100%);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
-}
-
-div.messages {
-    animation: 0.5s ease-out 0s 1 message-slide-in;
-    padding: 0.5rem;
-    position: fixed;
-    right: 0;
-    top: 76px;
-
-    z-index: 1000;  /* On top of everything else */
-}
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
index 7b197be3..9d114bd8 100644
--- a/pydis_site/templates/base/base.html
+++ b/pydis_site/templates/base/base.html
@@ -19,6 +19,7 @@
   <script src="https://kit.fontawesome.com/ae6a3152d8.js"></script>
 
   <link rel="stylesheet" href="{% static "css/base/base.css" %}">
+  <link rel="stylesheet" href="{% static "css/base/notification.css" %}">
   {% block head %}{% endblock %}
 
   {% render_block "css" %}
@@ -27,9 +28,9 @@
 
 <main class="site-content">
   {% if messages %}
-    <div class="messages is-full-mobile">
+    <div class="messages">
       {% for message in messages %}
-        <div class="notification is-full-mobile {% if message.tags %}is-{{ message.tags }}{% endif %}">
+        <div class="notification {% if message.tags %}is-{{ message.tags }}{% endif %}">
           <button class="delete"></button>
 
           {{ message }}
diff --git a/pydis_site/templates/wiki/base.html b/pydis_site/templates/wiki/base.html
index da4d5de1..2f92d83b 100644
--- a/pydis_site/templates/wiki/base.html
+++ b/pydis_site/templates/wiki/base.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="{% static "css/wiki/simplemde-fixes.css" %}">
   <link rel="stylesheet" href="{% static "css/wiki/style.css" %}">
   <link rel="stylesheet" href="{% static "css/pygments/darcula.css" %}">
+  <link rel="stylesheet" href="{% static "css/base/notification.css" %}">
 {% endblock %}
 
 {% block content %}
@@ -24,6 +25,18 @@
 
   {% block wiki_navbar %}{% endblock %}
 
+  {% if messages %}
+    <div class="messages">
+      {% for message in messages %}
+        <div class="notification {% if message.tags %}is-{{ message.tags }}{% endif %}">
+          <button class="delete"></button>
+
+          {{ message }}
+        </div>
+      {% endfor %}
+    </div>
+  {% endif %}
+
   {% block wiki_breadcrumbs %}
     {% include "wiki/includes/breadcrumbs.html" %}
   {% endblock %}