improved next chapitre | partie blocks positioning

This commit is contained in:
2026-02-21 10:56:46 +01:00
parent 367e2353ce
commit 335127647c
5 changed files with 93 additions and 91 deletions

View File

@@ -16,7 +16,7 @@ third_party_settings:
id: mathallo_contenu_3
theme: mathallo
region: content
weight: -3
weight: -2
provider: null
plugin: 'menu_block:contenu'
settings:
@@ -44,3 +44,4 @@ visibility:
node: '@node.node_route_context:node'
bundles:
chapitre: chapitre
partie: partie

View File

@@ -16,7 +16,7 @@ third_party_settings:
id: mathallo_contenu_4
theme: mathallo
region: content
weight: 0
weight: -3
provider: null
plugin: 'menu_block:contenu'
settings:
@@ -44,3 +44,4 @@ visibility:
node: '@node.node_route_context:node'
bundles:
chapitre: chapitre
partie: partie

File diff suppressed because one or more lines are too long

View File

@@ -300,9 +300,8 @@ main[role="main"]{
// next chapitre
nav.prev-chapitre,
nav.next-chapitre{
position:absolute;
top:-10em;
position:absolute;
padding: 0.5em 1em;
@include menu-contenus;
@@ -321,6 +320,7 @@ main[role="main"]{
// prev
&.prev-chapitre{
top:-10em;
left:0;
a:after{
transform: rotate(180deg);
@@ -332,6 +332,7 @@ main[role="main"]{
// next
&.next-chapitre{
bottom:500px;
right:0;
li.in-active-trail + li{
display: block;
@@ -488,106 +489,84 @@ main[role="main"]{
}
}
}
}
div#partie-principes-pratique{
position: relative;
display: flex;
gap: 0px;
section.field-card{
@mixin front-card{
z-index: 2;
background-color: #fff;
&>*>*{
opacity: 1;
}
} // div.layout-content
div#partie-principes-pratique{
position: relative;
display: flex;
gap: 0px;
section.field-card{
@mixin front-card{
z-index: 2;
background-color: #fff;
&>*>*{
opacity: 1;
}
@mixin back-card{
z-index: 1;
background-color: rgba(247,247,247,1);
&>*>*{
opacity: 0.6;
}
}
@mixin back-card{
z-index: 1;
background-color: rgba(247,247,247,1);
&>*>*{
opacity: 0.6;
}
}
&.field-principes-reflexion{
@include front-card();
}
&.field-en-pratique{
margin-left: -50%;
transform: translateY(2em);
&.field-principes-reflexion{
@include front-card();
}
&.field-en-pratique{
margin-left: -50%;
transform: translateY(2em);
@include back-card();
}
&.field-principes-reflexion,
&.field-en-pratique{
transition: background-color 0.25s ease-out;
&.back-card{
@include back-card();
}
&.field-principes-reflexion,
&.field-en-pratique{
transition: background-color 0.25s ease-out;
&.back-card{
@include back-card();
}
&.front-card{
@include front-card();
}
}
}
}
// HOME
div.views-home-chapitres{
// display: flex;
// gap: 2em;
padding:1em;
>.views-row{
// max-width: 700px;
article.node-type-chapitre{
h2{
@include titre_h3;
}
&.front-card{
@include front-card();
}
}
}
} // partie-principes-pratique
// FORMES
.bg-forme{
position: absolute;
// background-color: red;
width:300px; height:300px;
top:50%;
left:-300px;
z-index: -1;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
// &.pyramide{ background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg'); }
// &.infinite{ background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg'); }
// &.prct{ background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg'); }
// &.pi{ background-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg'); }
// &.supeg{ background-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg'); }
// &.cone{ background-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg'); }
// &.cube{ background-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg'); }
// &.diamant{ background-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg'); }
// &.croissant{ background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg'); }
// &.cylindre{ background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg'); }
filter: drop-shadow(0 0 15px rgba(0,0,0,0.05));
svg{
// width: 100%;
// height: 100%;
path,line,rect,circle,ellipse,polygon,polyline{
vector-effect: non-scaling-stroke;
stroke-width: 1px!important;
}
// HOME
div.views-home-chapitres{
// display: flex;
// gap: 2em;
padding:1em;
>.views-row{
// max-width: 700px;
article.node-type-chapitre{
h2{
@include titre_h3;
}
}
}
} // views-home-chapitres
// FORMES
.bg-forme{
position: absolute;
width:300px; height:300px;
top:50%;
left:-300px;
z-index: -1;
filter: drop-shadow(0 0 15px rgba(0,0,0,0.05));
svg{
path,line,rect,circle,ellipse,polygon,polyline{
vector-effect: non-scaling-stroke;
stroke-width: 1px!important;
}
}
}
}
// ______ _

View File

@@ -0,0 +1,21 @@
{#
/**
* @file
* Default theme implementation to display a region.
*
* Available variables:
* - content: The content for this region, typically blocks.
* - attributes: HTML attributes for the region <div>.
* - region: The name of the region variable as defined in the theme's
* .info.yml file.
*
* @see template_preprocess_region()
*
* @ingroup themeable
*/
#}
{% if content %}
<div{{ attributes }}>
{{ content }}
</div>
{% endif %}