Merge pull request #47 from VaagenIM/feature/front-end

Created proper front-end for assignment page. Resolves #40
VaagenIM · Sep 30, 2024 · d0c00e0 · d0c00e0
2 parents 9396799 + 5221269
commit d0c00e0
Show file tree

Hide file tree

Showing 17 changed files with 999 additions and 169 deletions.
diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css
diff --git a/piggy/static/css/themes/classic.css b/piggy/static/css/themes/classic.css
@@ -39,6 +39,7 @@ description: The classic look of piggy!
 
   --piggy-button: #c099a8;
   --piggy-button-hover: #ddb2c2;
+  --piggy-button-active: rgb(241, 127, 138); /* Slightly more colored active color */
   --piggy-text-button: var(--piggy-dark);
 
   --piggy-thumbnail-overlay: rgba(255, 255, 255, 0.7);
@@ -53,10 +54,58 @@ description: The classic look of piggy!
   --piggy-menu: var(--piggy-light);
   --piggy-menu-text: var(--piggy-dark);
 
-  transition: 1s ease;
+  --piggy-tooltip: #000000;
+  --piggy-tooltip-text: #ffffff;
+
+  --piggy-text-hyperlink: #458bc4;
+  --piggy-text-hyperlink-hover: rgb(62, 86, 107);
 }
 
 [data-theme="classic"] .level-count-container {
   color: var(--piggy-dark);
   background-color: var(--piggy-main);
+}
+
+/******************************\
+|*     MARKDOWN OVERRIDES     *|
+\******************************/
+[data-theme="classic"] .md-content .admonition-title {
+  font-size: 0.8rem !important;
+}
+
+[data-theme="classic"] .md-content code:not(.md-code__content) {
+  background-color: #d1d1d1;
+  color: var(--piggy-dark);
+}
+
+[data-theme="classic"] .md-content table code:not(.md-code__content) {
+  background-color: #cf9eb1;
+}
+
+[data-theme="classic"] .md-content .md-code__content {
+  filter: invert() contrast(1.25) hue-rotate(270deg);
+  border: 1px solid #676a74;
+}
+
+[data-theme="classic"] .md-content table {
+  border: 1px solid #555 !important;
+}
+
+[data-theme="classic"] .md-content th {
+  background-color: #e0b1c3;
+}
+
+[data-theme="classic"] .md-content tr:nth-child(odd) td {
+  background-color: #f0d3dd;
+}
+
+[data-theme="classic"] .md-content tr:nth-child(even) td {
+  background-color: #e9c3d1;
+}
+
+[data-theme="classic"] .md-content details,
+[data-theme="classic"] .md-content .tip,
+[data-theme="classic"] .md-content .admonition {
+  background-color: #e0e0e0;
+  color: var(--piggy-dark);
 }
diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css
@@ -5,55 +5,75 @@ description: The default dark theme.
 */
 
 [data-theme="dark"] {
-    /* piggy colors */
-    --piggy-main: rgb(34, 41, 47); /* A darker, more muted tone */
-    --piggy-light: #f0f4f8; /* A soft off-white */
-    --piggy-dark: rgb(51, 61, 71); /* Darker tone with reduced contrast */
-
-    --piggy-text-main: var(--piggy-light);
-    --piggy-text-light: var(--piggy-light);
-    --piggy-text-dark: var(--piggy-dark);
-
-    --piggy-shadow-text: #00000029; /* Softer shadows */
-    --piggy-shadow-box: #00000022;
-    --piggy-shadow-glow: rgba(255, 255, 255, 20%);
-
-    /* piggy card colors */
-    --piggy-card-start: rgba(130, 174, 197, 0.3); /* Soft gradient start */
-    --piggy-card-end: rgba(48, 73, 90, 0.3); /* Softer end gradient */
-    --piggy-card-border: var(--piggy-card-end);
-    --piggy-text-card: var(--piggy-text-light);
-
-    --piggy-extra-card-start: rgba(27, 82, 153, 0.3); /* Gentle blues */
-    --piggy-extra-card-end: rgba(159, 190, 223, 0.3);
-    --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-border: var(--piggy-resource-card-start);
-    --piggy-text-resource-card: #4f4f4f; /* A gentle gray for contrast */
-
-    --piggy-card-border-width: 1px;
-
-    /* piggy elements */
-    --piggy-navbar-start: rgb(51, 61, 71); /* Calmer, less harsh */
-    --piggy-navbar-end: rgb(51, 61, 71); /* Muted blue-gray tones */
-    --piggy-text-navbar: var(--piggy-light);
+  /* piggy colors */
+  --piggy-main: rgb(34, 41, 47); /* A darker, more muted tone */
+  --piggy-light: #f0f4f8; /* A soft off-white */
+  --piggy-dark: rgb(51, 61, 71); /* Darker tone with reduced contrast */
+
+  --piggy-text-main: var(--piggy-light);
+  --piggy-text-light: var(--piggy-light);
+  --piggy-text-dark: var(--piggy-dark);
 
-    --piggy-button: #4a6783; /* Muted blue */
-    --piggy-button-hover: #647a95; /* Slightly brighter hover */
-    --piggy-text-button: #ffffff;
+  --piggy-shadow-text: #00000029; /* Softer shadows */
+  --piggy-shadow-box: #00000022;
+  --piggy-shadow-glow: rgba(255, 255, 255, 20%);
+
+  /* piggy card colors */
+  --piggy-card-start: rgba(130, 174, 197, 0.3); /* Soft gradient start */
+  --piggy-card-end: rgba(48, 73, 90, 0.3); /* Softer end gradient */
+  --piggy-card-border: var(--piggy-card-end);
+  --piggy-text-card: var(--piggy-text-light);
 
-    --piggy-thumbnail-overlay: #00000077; /* Lighter overlay */
-    --piggy-text-thumbnail: var(--piggy-light);
+  --piggy-extra-card-start: rgba(27, 82, 153, 0.3); /* Gentle blues */
+  --piggy-extra-card-end: rgba(159, 190, 223, 0.3);
+  --piggy-extra-card-border: var(--piggy-extra-card-start);
+  --piggy-text-extra-card: #ffffff;
 
-    --piggy-text-tag: #ffffff;
-    --piggy-text-description: var(--piggy-light);
-    --piggy-text-title: var(--piggy-light);
-    --piggy-text-breadcrumb: var(--piggy-light);
-    --piggy-text-breadcrumb-hover: #a6aaad;
-
-    --piggy-menu: var(--piggy-dark);
-    --piggy-menu-text: var(--piggy-light);
-  }
+  --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-border: var(--piggy-resource-card-start);
+  --piggy-text-resource-card: #4f4f4f; /* A gentle gray for contrast */
+
+  --piggy-card-border-width: 1px;
+
+  /* piggy elements */
+  --piggy-navbar-start: rgb(51, 61, 71); /* Calmer, less harsh */
+  --piggy-navbar-end: rgb(51, 61, 71); /* Muted blue-gray tones */
+  --piggy-text-navbar: var(--piggy-light);
+
+  --piggy-button: #4a6783; /* Muted blue */
+  --piggy-button-hover: #647a95; /* Slightly brighter hover */
+  --piggy-button-active: #2a5d9b; /* Slightly more colored active color */
+  --piggy-text-button: #ffffff;
+
+  --piggy-thumbnail-overlay: #00000077; /* Lighter overlay */
+  --piggy-text-thumbnail: var(--piggy-light);
+
+  --piggy-text-tag: #ffffff;
+  --piggy-text-description: var(--piggy-light);
+  --piggy-text-title: var(--piggy-light);
+  --piggy-text-breadcrumb: var(--piggy-light);
+  --piggy-text-breadcrumb-hover: #a6aaad;
+
+  --piggy-menu: var(--piggy-dark);
+  --piggy-menu-text: var(--piggy-light);
+
+  --piggy-tooltip: #000000;
+  --piggy-tooltip-text: #ffffff;
+
+  --piggy-text-hyperlink: #407eb1;
+  --piggy-text-hyperlink-hover: #407eb1;
+}
+
+[data-theme="dark"] .md-content .md-code__content {
+  border: 1px solid #474a56;
+}
+
+[data-theme="dark"] .md-content code:not(.md-code__content) {
+  background-color: #3a3c42;
+  color: #dddddd;
+}
+
+[data-theme="dark"] .md-content th {
+  background-color: #4a6783;
+}