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

surligne hover

Browse Source
This commit is contained in:
kevin
2018-08-24 10:51:37 +02:00
parent 14f728b26c
commit 8865d955b2
11 changed files with 116 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/hehe/css-compiled/template.css
+11 -3
View File
File diff suppressed because one or more lines are too long
user/themes/hehe/css-compiled/template.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
user/themes/hehe/images/fleche.svg
+19 -24
View File
@@ -9,9 +9,9 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="3.1589999mm"
height="4.2849998mm"
viewBox="0 0 3.1589999 4.2849998"
width="10"
height="11.5"
viewBox="0 0 2.645833 3.0427084"
version="1.1"
id="svg1356"
inkscape:version="0.92.2 2405546, 2018-03-11"
@@ -25,17 +25,18 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="5.9354845"
inkscape:cy="5.4895249"
inkscape:zoom="15.839192"
inkscape:cx="4.3077299"
inkscape:cy="9.7335314"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1440"
inkscape:window-height="810"
inkscape:window-x="472"
inkscape:window-width="1920"
inkscape:window-height="1026"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0" />
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata1353">
<rdf:RDF>
@@ -44,7 +45,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
@@ -52,24 +53,18 @@
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-292.715)">
transform="translate(0,-293.95731)">
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path4073"
d="m 1.5793794,296.99999 c -1.639e-4,-2.77135 -1.639e-4,-1.37338 0,-4.14506"
style="fill:none;stroke:#000000;stroke-width:0.29104167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
d="m 1.3262972,296.82994 c -1.374e-4,-2.32345 -1.374e-4,-0.38439 0,-2.70812"
style="fill:none;stroke:#000000;stroke-width:0.33535236;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path4075"
d="m 1.5761621,292.77974 1.4669475,2.64579"
style="fill:none;stroke:#000000;stroke-width:0.29104167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="cc"
style="fill:none;stroke:#000000;stroke-width:0.29104167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 0.11550841,295.40796 1.5824559,292.77974"
id="path4077"
inkscape:connector-curvature="0" />
style="fill:none;stroke:#000000;stroke-width:0.33535236;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0.16903884,295.4952 1.15725836,-1.37338 1.1501413,1.37763"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

user/themes/hehe/images/fleche2.svg
+39
View File
@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg1356"
version="1.1"
viewBox="0 0 2.645833 3.0427084"
height="11.5"
width="10">
<defs
id="defs1350" />
<metadata
id="metadata1353">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-293.95731)"
id="layer1">
<path
style="fill:none;stroke:#000000;stroke-width:0.33535236;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 1.3262972,296.82994 c -1.374e-4,-2.32345 -1.374e-4,-0.38439 0,-2.70812"
id="path4073" />
<path
d="m 0.16903884,295.4952 1.15725836,-1.37338 1.1501413,1.37763"
style="fill:none;stroke:#000000;stroke-width:0.33535236;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4077" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

user/themes/hehe/images/fleche2.svgz
BIN
View File
Binary file not shown.
user/themes/hehe/js/site.js
+11 -3
View File
@@ -1,17 +1,25 @@
function hover() {
var $work = $('.navbar > ul > li:nth-child(1)');
var $workafter = $('.navbar > ul > li:nth-child(1)::after');
var $cat = $('.navbar > ul.tags');
$work.hover(
function() {
$( this ).addClass( "hover" );
$(this).parents().find('.tags').addClass("visible");
}, function() {
$( this ).removeClass( "hover" );
$(this).parents().find('.tags').removeClass("visible");
}
);
$cat.hover(
function() {
$( this ).addClass( "visible" );
$(this).parents().find($work).addClass('hover');
}, function() {
$( this ).removeClass( "visible" );
$(this).parents().find($work).removeClass('hover');
}
);
}
user/themes/hehe/scss/template/_header.scss
+31 -6
View File
@@ -14,6 +14,30 @@ header{
}
nav{
margin: auto 0;
& > .tags{
& > a {
li{
position: relative;
&::after{
transition: width 0.5s;
content: " ";
position: absolute;
background: rgb(0, 255, 0);
width: 0%;
height: 10px;
margin: auto;
z-index: -1;
}
}
li:hover{
position: relative;
&::after{
transition: width 0.5s;
width: 100%;
}
}
}
}
& > ul:nth-child(1) {
& > li:nth-child(1){
display: flex;
@@ -23,18 +47,19 @@ header{
content: " ";
cursor: pointer;
display: block;
width: 15px;
height: 20px;
background-image: url(../images/fleche.svg);
background-size: contain;
width: 25px;
height: 40px;
background-image: url(../images/fleche2.svg);
background-repeat: no-repeat;
background-position: center;
// background-size: 10px;
position: absolute;
right: -25px;
transform: rotate(0deg);
transition: all 0.5s;
}
&.hover{
&:after{
transform: rotate(180deg)!important;
transform: rotate(180deg);
transition: all 0.5s;
}
}