better home pres paragraph with formes
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -66,6 +66,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
console.log('MathalloTheme init()')
|
||||
initBurgerMenu();
|
||||
initPartieFrontBackCardSwitch();
|
||||
initHome();
|
||||
initBgFormes();
|
||||
initBgAnime();
|
||||
initFootnotes();
|
||||
@@ -109,6 +110,19 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
})
|
||||
}
|
||||
|
||||
function initHome(){
|
||||
let ps = document.querySelectorAll('article[role="home-presentation"] p');
|
||||
let used_n = [];
|
||||
for (const p of ps) {
|
||||
let n = Math.round(Math.random() * (_formesclasses.length -1));
|
||||
while (used_n.includes(n)) {
|
||||
n = Math.round(Math.random() * (_formesclasses.length -1));
|
||||
}
|
||||
used_n.push(n);
|
||||
p.classList.add(`forme-${_formesclasses[n]}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function initBgFormes(){
|
||||
const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
|
||||
// console.log('container', container);
|
||||
|
||||
@@ -428,6 +428,7 @@ main[role="main"]{
|
||||
}
|
||||
// Article Static Home page teaser
|
||||
&[role="home-presentation"]{
|
||||
max-width: 65vw;
|
||||
>h2{
|
||||
color: $bleu_site;
|
||||
text-decoration: none;
|
||||
@@ -436,14 +437,65 @@ main[role="main"]{
|
||||
font-weight: 500;
|
||||
}
|
||||
p{
|
||||
font-size: 1.134em;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
max-width: 31%;
|
||||
max-width: 29%;
|
||||
margin-top: 2em;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
// z-index: 10;
|
||||
|
||||
margin-bottom: 6em;
|
||||
|
||||
&:not(:first-of-type){
|
||||
margin-left: 2.5%;
|
||||
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;
|
||||
}
|
||||
|
||||
&.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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -587,8 +639,17 @@ main[role="main"]{
|
||||
}
|
||||
} // partie-principes-pratique
|
||||
|
||||
// HOME
|
||||
|
||||
// _ _ ___ __ __ _____
|
||||
// | | | |/ _ \| \/ | ____|
|
||||
// | |_| | | | | |\/| | _|
|
||||
// | _ | |_| | | | | |___
|
||||
// |_| |_|\___/|_| |_|_____|
|
||||
|
||||
|
||||
article.node-type-static[role="home-presentation"]{
|
||||
|
||||
}
|
||||
|
||||
div.views-home-chapitres{
|
||||
// display: flex;
|
||||
|
||||
Reference in New Issue
Block a user