Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 2dd5ccc2 authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

Merge branch '21-change-for-froggit-colors-and-fonts' into 'master'

Resolve "change for froggit colors and fonts"

Closes #21

See merge request !18
parents 2a0e4185 c91c7c40
No related branches found
No related tags found
1 merge request!18Resolve "change for froggit colors and fonts"
Pipeline #2553 passed
/* eslint-disable linebreak-style */
/* eslint react/prop-types: 0 */
import React from "react"; import React from "react";
import clsx from "clsx"; import clsx from "clsx";
import styles from "./HomepageFeatures.module.css"; import styles from "./HomepageFeatures.module.css";
...@@ -41,16 +43,18 @@ const FeatureList = [ ...@@ -41,16 +43,18 @@ const FeatureList = [
}, },
]; ];
// eslint-disable-next-line
function Feature({Svg, title, description}) { function Feature({Svg, title, description}) {
return ( return (
<div className={clsx("hero hero--primary text--center padding-horiz--md", styles.featureContainer)}> <div className={clsx("hero container text--center padding-horiz--md")}>
<div className={styles.featureSvg}> <div className="row">
<Svg className={styles.svg} alt={title} /> <div className={"col col--5"}>
</div> <Svg className={styles.svg} alt={title} />
<div className={styles.featureText}> </div>
<h3>{title}</h3> <div className={"col col--5"}>
<p>{description}</p> <h3>{title}</h3>
<p>{description}</p>
</div>
</div> </div>
</div> </div>
); );
......
/* stylelint-disable docusaurus/copyright-header */ /* stylelint-disable docusaurus/copyright-header */
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.svg { .svg {
height: 175px; height: 175px;
width: 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;
}
...@@ -5,32 +5,95 @@ ...@@ -5,32 +5,95 @@
* work well for content-centric websites. * 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. */ /* You can override the default Infima variables here. */
:root { :root {
--ifm-color-primary: #25c2a0; --ifm-color-primary: #0d0d0d;
--ifm-color-primary-dark: rgb(33, 175, 144); --ifm-color-dark-green: #577018;
--ifm-color-primary-darker: rgb(31, 165, 136); --ifm-color-light-green:#8EA34E;
--ifm-color-primary-darkest: rgb(26, 136, 112); --ifm-color-frame: #FFC729;
--ifm-color-primary-light: rgb(70, 203, 174); --ifm-color-tonic-one: #E07931;
--ifm-color-primary-lighter: rgb(102, 212, 189); --ifm-color-tonic-two: #B3433B;
--ifm-color-primary-lightest: rgb(146, 224, 208); --ifm-color-tonic-three: #805D93;
--ifm-code-font-size: 95%; --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 { .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.9);
display: block; display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding)); margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 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 { html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3); 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 { .sections {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 2rem 0; padding: 2rem 0;
width: 100%; 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;
}
...@@ -6,13 +6,14 @@ ...@@ -6,13 +6,14 @@
*/ */
.heroBanner { .heroBanner {
padding: 4rem 0; padding: 4rem 0;
text-align: center; text-align: center;
position: relative; 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 { .heroBanner {
padding: 2rem; padding: 2rem;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment