added some fancy display and interactivity to dots
This commit is contained in:
@@ -83,6 +83,11 @@ h1.part{
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
// ______
|
||||
// /_ __/_______ ___
|
||||
// / / / ___/ _ \/ _ \
|
||||
// / / / / / __/ __/
|
||||
// /_/ /_/ \___/\___/
|
||||
section.enonce{
|
||||
width:450px;
|
||||
margin: 1em 0;
|
||||
@@ -134,6 +139,49 @@ section.enonce{
|
||||
}
|
||||
}
|
||||
|
||||
// ____ __
|
||||
// / __ \____ / /______
|
||||
// / / / / __ \/ __/ ___/
|
||||
// / /_/ / /_/ / /_(__ )
|
||||
// /_____/\____/\__/____/
|
||||
.dot{
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transform: translate3d(0,0,0);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
span.id{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left:-3.5em;
|
||||
opacity:0;
|
||||
// transform: translate3d(0, 0, 0);
|
||||
transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
|
||||
}
|
||||
span.bullet{
|
||||
}
|
||||
p.summary{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
&:hover, &.opened{
|
||||
transform: translate3d(0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out;
|
||||
p.summary{
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
span.id{
|
||||
opacity: 1;
|
||||
transform: translate3d(-0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
Reference in New Issue
Block a user