use different colors for higher contrast and better readability

fixed missing line break

docs/maps.md

@@ -2,6 +2,7 @@ HowTo rC3 world maps
 ===
 
 _[english translation coming soon]_
+
 Zum Congress wird es eine Art 2D-Adventure, die rC3 world geben.
 Dieses Tutorial soll erklären, wie Karten und Inhalte zur rC3 world beigesteuert werden können.
 Falls danach noch Fragen offen sind, meldet euch gerne in unserem Rocketchat Channel und wir versuchen das Tutorial zu ergänzen.

themes/rc3/css/base.css

@@ -49,6 +49,13 @@
     --primary-c1-s3: rgba(36, 0, 56, 1);
     --primary-c2-s3: rgba(20, 0, 47, 1);
     --primary-c3-s3: rgba(0, 42, 58, 1);
+
+    --secondary-c1: rgba(253, 41, 79, 1);
+    --secondary-c2: rgba(22, 10, 254, 1);
+    --secondary-c3: rgba(255, 235, 216, 1);
+    --secondary-c4: rgba(1, 2, 42, 1);
+
+
 }
 
 
@@ -67,7 +74,7 @@ body {
     line-height: 1.7rem;
     font-family: "montserratregular";
     background-color: var(--primary-c4);
-    color: var(--primary-c3);
+    color: var(--secondary-c3);
 }
 
 /* Replacement for `body { background-attachment: fixed; }`, which has
@@ -91,15 +98,16 @@ body > .container {
 }
 
 a {
-    color: var(--primary-c3-s1);
+    color: var(--secondary-c3);
 }
 
-main a {
-    text-decoration: underline;
+[role="main"] a {
+    color: var(--primary-c3 );
+    /*text-decoration: underline;*/
 }
 
 a:hover, a:focus {
-    color: var(--primary-c1);
+    color: var(--primary-c3);
     text-decoration: underline;
 }
 
@@ -137,7 +145,7 @@ h1 {
     font-size: 42px;
     font-family: "orbitronregular";
     text-transform: uppercase;
-    color: var(--primary-c1);
+    color: var(--primary-c3);
 }
 
 h2, h3, h4, h5, h6 {
@@ -145,7 +153,7 @@ h2, h3, h4, h5, h6 {
     font-weight: 300;
     font-family: "orbitronregular";
     text-transform: uppercase;
-    color: var(--primary-c1);
+    color: var(--primary-c3);
 }
 
 hr {
@@ -243,7 +251,12 @@ footer a:hover {
 }
 
 .bg-secondary {
-    background-color: var(--primary-c2-s2) !important;
+    /*background-color: var(--primary-c2-s2) !important;*/
+    background-color: transparent !important;
+}
+
+.card {
+    border: 1px solid var(--primary-c3);
 }
 
 .navbar-brand img {
@@ -252,7 +265,7 @@ footer a:hover {
 }
 
 #toc-collapse .nav-link:hover {
-    color: var(--primary-c1);
+    color: var(--primary-c3);
 }
 
 .navbar {
@@ -262,7 +275,7 @@ footer a:hover {
 }
 
 .bg-primary {
-    background-color: rgba(1, 2, 42, 1) !important;  /*its !important in bootstrap min... sorry for that*/
+    background-color: var(--primary-c4) !important;  /*its !important in bootstrap min... sorry for that*/
     background-image: none;
 }
 
@@ -325,14 +338,14 @@ footer a:hover {
 .bs-sidebar .nav > li > a:hover,
 .bs-sidebar .nav > li > a:focus {
     text-decoration: none;
-    border-right: 1px solid;
+    border-right: 2px solid var(--primary-c3);
 }
 .bs-sidebar .nav > li > a.active,
 .bs-sidebar .nav > li > a.active:hover,
 .bs-sidebar .nav > li > a.active:focus {
     font-weight: bold;
     background-color: transparent;
-    border-right: 1px solid;
+    border-right: 2px solid var(--primary-c3);
 }
 
 .bs-sidebar .nav .nav .nav {