From 5b346d037c8e704e3d851f2dbd5951a93d0b69b4 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Sat, 7 Sep 2024 21:15:10 +0100
Subject: [PATCH] breakpoint widths

---
 apps/static/css/base.css | 47 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/apps/static/css/base.css b/apps/static/css/base.css
index 60ff730..dec8437 100644
--- a/apps/static/css/base.css
+++ b/apps/static/css/base.css
@@ -27,4 +27,51 @@
     --bs-btn-disabled-color: #fff;
     --bs-btn-disabled-bg: var(--discord-blurple);
     --bs-btn-disabled-border-color: var(--discord-blurple);
+}
+
+/* Widths with breakpoints */
+
+/* Small (sm) and down */
+@media (max-width: 576px) {
+    .w-sm-25 { width: 25%; }
+    .w-sm-50 { width: 50%; }
+    .w-sm-75 { width: 75%; }
+    .w-sm-100 { width: 100%; }
+    .w-sm-auto { width: auto; }
+}
+
+/* Medium (md) and down */
+@media (max-width: 768px) {
+    .w-md-25 { width: 25%; }
+    .w-md-50 { width: 50%; }
+    .w-md-75 { width: 75%; }
+    .w-md-100 { width: 100%; }
+    .w-md-auto { width: auto; }
+}
+
+/* Large (lg) and down */
+@media (max-width: 992px) {
+    .w-lg-25 { width: 25%; }
+    .w-lg-50 { width: 50%; }
+    .w-lg-75 { width: 75%; }
+    .w-lg-100 { width: 100%; }
+    .w-lg-auto { width: auto; }
+}
+
+/* Extra large (xl) and down */
+@media (max-width: 1200px) {
+    .w-xl-25 { width: 25%; }
+    .w-xl-50 { width: 50%; }
+    .w-xl-75 { width: 75%; }
+    .w-xl-100 { width: 100%; }
+    .w-xl-auto { width: auto; }
+}
+
+/* Extra extra large (xxl) and down */
+@media (max-width: 1400px) {
+    .w-xxl-25 { width: 25%; }
+    .w-xxl-50 { width: 50%; }
+    .w-xxl-75 { width: 75%; }
+    .w-xxl-100 { width: 100%; }
+    .w-xxl-auto { width: auto; }
 }
\ No newline at end of file