better home presentation
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
@@ -426,6 +426,7 @@ main[role="main"]{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Article Static Home page teaser
|
||||
&[role="home-presentation"]{
|
||||
max-width: 65vw;
|
||||
@@ -439,65 +440,110 @@ main[role="main"]{
|
||||
p{
|
||||
font-size: 1.134em;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
max-width: 29%;
|
||||
margin-top: 2em;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
// 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){
|
||||
margin-left: 6%;
|
||||
}
|
||||
&:before{
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
// background-color: red;
|
||||
// border: 1px solid red ;
|
||||
background-size: contain;
|
||||
$form_wh:10em;
|
||||
width:$form_wh; height:$form_wh;
|
||||
bottom:-$form_wh * 0.9; right:0;
|
||||
z-index: -1;
|
||||
&:not(:first-of-type){
|
||||
margin-left: 6%;
|
||||
}
|
||||
|
||||
|
||||
transform-origin: top left;
|
||||
&, &:before{
|
||||
transition: all 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
// color: $bleu_site;
|
||||
transform: scale(1.1) translateY(-5px);
|
||||
&: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{
|
||||
@@ -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{
|
||||
// display: flex;
|
||||
|
||||
@@ -12,9 +12,9 @@ vitehmr:
|
||||
js:
|
||||
http://localhost:5173/@vite/client:
|
||||
type: external
|
||||
attributes:
|
||||
attributes:
|
||||
type: module
|
||||
http://localhost:5173/assets/js/main.js:
|
||||
type: external
|
||||
attributes:
|
||||
type: module
|
||||
attributes:
|
||||
type: module
|
||||
|
||||
@@ -6,6 +6,7 @@ import { fileURLToPath, URL } from 'node:url'
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
|
||||
hmr: {
|
||||
host: 'localhost',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user