prev-next chapitre. read more arrow
This commit is contained in:
@@ -267,52 +267,101 @@ main[role="main"]{
|
||||
position:relative;
|
||||
padding-bottom: 100vh;
|
||||
}
|
||||
nav.arrow-more{
|
||||
text-align: center;
|
||||
a.arrow{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
$wh:30px;
|
||||
width: $wh; height: $wh;
|
||||
background-color: $bleu_site;
|
||||
border-radius: $wh / 2;
|
||||
text-indent: $wh * 3;
|
||||
overflow: hidden;
|
||||
|
||||
$bw:3px;
|
||||
// triangle
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: $wh / 3;
|
||||
height: $wh / 3;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
border-width: $bw $bw 0 0;
|
||||
position: absolute;
|
||||
transform-origin: 50% 50%;
|
||||
// downward
|
||||
transform: rotate(135deg) translateY($wh / 3);
|
||||
}
|
||||
// bare
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
position: absolute;
|
||||
transform-origin: 50% 50%;
|
||||
// downward
|
||||
width: 0;
|
||||
height: $wh / 3;
|
||||
border-width: 0 $bw 0 0;
|
||||
transform: translateX(-2px) translateY(-$wh / 5);
|
||||
}
|
||||
// next chapitre
|
||||
nav.prev-chapitre,
|
||||
nav.next-chapitre{
|
||||
position:absolute;
|
||||
top:-10em;
|
||||
|
||||
|
||||
padding: 0.5em 1em;
|
||||
@include menu-contenus;
|
||||
|
||||
.wrapper{
|
||||
position: relative;
|
||||
}
|
||||
ul{
|
||||
margin:0;
|
||||
padding-left: 0.5em;
|
||||
li{
|
||||
list-style: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// prev
|
||||
&.prev-chapitre{
|
||||
left:0;
|
||||
a:after{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
li:has(+ li.in-active-trail){
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// next
|
||||
&.next-chapitre{
|
||||
right:0;
|
||||
li.in-active-trail + li{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// common
|
||||
label{
|
||||
background-color: $bleu_site;
|
||||
color: #fff;
|
||||
padding: 0.5em 1em;
|
||||
z-index: 2;
|
||||
top:-3em;
|
||||
}
|
||||
a{
|
||||
display: block;
|
||||
padding:0.5em 1em;
|
||||
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.25);
|
||||
border: white 1px solid;
|
||||
transition: border-color 0.5s;
|
||||
&:hover{
|
||||
border-color: $rose;
|
||||
}
|
||||
&:after{
|
||||
content:"";
|
||||
@include arrow-white();
|
||||
position:absolute;
|
||||
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.25);
|
||||
top:calc(100% + 0.5em);
|
||||
left: calc(50% - 15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// more
|
||||
ul.links{
|
||||
margin:0;
|
||||
padding:0;
|
||||
position: absolute;
|
||||
top:calc(100% - 15px);
|
||||
left: calc(50% - 15px);
|
||||
li{
|
||||
list-style: none;
|
||||
a{
|
||||
@include arrow-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// arrox
|
||||
nav.arrow-more{
|
||||
position: absolute;
|
||||
top:calc(100% - 15px);
|
||||
left: calc(50% - 15px);
|
||||
a.arrow{
|
||||
@include arrow-blue;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -351,8 +400,8 @@ main[role="main"]{
|
||||
|
||||
// Page Chapitres
|
||||
section.parties{
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
// display: flex;
|
||||
// gap: 2em;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
@@ -420,10 +469,16 @@ main[role="main"]{
|
||||
@mixin front-card{
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
&>*>*{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@mixin back-card{
|
||||
z-index: 1;
|
||||
background-color: #eee;
|
||||
background-color: rgba(247,247,247,1);
|
||||
&>*>*{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&.field-principes-reflexion{
|
||||
@@ -450,11 +505,11 @@ main[role="main"]{
|
||||
|
||||
// HOME
|
||||
div.views-home-chapitres{
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
// display: flex;
|
||||
// gap: 2em;
|
||||
padding:1em;
|
||||
>.views-row{
|
||||
max-width: 700px;
|
||||
// max-width: 700px;
|
||||
|
||||
article.node-type-chapitre{
|
||||
h2{
|
||||
@@ -479,6 +534,7 @@ main[role="main"]{
|
||||
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'); }
|
||||
@@ -490,14 +546,15 @@ main[role="main"]{
|
||||
// &.croissant{ background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg'); }
|
||||
// &.cylindre{ background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg'); }
|
||||
|
||||
// svg{
|
||||
svg{
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// path,line,rect,circle,ellipse,polygon,polyline{
|
||||
// stroke-width: 1px!important;
|
||||
// }
|
||||
path,line,rect,circle,ellipse,polygon,polyline{
|
||||
vector-effect: non-scaling-stroke;
|
||||
stroke-width: 1px!important;
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -40,7 +40,30 @@
|
||||
padding:2em;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.25);
|
||||
max-width: 50em;
|
||||
margin: 40vh auto 0;
|
||||
box-sizing: content-box;
|
||||
margin: 30vh auto 0;
|
||||
&[role="home-presentation"]{
|
||||
margin-top: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin arrow{
|
||||
display: block;
|
||||
width:30px; height:30px;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
text-indent: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin arrow-white{
|
||||
@include arrow();
|
||||
background-image: url('/themes/custom/mathallo/assets/img/arrow-white.svg');
|
||||
}
|
||||
|
||||
@mixin arrow-blue{
|
||||
@include arrow();
|
||||
background-image: url('/themes/custom/mathallo/assets/img/arrow-blue.svg');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user