hamburger menu, article view

vue/src/assets/main.css

@@ -11,7 +11,7 @@
 a,
 .green {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
+  color: var(--color-accent);
   transition: 0.4s;
 }
 .feed-actions {
@@ -38,8 +38,8 @@ a,
 }
 
 .message {
-  background-color: #3498db;
-  color: white;
+  background-color: var(--color-info);
+  color: var(--color-info-text);
   padding: 10px;
   border-radius: 4px;
   position: fixed;
@@ -52,7 +52,7 @@ a,
 }
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: var(--color-accent-hover);
   }
 }
 
@@ -63,7 +63,7 @@ a,
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: hsla(160, 100%, 37%, 1);
+  color: var(--color-accent);
 }
 
 .feed-title {
@@ -71,7 +71,7 @@ a,
   font-family: 'Courier New';
   font-size: clamp(1.1rem, 4vw, 1.4rem);
   font-weight: bold;
-  color: hsla(200, 90%, 45%, 1);
+  color: var(--color-accent-2);
   border-bottom: 1px solid #ccc;
   padding: 0.25em 1em 1em;
   min-height: 44px;
@@ -79,17 +79,7 @@ a,
 }
 
 .feed-title:hover {
-  color: hsla(200, 90%, 35%, 1);
-}
-
-@media (prefers-color-scheme: dark) {
-  .feed-title {
-    color: hsla(200, 90%, 65%, 1);
-  }
-
-  .feed-title:hover {
-    color: hsla(200, 90%, 75%, 1);
-  }
+  color: var(--color-accent-2-hover);
 }
 
 .feed-content {