Add missing styles to sponsor page

CosmeValera · Oct 12, 2024 · c9603e9 · c9603e9
1 parent 7d2f66d
commit c9603e9
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 3 deletions.
diff --git a/sass/_main.scss b/sass/_main.scss
@@ -4,5 +4,4 @@
 @import 'helpers';
 @import 'layout';
 @import 'responsive';
-@import 'shared-components';
-@import 'sponsor';
+@import 'shared-components';
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
@@ -64,3 +64,12 @@
         text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
     }
 }
+
+@mixin card-a-colors-dark {
+    background-color: $color-bg-secondary;
+    border: 4px solid $color-fg-secondary;
+}
+@mixin card-b-colors-dark {
+    background-color: $color-bg-secondary-2;
+    border: 1px solid $color-fg-secondary;
+} 
diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -4,6 +4,8 @@ $color-bg-secondary: #0e3c3c;
 $color-fg: #ffffff;
 $color-fg-secondary: #4ff5f5;
 
+$color-bg-secondary-2: #185146;
+
 // Fonts
 $sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 

diff --git a/sass/sponsor.scss b/sass/sponsor.scss
@@ -1,7 +1,10 @@
+@import 'main';
+
 #sponsor {
   text-align: center;
 
   #section-reasons-sponsor {
+    @include card-a-colors-dark;
     margin-bottom: 1rem;
     padding: 24px;
     border-radius: 8px;
@@ -48,12 +51,17 @@
       justify-content: space-between;
 
       .tier-card {
+        @include card-b-colors-dark;
         flex: 1;
         border-radius: 8px;
         padding: 24px;
         transition: box-shadow 0.3s ease-in-out;
         margin-bottom: 1.5rem;
 
+        &:hover {
+            box-shadow: 0px 8px 16px rgba(0,0,0, 0.7);
+        }
+
         &.tier-card-silver {
           border: 1px solid #C0C0C0;
           hr.tier-card-hr {
@@ -147,6 +155,7 @@
   }
 
   #section-current-sponsors {
+    @include card-a-colors-dark;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     padding: 24px;
@@ -161,6 +170,7 @@
     gap: 20px;
 
     .contribution {
+      @include card-a-colors-dark;
       border-radius: 12px;
       padding: 20px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
@@ -178,6 +188,7 @@
           background-color: #f3f4f6;
           color: #000;
           padding: 12px 24px;
+          border: 1px solid #454545;
           border-radius: 8px;
           text-decoration: none;
           font-weight: 600;

diff --git a/templates/sponsor.html b/templates/sponsor.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block styles %}
-    <link rel="stylesheet" href="{{ get_url(path="index.css") | safe }}">
+    <link rel="stylesheet" href="{{ get_url(path="sponsor.css") | safe }}">
 {% endblock %}
 
 {% block content %}