diff options
Diffstat (limited to 'pydis_site/static')
| -rw-r--r-- | pydis_site/static/css/base/notification.css | 99 | ||||
| -rw-r--r-- | pydis_site/static/css/resources/resources.css | 29 | ||||
| -rw-r--r-- | pydis_site/static/js/base/modal.js | 100 | 
3 files changed, 29 insertions, 199 deletions
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 */ -} diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css new file mode 100644 index 00000000..cf4cb472 --- /dev/null +++ b/pydis_site/static/css/resources/resources.css @@ -0,0 +1,29 @@ +.box, .tile.is-parent { +    transition: 0.1s ease-out; +} +.box { +    min-height: 15vh; +} +.tile.is-parent:hover .box { +    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); +} +.tile.is-parent:hover { +    padding: 0.65rem 0.85rem 0.85rem 0.65rem; +    filter: saturate(1.1) brightness(1.1); +} + +#readingBlock { +    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%); +} + +#interactiveBlock { +    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%); +} + +#communitiesBlock { +    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%); +} + +#podcastsBlock { +    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%); +} diff --git a/pydis_site/static/js/base/modal.js b/pydis_site/static/js/base/modal.js deleted file mode 100644 index eccc8845..00000000 --- a/pydis_site/static/js/base/modal.js +++ /dev/null @@ -1,100 +0,0 @@ -/* - modal.js: A simple way to wire up Bulma modals. - - This library is intended to be used with Bulma's modals, as described in the - official Bulma documentation. It's based on the JavaScript that Bulma - themselves use for this purpose on the modals documentation page. - - Note that, just like that piece of JavaScript, this library assumes that - you will only ever want to have one modal open at once. - */ - -"use strict"; - -// Event handler for the "esc" key, for closing modals. - -document.addEventListener("keydown", (event) => { -  const e = event || window.event; - -  if (e.code === "Escape" || e.keyCode === 27) { -    closeModals(); -  } -}); - -// An array of all the modal buttons we've already set up - -const modal_buttons = []; - -// Public API functions - -function setupModal(target) { -  // Set up a modal's events, given a DOM element. This can be -  // used later in order to set up a modal that was added after -  // this library has been run. - -  // We need to collect a bunch of elements to work with -  const modal_background = Array.from(target.getElementsByClassName("modal-background")); -  const modal_close = Array.from(target.getElementsByClassName("modal-close")); - -  const modal_head = Array.from(target.getElementsByClassName("modal-card-head")); -  const modal_foot = Array.from(target.getElementsByClassName("modal-card-foot")); - -  const modal_delete = []; -  const modal_button = []; - -  modal_head.forEach((element) => modal_delete.concat(Array.from(element.getElementsByClassName("delete")))); -  modal_foot.forEach((element) => modal_button.concat(Array.from(element.getElementsByClassName("button")))); - -  // Collect all the elements that can be used to close modals -  const modal_closers = modal_background.concat(modal_close).concat(modal_delete).concat(modal_button); - -  // Assign click events for closing modals -  modal_closers.forEach((element) => { -    element.addEventListener("click", () => { -      closeModals(); -    }); -  }); - -  setupOpeningButtons(); -} - -function setupOpeningButtons() { -  // Wire up all the opening buttons, avoiding buttons we've already wired up. -  const modal_opening_buttons = Array.from(document.getElementsByClassName("modal-button")); - -  modal_opening_buttons.forEach((element) => { -    if (!modal_buttons.includes(element)) { -      element.addEventListener("click", () => { -        openModal(element.dataset.target); -      }); - -      modal_buttons.push(element); -    } -  }); -} - -function openModal(target) { -  // Open a modal, given a string ID -  const element = document.getElementById(target); - -  document.documentElement.classList.add("is-clipped"); -  element.classList.add("is-active"); -} - -function closeModals() { -  // Close all open modals -  const modals = Array.from(document.getElementsByClassName("modal")); -  document.documentElement.classList.remove("is-clipped"); - -  modals.forEach((element) => { -    element.classList.remove("is-active"); -  }); -} - -(function () { -  // Set up all the modals currently on the page -  const modals = Array.from(document.getElementsByClassName("modal")); - -  modals.forEach((modal) => setupModal(modal)); -  setupOpeningButtons(); -}());  |