refactor: change notification card color

voidcosmos · Nov 15, 2023 · 058b86e · 058b86e
1 parent c687b87
commit 058b86e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/css/main.css b/css/main.css
@@ -9,9 +9,9 @@ kbd {
   border-radius: 13px;
 }
 
-.notification.is-info {
+.notification.is-primary {
   transition: background-color var(--transition-duration);
-  background-color: var(--notification-background-color);
+  background-color: var(--notification-background-color);
 }
 
 .notification pre code {

diff --git a/css/themes.css b/css/themes.css
@@ -1,7 +1,7 @@
 :root {
   --transition-duration: 0.25s;
   --main-background-color: white;
-  --notification-background-color: #209cee;
+  --notification-background-color: #ff3860;
   --footer-background-color: #fafafa;
   --title-text-color: #363636;
   --text-color: #4a4a4a;
@@ -14,13 +14,14 @@
   --logo-background-color1: #a44d6d;
   --logo-background-color2: #ff3860;
   --logo-background-color3: #fe9194;
+  --logo-background-color4: #fdf3068;
   --button-background-color: white;
   --info-text-color: #209cee;
 }
 
 .dark-theme {
   --main-background-color: #121212;
-  --notification-background-color: #156194;
+  --notification-background-color: #a93d6e;
   --footer-background-color: #272727;
   --title-text-color: #dbdbdb;
   --text-color: #c2c2c2;
@@ -33,6 +34,7 @@
   --logo-background-color1: #8e435f;
   --logo-background-color2: #ca2b4b;
   --logo-background-color3: #b6595c;
+  --logo-background-color4: #fdf3068;
   --button-background-color: #bbb;
   --info-text-color: #3eb2ff;
 }

diff --git a/index.html b/index.html
@@ -306,7 +306,7 @@ <h2 class="title">Examples</h2>
 
       <div class="tile is-ancestor">
         <div class="tile is-parent">
-          <article class="tile is-child notification is-info">
+          <article class="tile is-child notification is-primary">
             <p class="subtitle">
               Search node_modules directories in your projects directory and
               ignore unwanted results (hidden files for example):
@@ -318,7 +318,7 @@ <h2 class="title">Examples</h2>
         </div>
 
         <div class="tile is-parent">
-          <article class="tile is-child notification is-info">
+          <article class="tile is-child notification is-primary">
             <p class="subtitle">
               Displays the magenta color cursor... because I like magenta!
             </p>
@@ -330,7 +330,7 @@ <h2 class="title">Examples</h2>
       </div>
       <div class="tile is-ancestor">
         <div class="tile is-parent">
-          <article class="tile is-child notification is-info">
+          <article class="tile is-child notification is-primary">
             <p class="subtitle">
               List directories called "dist" and and show errors if any occur:
             </p>
@@ -341,7 +341,7 @@ <h2 class="title">Examples</h2>
         </div>
 
         <div class="tile is-parent">
-          <article class="tile is-child notification is-info">
+          <article class="tile is-child notification is-primary">
             <p class="subtitle">
               List vendor directories in your projects directory, sort by size,
               and show that in gb: