better home presentation

This commit is contained in:
2026-09-14 09:41:06 +02:00
parent 3b1013bc8f
commit dd5c330e98
4 changed files with 107 additions and 57 deletions
File diff suppressed because one or more lines are too long
@@ -426,6 +426,7 @@ main[role="main"]{
} }
} }
// Article Static Home page teaser // Article Static Home page teaser
&[role="home-presentation"]{ &[role="home-presentation"]{
max-width: 65vw; max-width: 65vw;
@@ -439,65 +440,110 @@ main[role="main"]{
p{ p{
font-size: 1.134em; font-size: 1.134em;
vertical-align: top; vertical-align: top;
display: inline-block;
max-width: 29%;
margin-top: 2em;
box-sizing: border-box;
position: relative; position: relative;
box-sizing: border-box;
// z-index: 10; // z-index: 10;
margin-bottom: 6em; @media (min-width: 1080px){
display: inline-block;
max-width: 28%;
// min-width: 15em;
margin-top: 2em;
margin-bottom: 7em;
&:not(:first-of-type){ &:not(:first-of-type){
margin-left: 6%; margin-left: 6%;
} }
&:before{
content: "";
display: block; transform-origin: top left;
position: absolute; &, &:before{
// background-color: red; transition: all 0.6s ease-in-out;
// border: 1px solid red ; }
background-size: contain;
$form_wh:10em; &:hover{
width:$form_wh; height:$form_wh; // color: $bleu_site;
bottom:-$form_wh * 0.9; right:0; transform: scale(1.1) translateY(-5px);
z-index: -1; &:before{
transform: scale(0.8) translateY(-20px) rotate(-15deg);
}
}
&:before{
content: "";
display: block;
position: absolute;
$form_wh:8em;
width:$form_wh; height:$form_wh;
bottom:-$form_wh * 1.1; right:$form_wh / 4;
z-index: -1;
transform-origin: center left;
background-size: contain;
// background-color: $bleu_site;
// border: 1px solid red ;
// mask-size: contain;
// mask-mode: luminance;
}
&.forme-pyramide:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg');
}
&.forme-prct:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/prct.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg');
}
&.forme-pi:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/pi.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg');
}
&.forme-infinite:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/infinite.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg');
}
&.forme-supeg:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
}
&.forme-cone:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/cone.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg');
}
&.forme-croissant:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/croissant.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg');
}
&.forme-cube:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/cube.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg');
}
&.forme-diamant:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/diamant.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg');
}
&.forme-cylindre:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg');
// content: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg');
// mask-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg');
}
} }
&.forme-pyramide:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg');
}
&.forme-prct:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg');
}
&.forme-pi:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg');
}
&.forme-infinite:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg');
}
&.forme-supeg:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
}
&.forme-cone:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg');
}
&.forme-croissant:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg');
}
&.forme-cube:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg');
}
&.forme-diamant:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg');
}
&.forme-cylindre:before{
background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg');
}
} }
h4 a:hover{
color: $rose;
}
} }
} }
article.node-type-chapitre{ article.node-type-chapitre{
@@ -678,9 +724,12 @@ main[role="main"]{
// |_| |_|\___/|_| |_|_____| // |_| |_|\___/|_| |_|_____|
article.node-type-static[role="home-presentation"]{ // article.node-type-static[role="home-presentation"]{
// div.body{
}
// }
// }
div.views-home-chapitres{ div.views-home-chapitres{
// display: flex; // display: flex;
@@ -12,9 +12,9 @@ vitehmr:
js: js:
http://localhost:5173/@vite/client: http://localhost:5173/@vite/client:
type: external type: external
attributes: attributes:
type: module type: module
http://localhost:5173/assets/js/main.js: http://localhost:5173/assets/js/main.js:
type: external type: external
attributes: attributes:
type: module type: module
@@ -6,6 +6,7 @@ import { fileURLToPath, URL } from 'node:url'
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
server: { server: {
hmr: { hmr: {
host: 'localhost', host: 'localhost',
}, },