From 3228c5e9c2bbbd4b4a16978fa216b0f9f8ad3f00 Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Wed, 1 Sep 2021 11:59:49 -0400 Subject: [PATCH] misc --- icon-leaf.svg | 3 ++ index.html | 94 ++++++++++++++++++++++++++++++++++++---------- pad.html | 101 +++++++++++++++++++++++++++++++++++--------------- 3 files changed, 149 insertions(+), 49 deletions(-) create mode 100644 icon-leaf.svg diff --git a/icon-leaf.svg b/icon-leaf.svg new file mode 100644 index 0000000..278343c --- /dev/null +++ b/icon-leaf.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index a1abd5a..ae9be9e 100644 --- a/index.html +++ b/index.html @@ -140,7 +140,7 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last- display: block; bottom: 0; right: 0px; - width: 200px; + width: 100%; z-index: 200; height: 66px; overflow: hidden; @@ -206,13 +206,15 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last- { position: absolute; bottom: 0; - left:0%; + right:0%; display: block; - width: 100%; + width: 50%; + max-width:200px; height: 66px; transition: left 0.4s 0.4s; + cursor:pointer; } - nav .button::before, nav .button::after + nav .button.menu::before, nav .button.menu::after { display:block; position:absolute; @@ -224,25 +226,49 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last- text-align: right; text-transform:uppercase; 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"; } - nav .button::after + nav .button.menu::after { content:"Close"; 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%; } - [nav-open] nav .button::after + [nav-open] nav .button.menu::after { 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 { position: absolute; @@ -267,11 +293,10 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last- text-transform: uppercase; color:black !important; } - + .Dim { box-shadow: 0px 0px 10px rgb(0 0 0 / 20%); - z-index: 100; position: fixed; right: 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; margin:0 auto; position:absolute; + transform-style: preserve-3d; top:0; left:0; width:100%; @@ -676,6 +702,7 @@ Video.Init = function() -
+
+
+ +

Order

@@ -767,6 +803,26 @@ Video.Init = function()

Specs

+

+ Start with the gospel each and every day with this one-year devotional by renowned Bible teacher Alistair Begg. +

+

+ Each daily devotion includes: +

+
    +
  • +

    Reflections from renowned Bible teacher Alistair Begg

    +
    • +
  • +

    Prompts for real life application

    +
    • +
  • +

    Relevant Scripture passages

    +
    • +
  • +

    A yearly Bible reading plan

    +
    • +

Sign Up

@@ -786,7 +842,7 @@ $("nav .button")[0].addEventListener("click", function() { document.body.setAttribute("nav-open", true); } -}) +}); Spy.Init(); @@ -827,17 +883,17 @@ document.querySelector("nav").addEventListener("click", function(inEvent) -let pages = $("[swing]"); -let table = $(".Shot")[0]; -let bookOpen = index => +var pages = $("[swing]"); +var table = $(".Shot")[0]; +function bookOpen(index) { pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") ); }; -let bookClose = () => +function bookClose() { pages.forEach(p=>p.setAttribute("swing", "closed")); }; -let bookPose = inPanel => +function bookPose(inPanel) { table.setAttribute("show", inPanel); bookClose(); diff --git a/pad.html b/pad.html index 0dc6fa7..7a2b11a 100644 --- a/pad.html +++ b/pad.html @@ -1,31 +1,72 @@ -
-
-
+.window +{ + position:relative; + width:500px; + border:5px solid black; + padding:20px; + border-bottom: none; + box-sizing:border-box; +} +.bar +{ + position:relative; + bottom:0; + left:0; + width:100%; + height:21px; + overflow:hidden; +} +.bar.inverted +{ + transform: translateY(16px) scaleY(-1); +} +.bar span +{ + display: block; + position: absolute; + bottom: 0; + left: 50%; + width: 20px; + 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%; +} + +
+
+
+ + + +
+
+ +