Compare commits
No commits in common. "updates" and "master" have entirely different histories.
@ -1,3 +0,0 @@
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M41.0717 8.95871L41.0717 22.6941L27.3363 22.6941L27.3363 8.95871L41.0717 8.95871ZM41.0717 8.95871L8.95871 41.0717M41.1181 22.8297L28.3357 35.6121L14.4183 35.6121V21.6947L27.2007 8.91228M20.907 15.206V29.1234L34.8244 29.1234" stroke="black" stroke-width="3"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 371 B |
1298
index.html
1298
index.html
File diff suppressed because one or more lines are too long
202
pad.html
202
pad.html
@ -1,202 +0,0 @@
|
||||
<style>
|
||||
|
||||
.frame
|
||||
{
|
||||
position:relative;
|
||||
width:500px;
|
||||
padding:20px;
|
||||
border-bottom: none;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.frame__image
|
||||
{
|
||||
position:relative;
|
||||
z-index:20;
|
||||
margin-bottom:19px;
|
||||
}
|
||||
|
||||
.frame__bar
|
||||
{
|
||||
position:relative;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:44px;
|
||||
overflow:hidden;
|
||||
transform-origin: center 22.5px;
|
||||
}
|
||||
.frame__bar span
|
||||
{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -10.5px;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 5px solid #000;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: translate(-50%, 20px) rotate(45deg);
|
||||
transition: left 0.4s;
|
||||
}
|
||||
.frame__bar span::before, .frame__bar span::after
|
||||
{
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1000px;
|
||||
height:0px;
|
||||
border-top: 5px solid black;
|
||||
transform:rotate(-45deg);
|
||||
}
|
||||
.frame__bar span::before
|
||||
{
|
||||
bottom: -0.5px;
|
||||
right: 20px;
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
.frame__bar span::after
|
||||
{
|
||||
top: -4px;
|
||||
left: 17px;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.frame__bar--down
|
||||
{
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
.frame__bar--up
|
||||
{
|
||||
transform: scaleY(1);
|
||||
}
|
||||
.frame__bar--1-3 span
|
||||
{
|
||||
left:16.6%;
|
||||
}
|
||||
.frame__bar--2-3 span
|
||||
{
|
||||
left:50%;
|
||||
}
|
||||
.frame__bar--3-3 span
|
||||
{
|
||||
left:83%;
|
||||
}
|
||||
|
||||
.frame__bracket
|
||||
{
|
||||
position:relative;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:0px;
|
||||
top:-200px;
|
||||
z-index:10;
|
||||
border-top:5px solid black;
|
||||
}
|
||||
.frame__bracket::before, .frame__bracket::after
|
||||
{
|
||||
content:" ";
|
||||
display:block;
|
||||
width:20px;
|
||||
height:171px;
|
||||
position:absolute;
|
||||
top:-5px;
|
||||
border:5px solid black;
|
||||
}
|
||||
.frame__bracket::before
|
||||
{
|
||||
border-right-width: 0px;
|
||||
left:-20px;
|
||||
}
|
||||
.frame__bracket::after
|
||||
{
|
||||
border-left-width: 0px;
|
||||
right:-20px;
|
||||
}
|
||||
|
||||
.frame__button
|
||||
{
|
||||
position:relative;
|
||||
display:block;
|
||||
float:left;
|
||||
padding:5px 0px 5px 0px;
|
||||
box-sizing: border-box;
|
||||
width:33.3%;
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
}
|
||||
.frame__button:hover::before
|
||||
{
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: black;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-5px) rotate(45deg);
|
||||
transition: top 0.4s, bottom 0.4s;
|
||||
}
|
||||
.frame__button--upper:hover::before
|
||||
{
|
||||
top:auto;
|
||||
bottom:-9px;
|
||||
}
|
||||
.frame__button[data-frame-active='true']:hover::before
|
||||
{
|
||||
bottom:auto;
|
||||
top: -30px;
|
||||
}
|
||||
.frame__button--upper[data-frame-active='true']:hover::before
|
||||
{
|
||||
bottom: -26px;
|
||||
top:auto;
|
||||
}
|
||||
</style>
|
||||
<div class="frame">
|
||||
<div class="frame__image">
|
||||
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
|
||||
</div>
|
||||
<div class="frame__button frame__button--upper">Cover</div><div class="frame__button frame__button--upper">Back </div><div class="frame__button frame__button--upper">Spine</div>
|
||||
|
||||
<div class="frame__bar"><span></span></div>
|
||||
<div class="frame__bracket"></div>
|
||||
|
||||
<div class="frame__button">Intro</div><div class="frame__button">1 & 2</div><div class="frame__button">3 & 4</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function frame__setup(inFrame)
|
||||
{
|
||||
var buttons = inFrame.querySelectorAll(".frame__button");
|
||||
var bar = inFrame.querySelector(".frame__bar");
|
||||
var active = false;
|
||||
|
||||
function activate(inButton)
|
||||
{
|
||||
var index = parseInt(inButton.getAttribute("data-frame-index"));
|
||||
var classX = "frame__bar--" + ((index % 3)+1) + "-3";
|
||||
var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
|
||||
|
||||
bar.setAttribute("class", "frame__bar " + classX + " " + classY);
|
||||
|
||||
if(active)
|
||||
{
|
||||
active.setAttribute("data-frame-active", "false");
|
||||
}
|
||||
active = inButton;
|
||||
inButton.setAttribute("data-frame-active", "true");
|
||||
}
|
||||
for(var i=0; i<buttons.length; i++)
|
||||
{
|
||||
buttons[i].setAttribute("data-frame-index", i);
|
||||
buttons[i].setAttribute("data-frame-active", "false");
|
||||
buttons[i].addEventListener("click", function(){ activate(this); });
|
||||
}
|
||||
|
||||
activate( buttons[0] );
|
||||
}
|
||||
|
||||
frame__setup(document.querySelector(".frame"));
|
||||
</script>
|
||||
12
svg.html
12
svg.html
@ -1,12 +0,0 @@
|
||||
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100" style="width:100px; height:100%; background:yellow;">
|
||||
<defs>
|
||||
<symbol id="diamond">
|
||||
<g transform="rotate(45 10 10)">
|
||||
<rect width="20" height="20"></rect>
|
||||
</g>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#diamond" x="0" y="0" />
|
||||
<use href="#diamond" x="0" y="100%" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 397 B |
Loading…
Reference in New Issue
Block a user