Merge branch 'intro_dark' into 'main'

Make intro page compatible with dark mode

See merge request !100

docs/index.md

@@ -9,16 +9,54 @@ hide:
     max-width: 1000px;
     margin: auto;
   }
-
   .intro-box {
     padding: 15px;
     padding-top: 0;
     padding-bottom: 0;
-    border: 1px solid transparent;
-    border-color: transparent;
+    border: 1px solid;
     border-radius: 4px;
     margin-bottom: 20px;
   }
+  .color1 {
+    color: light-dark(#31708f, white);
+    border-color: #31708f;
+    background-color: light-dark(#d9edf7, transparent);
+    & strong {
+      color: #31708f;
+    }
+  }
+  .color2 {
+    color: light-dark(#3c763d, white);
+    border-color: #3c763d;
+    background-color: light-dark(#dff0d8, transparent);
+    & strong {
+      color: #3c763d;
+    }
+  }
+  .color3 {
+    color: light-dark(#8a6d3b, white);
+    border-color: #8a6d3b;
+    background-color: light-dark(#fcf8e3, transparent);
+    & strong {
+      color: #8a6d3b;
+    }
+  }
+  .color4 {
+    color: light-dark(#a94442, white);
+    border-color: #a94442;
+    background-color: light-dark(#f2dede, transparent);
+    & strong {
+      color: #a94442;
+    }
+  }
+  .color5 {
+    color: light-dark(#301934, white);
+    border-color: #8c68c5;
+    background-color: light-dark(#c3b1e1, transparent);
+    & strong {
+      color: light-dark(#4e307d, #c3b1e1);
+    }
+  }
 </style>
 
 # ATLAS Software Documentation
@@ -26,7 +64,7 @@ hide:
 Here you can find tutorials and guides for using the software of the [ATLAS Experiment](https://atlas.cern/) at [CERN](https://home.cern/).
 These pages contain public structured software documentation, and exist in addition to the (internal) [Computing TWiki](https://twiki.cern.ch/twiki/bin/viewauth/AtlasComputing/AtlasComputing).
 
-<div class="intro-box" style="color: #31708f; background-color: #d9edf7; border-color: #bce8f1;" markdown>
+<div class="intro-box color1" markdown>
 **New to ATLAS?**<br>
 Have you just joined ATLAS and want to know more about the software? These links will help you to get started:
 
@@ -38,7 +76,7 @@ Have you just joined ATLAS and want to know more about the software? These links
 If you would like some more general introductions to software development for research, take a look at the [High Energy Physics Software Foundation training pages](https://hsf-training.org/training-center/).
 </div>
 
-<div class="intro-box" style="color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;" markdown>
+<div class="intro-box color2" markdown>
 **Need help getting started with physics analysis software?**<br>
 Follow the complete [Analysis Software Tutorial]({{locations.analysisSWTutorial}}), or jump directly to the introduction of the [Common CP Algorithms](https://atlassoftwaredocs.web.cern.ch/analysis-software/AnalysisSWTutorial/cpalg_intro/).
 
@@ -46,7 +84,7 @@ Follow the complete [Analysis Software Tutorial]({{locations.analysisSWTutorial}
 If so, go to the [ATLAS Open Data portal](https://opendata.atlas.cern).
 </div>
     
-<div class="intro-box" style="color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc;" markdown>
+<div class="intro-box color3" markdown>
 **Starting work on ATLAS software?**<br>
 Are you beginning an ATLAS software task? Read the introductory links above and then:
 
@@ -54,7 +92,7 @@ Are you beginning an ATLAS software task? Read the introductory links above and
   * follow the [Git workflow documentation]({{locations.athena_git}}/index.md)
 </div>
 
-<div class="intro-box" style="color: #a94442; background-color: #f2dede; border-color: #ebccd1;" markdown>
+<div class="intro-box color4" markdown>
 **Experienced developer?**<br>
 These links may be helpful:
 
@@ -70,7 +108,7 @@ These links may be helpful:
   * [Creating a personal Virtual Machine](https://atlas-personal-vm.docs.cern.ch/vm_os_guide.html)
 </div>
 
-<div class="intro-box" style="color: #301934; background-color: #C3B1E1;" markdown>
+<div class="intro-box color5" markdown>
 **Questions or problems?**<br>
 
   * Look at the [Asking Questions]({{locations.analysisSWTutorial}}/TutorialWeek/asking_questions/) page for guidance on where to post a question, or see the [Issue Reporting page]({{locations.athena_developers}}/issue-reporting.md).