fix: minor changes to styles

Author: m-jahn

docusaurus.config.js

@@ -80,6 +80,11 @@ const config = {
             label: "Workflows",
           },
           { to: "/blog", label: "News", position: "left" },
+          {
+            href: "https://mpusp.mpg.de",
+            label: "MPUSP",
+            position: "right",
+          },
           {
             href: "https://github.com/MPUSP",
             label: "MPUSP GitHub",
@@ -138,7 +143,7 @@ const config = {
         darkTheme: prismThemes.dracula,
       },
       colorMode: {
-        defaultMode: "dark",
+        defaultMode: "light",
         disableSwitch: false,
         respectPrefersColorScheme: false,
       },

src/components/About/index.jsx

@@ -47,16 +47,15 @@ export default function Stats() {
             <div className={styles.about_description}>
                 <h1>Our Github Projects</h1>
                 <p>
-                    More than 30 open-source{" "}
-                    <Link to="https://github.com/MPUSP/repositories">MPUSP repositories</Link>{" "}
-                    are available on Github, representing a diverse range of projects.
+                    We work on a diverse range of projects and aim to make as many as possible{" "}
+                    <Link to="https://github.com/orgs/MPUSP/repositories">publicly available on Github</Link>{" "}.
                 </p>
             </div>
             <div className={styles.stats_container}>
                 <div className={styles.stats1_card}>
                     {stats.map(({ number, content }, index) => (
                         <Link key={index}
-                            to="https://github.com/MPUSP/repositories">
+                            to="https://github.com/orgs/MPUSP/repositories">
                             <div className={styles.card}>
                                 <h1 className="gradient_text">{number}</h1>
                                 <h3>{content}</h3>
@@ -67,7 +66,7 @@ export default function Stats() {
                 <div className={styles.stats2_card}>
                     {stats2.map(({ number, content }, index) => (
                         <Link key={index}
-                            to="https://github.com/MPUSP/repositories">
+                            to="https://github.com/orgs/MPUSP/repositories">
                             <div className={styles.card}>
                                 <h1 className="gradient_text">{number}</h1>
                                 <h3>{content}</h3>

src/components/About/styles.module.css

@@ -65,7 +65,7 @@
 }
 
 .card:hover {
-  transform: scale(0.9);
+  transform: scale(0.95);
 }
 
 .card h1,

src/components/Header/index.jsx

@@ -17,21 +17,24 @@ export default function Header() {
             </div>
             <div className={styles.header_content}>
                 <h1>
-                    The MPUSP Bioinformatics Platform:
-                    Workflows for Reproducible Science.
+                    The MPUSP Bioinformatics Platform
                 </h1>
+                <h2>
+                    Workflows for Computational Biology at the 
+                    Max-Planck-Unit for the Science of Pathogens.
+                </h2>
                 <div className={styles.header_content_input}>
                     <Link to="/docs/projects/intro"
-                        className="button button--secondary button--lg">
-                        Projects
+                        className="button">
+                        <span>Projects</span>
                     </Link>
                     <Link to="/docs/workflows/workflow_overview"
-                        className="button button--secondary button--lg">
-                        Explore workflows
+                        className="button">
+                        <span>Explore workflows</span>
                     </Link>
                     <Link to="/blog"
-                        className="button button--secondary button--lg">
-                        News
+                        className="button">
+                        <span>News</span>
                     </Link>
                 </div>
             </div>

src/components/Header/styles.module.css

@@ -42,14 +42,42 @@
 
 .header_content_input a {
   margin-right: 5px;
-  text-decoration: none;
   width: 250px;
+  background: var(--theme-card);
+  color: var(--ifm-font-color-base);
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 10px 15px 10px 15px;
+  margin: 5px;
+  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+  font-weight: 700;
+  font-size: 20px;
 }
 
 .header_content_input a:focus {
   background: none;
 }
 
+.header_content_input a:hover {
+  transform: scale(0.95);
+}
+
+.header_content_input a span {
+  background-image: linear-gradient(
+    90deg,
+    var(--ifm-color-primary-dark),
+    var(--ifm-color-primary-lightest)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 @media screen and (max-width: 1050px) {
   .header {
     flex-direction: column;