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

blocs pos:absolute

Browse Source
This commit is contained in:
kevin
2018-09-09 18:29:02 +02:00
parent 323aaff2cb
commit 3a0c3431e7
9 changed files with 99 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/r2c/css-compiled/template.css
+20 -18
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: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}em{font-style:italic}strong{font-family:Rubik-Bold}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}p strong{font-family:CooperHewitt-BoldItalic}.top>div:nth-child(1){color:#fff}.top>div: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);opacity:.5;background:green}#page .hand2{right:calc((100%/3) - 25px);opacity:.5;background:red}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start .bottom,#page #start .top{display:-ms-inline-flexbox;display:inline-flex;width:100%;-ms-flex-pack:justify;justify-content:space-between}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .top{position:relative;height:calc(100% / 2)}#page #start .top>div:nth-child(-n+2){padding:0 20px}#page #start .top>div:nth-child(1){background:#969696}#page #start .bottom{position:absolute;top:calc(100% / 2 + 25px);bottom:0;height:auto}#page #start .blocs{overflow-y:auto;width:calc(100% / 3);min-width:200px;margin:2px}#page #start .blocs:nth-child(2){left:calc(100% / 3);background:#fff}#page #start .blocs:nth-child(3){background:#fff}#page #start #links canvas{top:0;left:0}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100%;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 .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{top:0;left:0}#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
+4 -4
View File
@@ -224,10 +224,10 @@ function map() {
}
$(document).ready(function() {
wrap();
// wrap();
map();
dragcanvas();
clickhand();
drag();
// dragcanvas();
// clickhand();
// drag();
// scrollbar();
});
user/themes/r2c/scss/configuration/_config.scss
+8 -3
View File
@@ -3,6 +3,7 @@
@include font-face($CooperHewitt-italic, $file2, $family2, $category2);
@include font-face($rubik, $file3, $family3, $category3);
@include font-face($rubik-B, $file4, $family3, $category3);
@include font-face($rubik-MI, $file6, $family3, $category3);
@include font-face($cmu, $file5, $family5, $category5);
// Fonts-size
@@ -19,14 +20,18 @@ $marginbody: 35px;
$heightH: (25px);
// taille & position blocs
// marge blocs
$mrgbloc: 1px;
// height
$H100: 100%;
$H50: calc(#{$H100} / 2);
$H50-25: calc(#{$H100} / 2 + #{$heightH});
$H50-25: calc((#{$H100} / 2 - #{$heightH}) - #{$mrgbloc});
$T50-25: calc((#{$H100} / 2 + #{$heightH}) + #{$mrgbloc});
// width
$W100: 100%;
$W33: calc(#{$W100} / 3);
$W33: calc((#{$W100} / 3) - #{$mrgbloc});
// top
$T100: 100%;
@@ -39,5 +44,5 @@ $B100: 100%;
// left
$L100: 100%;
$L33: calc(#{$L100} / 3);
$L33: calc((#{$L100} / 3) + #{$mrgbloc});
$L66: calc(#{$L33} * 2);
user/themes/r2c/scss/configuration/_mixin.scss
+23
View File
@@ -97,6 +97,29 @@ $file4: "Rubik-Bold";
}
}
$rubik-MI: "Rubik-MediumItalic";
$file6: "Rubik-MediumItalic";
@mixin font-face($rubik-MI, $file6, $family3, $category3:"") {
$filepath: "../fonts/" + $family3 + "/" + $file6;
@font-face {
font-family: "#{$rubik-MI}";
src: url($filepath + ".eot");
src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $rubik-MI + "") format('svg');
}
%#{$rubik-MI} {
font: {
@if $category3 != "" {
family: "#{$rubik-MI}", #{$category3};
}
@else {
family: "#{$rubik-MI}";
weight: normal;
}
}
}
}
$cmu: "cmu-concrete-ita";
$file5: "cmunoti";
$family5: "Concrete";
user/themes/r2c/scss/template/_reset.scss
+9 -2
View File
@@ -69,6 +69,9 @@ table {
p{
font-style: normal;
&:last-child{
margin: 0;
}
}
em{
@@ -76,6 +79,10 @@ em{
}
strong{
// font-weight: bolder;
font-family: $rubik-B;
font-weight: normal;
font-family: $rubik-MI;
}
text{
font-family: $rubik;
}
user/themes/r2c/scss/template/_section.scss
+22 -33
View File
@@ -19,14 +19,10 @@ body{
cursor: grab;
}
.hand1{
background: green;
opacity: 0.5;
left : calc((100%/3) - 25px);
}
.hand2{
background: red;
opacity: 0.5;
right: calc((100%/3) - 25px);
}
@@ -37,11 +33,6 @@ body{
#start{
width: 100%;
height: calc(100% - 50px);
.top, .bottom{
width: 100%;
display: inline-flex;
justify-content: space-between;
}
img{
filter: grayscale(100%) contrast(4);
transition: filter 0.5s;
@@ -50,39 +41,37 @@ body{
transition: filter 0.5s;
}
}
.top{
position: relative;
height: $H50;
& > div{
&:nth-child(-n+2){
padding: 0px 20px;
}
&:nth-child(1){
background: rgb(150, 150, 150);
}
}
}
.bottom{
position: absolute;
height: auto;
top: $H50-25;
bottom: 0;
}
.blocs{
// position: relative;
position: absolute;
overflow-y: auto;
margin: 2px;
margin: 0;
width: $W33;
height: $H50-25;
min-width: 200px;
&:nth-child(2){
&:nth-child(1){
background: rgb(150, 150, 150);
}
&:nth-child(-n+2){
padding: 0px 20px;
}
&:nth-child(3n+2){
background: white;
left: $L33;
}
&:nth-child(3){
&:nth-child(3n+3){
background: white;
right: -1px;
}
&:nth-child(n+4){
top: $T50-25;
}
&:nth-of-type(-n+2){
& > div:nth-child(n+1){
margin-bottom: 25px;
}
}
}
#links{
canvas{
top: 0;
@@ -104,7 +93,7 @@ body{
height: 100%;
}
#mapid {
width: 100%;
width: 100vw;
height: 100%;
}
}
user/themes/r2c/scss/template/_typography.scss
+6 -10
View File
@@ -21,18 +21,14 @@ p{
a{
font-family: $cmu;
}
strong{
font-family: $CooperHewitt-italic;
}
}
.top{
& > div{
&:nth-child(1){
color: white;
a{
color: rgb(0, 0, 255);
}
.blocs{
&:nth-child(1){
color: white;
a{
color: rgb(0, 0, 255);
}
}
}
user/themes/r2c/templates/partials/base.html.twig
+6 -2
View File
@@ -72,8 +72,12 @@
{% endblock %}
{% block hero %}{% endblock %}
<div class="handler hand1"></div>
<div class="handler hand2"></div>
<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">
{% block body %}