Commit eba129bd authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

Replace flexbox by grid

Mostly for Safari < 14.1 that does not support gap property.
parent 6c807937
Pipeline #2759 failed with stage
in 30 seconds
......@@ -27,7 +27,7 @@
"eslint-config-standard": "^17.0.0-1",
"highlight.js": "^9.18.3",
"highlightjs-line-numbers.js": "^2.8.0",
"postcss": "^8.4.6",
"postcss": "^8.4.12",
"postcss-import": "^14.0.2",
"postcss-preset-env": "^7.3.1",
"rollup": "^2.67.0",
......@@ -6591,9 +6591,9 @@
}
},
"node_modules/nanoid": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
"integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
"integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
"dev": true,
"bin": {
"nanoid": "bin/nanoid.cjs"
......@@ -7071,21 +7071,27 @@
"dev": true
},
"node_modules/postcss": {
"version": "8.4.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
"integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
"version": "8.4.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
}
],
"dependencies": {
"nanoid": "^3.2.0",
"nanoid": "^3.3.1",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
}
},
"node_modules/postcss-attribute-case-insensitive": {
......@@ -15179,9 +15185,9 @@
"dev": true
},
"nanoid": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
"integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
"integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
"dev": true
},
"natural-compare": {
......@@ -15529,12 +15535,12 @@
}
},
"postcss": {
"version": "8.4.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
"integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
"version": "8.4.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
"dev": true,
"requires": {
"nanoid": "^3.2.0",
"nanoid": "^3.3.1",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
}
......
......@@ -321,17 +321,16 @@ section.users {
padding-bottom: 4.375rem;
margin-left: 2rem;
margin-right: 2rem;
display: flex;
justify-content: space-around;
}
.companies > ul {
display: flex;
column-gap: 2rem;
row-gap: 3rem;
flex-wrap: wrap;
display: grid;
grid-row-gap: 3rem;
grid-column-gap: 2rem;
grid-template-columns: repeat(auto-fit, 150px);
justify-content: center;
align-items: center;
justify-items: center;
}
.companies > ul p {
......@@ -388,8 +387,7 @@ section.about {
}
section.about .columns {
display: flex;
flex-direction: column;
display: grid;
gap: 3rem;
}
......@@ -400,8 +398,7 @@ section.about .columns {
}
section.about .columns {
flex-direction: row;
justify-content: flex-end;
grid-template-columns: 4fr 6fr;
gap: 4.5rem;
}
}
......@@ -425,18 +422,6 @@ section.about .columns {
}
}
section.about .columns > .column:first-child {
display: flex;
flex-direction: column;
flex: 0 0 40%;
}
section.about .columns > .column:nth-child(2) {
max-width: 1024px;
display: flex;
justify-content: flex-end;
}
section.about .imageblock img {
width: 100%;
margin-top: 0.5rem;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment