begin customisation

graphile · Dec 13, 2024 · 18edfa6 · 18edfa6
1 parent dddcc6d
commit 18edfa6
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 15 deletions.
diff --git a/utils/website/docusaurus.config.js b/utils/website/docusaurus.config.js
@@ -113,6 +113,13 @@ const config = {
     }),
   ],
 
+  stylesheets: [
+    {
+      href: "https://fonts.googleapis.com/css2?family=Rubik:[email protected]",
+      type: "text/css",
+    },
+  ],
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({

diff --git a/utils/website/src/components/HomepageFeatures/styles.module.css b/utils/website/src/components/HomepageFeatures/styles.module.css
@@ -3,6 +3,7 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
+  font-weight: 700;
 }
 
 .featureSvg {

diff --git a/utils/website/src/css/custom.css b/utils/website/src/css/custom.css
@@ -6,6 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
+  /* Docusaurus variables */
   --ifm-color-primary: #1368aa;
   --ifm-color-primary-dark: #033270;
   --ifm-color-primary-darker: #01263d;
@@ -14,14 +15,26 @@
   --ifm-color-primary-lighter: #9dcee2;
   --ifm-color-primary-lightest: #9dcee2;
   --ifm-code-font-size: 95%;
-  --ifm-footer-background-color: #01263d;
+  --ifm-font-family-base: Rubik, Helvetica, Verdana, Arial, sans-serif;
+  --ifm-footer-background-color: #1a0003;
   --ifm-footer-color: #ffffff;
-  --ifm-footer-link-color: #e05f47;
+  --ifm-footer-link-color: #fe8052;
+  --ifm-navbar-background-color: var(--ifm-footer-background-color);
+  --ifm-navbar-link-color: var(--ifm-footer-color);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  /* Graphile variables*/
+  --graphile-color-background: #fcfcbf;
+  --graphile-color-text: #1a0003;
+
+  /* global styling choices */
+  background-color: var(--graphile-color-background);
+  color: var(--graphile-color-text);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
+  /* Docusaurus variables */
   --ifm-color-primary: #e05f47;
   --ifm-color-primary-dark: #4091c9;
   --ifm-color-primary-darker: #1368aa;
@@ -30,4 +43,8 @@
   --ifm-color-primary-lighter: #9dcee2;
   --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  /* Graphile variables*/
+  --graphile-color-background: #08434a;
+  --graphile-color-text: #ffffff;
 }
diff --git a/utils/website/src/pages/index.js b/utils/website/src/pages/index.js
@@ -12,8 +12,11 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <img
+          className=""
+          src="/img/graphile-star.svg"
+          alt="Graphile-Star the wildcards of the Graphile universe"
+        ></img>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"

diff --git a/utils/website/src/pages/index.module.css b/utils/website/src/pages/index.module.css
@@ -4,20 +4,16 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 0;
   text-align: center;
   position: relative;
   overflow: hidden;
-  background-color: var(--ifm-color-primary-darker);
-  color: #ffffff;
-  background-image: url("/img/stars.png"), url("/img/star-background.png");
-  background-position: center center;
-  background-size: auto 100%;
-  background-repeat: no-repeat, repeat;
-}
-
-[data-theme="dark"] .heroBanner {
-  background-color: var(--ifm-color-primary-darkest);
+  background-color: var(--graphile-color-background);
+  color: var(--graphile-color-text);
+  background-image: url("/img/sky-light.svg");
+  background-position: top right;
+  background-size: auto;
+  background-repeat: no-repeat;
 }
 
 @media screen and (max-width: 996px) {