From 2c263e3f581f0b6d195cfff741ae73c6e12189a2 Mon Sep 17 00:00:00 2001
From: svHvidsten <sindrehvidsten@gmail.com>
Date: Thu, 14 Nov 2024 10:47:58 +0100
Subject: [PATCH 1/6] Added functionality for even larger displays

---
 .vscode/settings.json                         |  9 ++-
 piggy/static/css/styles.css                   | 59 +++++++++++++++++++
 .../assignments/0-assignments_root.html       |  6 +-
 piggy/templates/assignments/1-year_level.html |  6 +-
 piggy/templates/assignments/2-class_name.html |  6 +-
 piggy/templates/assignments/3-subject.html    | 10 +---
 piggy/templates/assignments/4-topic.html      |  6 +-
 piggybank                                     |  2 +-
 8 files changed, 78 insertions(+), 26 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 23fd35f..001b960 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,8 @@
 {
-    "editor.formatOnSave": true
-}
\ No newline at end of file
+  "editor.formatOnSave": true,
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#5A0D33",
+    "titleBar.activeBackground": "#7E1248",
+    "titleBar.activeForeground": "#FFFCFD"
+  }
+}
diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css
index 9ce8372..677c86b 100644
--- a/piggy/static/css/styles.css
+++ b/piggy/static/css/styles.css
@@ -152,6 +152,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     *|
 \*****************/
diff --git a/piggy/templates/assignments/0-assignments_root.html b/piggy/templates/assignments/0-assignments_root.html
index 831edbb..581911c 100644
--- a/piggy/templates/assignments/0-assignments_root.html
+++ b/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' %}
diff --git a/piggy/templates/assignments/1-year_level.html b/piggy/templates/assignments/1-year_level.html
index 6ac1d44..ed0096d 100644
--- a/piggy/templates/assignments/1-year_level.html
+++ b/piggy/templates/assignments/1-year_level.html
@@ -3,10 +3,8 @@
 {% block base %}
   <h1 class="page-title font-extrabold text-center my-6">{{ meta.name }}</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' %}
diff --git a/piggy/templates/assignments/2-class_name.html b/piggy/templates/assignments/2-class_name.html
index 6ac1d44..ed0096d 100644
--- a/piggy/templates/assignments/2-class_name.html
+++ b/piggy/templates/assignments/2-class_name.html
@@ -3,10 +3,8 @@
 {% block base %}
   <h1 class="page-title font-extrabold text-center my-6">{{ meta.name }}</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' %}
diff --git a/piggy/templates/assignments/3-subject.html b/piggy/templates/assignments/3-subject.html
index f335d33..f1aefb7 100644
--- a/piggy/templates/assignments/3-subject.html
+++ b/piggy/templates/assignments/3-subject.html
@@ -5,10 +5,8 @@
   <h1 class="page-title font-extrabold text-center my-6">{{ meta.name }}</h1>
   {% include 'partials/search_box.html' %}
 
-  <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() %}
           {% if data.meta.type != "extra" %}
@@ -24,9 +22,7 @@ <h1 class="page-title font-extrabold text-center my-6">{{ meta.name }}</h1>
     {% if ns.extra_content %}
       <br />
       <h3 class="extra-title text-2xl text-extrabold">Ekstra:</h3>
-      <div
-        class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2"
-      >
+      <div class="card-grid-container">
         {% for item, data in segment.items() %}
           {% if data.meta.type == "extra" %}
             {% include 'objects/card-topic.html' %}
diff --git a/piggy/templates/assignments/4-topic.html b/piggy/templates/assignments/4-topic.html
index 837f1e5..ba0c6cd 100644
--- a/piggy/templates/assignments/4-topic.html
+++ b/piggy/templates/assignments/4-topic.html
@@ -3,10 +3,8 @@
 {% block base %}
   <h1 class="page-title font-extrabold text-center my-6">{{ meta.name }}</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-assignment.html' %}
diff --git a/piggybank b/piggybank
index 1d431ad..8122eb4 160000
--- a/piggybank
+++ b/piggybank
@@ -1 +1 @@
-Subproject commit 1d431ad84480b866af9815f1d824ecff2f4f5515
+Subproject commit 8122eb49c3e80d9c001be9ac3d81d179ce94bd2c

From 04c3262c6d09c774b6979b1b03456c912a6ce164 Mon Sep 17 00:00:00 2001
From: svHvidsten <sindrehvidsten@gmail.com>
Date: Fri, 15 Nov 2024 09:50:20 +0100
Subject: [PATCH 2/6] changed cards to allow for any category (technically)

---
 piggy/static/css/styles.css                | 10 +++--
 piggy/static/css/themes/dark.css           |  4 +-
 piggy/templates/assignments/3-subject.html | 51 +++++++++++-----------
 piggy/templates/objects/card-topic.html    |  2 +-
 4 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css
index 677c86b..4afc6a6 100644
--- a/piggy/static/css/styles.css
+++ b/piggy/static/css/styles.css
@@ -239,7 +239,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%,
@@ -248,8 +248,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);
 }
 
diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css
index 77c4d25..e80aa2e 100644
--- a/piggy/static/css/themes/dark.css
+++ b/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 */
 
diff --git a/piggy/templates/assignments/3-subject.html b/piggy/templates/assignments/3-subject.html
index f1aefb7..4a5492e 100644
--- a/piggy/templates/assignments/3-subject.html
+++ b/piggy/templates/assignments/3-subject.html
@@ -1,34 +1,35 @@
 {% extends "layout.html" %}
-{% set ns = namespace(extra_content = false) %}
+{%
+  set types = [''] + segment.items()
+  | selectattr("1.meta.type", "defined")
+  | map(attribute="1.meta.type")
+  | list
+%}
 
 {% block base %}
   <h1 class="page-title font-extrabold text-center my-6">{{ meta.name }}</h1>
   {% include 'partials/search_box.html' %}
 
-  <div class="card-grid-wrapper">
-    <div class="card-grid-container">
-      {% if segment.items()|length > 0 %}
-        {% for item, data in segment.items() %}
-          {% if data.meta.type != "extra" %}
-            {% include 'objects/card-topic.html' %}
-          {% else %}
-            {% set ns.extra_content = true %}
-          {% endif %}
-        {% endfor %}
-      {% else %}
-        Hmm... There doesn't seem to be anything here!
-      {% endif %}
-    </div>
-    {% if ns.extra_content %}
-      <br />
-      <h3 class="extra-title text-2xl text-extrabold">Ekstra:</h3>
-      <div class="card-grid-container">
-        {% for item, data in segment.items() %}
-          {% if data.meta.type == "extra" %}
+  {% if segment.items()|length > 0 %}
+    {% for type in types %}
+      <div class="card-grid-wrapper">
+        {% if type != '' %}
+          <h3 class="extra-title text-2xl text-extrabold">
+            {{ type|capitalize }}:
+          </h3>
+        {% endif %}
+        <div
+          class="card-grid-container {% if type != '' %}card-type-{{ type }}{% endif %}"
+        >
+          {% for item, data in segment.items() if data.meta.type == type or (type == '' and data.meta.type is not defined) %}
             {% include 'objects/card-topic.html' %}
-          {% endif %}
-        {% endfor %}
+          {% endfor %}
+        </div>
       </div>
-    {% endif %}
-  </div>
+    {% endfor %}
+  {% else %}
+    <div class="card-grid-container">
+      Hmm... There doesn't seem to be anything here!
+    </div>
+  {% endif %}
 {% endblock %}
diff --git a/piggy/templates/objects/card-topic.html b/piggy/templates/objects/card-topic.html
index fc4326f..2b9fda5 100644
--- a/piggy/templates/objects/card-topic.html
+++ b/piggy/templates/objects/card-topic.html
@@ -9,7 +9,7 @@
     description = data.meta.description,
     thumbnail = media_abspath ~ "/" ~ item ~ "/media/header." + img_fmt,
     thumbnail_alt = "Header image for " ~ item,
-    extra_classes = 'extra-card' if data.meta.type == 'extra' else '',
+    extra_classes = 'card-type-' + data.meta.type if data.meta.type else '',
     difficulty = data.meta.difficulty,
     tags = data.meta.tags
   )

From 13e8d547681c3d8ff31a8e2fd67fc41367262226 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 18 Nov 2024 18:47:35 +0000
Subject: [PATCH 3/6] build(deps): update flask requirement from ~=3.0.3 to
 ~=3.1.0

Updates the requirements on [flask](https://github.com/pallets/flask) to permit the latest version.
- [Release notes](https://github.com/pallets/flask/releases)
- [Changelog](https://github.com/pallets/flask/blob/main/CHANGES.rst)
- [Commits](https://github.com/pallets/flask/compare/3.0.3...3.1.0)

---
updated-dependencies:
- dependency-name: flask
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 2b585bd..bcaed6d 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -5,7 +5,7 @@ description = ""
 license = { file = "LICENSE.md" }
 readme = "README.md"
 dependencies = [
-    "flask~=3.0.3",
+    "flask~=3.1.0",
     "turtleconverter@git+https://github.com/sondregronas/turtleconverter@main",
     "gunicorn~=23.0.0",
     "pillow~=11.0.0",

From 02e2524751dc433cc927a54347c66f17c4ab7691 Mon Sep 17 00:00:00 2001
From: svHvidsten <sindrehvidsten@gmail.com>
Date: Tue, 19 Nov 2024 09:15:44 +0100
Subject: [PATCH 4/6] Minor text-styling tweaks for more responsive small
 displays

---
 piggy/static/css/styles.css | 7 ++++++-
 piggybank                   | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css
index 4afc6a6..e3d1f4d 100644
--- a/piggy/static/css/styles.css
+++ b/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) {
diff --git a/piggybank b/piggybank
index 8122eb4..df3e8ff 160000
--- a/piggybank
+++ b/piggybank
@@ -1 +1 @@
-Subproject commit 8122eb49c3e80d9c001be9ac3d81d179ce94bd2c
+Subproject commit df3e8fff9892d7d54ee285104b70fd76b026750b

From ae66d8fd7691f8d5b474aace2aed18a05580cb78 Mon Sep 17 00:00:00 2001
From: svHvidsten <sindrehvidsten@gmail.com>
Date: Tue, 19 Nov 2024 09:34:19 +0100
Subject: [PATCH 5/6] [Hotfix] Delete .vscode directory (It is mentioned in
 .gitignore)

---
 .vscode/settings.json | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 001b960..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "workbench.colorCustomizations": {
-    "activityBar.background": "#5A0D33",
-    "titleBar.activeBackground": "#7E1248",
-    "titleBar.activeForeground": "#FFFCFD"
-  }
-}

From 48faa1b4d1e3d81104b029da61384d01e70ccaab Mon Sep 17 00:00:00 2001
From: svHvidsten <sindrehvidsten@gmail.com>
Date: Tue, 19 Nov 2024 14:05:36 +0100
Subject: [PATCH 6/6] Added two themes

---
 piggy/static/css/themes/matrix.css | 120 ++++++++++++++++++++++++++++
 piggy/static/css/themes/ocean.css  | 123 +++++++++++++++++++++++++++++
 2 files changed, 243 insertions(+)
 create mode 100644 piggy/static/css/themes/matrix.css
 create mode 100644 piggy/static/css/themes/ocean.css

diff --git a/piggy/static/css/themes/matrix.css b/piggy/static/css/themes/matrix.css
new file mode 100644
index 0000000..1fef6e4
--- /dev/null
+++ b/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;
+  }
+  
\ No newline at end of file
diff --git a/piggy/static/css/themes/ocean.css b/piggy/static/css/themes/ocean.css
new file mode 100644
index 0000000..329b28a
--- /dev/null
+++ b/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;
+  }
+  
\ No newline at end of file