Merge pull request #94 from VaagenIM/develop

Minor styling tweaks for larger and smaller displays

piggy/static/css/styles.css

@@ -119,6 +119,9 @@ h6 {
   color: var(--piggy-text-main) !important;
 }
 
+/************************\
+|*     BASE STYLING     *|
+\************************/
 .transition {
   transition: 0.4s ease;
 }
@@ -132,11 +135,13 @@ h6 {
 }
 
 .main-title {
-  font-size: 5rem;
+  font-size: 3rem;
+  word-wrap: break-word;
 }
 
 .page-title {
   font-size: 3rem;
+  word-wrap: break-word;
 }
 
 @media screen and (max-width: 800px) {
@@ -152,6 +157,65 @@ h6 {
   }
 }
 
+/*********************\
+|*     CARD GRID     *|
+\*********************/
+.card-grid-wrapper {
+  max-width: 100%;
+  padding: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* very large screen */
+@media (min-width: 1920px) {
+  .card-grid-wrapper {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+}
+
+.card-grid-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.5rem;
+}
+
+/* small screen */
+@media (min-width: 640px) {
+  .card-grid-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* medium screen */
+@media (min-width: 768px) {
+  .card-grid-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* large screen */
+@media (min-width: 1024px) {
+  .card-grid-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* very large screen */
+@media (min-width: 2240px) {
+  .card-grid-container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* extremely large screen */
+@media (min-width: 3200px) {
+  .card-grid-container {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
 /*****************\
 |*     CARDS     *|
 \*****************/
@@ -180,7 +244,7 @@ h6 {
 }
 
 /* TODO: Consider a better solution for extra-card and resource card */
-.extra-card {
+.card-type-extra .card {
   background: linear-gradient(
     45deg,
     var(--piggy-extra-card-start) 0%,
@@ -189,8 +253,12 @@ h6 {
   border: var(--piggy-card-border-width) solid var(--piggy-extra-card-border);
 }
 
-.resource-card {
-  background-color: var(--piggy-resource-card-start);
+.card-type-resource .card {
+  background: linear-gradient(
+    45deg,
+    var(--piggy-resource-card-start) 0%,
+    var(--piggy-resource-card-end) 100%
+  );
   border: var(--piggy-card-border-width) solid var(--piggy-resource-card-border);
 }
 

piggy/static/css/themes/dark.css

@@ -31,8 +31,8 @@ description: The default dark theme.
   --piggy-extra-card-border: var(--piggy-extra-card-start);
   --piggy-text-extra-card: #ffffff;
 
-  --piggy-resource-card-start: rgba(212, 195, 98, 0.3); /* Gentle blues */
-  --piggy-resource-card-end: rgba(228, 213, 128, 0.3);
+  --piggy-resource-card-start: rgba(65, 59, 26, 0.3); /* Gentle blues */
+  --piggy-resource-card-end: rgba(201, 182, 75, 0.3);
   --piggy-resource-card-border: var(--piggy-resource-card-start);
   --piggy-text-resource-card: #4f4f4f; /* A gentle gray for contrast */
 

piggy/static/css/themes/matrix.css

@@ -0,0 +1,120 @@
+/* METADATA
+id: 7
+name: Matrix
+description: A theme inspired by the green hues of "The Matrix" movies.
+*/
+
+[data-theme="matrix"] {
+    /* Piggy colors */
+    --piggy-main: #000000; /* Black background */
+    --piggy-light: #00ff00; /* Bright green text */
+    --piggy-neutral: #008800; /* Medium green */
+    --piggy-dark: #004400; /* Dark green */
+
+    --piggy-text-main: var(--piggy-light);
+    --piggy-text-light: var(--piggy-light);
+    --piggy-text-neutral: var(--piggy-neutral);
+    --piggy-text-dark: var(--piggy-dark);
+
+    --piggy-shadow-text: #003300; /* Dark green shadow */
+    --piggy-shadow-box: #002200;
+    --piggy-shadow-glow: rgba(0, 255, 0, 0.2); /* Green glow */
+
+    /* Piggy card colors */
+    --piggy-card-start: rgba(0, 20, 0, 0.7); /* Darker gradient start */
+    --piggy-card-end: rgba(0, 40, 0, 0.7);  /* Darker gradient end */
+    --piggy-card-border: #00bb00; /* Bright green border */
+    --piggy-text-card: var(--piggy-text-light);
+
+    --piggy-extra-card-start: rgba(0, 30, 0, 0.7); /* Darker gradient start */
+    --piggy-extra-card-end: rgba(0, 60, 0, 0.7);   /* Darker gradient end */
+    --piggy-extra-card-border: #00bb00;            /* Brightest green border */
+    --piggy-text-extra-card: #00ff00;
+
+    --piggy-resource-card-start: rgba(0, 20, 0, 0.7); /* Darker gradient start */
+    --piggy-resource-card-end: rgba(0, 50, 0, 0.7);   /* Darker gradient end */
+    --piggy-resource-card-border: #00bb00;            /* Brightest green border */
+    --piggy-text-resource-card: #00ff00;
+
+    --piggy-card-border-width: 1px;
+
+    /* Piggy elements */
+    --piggy-navbar-start: #000000; /* Navbar start */
+    --piggy-navbar-end: #000000; /* Navbar end */
+    --piggy-text-navbar: var(--piggy-light);
+
+    --piggy-button: #004400; /* Dark green button */
+    --piggy-button-hover: #008800; /* Brighter on hover */
+    --piggy-button-active: #002200; /* Darker when active */
+    --piggy-text-button: #00ff00;
+
+    --piggy-thumbnail-overlay: #00330077; /* Lighter overlay */
+    --piggy-text-thumbnail: var(--piggy-light);
+
+    --piggy-text-tag: #00ff00;
+    --piggy-text-description: var(--piggy-light);
+    --piggy-text-title: var(--piggy-light);
+    --piggy-text-breadcrumb: var(--piggy-light);
+    --piggy-text-breadcrumb-hover: #00cc00;
+
+    --piggy-menu: var(--piggy-main);
+    --piggy-menu-text: var(--piggy-light);
+
+    --piggy-tooltip: #001100;
+    --piggy-tooltip-text: #00ff00;
+
+    --piggy-text-hyperlink: #00ff00;
+    --piggy-text-hyperlink-hover: #00ff00;
+  }
+
+  /******************************\
+  |*     MARKDOWN OVERRIDES     *|
+  \******************************/
+
+  [data-theme="matrix"] .md-content .admonition-title {
+    font-size: 0.8rem !important;
+  }
+
+  [data-theme="matrix"] .md-content code:not(.md-code__content) {
+    background-color: #001100;
+    color: #00ff00;
+  }
+
+  [data-theme="matrix"] .md-content .md-code__content {
+      filter: contrast(1.35);
+      border: 1px solid #00ff00;
+      background-color: black;
+  }
+
+  [data-theme="matrix"] .md-content table {
+    border: 1px solid #006600 !important;
+  }
+
+  [data-theme="matrix"] .md-content th {
+    background-color: #002200;
+  }
+
+  [data-theme="matrix"] .md-content tr:nth-child(odd) td {
+    background-color: #001100;
+  }
+
+  [data-theme="matrix"] .md-content tr:nth-child(even) td {
+    background-color: #000000;
+  }
+
+  [data-theme="matrix"] .md-content details,
+  [data-theme="matrix"] .md-content .tip,
+  [data-theme="matrix"] .md-content .admonition {
+    background-color: #001100;
+    color: #00ff00;
+  }
+
+  [data-theme="matrix"] .md-content .tabbed-labels::before {
+    border-color: #00ff00;
+    background-color: rgba(0, 255, 0, 0.2) !important;
+  }
+
+  [data-theme="matrix"] .md-content .tabbed-set {
+    background: #001100;
+  }
+

piggy/static/css/themes/ocean.css

@@ -0,0 +1,123 @@
+/* METADATA
+id: 8
+name: Ocean
+description: A theme inspired by the serene blues and teals of the ocean.
+*/
+
+[data-theme="ocean"] {
+    /* General colors */
+    --piggy-main: #002b36; /* Deep ocean blue */
+    --piggy-light: #88c0d0; /* Soft aqua for text */
+    --piggy-neutral: #336b87; /* Muted teal */
+    --piggy-dark: #001f27; /* Dark navy for contrast */
+
+    --piggy-text-main: var(--piggy-light);
+    --piggy-text-light: #d8f3f8; /* Lighter aqua for highlights */
+    --piggy-text-neutral: var(--piggy-neutral);
+    --piggy-text-dark: #89bdd3; /* Mid-tone blue-green */
+
+    --piggy-shadow-text: rgba(0, 43, 54, 0.4); /* Subtle deep shadows */
+    --piggy-shadow-box: rgba(0, 43, 54, 0.3);
+    --piggy-shadow-glow: rgba(136, 192, 208, 0.3); /* Aqua glow */
+
+    /* Card colors */
+    --piggy-card-start: rgba(0, 85, 102, 0.5); /* Gradient start */
+    --piggy-card-end: rgba(0, 115, 135, 0.5); /* Gradient end */
+    --piggy-card-border: #88c0d0; /* Aqua for borders */
+    --piggy-text-card: var(--piggy-text-light);
+
+    --piggy-extra-card-start: rgba(0, 90, 120, 0.5); /* Extra card start */
+    --piggy-extra-card-end: rgba(0, 130, 150, 0.5); /* Extra card end */
+    --piggy-extra-card-border: var(--piggy-card-border);
+    --piggy-text-extra-card: #ffffff;
+
+    --piggy-resource-card-start: rgba(20, 70, 80, 0.5); /* Resource card start */
+    --piggy-resource-card-end: rgba(50, 110, 120, 0.5); /* Resource card end */
+    --piggy-resource-card-border: #88c0d0;
+    --piggy-text-resource-card: #e0f7fa; /* Soft, gentle aqua */
+
+    --piggy-card-border-width: 1px;
+
+    /* Navbar */
+    --piggy-navbar-start: #003b4d; /* Dark blue-green */
+    --piggy-navbar-end: #004f63; /* Gradient effect */
+    --piggy-text-navbar: var(--piggy-light);
+
+    /* Buttons */
+    --piggy-button: #005f73; /* Darker teal */
+    --piggy-button-hover: #007f9b; /* Brighter teal on hover */
+    --piggy-button-active: #004f63; /* Slightly darker teal on active */
+    --piggy-text-button: #ffffff;
+
+    /* Thumbnails */
+    --piggy-thumbnail-overlay: rgba(0, 43, 54, 0.5); /* Subtle overlay */
+    --piggy-text-thumbnail: var(--piggy-light);
+
+    /* Text and links */
+    --piggy-text-tag: #88c0d0;
+    --piggy-text-description: var(--piggy-light);
+    --piggy-text-title: var(--piggy-light);
+    --piggy-text-breadcrumb: var(--piggy-light);
+    --piggy-text-breadcrumb-hover: #b3ecf0;
+
+    --piggy-menu: var(--piggy-main);
+    --piggy-menu-text: var(--piggy-light);
+
+    --piggy-tooltip: #003b4d;
+    --piggy-tooltip-text: #ffffff;
+
+    --piggy-text-hyperlink: #88c0d0;
+    --piggy-text-hyperlink-hover: #a1d9e6;
+  }
+
+  /******************************\
+  |*     MARKDOWN OVERRIDES     *|
+  \******************************/
+
+  [data-theme="ocean"] .md-content .admonition-title {
+    font-size: 0.8rem !important;
+  }
+
+  [data-theme="ocean"] .md-content code:not(.md-code__content) {
+    background-color: #001219; /* Darker navy blue */
+    color: #d8f3f8; /* Light aqua text */
+  }
+
+  [data-theme="ocean"] .md-content .md-code__content {
+    background-color: #000a0f; /* Even darker background for code blocks */
+    color: #d8f3f8; /* Aqua text */
+    border: 1px solid #002b36; /* Dark border */
+  }
+
+  [data-theme="ocean"] .md-content table {
+    border: 1px solid #336b87 !important;
+  }
+
+  [data-theme="ocean"] .md-content th {
+    background-color: #004f63; /* Teal background */
+  }
+
+  [data-theme="ocean"] .md-content tr:nth-child(odd) td {
+    background-color: rgba(0, 70, 80, 0.5); /* Teal */
+  }
+
+  [data-theme="ocean"] .md-content tr:nth-child(even) td {
+    background-color: rgba(0, 90, 100, 0.5); /* Slightly lighter teal */
+  }
+
+  [data-theme="ocean"] .md-content details,
+  [data-theme="ocean"] .md-content .tip,
+  [data-theme="ocean"] .md-content .admonition {
+    background-color: #002b36;
+    color: var(--piggy-light);
+  }
+
+  [data-theme="ocean"] .md-content .tabbed-labels::before {
+    border-color: #88c0d0;
+    background-color: rgba(136, 192, 208, 0.2) !important;
+  }
+
+  [data-theme="ocean"] .md-content .tabbed-set {
+    background: #002b36;
+  }
+

piggy/templates/assignments/0-assignments_root.html

@@ -5,10 +5,8 @@ <h1 class="page-title font-extrabold text-center my-6">
     Oppgavebanken Piggy 🐷
   </h1>
 
-  <div class="container mx-auto p-4">
-    <div
-      class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2"
-    >
+  <div class="card-grid-wrapper">
+    <div class="card-grid-container">
       {% if segment.items()|length > 0 %}
         {% for item, data in segment.items() %}
           {% include 'objects/card-basic.html' %}