aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static/css/base
diff options
context:
space:
mode:
Diffstat (limited to 'pydis_site/static/css/base')
-rw-r--r--pydis_site/static/css/base/base.css29
-rw-r--r--pydis_site/static/css/base/notification.css99
2 files changed, 18 insertions, 110 deletions
diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index a1d325f9..f3fe1e44 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -1,5 +1,6 @@
html {
overflow: auto;
+ scroll-behavior: smooth;
}
body.site {
@@ -124,19 +125,18 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
}
}
-/* Fix for modals being behind the navbar */
-
-.modal * {
- z-index: 1020;
-}
-
-.modal-background {
- z-index: 1010;
+/* 16:9 aspect ratio fixing */
+.force-aspect-container {
+ position: relative;
+ padding-bottom: 56.25%;
}
-/* Wiki style tweaks */
-.codehilite-wrap {
- margin-bottom: 1em;
+.force-aspect-content {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
}
/* 16:9 aspect ratio fixing */
@@ -152,3 +152,10 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
height: 100%;
position: absolute;
}
+
+/* Tone down animations to avoid motion triggers */
+@media (prefers-reduced-motion: reduce) {
+ html {
+ scroll-behavior: auto;
+ }
+}
diff --git a/pydis_site/static/css/base/notification.css b/pydis_site/static/css/base/notification.css
deleted file mode 100644
index b2824641..00000000
--- a/pydis_site/static/css/base/notification.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/* 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 */
-}
-
-/* Discord light theme inspired notifications */
-
-.messages .notification {
- background-color: #fdfdfd; /* Discord embed background */
- border: #eeeeee 1px solid; /* Discord embed border */
- border-left: #4f545c 4px solid; /* Discord default embed colour */
- color: #4a4a4a; /* Bulma default colour */
-}
-
-.messages .notification.is-primary {
- background-color: #fdfdfd;
- border-left-color: #7289DA;
- color: #4a4a4a; /* Bulma default colour */
-}
-
-.messages .notification.is-info {
- background-color: #fdfdfd;
- border-left-color: #1c8ad3; /* Bulma default colour */
- color: #4a4a4a; /* Bulma default colour */
-}
-
-.messages .notification.is-success {
- background-color: #fdfdfd;
- border-left-color: #21c65c;
- color: #4a4a4a; /* Bulma default colour */
-}
-
-.messages .notification.is-warning {
- background-color: #fdfdfd;
- border-left-color: #ffdd57; /* Bulma default colour */
- color: #4a4a4a; /* Bulma default colour */
-}
-
-.messages .notification.is-danger {
- background-color: #fdfdfd;
- border-left-color: #ff3860; /* Bulma default colour */
- color: #4a4a4a; /* Bulma default colour */
-}
-
-/* Discord dark theme inspired notifications */
-
-.messages .notification.is-dark {
- background-color: #33353C; /* Discord embed background */
- border: #36393f 1px solid; /* Discord embed border */
- border-left: #4f545c 4px solid; /* Discord default embed colour */
- color: #fff; /* Bulma default colour */
-}
-
-.messages .notification.is-dark.is-primary {
- background-color: #33353C;
- border-left-color: #7289DA;
- color: #fff; /* Bulma default colour */
-}
-
-.messages .notification.is-dark.is-info {
- background-color: #33353C;
- border-left-color: #1c8ad3; /* Bulma default colour */
- color: #fff; /* Bulma default colour */
-}
-
-.messages .notification.is-dark.is-success {
- background-color: #33353C;
- border-left-color: #21c65c;
- color: #fff; /* Bulma default colour */
-}
-
-.messages .notification.is-dark.is-warning {
- background-color: #33353C;
- border-left-color: #ffdd57; /* Bulma default colour */
- color: #fff; /* Bulma default colour */
-}
-
-.messages .notification.is-dark.is-danger {
- background-color: #33353C;
- border-left-color: #ff3860; /* Bulma default colour */
- color: #fff; /* Bulma default colour */
-}