From 64d643267cbd5900024839728f67955ac01b63c3 Mon Sep 17 00:00:00 2001 From: Lazy Hippopotamus Date: Wed, 14 Jun 2023 19:31:48 -0400 Subject: [PATCH] things work on mobile now --- index.html | 151 ++++++++++++++++++++++++++++----------------- main.css | 146 +++++++++++++++++++++++++++++++++++++++---- main.js | 44 ++++++++++++- res/arrow-none.svg | 52 ++++++++++++++++ src/_index.html | 56 ++++++++--------- src/template.html | 95 ++++++++++++++++++++-------- 6 files changed, 420 insertions(+), 124 deletions(-) create mode 100644 res/arrow-none.svg diff --git a/index.html b/index.html index 04f3ed4..64c901f 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,22 @@ + + + Jhewit | Home - +

Sidebar

@@ -25,7 +34,7 @@ Links.
- +
@@ -33,32 +42,52 @@

Jhewit

- @@ -82,36 +111,46 @@
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam! +
+
+ + + + + +
+
+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga. +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi! +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora! +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit! +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt. +

+
+
+
+ +
+ Website by Tyler Clarke.
diff --git a/main.css b/main.css index 88ff29a..df24e2a 100644 --- a/main.css +++ b/main.css @@ -33,7 +33,7 @@ h1 { #header { text-align: center; - padding-top: 10%; + padding-top: 6%; padding-bottom: 10%; min-height: 80vh; box-sizing: border-box; @@ -94,12 +94,16 @@ body { } #headin { - padding-bottom: 2%; + padding: 20px; display: flex; justify-content: center; align-items: center; - padding-top: 2%; z-index: 10000000; + box-sizing: border-box; +} + +#hambugha + label { + display: none; } h1 { @@ -112,6 +116,7 @@ h1 { #head-marker.scrolly-out + #headin { position: fixed; + justify-content: space-between; transition: background-color 0.3s, color 0.3s; top: 0px; left: 0px; @@ -119,6 +124,7 @@ h1 { margin-left: var(--sidebar-size); width: calc(100vw - var(--sidebar-size)); /*width: 100vw;*/ + background-color: white; } #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * { @@ -161,15 +167,14 @@ body:not(.sidebar-opened) > #sider-outer > #sider > img { left: 0px; padding-left: 10px; background-color: red; - border-radius: 20px; padding: 20px; + clip-path: polygon(0% 0%, 100% 50%, 0% 100%); } #sider > img { position: absolute; right: 10px; top: 50%; - transform: translateY(-50%); width: 20px; } @@ -219,12 +224,6 @@ a:hover { color: darkgreen; } -@media (max-width: 1000px) { - #headin { - flex-direction: column; - } -} - .carousel > div { min-width: max(15vw, 15vh); min-height: max(15vw, 15vh); @@ -301,4 +300,129 @@ h1 { .carousel-outer > img:last-child { right: 2vw; + text-align: center; +} + +.image-relational-scrolling { + display: flex; + justify-content: space-between; +} + +.image-relational-scrolling > div:last-child > p:last-child { + padding-bottom: 25vh; +} + +.image-relational-scrolling > div:last-child > p { + padding-bottom: 75px; + max-width: 600px; +} + +.image-relational-scrolling > div:first-child { + min-width: 30vw; + max-width: 30vw; + box-sizing: border-box; + position: sticky; + top: calc(25vh); + left: 0px; + overflow: hidden; + align-self: flex-start; +} + +.image-relational-scrolling > div:first-child > img { + width: 100%; + height: 0px; + box-sizing: border-box; + position: relative; + opacity: 0%; + transition: opacity 200ms; + position: absolute; +} + +.image-relational-scrolling > div:first-child > img.selected { + opacity: 100%; + height: auto; + position: initial; +} + +#footer { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-content: space-evenly; + background-color: black; +} + +#footer > p { + padding: 2em; + color: white; +} + +#truebottom { + background-color: black; + text-align: center; + padding: 5px; + color: white; + font-size: 0.7em; +} + +.image-relational-scrolling > div:last-child > p > img { + display: none; + max-width: 100%; +} + +@media (max-width: 900px) { + #footer { + grid-template-columns: 1fr; + } + + .image-relational-scrolling > div:first-child { + display: none; + } + + .image-relational-scrolling > div:last-child > p > img { + display: initial; + padding: 3em; + box-sizing: border-box; + } + + .image-relational-scrolling { + display: flex; + justify-content: center; + } + + #hambugha + label { + display: inline-block; + background-color: aliceblue; + padding: 10px; + margin: 10px; + margin-bottom: 0px; + } + + #hambugha + label:hover { + background-color: grey; + } + + #links { + display: flex; + visibility: hidden; + flex-direction: column; + height: 0px; + } + + #links-outer { + display: flex; + flex-direction: column; + } + + #links > div:nth-child(2n) { + display: none; + } + + #links > div:nth-child(2n - 1):hover + div, #links > div:nth-child(2n):hover { + display: inline-block; + visibility: visible; + } + + #hambugha:checked + label + #links { + visibility: visible; + } } \ No newline at end of file diff --git a/main.js b/main.js index 6b9bc12..5dbe0d3 100644 --- a/main.js +++ b/main.js @@ -8,6 +8,21 @@ function clamp(min, val, max) { return val; } +function getNearestChildIndexTo(element, position) { + var nearest = undefined; + var nearestValue = Infinity; + for (var i = 0; i < element.children.length; i++){ // There isn't a short-circuit here because we have to consider for transforms. I don't think I'll be doing anything that hack but you never know. + var box = element.children[i].getBoundingClientRect(); + var elPos = box.top + box.height / 2; + var distance = Math.abs(position - elPos); + if (distance < nearestValue) { + nearestValue = distance; + nearest = i; + } + } + return nearest; // If the element has any children, this is guaranteed to be well-defined. +} + const scrollchecks = () => { var el = document.getElementById("header"); el.style.backgroundPositionY = 50 + (document.documentElement.scrollTop/el.scrollHeight) / 2 * 100 + "%"; @@ -41,8 +56,35 @@ const scrollchecks = () => { var perc = clamp(0, document.getElementById("outer").scrollTop / (window.innerHeight / 2), 1); document.querySelector("#headin > h1").style.fontSize = 2 + 4 * (1 - perc) + "em"; document.querySelector("#links").style.opacity = perc; + document.querySelector("#hambugha + label").style.opacity = perc; //document.querySelector("#carousel").style.opacity = perc; + document.querySelector("#sider > img").style.top = clamp(15, 100 * (document.querySelector("#headin > h1").getBoundingClientRect().top / window.innerHeight), 100) + "%"; + Array.from(document.getElementsByClassName("image-relational-scrolling")).forEach(element => { + let sel = getNearestChildIndexTo(element.children[1], window.innerHeight / 2); + for (var i = 0; i < element.children[0].children.length; i++){ + if (i == sel) { + element.children[0].children[i].classList.add("selected"); + } + else { + element.children[0].children[i].classList.remove("selected"); + } + } + }); }; + + +window.addEventListener("load", () => { + Array.from(document.getElementsByClassName("image-relational-scrolling")).forEach(imagerelational => { + var row1 = imagerelational.children[0]; + var row2 = imagerelational.children[1]; + for (var i = 0; i < row1.children.length; i ++) { + var el = row1.children[i].cloneNode(); + //el.classList.add("nearest-ignore"); + row2.children[i].prepend(el); + } + }); +}); + window.addEventListener("scroll", scrollchecks); window.addEventListener("scrollend", scrollchecks); window.addEventListener("wheel", scrollchecks); @@ -120,6 +162,6 @@ function toggle_sidebar() { el.src = "res/arrow-left.svg"; } else { - el.src = "res/arrow-right.svg"; + el.src = "res/arrow-none.svg"; } } \ No newline at end of file diff --git a/res/arrow-none.svg b/res/arrow-none.svg new file mode 100644 index 0000000..5960995 --- /dev/null +++ b/res/arrow-none.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + diff --git a/src/_index.html b/src/_index.html index 84a25f7..7152900 100644 --- a/src/_index.html +++ b/src/_index.html @@ -1,30 +1,26 @@ -Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla -necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam! \ No newline at end of file +
+
+ + + + + +
+
+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga. +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi! +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora! +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit! +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt. +

+
+
\ No newline at end of file diff --git a/src/template.html b/src/template.html index 4cad7c9..4d59f3a 100644 --- a/src/template.html +++ b/src/template.html @@ -1,13 +1,22 @@ + + + Jhewit | Home - +

Sidebar

@@ -25,7 +34,7 @@ Links.
- +
@@ -33,32 +42,52 @@

Jhewit

- @@ -84,6 +113,20 @@
{content}
+ +
+ Website by Tyler Clarke. +