kevin/r2c
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

drag responsive

Browse Source
This commit is contained in:
kevin
2018-09-14 05:54:40 +02:00
parent efa92436f7
commit d2f59c7557
7 changed files with 192 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/pages/01._recits/_11-avril-2017/text.md
+1 -1
View File
@@ -5,7 +5,7 @@ image_align: left
id: rct_110417
---
Première découverte du centre de Saint-Denis - [jour 1](#float-left)
Première découverte du centre de Saint-Denis - [jour 1](#float-left#cc)[](http://facebook.com)
Aujourd'hui, je me rends pour la première fois dans la ville de Saint Denis.
J’y découvre d'abord, en sortant de la station de métro, le quartier de la Basilique ou j’apprécie la place avec tous ses cafés. Le contraste entre l'architecture de la Basilique et celle de Gailhoustet sur la place du Caquet est frappant.
user/themes/r2c/css-compiled/template.css
+16 -12
View File
File diff suppressed because one or more lines are too long
user/themes/r2c/css-compiled/template.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
@font-face{font-family:CooperHewitt;src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot);src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-Bold.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.svg#CooperHewitt) format('svg')}@font-face{font-family:CooperHewitt-BoldItalic;src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot);src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.svg#CooperHewitt-BoldItalic) format('svg')}@font-face{font-family:rubik;src:url(../fonts/rubik/Rubik-Light.eot);src:url(../fonts/rubik/Rubik-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Light.woff) format('woff'),url(../fonts/rubik/Rubik-Light.ttf) format('truetype'),url(../fonts/rubik/Rubik-Light.svg#rubik) format('svg')}@font-face{font-family:Rubik-Bold;src:url(../fonts/rubik/Rubik-Bold.eot);src:url(../fonts/rubik/Rubik-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Bold.woff) format('woff'),url(../fonts/rubik/Rubik-Bold.ttf) format('truetype'),url(../fonts/rubik/Rubik-Bold.svg#Rubik-Bold) format('svg')}@font-face{font-family:Rubik-MediumItalic;src:url(../fonts/rubik/Rubik-MediumItalic.eot);src:url(../fonts/rubik/Rubik-MediumItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-MediumItalic.woff) format('woff'),url(../fonts/rubik/Rubik-MediumItalic.ttf) format('truetype'),url(../fonts/rubik/Rubik-MediumItalic.svg#Rubik-MediumItalic) format('svg')}@font-face{font-family:cmu-concrete-ita;src:url(../fonts/Concrete/cmunoti.eot);src:url(../fonts/Concrete/cmunoti.eot?#iefix) format('embedded-opentype'),url(../fonts/Concrete/cmunoti.woff) format('woff'),url(../fonts/Concrete/cmunoti.ttf) format('truetype'),url(../fonts/Concrete/cmunoti.svg#cmu-concrete-ita) format('svg')}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}p:last-child{margin:0}em{font-style:italic}strong{font-family:Rubik-MediumItalic;font-weight:400}text{font-family:rubik}h1{font-size:1.2rem;line-height:50px}h1 a{font-family:CooperHewitt;font-weight:400}h2{font-family:CooperHewitt-BoldItalic;font-size:1.1rem;line-height:50px}p{font-family:rubik;font-size:1rem;line-height:1.3rem;margin-bottom:12px}p a{font-family:cmu-concrete-ita}.blocs:nth-child(1){color:#fff}.blocs:nth-child(1) a{color:#00f}body{overflow:hidden;background:#e6e6e6}#page{height:100%}#page .navbar{width:100%;height:50px}#page .handler{position:absolute;z-index:999;top:50%;width:50px;height:50px;cursor:-webkit-grab;cursor:grab;border-radius:25px}#page .hand1{left:calc((100%/3) - 25px)}#page .hand2{right:calc((100%/3) - 25px)}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc((100% / 3) - 1px);min-width:200px;height:calc((100% / 2 - 25px) - 1px);margin:0}#page #start .blocs:nth-child(1){background:#969696}#page #start .blocs:nth-child(-n+2){padding:0 20px}#page #start .blocs:nth-child(3n+2){left:calc((100% / 3) + 1px);background:#fff}#page #start .blocs:nth-child(3n+3){right:-1px;background:#fff}#page #start .blocs:nth-child(n+4){top:calc((100% / 2 + 25px) + 1px)}#page #start .blocs:nth-of-type(-n+2)>div:nth-child(n+1){margin-bottom:25px}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100vw;height:100%}
@font-face{font-family:CooperHewitt;src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot);src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-Bold.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.svg#CooperHewitt) format('svg')}@font-face{font-family:CooperHewitt-BoldItalic;src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot);src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.svg#CooperHewitt-BoldItalic) format('svg')}@font-face{font-family:rubik;src:url(../fonts/rubik/Rubik-Light.eot);src:url(../fonts/rubik/Rubik-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Light.woff) format('woff'),url(../fonts/rubik/Rubik-Light.ttf) format('truetype'),url(../fonts/rubik/Rubik-Light.svg#rubik) format('svg')}@font-face{font-family:Rubik-Bold;src:url(../fonts/rubik/Rubik-Bold.eot);src:url(../fonts/rubik/Rubik-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Bold.woff) format('woff'),url(../fonts/rubik/Rubik-Bold.ttf) format('truetype'),url(../fonts/rubik/Rubik-Bold.svg#Rubik-Bold) format('svg')}@font-face{font-family:Rubik-MediumItalic;src:url(../fonts/rubik/Rubik-MediumItalic.eot);src:url(../fonts/rubik/Rubik-MediumItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-MediumItalic.woff) format('woff'),url(../fonts/rubik/Rubik-MediumItalic.ttf) format('truetype'),url(../fonts/rubik/Rubik-MediumItalic.svg#Rubik-MediumItalic) format('svg')}@font-face{font-family:cmu-concrete-ita;src:url(../fonts/Concrete/cmunoti.eot);src:url(../fonts/Concrete/cmunoti.eot?#iefix) format('embedded-opentype'),url(../fonts/Concrete/cmunoti.woff) format('woff'),url(../fonts/Concrete/cmunoti.ttf) format('truetype'),url(../fonts/Concrete/cmunoti.svg#cmu-concrete-ita) format('svg')}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}p:last-child{margin:0}em{font-style:italic}strong{font-family:Rubik-MediumItalic;font-weight:400}text{font-family:rubik}h1{font-size:1.2rem;line-height:50px}h1 a{font-family:CooperHewitt;font-weight:400}h2{font-family:CooperHewitt-BoldItalic;font-size:1.1rem;line-height:50px}p{font-family:rubik;font-size:1rem;line-height:1.3rem;margin-bottom:12px}p a{font-family:cmu-concrete-ita}.blocs:nth-child(1){color:#fff}.blocs:nth-child(1) a{color:#00f}body{overflow:hidden;background:#e6e6e6}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{position:relative;width:100%;height:calc(100% - 50px)}#page #start .handler{position:absolute;z-index:999;top:50%;width:50px;height:50px;cursor:-webkit-grab;cursor:grab;border-radius:25px}#page #start .hand1{left:calc((100%/3));margin-top:-24px;margin-left:-26px}#page #start .hand2{left:calc((100%/3) * 2);margin-top:-24px;margin-left:-25px}#page #start .hand2 img{margin-left:1px}#page #start .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc((100% / 3));min-width:200px;height:calc((100% / 2));margin:0}#page #start .blocs:nth-child(3n+2){left:-2px}#page #start .blocs:nth-of-type(2){background:#969696}#page #start .blocs:nth-child(-n+3){padding:0 20px}#page #start .blocs:nth-child(3n+3){left:calc((100% / 3));background:#fff}#page #start .blocs:nth-child(3n+4){right:-2px;background:#fff}#page #start .blocs:nth-child(n+5){top:calc((100% / 2));margin-top:2px}#page #start .blocs:nth-of-type(-n+2)>div:nth-child(n+1){margin-bottom:25px}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100vw;height:100%}
user/themes/r2c/js/script.js
+120 -67
View File
@@ -22,90 +22,82 @@ function drag() {
var $hand1 = $( ".hand1" );
var $hand2 = $( ".hand2" );
// General
// origine
var oW = parseFloat($(window).outerWidth(true));
var oH = parseFloat($(window).outerHeight(true));
// pourcent
var p = 100;
var p = 100;
//marge
var mrg = 1;
// Blocs
// find
var $recits = $hand.parent('#page').find('#recits');
var $itw = $hand.parent('#page').find("#interviews");
var $img = $hand.parent('#page').find("#images");
var $stmp = $hand.parent('#page').find("#streetmap");
var $rs = $hand.parent('#page').find("#reseaux-sociaux");
var $links = $hand.parent('#page').find("#links");
var $recits = $hand.parents('#page').find('#recits');
var $itw = $hand.parents('#page').find("#interviews");
var $img = $hand.parents('#page').find("#images");
var $stmp = $hand.parents('#page').find("#streetmap");
var $rs = $hand.parents('#page').find("#reseaux-sociaux");
var $links = $hand.parents('#page').find("#links");
// handler
// dimension
var $Whand = $hand.outerWidth(true);
var $Hhand = $hand.outerHeight(true);
var $Whand = parseFloat($hand.outerWidth(true));
var $Hhand = parseFloat($hand.outerHeight(true));
$hand1.draggable({
containment: "#start",
scroll: false,
drag: function(event, ui){
// var dragDistance = 300;
// ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width() - dragDistance);
// ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
//
// // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
// ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
drag: function(event, ui){
var oW = parseFloat($("#start").outerWidth(true));
var oH = parseFloat($("#start").outerHeight(true));
var ajustH = (100 * ( 25/ oH )) + "%";
var stophand = (0.8 * oW) - 130;
ui.position.left = Math.max( 200, ui.position.left );
ui.position.left = Math.min( stophand, ui.position.left );
// handler
// position
var pos = $hand1.position();
var pos1 = $hand2.position();
var pos11 = parseFloat(pos1.left) + 25;
// center
var ajustW = $Whand / 2 - 1;
var ajustH = $Hhand / 2 + 1;
var ajustW2 = $Whand / 2 + 1;
var ajustH2 = $Hhand / 2 + 1;
var ajustW3 = $Whand / 2 - 3;
var ajustH3 = $Hhand / 2 + 1;
// center handler
var ajustW = $Whand / 2;
var ajustH = $Hhand / 2;
// position XY
var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW)+ "%" );
var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ;
var xPos = ( p * parseFloat( ((ui.position.left)) / oW) ) + "%" ;
var yPos = ( p * parseFloat( ((ui.position.top)) / oH ) ) + "%" ;
var xPos2 = ( p * parseFloat( (pos.left + ajustW2 ) / oW ) ) + "%";
var yPos2 = ( p * parseFloat( (pos.top + ajustH ) / oH ) ) + "%" ;
var xPos3 = ( p * parseFloat( (pos1.left + ajustW3) / oW ) ) + "%";
var yPos3 = ( p * parseFloat( (pos.top ) / oH ) ) + "%" ;
var xPos2 = ( p * parseFloat( ((ui.position.left ) ) / oW) ) + "%";
var yPos2 = ( p * parseFloat( ((ui.position.top ) ) / oH) ) + "%" ;
var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
var yPos3 = ( p * parseFloat( (ui.position.top ) / oH) ) + "%" ;
//handler2
var $handler2 = $(this).parent().find('.hand2');
var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
var PosHand = ( parseFloat(p * parseFloat((pos11 - 25) / oW)) - parseFloat(p * parseFloat( (ui.position.left) / oW)) ) + "%";
// application dimension
$(this).css({
'left': xPos,
'top': yPos,
})
$hand2.css({
'top': yPos3,
})
$recits.css({
"width": xPos,
"height": yPos,
"left": "-2px",
})
$itw.css({
"left":xPos2,
"width": PosHand,
"height": yPos,
"min-width": "200px"
})
$img.css({
"height": yPos,
"min-width": "200px",
})
$stmp.css({
@@ -121,14 +113,39 @@ function drag() {
"width":PosHand,
"bottom":"1px",
"height": 'auto',
})
})
$links.css({
"top": yPos2,
"bottom":0,
"height": 'auto',
})
}
// if itw < 200
var testPourcent = parseFloat( p * parseFloat(ui.position.left + 238) / oW ) + "%";
var img200 = parseFloat( p * parseFloat( (oW - (pos11 - 25 )) / oW) ) + "%" ;
if ( $itw.width() < 200) {
$img.css({
"width": img200,
})
$links.css({
"width": img200,
})
$hand2.css({
'left':testPourcent,
})
} else {}
},
stop: function( event, ui ) {
var parent = $(this).parents('#start');
$(this).css({
left:parseInt($(this).css('left'))/parent.width()*100+"%",
top: parseInt($(this).css('top'))/parent.height()*100+"%",
});
},
});
$hand2.draggable({
@@ -136,21 +153,24 @@ function drag() {
scroll: false,
drag: function(event, ui){
// var dragDistance = 300;
// ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width() - dragDistance);
// ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
//
// // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
// ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
var oW = parseFloat($("#start").outerWidth(true));
var oH = parseFloat($("#start").outerHeight(true));
var stophand = (oW - 200) - 50;
console.log(stophand)
ui.position.left = Math.max( 400, ui.position.left );
ui.position.left = Math.min( stophand, ui.position.left );
// handler
// position
var pos = $hand1.position();
var pos1 = $hand2.position();
var pos11 = parseFloat(pos.left) + 25;
// center
var ajustW = $Whand / 2 - 1;
var ajustH = $Hhand / 2 + 1;
var ajustW200 = $Whand / 2 + 6;
var ajustW2 = $Whand / 2 + 1;
var ajustH2 = $Hhand / 2 + 1;
@@ -159,26 +179,26 @@ function drag() {
var ajustH3 = $Hhand / 2 + 1;
// position XY
var xPos = ( p * parseFloat( ( oW - (pos1.left + ajustW) ) / oW) + "%" );
var yPos = ( p * parseFloat( (pos1.top - ajustH ) / oH ) ) + "%" ;
var xPos = ( p * parseFloat( ( oW - (ui.position.left) ) / oW) + "%" );
var yPos = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
var xPos2 = ( p * parseFloat( ( oW - (pos1.left + ajustW2) ) / oW ) ) + "%";
var yPos2 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ;
var xPos2 = ( p * parseFloat( ( oW - (ui.position.left) ) / oW ) ) + "%";
var yPos2 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
var xPos3 = ( p * parseFloat( (oW - (pos.left + ajustW3)) / oW ) ) + "%";
var yPos3 = ( p * parseFloat( (pos1.top ) / oH ) ) + "%" ;
// var xPos3 = ( p * parseFloat( (oW - (pos.left)) / oW ) ) + "%";
var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
var yPos3 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
//handler2
var $handler2 = $(this).parent().find('.hand2');
var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
// application dimension
$(this).css({
'left': xPos,
'top': yPos
})
var PosHand1 = ( parseFloat(p * parseFloat( (ui.position.left) / oW)) - parseFloat(p * parseFloat((pos11 - 25) / oW))) + "%";
// application dimension
$hand1.css({
'top': yPos3,
})
@@ -188,7 +208,7 @@ function drag() {
})
$itw.css({
"width": PosHand,
"width": PosHand1,
"height": yPos,
})
@@ -205,7 +225,7 @@ function drag() {
$rs.css({
"top": yPos2,
"width":PosHand,
"width":PosHand1,
"bottom":"1px",
"height": 'auto',
})
@@ -216,8 +236,41 @@ function drag() {
"bottom":0,
"height": 'auto',
})
}
});
// if itw < 200
var test = ui.position.left - 200;
var testPourcent = ( p * parseFloat(test) / oW ) + "%";
var img200 = ( p * parseFloat( ((pos.left) ) / oW) + "%" );
if ( $itw.width() < 200) {
$recits.css({
"width": img200,
})
$stmp.css({
"width": img200,
})
$itw.css({
"left": img200,
})
$rs.css({
"left": img200,
})
$hand1.css({
'left':test,
})
}else {
}
},
stop: function( event, ui ) {
var parent = $(this).parents("#start");
$(this).css({
left:parseInt($(this).css('left'))/parent.width()*100+"%",
top: parseInt($(this).css('top'))/parent.height()*100+"%",
});
},
});
};
function dragcanvas() {
user/themes/r2c/scss/configuration/_config.scss
+4 -4
View File
@@ -26,12 +26,12 @@ $mrgbloc: 1px;
// height
$H100: 100%;
$H50: calc(#{$H100} / 2);
$H50-25: calc((#{$H100} / 2 - #{$heightH}) - #{$mrgbloc});
$T50-25: calc((#{$H100} / 2 + #{$heightH}) + #{$mrgbloc});
$H50-25: calc((#{$H100} / 2 );
$T50-25: calc((#{$H100} / 2 );
// width
$W100: 100%;
$W33: calc((#{$W100} / 3) - #{$mrgbloc});
$W33: calc((#{$W100} / 3));
// top
$T100: 100%;
@@ -44,5 +44,5 @@ $B100: 100%;
// left
$L100: 100%;
$L33: calc((#{$L100} / 3) + #{$mrgbloc});
$L33: calc((#{$L100} / 3));
$L66: calc(#{$L33} * 2);
user/themes/r2c/scss/template/_section.scss
+40 -27
View File
@@ -9,28 +9,37 @@ body{
width: 100%;
height: 50px;
}
.handler{
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
top: 50%;
z-index: 999;
cursor: grab;
}
.hand1{
left : calc((100%/3) - 25px);
}
.hand2{
right: calc((100%/3) - 25px);
}
.mouseDown{
cursor: grabbing;
}
#start{
width: 100%;
height: calc(100% - 50px);
position: relative;
.handler{
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
top: 50%;
z-index: 999;
cursor: grab;
}
.hand1{
left : calc((100%/3));
margin-left: -26px;
margin-top: -24px;
}
.hand2{
left: calc((100%/3) * 2);
margin-left: -25px;
margin-top: -24px;
img{
margin-left: 1px;
}
}
.mouseDown{
cursor: grabbing;
}
img{
filter: grayscale(100%) contrast(4);
transition: filter 0.5s;
@@ -44,24 +53,28 @@ body{
overflow-y: auto;
margin: 0;
width: $W33;
height: $H50-25;
min-width: 200px;
&:nth-child(1){
height: $H50-25;
&:nth-child(3n+2){
left: -2px;
}
&:nth-of-type(2){
background: rgb(150, 150, 150);
}
&:nth-child(-n+2){
&:nth-child(-n+3){
padding: 0px 20px;
}
&:nth-child(3n+2){
background: white;
left: $L33;
}
&:nth-child(3n+3){
background: white;
right: -1px;
left: $L33;
}
&:nth-child(n+4){
&:nth-child(3n+4){
background: white;
right: -2px;
}
&:nth-child(n+5){
top: $T50-25;
margin-top: 2px;
}
&:nth-of-type(-n+2){
& > div:nth-child(n+1){
user/themes/r2c/templates/partials/base.html.twig
+10 -7
View File
@@ -74,15 +74,18 @@
{% block hero %}{% endblock %}
<div class="handler hand1">
<img src="user/themes/r2c/images/handler.svg" alt="">
</div>
<div class="handler hand2">
<img src="user/themes/r2c/images/handler.svg" alt="">
</div>
<section id="start">
<div id="handlers">
<div class="handler hand1">
<img src="user/themes/r2c/images/handler.svg" alt="">
</div>
<div class="handler hand2">
<img src="user/themes/r2c/images/handler.svg" alt="">
</div>
</div>
{% block body %}
<section id="body-wrapper" class="section">
<section class="container {{ grid_size }}">