diff --git a/guestbook.html b/guestbook.html index dfff6a4..cd426aa 100644 --- a/guestbook.html +++ b/guestbook.html @@ -1,13 +1,15 @@ + - + + Guestbook | Hamza Nasher-Alneam @@ -20,12 +22,14 @@

+
+

Guest book - leave a note!

- +

@@ -35,7 +39,7 @@

-
+

@@ -43,6 +47,8 @@
+
+

@@ -50,7 +56,6 @@
- diff --git a/icons/phil.png b/icons/phil.png deleted file mode 100644 index e3bf114..0000000 Binary files a/icons/phil.png and /dev/null differ diff --git a/icons/race.png b/icons/race.png new file mode 100644 index 0000000..0593258 Binary files /dev/null and b/icons/race.png differ diff --git a/index.html b/index.html index f5f58a6..08d1dec 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -12,7 +12,9 @@ Hamza Nasher-Alneam -
+
+
+


@@ -62,18 +64,63 @@

Change the website color theme

-
+

+ + -

+ +

- - diff --git a/scripts/copypopup.js b/scripts/copypopup.js deleted file mode 100644 index 56f408a..0000000 --- a/scripts/copypopup.js +++ /dev/null @@ -1,24 +0,0 @@ -let url = document.location.href; - -function copy(txt) { - let link = `${url}#${txt}`; - navigator.clipboard.writeText(link).then(() => { - console.log("Copied link!"); - }, () => { console.log("Error copying link."); }); - let alert = document.createElement("DIV"); - alert.textContent = "Copied Link to Heading!"; - alert.classList.add("tempAlert"); - document.body.appendChild(alert); - setTimeout(() => { - alert.style.opacity = "1"; - alert.style.bottom = ".5rem"; - }, 200); - setTimeout(() => { - alert.style.opacity = "0"; - alert.style.bottom = "-10rem"; - }, 4200); - setTimeout(() => { - alert.remove(); - }, 4400); - -} \ No newline at end of file diff --git a/scripts/guestbook.js b/scripts/guestbook.js index 94f8510..7333edb 100644 --- a/scripts/guestbook.js +++ b/scripts/guestbook.js @@ -5,10 +5,6 @@ function checkSubmissionValid(event) { event.preventDefault(); document.querySelector('.status').textContent = "Fill out all fields"; } - else if (message.length > 500) { - event.preventDefault(); - document.querySelector('.status').textContent = "Message too long"; - } else { document.querySelector('.status').textContent = "Post succesful!"; } @@ -62,4 +58,12 @@ function toggleElement(elementName) { element.style.opacity = 0; element.style.pointerEvents = "none"; } +} + +function showAll() { + getAll(); + let messagesElement = document.querySelector(".messages"); + messagesElement.style.overflowX = "hidden"; + messagesElement.style.overflowY = "auto"; + messagesElement.style.whiteSpace = "wrap"; } \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index 17dbcee..ffbbb8d 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,3 +1,5 @@ +console.log("hello"); + window.addEventListener("scroll", () => { document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); }, false); @@ -18,6 +20,8 @@ function changeThemeHex() { } } -function resetTheme() { - setThemeColor("#f69b46"); +function setThemeColor(color) { + document.documentElement.style.setProperty("--theme-color", color); + let metaThemeColor = document.querySelector("meta[name=theme-color]"); + metaThemeColor.setAttribute("content", color); } \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js deleted file mode 100644 index 6007680..0000000 --- a/scripts/script.js +++ /dev/null @@ -1,11 +0,0 @@ -// theme color -let themeColor = localStorage.getItem("theme-color"); -if (!themeColor) themeColor = "#f69b46"; -setThemeColor(themeColor); - -function setThemeColor(color) { - document.documentElement.style.setProperty("--theme-color", color); - let metaThemeColor = document.querySelector("meta[name=theme-color]"); - metaThemeColor.setAttribute("content", color); - localStorage.setItem("theme-color", color); -} diff --git a/styles/guestbook.css b/styles/guestbook.css index 784f0b3..0f35db1 100644 --- a/styles/guestbook.css +++ b/styles/guestbook.css @@ -1,73 +1,3 @@ -* { - font-family: "Nunito", "Times New Roman", Times, serif; -} - -body { - overflow-x: hidden; -} - -.content { - transition: .2s; - margin: auto; - max-width: 80rem; - transition: .2s; -} - -h2 { - position: relative; - margin: 1rem .75rem .75rem 2.5rem; - font-size: 1.5rem; - transition: .2s; -} - -h3 { - margin: .75rem 0 0 2rem; -} - -button { - padding: .2rem .5rem; - font-size: 1.1rem; - color: #fff; - background-color: var(--theme-color); - border: solid .2rem var(--theme-color); - border-radius: .5rem; - box-shadow: 0 .1rem .2rem #ddd; - transition: .15s; -} - -button:hover { - color: var(--theme-color); - background-color: transparent; -} - -button:active { - transform: scale(.98); -} - -a { - color: var(--theme-color); -} - -@media only screen and (max-width: 700px) { - .content { - grid-template-columns: 100%; - margin-right: 0; - width: 100vw; - } -} - -@media (prefers-color-scheme: dark) { - button { - box-shadow: 0 .2rem .2rem #000; - } -} - - - - - - - .guestbook { padding-top: 2rem; position: relative; @@ -79,6 +9,11 @@ a { .guestbook .messages { margin: 1rem 0; + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + scrollbar-width: none; text-align: center; } @@ -91,7 +26,7 @@ a { margin: 0 .3rem; min-height: 14rem; min-width: 20rem; - max-width: 24rem; + max-width: 25rem; /* max-width: 700px; */ border: solid .2rem var(--theme-color); border-radius: 1rem; diff --git a/styles/styles.css b/styles/styles.css index a18f894..c6b0acd 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -84,7 +84,7 @@ a { .menu { position: fixed; top: 0; - left: .3rem; + left: .2rem; bottom: 0; width: 10rem; display: flex; diff --git a/thoughts.html b/thoughts.html index c752b01..b4249ff 100644 --- a/thoughts.html +++ b/thoughts.html @@ -3,7 +3,7 @@ - + @@ -40,7 +40,31 @@
- - + \ No newline at end of file