index: removed useless style and use svg instead of linear-gradient to remove aliasing
This commit is contained in:
Lou
parent
ea1fba89b1
commit
ace25539db
12 changed files with 183 additions and 86 deletions
|
|
@ -1,5 +1,5 @@
|
|||
require("dotenv").config({
|
||||
path: `.env.${process.env.NODE_ENV}`
|
||||
path: `.env.${process.env.NODE_ENV}`,
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -7,7 +7,7 @@ module.exports = {
|
|||
siteUrl: `https://www.yourdomain.tld`,
|
||||
title: "CLI",
|
||||
description:
|
||||
"Coopérative de travailleuses et travailleurs du numérique basée à Strasbourg."
|
||||
"Coopérative de travailleuses et travailleurs du numérique basée à Strasbourg.",
|
||||
},
|
||||
plugins: [
|
||||
"gatsby-plugin-sass",
|
||||
|
|
@ -17,9 +17,9 @@ module.exports = {
|
|||
resolve: "gatsby-source-filesystem",
|
||||
options: {
|
||||
name: "pages",
|
||||
path: "./src/pages/"
|
||||
path: "./src/pages/",
|
||||
},
|
||||
__key: "pages"
|
||||
__key: "pages",
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-manifest`,
|
||||
|
|
@ -30,8 +30,8 @@ module.exports = {
|
|||
background_color: "#f7f0eb",
|
||||
theme_color: "#a2466c",
|
||||
display: "standalone",
|
||||
icon: "src/images/favicon.png"
|
||||
}
|
||||
}
|
||||
]
|
||||
icon: "src/images/logo-cli.png",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useInView } from "react-intersection-observer";
|
|||
import "./index.scss";
|
||||
import BtnContact from "../btnContact";
|
||||
import HeaderContext from "../../context/headerContext";
|
||||
import Logo from "../../images/logo-cli.svg";
|
||||
|
||||
const Header = () => {
|
||||
const navbarContext = useContext(HeaderContext);
|
||||
|
|
@ -22,12 +23,15 @@ const Header = () => {
|
|||
return (
|
||||
<header ref={ref}>
|
||||
<div className="hero">
|
||||
<h1>Coopérative Libre Informatique</h1>
|
||||
<div className="hero-box">
|
||||
<div className="hero-text">
|
||||
<p className="hero-paragraph">Travailler autrement ensemble.</p>
|
||||
<div className="hero-container">
|
||||
<img src={Logo} alt="" className="hero-logo" />
|
||||
<h1>Coopérative Libre Informatique</h1>
|
||||
<div className="hero-box">
|
||||
<div className="hero-text">
|
||||
<p className="hero-paragraph">Travailler autrement ensemble.</p>
|
||||
</div>
|
||||
<BtnContact>Écrivez-nous !</BtnContact>
|
||||
</div>
|
||||
<BtnContact>Écrivez-nous !</BtnContact>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -8,77 +8,75 @@
|
|||
|
||||
header {
|
||||
// width: 100vw;
|
||||
width: calc(100vw - 12px); // HOW TO HANDLE THIS ANOTHER WAY ?
|
||||
width: calc(100vw - 16px); // HOW TO HANDLE THIS ANOTHER WAY ?
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background-image: linear-gradient(
|
||||
60deg,
|
||||
rgba(100, 44, 135, 0.5) 35%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
overflow-y: auto;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: $light;
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
padding-bottom: 10rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
font-family: CutiveMono;
|
||||
color: $dark;
|
||||
margin-left: 10%;
|
||||
.hero-container {
|
||||
margin: 13rem auto auto auto;
|
||||
|
||||
.hero-logo {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 30rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
font-family: CutiveMono;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.hero-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $dark;
|
||||
min-width: fit-content;
|
||||
|
||||
.hero-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
padding: 0 1.5rem;
|
||||
|
||||
.hero-paragraph {
|
||||
line-height: 1.7rem;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
}
|
||||
.hero-highlight {
|
||||
color: $primary-darker;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $dark;
|
||||
min-width: fit-content;
|
||||
margin-left: 10%;
|
||||
|
||||
.hero-text {
|
||||
@media (min-width: 800px) {
|
||||
header {
|
||||
.hero {
|
||||
.hero-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
padding: 0 1.5rem;
|
||||
|
||||
.hero-paragraph {
|
||||
line-height: 1.7rem;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
}
|
||||
.hero-highlight {
|
||||
color: $primary-darker;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
header {
|
||||
margin-top: 0rem;
|
||||
height: 100vh;
|
||||
|
||||
.hero {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-box > .hero-text {
|
||||
font-size: 1.1rem;
|
||||
margin-top: 12%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
src/images/background-index.svg
Normal file
10
src/images/background-index.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg viewBox="0 0 2175 1291" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_136:7)">
|
||||
<path d="M296 0L1336 1291H0V0H296Z" fill="#642C87"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_136:7">
|
||||
<rect width="2175" height="1291" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 279 B |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
BIN
src/images/logo-cli.png
Normal file
BIN
src/images/logo-cli.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
13
src/images/logo-cli.svg
Normal file
13
src/images/logo-cli.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg viewBox="0 0 2000 2000" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_125:2)">
|
||||
<rect width="2000" height="2000" rx="50" fill="none"/>
|
||||
<path d="M1551.04 1551.01C1246.73 1855.33 753.331 1855.33 449.014 1551.01C144.697 1246.7 144.697 753.303 449.014 448.986C753.331 144.669 1246.73 144.669 1551.04 448.986" stroke="#642C87" stroke-width="120"/>
|
||||
<path d="M1217.46 1474.29C936.159 1605.47 605.789 1492.36 479.559 1221.66C353.329 950.957 479.042 625.174 760.345 494" stroke="#642C87" stroke-width="120"/>
|
||||
<path d="M1583.5 708C1583.5 1030.53 1322.26 1292 1000 1292" stroke="#642C87" stroke-width="120"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_125:2">
|
||||
<rect width="2000" height="2000" rx="50" fill="none"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 751 B |
|
|
@ -109,6 +109,7 @@ const IndexPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="realisation index-section">
|
||||
<div className="parallax-realisation">
|
||||
<i className="parallax-object-3">
|
||||
|
|
@ -201,6 +202,7 @@ const IndexPage = () => {
|
|||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="contact index-section" id="contact">
|
||||
<div className="parallax-contact">
|
||||
<i className="parallax-object-4">
|
||||
|
|
|
|||
|
|
@ -11,8 +11,52 @@ const VosBesoins = () => {
|
|||
<div className="page-content">
|
||||
<h2 className="page-title">Nos services</h2>
|
||||
<section className="page-section">
|
||||
<h3 className="section-title" id="web-dev"></h3>
|
||||
<p className="section-paragraph"></p>
|
||||
<h3 className="section-title" id="dev">
|
||||
Développement et accompagnement
|
||||
</h3>
|
||||
<p className="section-paragraph">
|
||||
Vous êtes une personne, une association, une entreprise et vous souhaitez
|
||||
une présence sur internet sans trop savoir comment vous y prendre ? Un
|
||||
projet en tête mais aucune idée du bout par lequel commencer ? Nous
|
||||
répondons présent·es pour vous accompagner dans la mise en place de votre
|
||||
projet de site web, quel qu'il soit, et nous occupons de tout, du
|
||||
développement à la mise en ligne.
|
||||
</p>
|
||||
<p className="section-paragraph">
|
||||
Nous développons aussi des logiciels pour votre entreprise [...]
|
||||
</p>
|
||||
<div className="process">
|
||||
<p>
|
||||
Afin de vous garantir satisfaction, et les meilleurs résultats nous
|
||||
avons pour habitude de travailler de la manière suivante
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Une première version au plus vite avec les fonctionnalités minimales
|
||||
</li>
|
||||
<li>
|
||||
Développement par itération : nous faisons évolution le produit
|
||||
ensemble d'après votre avis
|
||||
</li>
|
||||
<li>Maintenance sur le moyen/long terme</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section className="page-section">
|
||||
<h3 className="section-title" id="maintenance">
|
||||
Maintenance informatique
|
||||
</h3>
|
||||
<p className="section-paragraph">
|
||||
Un problème avec votre ordinateur, ou votre réseau ? Nous y jetons un oeil
|
||||
pour trouver l'origine de la panne et la résoudre.
|
||||
</p>
|
||||
<p className="section-paragraph">
|
||||
Votre site internet ou un de vos logiciels présente des problèmes de
|
||||
fonctionnement ? Après diagnostique, nous pouvons nous charger de les
|
||||
réparer. En outre, garder à jour un site internet ou un logiciel permet de
|
||||
se prémunir d'une majorité de problèmes : pertes de données, bugs, piratage
|
||||
...
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$primary: #ad73d2;
|
||||
$primary-darker: hsl(277, 51%, 35%);
|
||||
$primary-darker: #642c87;
|
||||
$secondary: #a6d0d9;
|
||||
$light: #f0f6f9;
|
||||
$dark: #2f2e44;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
min-width: 18rem;
|
||||
}
|
||||
|
||||
@media (min-width: 630px) {
|
||||
@media (min-width: 800px) {
|
||||
.parallax-ethic {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
|
|
@ -48,25 +48,31 @@
|
|||
|
||||
.parallax-team {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
left: 30%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.parallax-realisation {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
left: 70%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.parallax-ethic,
|
||||
.parallax-team,
|
||||
.parallax-realisation,
|
||||
.parallax-contact {
|
||||
.parallax-realisation {
|
||||
top: 50px;
|
||||
z-index: -2;
|
||||
opacity: 0.5;
|
||||
width: 28.5rem;
|
||||
}
|
||||
|
||||
.parallax-contact {
|
||||
top: 70px;
|
||||
z-index: -2;
|
||||
opacity: 0.5;
|
||||
width: 28.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ethic {
|
||||
|
|
@ -126,12 +132,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.team {
|
||||
background-image: linear-gradient(
|
||||
100deg,
|
||||
rgba(100, 44, 135, 0.5) 40%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
.team:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../images/background-index.svg);
|
||||
background-position: 50% 0;
|
||||
background-size: cover;
|
||||
opacity: 40%;
|
||||
transform: rotate(0.5turn);
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.team-card-group {
|
||||
|
|
@ -184,12 +198,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
.realisation {
|
||||
background-image: linear-gradient(
|
||||
-100deg,
|
||||
rgba(100, 44, 135, 0.5) 40%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
.realisation:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../images/background-index.svg);
|
||||
background-position: 50% 0;
|
||||
background-size: cover;
|
||||
opacity: 40%;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.realisation-card-group {
|
||||
|
|
@ -201,3 +222,8 @@
|
|||
padding-top: 150px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.contact {
|
||||
.parallax-contact {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ main {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 85vw;
|
||||
width: 85vw;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue