618 lines
13 KiB
SCSS
618 lines
13 KiB
SCSS
@import "partials/colors";
|
|
@import "partials/fonts";
|
|
@import "partials/mixins";
|
|
|
|
a, a:visited{
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: color 0.15s ease-out;
|
|
}
|
|
|
|
body{
|
|
margin: 0;
|
|
}
|
|
|
|
$header_height: 50px;
|
|
|
|
// _ _
|
|
// | | | |
|
|
// | | __ _ _ _ ___ _ _| |_
|
|
// | | / _` | | | |/ _ \| | | | __|
|
|
// | |___| (_| | |_| | (_) | |_| | |_
|
|
// \_____/\__,_|\__, |\___/ \__,_|\__|
|
|
// __/ |
|
|
// |___/
|
|
|
|
div.layout-container{
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// height: 100vh;
|
|
// overflow: hidden;
|
|
header[role="banner"]{
|
|
padding: 0.5em;
|
|
// flex: 0 1 content;
|
|
z-index: 100;
|
|
position: fixed;
|
|
top:0;
|
|
width: 100vw;
|
|
height: $header_height;
|
|
}
|
|
nav[role="breadcrumb"]{
|
|
// flex: 1 1 auto;
|
|
position: fixed;
|
|
z-index: 90;
|
|
top:$header_height + 30px;
|
|
left: 15px;
|
|
}
|
|
main[role="main"]{
|
|
// flex: 1 1 auto;
|
|
padding:5em 0;
|
|
overflow-y: scroll;
|
|
}
|
|
footer[role="contentinfo"]{
|
|
// flex: 0 1 content;
|
|
z-index: 100;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// _ _ _
|
|
// | | | | | |
|
|
// | |_| | ___ __ _ __| | ___ _ __
|
|
// | _ |/ _ \/ _` |/ _` |/ _ \ '__|
|
|
// | | | | __/ (_| | (_| | __/ |
|
|
// \_| |_/\___|\__,_|\__,_|\___|_|
|
|
|
|
|
|
header[role="banner"]{
|
|
background-color: #fff;
|
|
box-shadow: 0 -5px 15px #000;
|
|
|
|
.header-middle{
|
|
display: flex;
|
|
justify-content:space-between;
|
|
align-items: center;
|
|
padding: 0.2em 2em;
|
|
}
|
|
|
|
#block-mathallo-formulairederecherche{
|
|
form{
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
}
|
|
|
|
#block-mathallo-identitedusite{
|
|
a{
|
|
color: $bleu_site;
|
|
text-decoration: none;
|
|
font-family: 'Fredoka';
|
|
font-size: 2em;
|
|
text-transform:uppercase;
|
|
font-weight: 500;
|
|
|
|
&:hover{
|
|
color: $rose;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-right{
|
|
// position: relative;
|
|
height:20px; width:20px;
|
|
cursor: pointer;
|
|
// background-color: green;
|
|
|
|
>div#burger-btn{
|
|
position:relative;
|
|
transition-duration: 0.5s;
|
|
transition-property: transform;
|
|
top: 8.5px;
|
|
&, &::before, &::after{
|
|
// position: absolute;
|
|
width:20px; height:3px;
|
|
background-color: $bleu_site;
|
|
|
|
}
|
|
&:hover{
|
|
&, &::before, &::after{
|
|
background-color: $rose;
|
|
}
|
|
}
|
|
&::before, &::after{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
// background-color: red;
|
|
}
|
|
&::before{
|
|
top:6px;
|
|
}
|
|
&::after{
|
|
bottom: 6px;
|
|
}
|
|
&[opened]{
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
|
|
&>div.wrapper{
|
|
position:absolute;
|
|
top:$header_height; left:0;
|
|
// z-index: 99;
|
|
background-color: rgba(0,0,0,0.75);
|
|
|
|
width:100vw;
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition-duration: 0.5s;
|
|
&[opened]{
|
|
height: calc(100vh - $header_height);
|
|
}
|
|
&>nav{
|
|
padding-top: 10px;
|
|
background-color: #fff;
|
|
>ul{
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
nav#block-mathallo-contenu{
|
|
padding: 1em;
|
|
@include menu-contenus;
|
|
li{
|
|
padding:0 0 1em 0;
|
|
&:first-child{
|
|
padding:0.25em 0 1em;
|
|
}
|
|
}
|
|
&>ul{ // chapitres
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 2em;
|
|
>li{
|
|
>ul{ // parties
|
|
margin:0.75em 0 0;
|
|
padding:0 0 0 1em;
|
|
border-left: 2px solid $bleu_site;
|
|
>li{
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
nav#block-mathallo-navigationprincipale{
|
|
padding: 2em 1em;
|
|
ul{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
list-style: none;
|
|
li{
|
|
margin-right: 1em;
|
|
background-color: $bleu_site;
|
|
color: #fff;
|
|
padding:0.5em 1em;
|
|
&:not(:last-child){
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
} // end of header[role="banner"]{
|
|
|
|
|
|
// ______ _ _
|
|
// | ___ \ | | | |
|
|
// | |_/ /_ __ ___ __ _ __| | ___ _ __ _ _ _ __ ___ | |__
|
|
// | ___ \ '__/ _ \/ _` |/ _` |/ __| '__| | | | '_ ` _ \| '_ \
|
|
// | |_/ / | | __/ (_| | (_| | (__| | | |_| | | | | | | |_) |
|
|
// \____/|_| \___|\__,_|\__,_|\___|_| \__,_|_| |_| |_|_.__/
|
|
|
|
nav[role="breadcrumb"]{
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.25);
|
|
padding:0em;
|
|
|
|
ul{
|
|
margin:0;
|
|
padding-left: 0.5em;
|
|
li{
|
|
list-style: none;
|
|
}
|
|
}
|
|
#block-mathallo-contenu-2{
|
|
padding: 0.5em 1em;
|
|
@include menu-contenus;
|
|
li:not(.in-active-trail){
|
|
display: none;
|
|
}
|
|
ul,li{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
gap: 1em;
|
|
}
|
|
a{
|
|
font-size: 1em;
|
|
}
|
|
&>ul>li>ul>li{
|
|
padding-left: 1em;
|
|
border-left: 2px solid $bleu_site;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ___ ___ _
|
|
// | \/ | (_)
|
|
// | . . | __ _ _ _ __
|
|
// | |\/| |/ _` | | '_ \
|
|
// | | | | (_| | | | | |
|
|
// \_| |_/\__,_|_|_| |_|
|
|
|
|
main[role="main"]{
|
|
position: relative;
|
|
&>div.layout-content{
|
|
position: relative;
|
|
|
|
div#parallax-bg{
|
|
position: absolute;
|
|
z-index: -1;
|
|
top:0;
|
|
left: 0;
|
|
margin-top: -40vh;
|
|
width: 100vw;
|
|
height:400%;
|
|
|
|
|
|
background-image: url('/themes/custom/mathallo/assets/img/grid_0.svg');
|
|
background-repeat: repeat;
|
|
background-position: center;
|
|
|
|
// mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
|
|
|
|
}
|
|
|
|
// div#custom-cursor{
|
|
// position: absolute;
|
|
// top:40vh; left:50vh;
|
|
// display: block;
|
|
// $wh:100px;
|
|
// width:$wh; height:$wh;
|
|
// border-radius: $wh / 2;
|
|
// background-color: #000;
|
|
// // mix-blend-mode:color;
|
|
// mask-composite: exclude;
|
|
// }
|
|
|
|
&>.wrapper{
|
|
position:relative;
|
|
padding-bottom: 100vh;
|
|
}
|
|
// 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;
|
|
}
|
|
|
|
}
|
|
|
|
article{
|
|
|
|
@include card;
|
|
|
|
h2{
|
|
@include titre_h2;
|
|
margin:0;
|
|
a:hover{
|
|
color: $rose;
|
|
}
|
|
}
|
|
div.field-chapitre-num,
|
|
div.field-partie-num{
|
|
background-color: $bleu_site;
|
|
color: #fff;
|
|
display: inline-flex;
|
|
gap: 0.5em;
|
|
padding: 0.5em 1em;
|
|
// transform: translateY(-3em);
|
|
position: absolute;
|
|
top:-1em;
|
|
&>*{
|
|
font-weight: 600;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
article.node-type-chapitre{
|
|
|
|
}
|
|
|
|
// Page Chapitres
|
|
section.parties{
|
|
// display: flex;
|
|
// gap: 2em;
|
|
padding:1em;
|
|
}
|
|
|
|
// Page Partie
|
|
section.field-card{
|
|
@include card;
|
|
|
|
h3{
|
|
@include titre_h3;
|
|
}
|
|
|
|
&.field-en-pratique{
|
|
div.field-label{
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&.field-ressources,
|
|
&.field-plus-loin{
|
|
.field-label{
|
|
@include titre_h3;
|
|
padding-bottom: 1em;
|
|
}
|
|
div.paragraph{
|
|
padding-bottom: 1em;
|
|
}
|
|
p{
|
|
margin: 0 0.25em;
|
|
}
|
|
}
|
|
|
|
&.field-ressources{
|
|
div.paragraph--type--ressource{
|
|
.field_titre{
|
|
background-color: $bleu_site;
|
|
color: #fff;
|
|
border-radius: 2em;
|
|
display: inline-block;
|
|
padding: 0.5em 1em;
|
|
&>div{
|
|
@include titre_h4;
|
|
color:#fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.field-plus-loin{
|
|
div.paragraph--type--complement{
|
|
.field_titre{
|
|
@include titre_h4;
|
|
color: $bleu_site;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
|
|
&.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();
|
|
}
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 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'); }
|
|
|
|
svg{
|
|
// width: 100%;
|
|
// height: 100%;
|
|
path,line,rect,circle,ellipse,polygon,polyline{
|
|
vector-effect: non-scaling-stroke;
|
|
stroke-width: 1px!important;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// ______ _
|
|
// | ___| | |
|
|
// | |_ ___ ___ | |_ ___ _ __
|
|
// | _/ _ \ / _ \| __/ _ \ '__|
|
|
// | || (_) | (_) | || __/ |
|
|
// \_| \___/ \___/ \__\___|_|
|
|
|
|
footer[role="contentinfo"]{
|
|
background-color: #fff;
|
|
box-shadow: 0 5px 15px #000;
|
|
padding: 0.2em 2em;
|
|
#block-mathallo-navigationprincipale-2{
|
|
ul{
|
|
display: flex;
|
|
list-style: none;
|
|
padding: 0;
|
|
li:not(:first-child){
|
|
margin-left: 1em;
|
|
|
|
}
|
|
a{
|
|
color: $bleu_typo;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|