bachir/grav-lecampus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
Kevin Tessier
2019-05-31 23:37:11 +02:00
parent efc5ac8bdc
commit 1f449767a6
48 changed files with 4228 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
user/themes/lecampus/scss/theme.scss
View File

@@ -11,6 +11,7 @@
@import 'theme/header';
@import 'theme/menu';
@import 'theme/footer';
@import 'theme/mobile';
// Extra Skeleton Styling
@import 'theme/blog';

27
user/themes/lecampus/scss/theme/_blog.scss
View File

@@ -404,7 +404,7 @@
.sidebar{
position: absolute;
right: 0;
width: 250px;
width: 300px;
margin: -55px auto 0 20px;
h2{
background: $red;
@@ -432,6 +432,7 @@
}
}
.side-all-agenda{
background: white;
width: auto;
padding: 10px 20px;
margin-bottom: 10px;
@@ -544,7 +545,7 @@
.images_s{
// width: calc(100% / 2 - 15px);
width: 40%;
min-width: 300px;
// min-width: 300px;
margin-right: 15px;
img{
margin-bottom: 15px;
@@ -588,7 +589,7 @@
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 300px;
// height: 300px;
.title{
width: 200px;
height: 200px;
@@ -848,7 +849,6 @@
}
}
#sublog{
.body-wrapper{
background-image: url('../images/Trame-gris.svg');
@@ -858,6 +858,8 @@
.content{
@include inlineflex;
width: 90%;
flex-direction: row-reverse;
justify-content: start;
& > p{
font-size: 1.2rem;
font-family: $Bold;
@@ -868,15 +870,25 @@
}
.mapsalles{
width: 50%;
position: relative;
.contour{
position: relative;
z-index: 1;
pointer-events: none;
display: inline-block;
width: 100%;
vertical-align: middle;
overflow: hidden;
}
.fond{
position: absolute;
display: inline-block;
width: 100%;
vertical-align: middle;
overflow: hidden;
z-index:0;
top: 110px;
left: 0;
top: 5.3%;
path{
fill: none;
pointer-events: all;
@@ -888,11 +900,14 @@
}
}
}
.txt{
width: 30%;
}
.content_salle{
position: absolute;
left: 50%;
top: 300px;
width: 35%;
width: 30%;
background: white;
& > p{
padding-left: 10px;

3
user/themes/lecampus/scss/theme/_header.scss
View File

@@ -10,9 +10,10 @@ header{
nav{
@include inlineflex();
-ms-flex-pack: distribute;
justify-content: space-around;
justify-content: space-around;
height: 100px;
width: 70%;
flex-wrap: nowrap;
.logo{
display: -webkit-box;
display: -ms-flexbox;

550
user/themes/lecampus/scss/theme/_mobile.scss Normal file
View File

@@ -0,0 +1,550 @@
@media screen and (max-width: 960px) {
header nav{
position: relative;
width: 90%;
.dropmenu{
background: white;
display: none;
position: absolute;
left: -6%;
top: 100px;
width: auto!important;
height: auto;
&>ul{
-webkit-box-orient: vertical!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
&>li{
text-align: left;
&>ul{
margin: auto;
&>li{
text-align: left;
margin-left: 10px;
a{
font-family: $Regular;
}
}
}
&> a{
border: none;
line-height: 2rem;
}
}
}
&.active{
display: block;
}
}
.logo{
margin: auto;
}
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto 0;
left: 0;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: $light-blue;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
@-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
@keyframes inM {
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
@keyframes outM {
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
@keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
transform: translateY(9px) rotate(135deg);
}
}
@-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
@keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
transform: translateY(9px) rotate(135deg);
}
}
@-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
@keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
transform: translateY(-9px) rotate(135deg);
}
}
@-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
@keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
transform: translateY(-9px) rotate(135deg);
}
}
}
.gal{
.title_gal{
max-width: 80%!important;
top: 15vw!important;
}
.content_gal{
width: 2%!important;
}
}
.entete .entete_c{
width: 95%!important;
margin: 30px auto!important;
}
.content{
width: 80%!important;
}
.sidebar{
position: relative!important;
width: 350px!important;
margin: 0 auto!important;
}
#devis{
.title{
width: 100%!important;
height: auto!important;
-webkit-transform: translateX(0px)!important;
transform: translateX(0px)!important;
border-radius: 0px!important;
h4{
font-size: 1.3rem!important;
margin: 15px auto!important;
-webkit-transform: translateY(0%)!important;
transform: translateY(0%)!important;
}
}
.txt{
width: 100%!important;
height: auto!important;
background: $red!important;
margin: auto!important;
p{
color: white!important;
padding: 15px 55px !important;
strong{
font-size: 1rem!important;
}
}
}
.img{
width: auto!important;
}
.demander-votre-devis{
-webkit-transform: translate(0px, 40%)!important;
transform: translate(0px, 40%)!important;
right: 30px!important;
}
}
#devis.item .title, #devis.sublog .title{
border-radius: 30px!important;
}
#sublog{
.txt{
width:100%!important;
p{
padding: 0!important;
}
}
.content_salle{
z-index: 2;
left: 60%!important;
}
.mapsalles{
width: 60%!important;
}
}
#item .demander-votre-devis, #sublog .demander-votre-devis{
width: 300px!important;
height: 110px!important;
margin-top: -55px!important;
a{
display: -webkit-inline-box!important;
display: -ms-inline-flexbox!important;
display: inline-flex!important;
}
p:nth-of-type(2){
display: none!important;
}
img{
margin-left: 20px!important;
margin-top: 0px!important;
}
}
.start:not(#form)#archive, .start:not(#form)#calendrier{
width: 80%!important;
}
.start:not(#form) .body-wrapper .card{
width: calc((100% / 3) - 7.5px)!important;
}
.start#form .body-wrapper form{
width: 90%!important;
}
.start#form .body-wrapper form > div.button-wrapper button{
margin-right: 5%!important;
}
.sidebar{
width: 50%!important;
padding: 20px 0;
&::before{
display: block;
width: 100vw;
height: 100%;
content: '';
background-image: url(/user/themes/lecampus/images/Trame-bleu.svg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
margin-left: -10vw;
z-index: -1;
}
}
.start:not(#form) .body-wrapper .event{
width: 90%!important;
}
.start:not(#form)#event .title{
width: 90%!important;
}
}
@media screen and (max-width: 750px) {
.start{
.demander-votre-devis{
display: none;
}
}
#item{
.body-wrapper{
.images_s{
display: none;
}
.content_s{
width: 90%!important;
p{
padding: 0!important;
}
}
.icones{
margin: 20px 0 0 0!important;
.icon{
height: auto!important;
max-width: 100%!important;
p{
padding: 0!important;
}
}
}
}
}
.content{
margin: 2rem auto!important;
width: 90%!important;
p{
padding: 40px 20px!important;
}
}
.gal .title_gal{
display: none!important;
}
.entete{
padding: 0!important;
p{
font-size: 1.1rem;
line-height: 1.5rem;
}
}
#home .content > p{
width: 100%!important;
&:not(:last-child){
strong{
font-size: 1.1rem;
}
}
}
#reco{
.item{
border: none!important;
margin: 10px 0!important;
padding-left: 0!important;
}
}
.sidebar{
width: 90%!important;;
text-align: center;
h2{
margin: auto;
}
h3{
font-size: 1.1rem;
}
.side-all-agenda{
margin: auto;
float: none!important;
}
}
#devis{
.title, .txt{
padding: 0 5%;
p{
padding: 15px 0!important;
}
}
}
#newsletter{
#mc_embed_signup{
border: none!important;
width: 280px!important;
padding: 0!important;
#mc_embed_signup_scroll{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
input{
width: 280px!important;
}
}
#form{
width: auto;
}
label{
width: 280px!important;
border: 2px solid white;
border-radius: 20px;
margin-bottom: 10px;
}
& > input{
margin-top: 10px;
}
.clear{
input{
margin: 10px 0 0 0!important;
}
}
}
}
#footer .block{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
p{
margin-bottom: 10px;
text-align: center;
border: none!important;
&:nth-of-type(1){
img{
float: none;
}
}
}
}
#sublog {
.content_salle{
width: 90%!important;
left: 5%!important;
top: 250px!important;
p{
padding: 0px 10px!important;
}
}
.mapsalles{
width: 100%!important;
}
} .start:not(#form)#archive, .start:not(#form)#calendrier{
width: 90%!important;
.cat {
height: auto!important;
.btn-group{
&:nth-child(1){
width: 75%;
}
label{
margin-bottom: 10px;
}
}
}
}
.start:not(#form) .body-wrapper .card{
width: 100%!important;
}
.start:not(#form) .body-wrapper .event .card-content{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
.reso{
width: 100%!important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.txt{
width: 100%!important;
}
}
#default{
.header-wrapper{
width: 100%!important;
text-align: center;
.title{
width: 90%!important;
}
}
}
}