From c91c7c40090984eac401945a13860eab07120a6a Mon Sep 17 00:00:00 2001
From: Hugues <hugues@lydra.fr>
Date: Tue, 3 Aug 2021 07:40:23 +0000
Subject: [PATCH] add colors and fonts, check responsive values
---
src/components/HomepageFeatures.js | 20 +++---
src/components/HomepageFeatures.module.css | 28 --------
src/css/custom.css | 81 +++++++++++++++++++---
src/pages/index.module.css | 7 +-
4 files changed, 88 insertions(+), 48 deletions(-)
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 5f45f28..9d765e3 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -1,3 +1,5 @@
+/* eslint-disable linebreak-style */
+/* eslint react/prop-types: 0 */
import React from "react";
import clsx from "clsx";
import styles from "./HomepageFeatures.module.css";
@@ -41,16 +43,18 @@ const FeatureList = [
},
];
-// eslint-disable-next-line
+
function Feature({Svg, title, description}) {
return (
- <div className={clsx("hero hero--primary text--center padding-horiz--md", styles.featureContainer)}>
- <div className={styles.featureSvg}>
- <Svg className={styles.svg} alt={title} />
- </div>
- <div className={styles.featureText}>
- <h3>{title}</h3>
- <p>{description}</p>
+ <div className={clsx("hero container text--center padding-horiz--md")}>
+ <div className="row">
+ <div className={"col col--5"}>
+ <Svg className={styles.svg} alt={title} />
+ </div>
+ <div className={"col col--5"}>
+ <h3>{title}</h3>
+ <p>{description}</p>
+ </div>
</div>
</div>
);
diff --git a/src/components/HomepageFeatures.module.css b/src/components/HomepageFeatures.module.css
index 0042bd4..3f287c7 100644
--- a/src/components/HomepageFeatures.module.css
+++ b/src/components/HomepageFeatures.module.css
@@ -1,34 +1,6 @@
/* stylelint-disable docusaurus/copyright-header */
-.features {
- display: flex;
- align-items: center;
- padding: 2rem 0;
- width: 100%;
-}
-
.svg {
height: 175px;
width: 175px;
}
-
-.featureContainer {
- min-height: 200px;
- padding: 2.5rem 0;
- margin-bottom: -1px;
- border-top: 1px solid rgb(238, 238, 238);
- border-bottom: 1px solid rgb(238, 238, 238);
- flex-direction: row;
-}
-
-.featureContainer > .featureSvg {
- width: 50%;
- flex-shrink: 1;
- text-align: center;
-}
-
-.featureText {
- padding-right: 20px;
- width: 60%;
- flex-shrink: 0;
-}
diff --git a/src/css/custom.css b/src/css/custom.css
index 0c565c3..0429542 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -5,32 +5,95 @@
* work well for content-centric websites.
*/
+/******* google fonts imports *******/
+@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,600,700');
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
+
/* You can override the default Infima variables here. */
:root {
- --ifm-color-primary: #25c2a0;
- --ifm-color-primary-dark: rgb(33, 175, 144);
- --ifm-color-primary-darker: rgb(31, 165, 136);
- --ifm-color-primary-darkest: rgb(26, 136, 112);
- --ifm-color-primary-light: rgb(70, 203, 174);
- --ifm-color-primary-lighter: rgb(102, 212, 189);
- --ifm-color-primary-lightest: rgb(146, 224, 208);
- --ifm-code-font-size: 95%;
+ --ifm-color-primary: #0d0d0d;
+ --ifm-color-dark-green: #577018;
+ --ifm-color-light-green:#8EA34E;
+ --ifm-color-frame: #FFC729;
+ --ifm-color-tonic-one: #E07931;
+ --ifm-color-tonic-two: #B3433B;
+ --ifm-color-tonic-three: #805D93;
+ --ifm-color-primary-dark: #0c0c0cb0;
+ --ifm-color-primary-light: #ffffff;
+ --ifm-code-font-size: 95%;
+ --ifm-font-family-base: "Comfortaa", cursive;
+ --ifm-font-family: "Montserrat", sans-serif;
}
.docusaurus-highlight-code-line {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.9);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
+html[data-theme='dark'] {
+ --ifm-background-color: #18191a;
+ --ifm-background-surface-color: #18191a;
+ --ifm-hover-overlay: rgba(255, 255, 255, 0.05);
+ --ifm-color-content-secondary: rgba(255, 255, 255, 1);
+ --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
+}
+
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
+hgroup {
+ font-family: var(--ifm-font-family-base);
+ font-weight: 700;
+}
+
+p {
+ font-family: var(--ifm-font-family);
+ font-weight: 500;
+}
+
+/************ Navbar style ***********/
+.navbar {
+ background-color: var(--ifm-color-light-green);
+ --ifm-navbar-link-hover-color: var(--ifm-color-dark-green);
+ font-family: var(--ifm-font-family-base);
+ font-weight: 700;
+ font-size: 16px;
+}
+
+.navbar__title {
+ font-size: 18px;
+}
+
+/************ main elements style***********/
.sections {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
+
+/************ footer style ***********/
+#__docusaurus > footer > div > div.text--center > div > a {
+ color: unset;
+}
+
+#__docusaurus > footer > div > div.text--center > div > a:hover {
+ color: var(--ifm-color-frame);
+}
+
+.footer--dark {
+ background-color: var(--ifm-color-tonic-one);
+ color: var(--ifm-color-dark);
+ --ifm-footer-link-color: var(--ifm-color-dark);
+ --ifm-footer-title-color: var(--ifm-color-dark);
+ font-family: var( --ifm-font-family);
+}
+
+/************ sub-footer style ***********/
+.footer__bottom {
+ font-family: var(--ifm-font-family);
+ font-weight: 600;
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 5c0d4f6..3f2b62a 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -6,13 +6,14 @@
*/
.heroBanner {
- padding: 4rem 0;
+ padding: 4rem 0;
text-align: center;
position: relative;
- overflow: hidden;
+ overflow: hidden visible;
+ background-color: var(--ifm-color-light-green);
}
-@media screen and (max-width: 966px) {
+ @media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
--
GitLab