updates

icon-leaf.svg

@@ -0,0 +1,3 @@
+<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>

pad.html

@@ -0,0 +1,202 @@
+<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>    

svg.html

@@ -0,0 +1,12 @@
+<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>
+