Merge pull request #99 from VaagenIM/feature/front-end-tweaks

Improved Synthwave theme

piggy/static/css/styles.css

@@ -127,13 +127,27 @@ h6 {
 }
 
 .main-container {
-  background-color: var(--piggy-main);
+  position: relative;
+  min-height: 100vh;
   color: var(--piggy-text-main);
   text-shadow: var(--piggy-shadow-text) 3px 3px 5px;
   font-size: var(--piggy-font-size);
   padding-bottom: 5rem;
 }
 
+.background-overlay {
+  position: fixed;
+  background: var(--piggy-main);
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.content-wrapper {
+  position: relative;
+  z-index: 1;
+}
+
 .main-title {
   font-size: 3rem;
   word-wrap: break-word;

piggy/static/css/themes/desert.css

@@ -16,7 +16,7 @@ description: A theme inspired by the warm sands and muted tones of the desert.
     --piggy-text-neutral: var(--piggy-neutral);
     --piggy-text-dark: var(--piggy-dark);
 
-    --piggy-shadow-text: rgba(94, 75, 50, 0.4); /* Subtle brown shadows */
+    --piggy-shadow-text: rgba(0, 0, 0, 0); /* Subtle brown shadows */
     --piggy-shadow-box: rgba(94, 75, 50, 0.3);
     --piggy-shadow-glow: rgba(166, 124, 82, 0.3); /* Warm glow */
 

piggy/static/css/themes/ocean.css

@@ -16,7 +16,7 @@ description: A theme inspired by the serene blues and teals of the ocean.
     --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-text: rgba(0, 43, 54, 0.2); /* Subtle deep shadows */
     --piggy-shadow-box: rgba(0, 43, 54, 0.3);
     --piggy-shadow-glow: rgba(136, 192, 208, 0.3); /* Aqua glow */
 

piggy/static/css/themes/synthwave.css

@@ -6,7 +6,7 @@ description: Fancy sunset, purple, neon, gradients!
 
 [data-theme="synthwave"] {
   /* Synthwave sunset colors */
-  --piggy-main: rgb(34, 18, 48); /* Deep, rich sunset purple */
+  --piggy-main: rgb(0, 0, 0); /* Deep, rich sunset purple */
   --piggy-light: #ffd27f; /* Warm, soft golden yellow */
   --piggy-neutral: #866997; /* Gray */
   --piggy-dark: rgb(48, 20, 58); /* Darker purple for contrast */
@@ -15,8 +15,8 @@ description: Fancy sunset, purple, neon, gradients!
   --piggy-text-light: #ff9b9b; /* Warm pink for accents */
   --piggy-text-dark: #ffcb91; /* Sunset orange for text highlights */
 
-  --piggy-shadow-text: #ff8c0030; /* Soft orange shadow */
-  --piggy-shadow-box: #ff004450; /* Pink shadow for box elements */
+  --piggy-shadow-text: #ff8c0018; /* Soft orange shadow */
+  --piggy-shadow-box: #ff00a630; /* Pink shadow for box elements */
   --piggy-shadow-glow: rgba(
     255,
     140,
@@ -92,6 +92,73 @@ description: Fancy sunset, purple, neon, gradients!
 
   --piggy-text-hyperlink: #3190b6;
   --piggy-text-hyperlink-hover: #6ab2cf;
+
+  --grid-line-color: #cc00ffaa; /* Grid lines */
+  --grid-background-color: var(--piggy-dark); /* Background color */
+}
+
+[data-theme="synthwave"] .main-container {
+  background-color: #000000;
+}
+
+@keyframes scrollGrid {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 200px;
+  }
+}
+
+[data-theme="synthwave"] .background-overlay {
+  height: 125%;
+  background-image:
+    linear-gradient(to right, transparent 0%, transparent 98%, var(--grid-line-color) 99%),
+    linear-gradient(to bottom, transparent 0%, transparent 98%, var(--grid-line-color) 99%);
+  background-size: 2.5rem 2.5rem;
+  transform-origin: top center;
+  transform: translateY(0px) perspective(1000px) rotateX(85deg);
+  animation: scrollGrid 10s linear infinite;
+}
+
+[data-theme="synthwave"] .card-container {
+  box-shadow: 2px 2px 15px 0 var(--piggy-shadow-box);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+
+@keyframes boxShadowScroll {
+  0% {
+    box-shadow: 0px 0px 15px 0 #ff00a6;
+    border-color: #ff00a6;
+  }
+  25% {
+    box-shadow: 0px 0px 15px 0 #ff9500;
+    border-color: #ff9500;
+  }
+  50% {
+    box-shadow: 0px 0px 15px 0 #00ff33;
+    border-color: #00ff33;
+  }
+  75% {
+    box-shadow: 0px 0px 15px 0 #009dff;
+    border-color: #009dff;
+  }
+  100% {
+    box-shadow: 0px 0px 15px 0 #ff00a6;
+    border-color: #ff00a6;
+  }
+}
+
+[data-theme="synthwave"] .card-container:hover {
+  border-color: #ff00ff;
+  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) rotateZ(3deg) scale(98%);
+  box-shadow: 0px 0px 15px 0 #ff00a6;
+  animation: boxShadowScroll 2s alternate infinite;
+  animation-timing-function: linear;
+  animation-delay: 0.4s;
 }
 
 [data-theme="synthwave"] .settings-option {
@@ -109,6 +176,12 @@ description: Fancy sunset, purple, neon, gradients!
   font-size: 0.8rem !important;
 }
 
+[data-theme="synthwave"] .md-content {
+  border: 1px solid #cc00ffaa;
+  border-radius: 0.5rem;
+  background-color: #000000cc;
+}
+
 [data-theme="synthwave"] .md-content code:not(.md-code__content) {
   background-color: #532821;
   color: #f5d1c8;

piggy/templates/assignments/5-assignment.html

@@ -59,7 +59,7 @@
 {% endblock %}
 
 {% block base %}
-  <h1 class="page-title font-semibold assignment-heading">
+  <h1 class="page-title font-semibold assignment-heading my-6">
     {{ content.heading }}
   </h1>
   {{ content.body | safe }}

piggy/templates/layout.html

@@ -8,6 +8,8 @@
     {% endblock %}
   </head>
   <body class="main-container" data-font-theme="none">
+    <div class="background-overlay"></div>
+    <div class="content-wrapper">
     <header>
       {% include "partials/parts/breadcrumbs.html" %}
       {% block header %}
@@ -17,10 +19,11 @@
       {% block base %}
       {% endblock %}
     </main>
-    <footer>
-      {% block footer %}
-      {% endblock %}
-    </footer>
+      <footer>
+        {% block footer %}
+        {% endblock %}
+      </footer>
+    </div>  
   </body>
 
   {% if debug %}