SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

misc

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-01 11:59:49 -04:00
parent d63f1f83d1
commit 3228c5e9c2
3 changed files with 149 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
icon-leaf.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

94
index.html
View File

@ -140,7 +140,7 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
display: block; display: block;
bottom: 0; bottom: 0;
right: 0px; right: 0px;
width: 200px; width: 100%;
z-index: 200; z-index: 200;
height: 66px; height: 66px;
overflow: hidden; overflow: hidden;
@ -206,13 +206,15 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
{ {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left:0%; right:0%;
display: block; display: block;
width: 100%; width: 50%;
max-width:200px;
height: 66px; height: 66px;
transition: left 0.4s 0.4s; transition: left 0.4s 0.4s;
cursor:pointer;
} }
nav .button::before, nav .button::after nav .button.menu::before, nav .button.menu::after
{ {
display:block; display:block;
position:absolute; position:absolute;
@ -224,25 +226,49 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
text-align: right; text-align: right;
text-transform:uppercase; text-transform:uppercase;
font-weight:900; font-weight:900;
transition:left 0.4s, top 0.4s; transition:left 0.4s, top 0.4s, padding 0.4s;
} }
nav .button::before nav .button.menu::before
{ {
content:"Menu"; content:"Menu";
} }
nav .button::after nav .button.menu::after
{ {
content:"Close"; content:"Close";
top:180%; top:180%;
} }
[nav-open] nav .button::before nav .button.menu:hover::before, nav .button.menu:hover::after
{
padding-right:60px;
}
[nav-open] nav .button.menu::before
{ {
left:180%; left:180%;
} }
[nav-open] nav .button::after [nav-open] nav .button.menu::after
{ {
top:28px; top:28px;
} }
nav .button.book
{
padding-left: 50px;
left: 0;
padding-top: 20px;
text-transform: uppercase;
font-weight: 900;
box-sizing: border-box;
}
nav .button.book svg
{
display:block;
width:50px;
height:100%;
position:absolute;
top:0;
left:0;
}
nav > ul nav > ul
{ {
position: absolute; position: absolute;
@ -267,11 +293,10 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
text-transform: uppercase; text-transform: uppercase;
color:black !important; color:black !important;
} }
.Dim .Dim
{ {
box-shadow: 0px 0px 10px rgb(0 0 0 / 20%); box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
z-index: 100;
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0%; bottom: 0%;
@ -318,6 +343,7 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
justify-content:space-between; justify-content:space-between;
margin:0 auto; margin:0 auto;
position:absolute; position:absolute;
transform-style: preserve-3d;
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
@ -676,6 +702,7 @@ Video.Init = function()
</head> </head>
<body> <body>
<nav> <nav>
<div class="Dim"></div>
<span class="detail edge"></span> <span class="detail edge"></span>
<span class="detail cap cap--top"></span> <span class="detail cap cap--top"></span>
<span class="detail cap cap--bottom"></span> <span class="detail cap cap--bottom"></span>
@ -687,10 +714,19 @@ Video.Init = function()
<li><a href="#specs">Specs</a></li> <li><a href="#specs">Specs</a></li>
<li><a href="#email">Sign-up</a></li> <li><a href="#email">Sign-up</a></li>
</ul> </ul>
<span class="button"></span> <span class="button menu"></span>
<span class="button book">
<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>
Buy Now
</span>
</nav> </nav>
<div class="Dim"></div>
<main> <main>
<section id="intro">
<img src="https://via.placeholder.com/1024x512.png"/>
</section>
<section id="order"> <section id="order">
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2> <h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
@ -767,6 +803,26 @@ Video.Init = function()
</section> </section>
<section id="specs"> <section id="specs">
<h2 data-spy="0.2|0.8">Specs</h2> <h2 data-spy="0.2|0.8">Specs</h2>
<p>
Start with the gospel each and every day with this one-year devotional by renowned Bible teacher Alistair Begg.
</p>
<p>
Each daily devotion includes:
</p>
<ul>
<li>
<p>Reflections from renowned Bible teacher Alistair Begg</p>
</li>
<li>
<p>Prompts for real life application</p>
</li>
<li>
<p>Relevant Scripture passages</p>
</li>
<li>
<p>A yearly Bible reading plan</p>
</li>
</ul>
</section> </section>
<section id="email"> <section id="email">
<h2 data-spy="0.2|0.8">Sign Up</h2> <h2 data-spy="0.2|0.8">Sign Up</h2>
@ -786,7 +842,7 @@ $("nav .button")[0].addEventListener("click", function()
{ {
document.body.setAttribute("nav-open", true); document.body.setAttribute("nav-open", true);
} }
}) });
Spy.Init(); Spy.Init();
@ -827,17 +883,17 @@ document.querySelector("nav").addEventListener("click", function(inEvent)
let pages = $("[swing]"); var pages = $("[swing]");
let table = $(".Shot")[0]; var table = $(".Shot")[0];
let bookOpen = index => function bookOpen(index)
{ {
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") ); pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
}; };
let bookClose = () => function bookClose()
{ {
pages.forEach(p=>p.setAttribute("swing", "closed")); pages.forEach(p=>p.setAttribute("swing", "closed"));
}; };
let bookPose = inPanel => function bookPose(inPanel)
{ {
table.setAttribute("show", inPanel); table.setAttribute("show", inPanel);
bookClose(); bookClose();

101
pad.html
View File

@ -1,31 +1,72 @@
<style> <style>
.pad .window
{ {
position:relative; position:relative;
margin:50px; width:500px;
border-top:5px solid blue; border:5px solid black;
} padding:20px;
.pad::before, .pad::after border-bottom: none;
{ box-sizing:border-box;
content: " "; }
display: block; .bar
width: 20px; {
height: 20px; position:relative;
position: absolute; bottom:0;
top: -12px; left:0;
border: 5px solid #000; width:100%;
box-sizing: border-box; height:21px;
transform: rotate(45deg); overflow:hidden;
} }
.pad::before .bar.inverted
{ {
left: -18px; transform: translateY(16px) scaleY(-1);
} }
.pad::after .bar span
{ {
right:-18px; display: block;
} position: absolute;
</style> bottom: 0;
<div> left: 50%;
<div class="pad"></div> width: 20px;
</div> height: 21px;
border: 5px solid #000;
transform: translate(-50%, 20px) rotate(45deg);
}
.bar::before, .bar::after
{
content:" ";
display: block;
position:absolute;
bottom:0;
width:100%;
border-top:5px solid black;
}
.bar::before
{
margin-left:11px;
left:50%;
}
.bar::after
{
margin-right:11px;
right:50%;
}
button
{
display:inline-block;
padding:20px 0px 20px 0px;
box-sizing: border-box;
width:33%;
}
</style>
<div class="window">
<div class="bar"><span></span></div>
<div class="bar inverted"><span></span></div>
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
<button>Front</button><button>Spine</button><button>Back</button>
<button>Intro</button><button>1 & 2</button><button>3 & 4</button>
<div class="bar"><span></span></div>
</div>