From 9c0a834c7139638d6f6e96daa415aebc933d2a0c Mon Sep 17 00:00:00 2001 From: Hamza Nasher-Alneam Date: Mon, 5 May 2025 15:09:15 -0400 Subject: [PATCH 1/2] Character limit on guestbook entries, guestbook takes full space, menu links can be clicked anywhere --- guestbook.html | 11 ++----- icons/phil.png | Bin 0 -> 777 bytes icons/race.png | Bin 1160 -> 0 bytes index.html | 2 +- partials/menu.html | 32 +++++++----------- projects.html | 2 +- scripts/guestbook.js | 12 +++---- styles/guestbook.css | 77 +++++++++++++++++++++++++++++++++++++++---- thoughts.html | 2 +- 9 files changed, 93 insertions(+), 45 deletions(-) create mode 100644 icons/phil.png delete mode 100644 icons/race.png diff --git a/guestbook.html b/guestbook.html index cd426aa..ef37869 100644 --- a/guestbook.html +++ b/guestbook.html @@ -5,11 +5,10 @@ - + - Guestbook | Hamza Nasher-Alneam @@ -22,14 +21,12 @@

-
-

Guest book - leave a note!

- +

@@ -39,7 +36,7 @@

-
+

@@ -47,8 +44,6 @@
-
-

diff --git a/icons/phil.png b/icons/phil.png new file mode 100644 index 0000000000000000000000000000000000000000..e3bf1143b7d6f080019deeb9c383079f824cd7e7 GIT binary patch literal 777 zcmV+k1NQuhP)&L z2zguc8$oKgclM9cUePE4-@rsQVlgJ!>ar&JAaDZ^S;@BRNnQnJ>|L`ALjE`BZRsl@ z&H%NVU@O7pif@Cs1GISO{yAhnKsk;*>lALAF!d69+69ar!c8mo+UwDFG5Jv2YuLY= zq?4)Cw>N6uYh0s0&V z-mhWAfbmC2@BGs@6!rP&6v+PocoI%?Fu&F000009a7bBm000ie000ie0hKEb8vp*D)*1ta5!uxS~MB(iPx(LPxWo8%4bG-ok zVrIX}^U=)So7wj*z@HWXhCVGuyRoBo0SYkB3$W37i*aiKVE7|5dt5xdYVk6O$h}PpD3c{xl4Jf1$AqqqTU0oRk@HQBK zT#RP{D09C;hmlD5G#muwu8AJ>0^-yF2r1NY!Fareu<*A=KFme}T^LO%c7aNfvI{_2 z1fUGwuNluf1xGFb3{N^80Kph4%&5eO-s>fH4?y%Tn~&xI6-BuZWiX!i3IfB2IbBea zS57CKaJ7{WJpk%m5|*9TlL~Mc&pU+jNvU+HfnYBC1{BOB&Tmqw1t5C=NvRaRa7^kO zmC}h3RF|8fAG^5Z0z{2db$Pe)}|D)8CnE$C1@U|tjGU;RKhj=hB zg29PI%mu*u|H=Cn04j^q!@ZBf7s2?d(h3shLdn_=oYBdD2OyDNNDTmn1Hk1{DU;Af z8#XPcqed`}Lf}tqCo(-G^P-Eb0U%6x8lm!#tg&eu^?YWK_eMC)Bd&AsI#KhzA?9M0 zLL``OCaTcehaTrMqi28DWR9i03V<3OD+h~`%!EE`)MgFL##5d@ltHmvR{=m7)+;GLS-e{6 zf>qE#ckK};O##q8WT$KeV|2gppS&lkc~kl9zY{r1bxXA8qG4Q|y=xxUB<>l*f-D|u zd9Qn{0YFbL($h(-WwhJMmR`qO4h)G+U-T+FG8>VC&Nf7C>4(awZe*EqZxINq_x@R# zWh_;Vxs2uS-qBId2SXc~wh|dXvl_m|??2_lH`GdaHSq&QmIqrH+0vo>-$~$J@@P9v zQUl@;q9u2#osP+Nh$yJ{o5f-DNJ+8*BE6^CC`>pI?|aRkK2l;wjKa`8%|-z9)YmP| zS*sAQRnmK!4FJS@sMXghZc9`+b$2-lDBiuM4$C6o>&HV5bYfH4Dko~^?Q9c0v27GU z?b?sT2E<4^+zSNNh9hh|Z_^Q^4jKi}q7(1^E6Xep4EL`)3NWRO4xRlL1C - + diff --git a/partials/menu.html b/partials/menu.html index 4cfddad..33b71e9 100644 --- a/partials/menu.html +++ b/partials/menu.html @@ -1,24 +1,16 @@
\ No newline at end of file diff --git a/projects.html b/projects.html index d1a1bae..fe3fa8f 100644 --- a/projects.html +++ b/projects.html @@ -4,7 +4,7 @@ - + diff --git a/scripts/guestbook.js b/scripts/guestbook.js index 7333edb..94f8510 100644 --- a/scripts/guestbook.js +++ b/scripts/guestbook.js @@ -5,6 +5,10 @@ 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!"; } @@ -58,12 +62,4 @@ 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/styles/guestbook.css b/styles/guestbook.css index 0f35db1..784f0b3 100644 --- a/styles/guestbook.css +++ b/styles/guestbook.css @@ -1,3 +1,73 @@ +* { + 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; @@ -9,11 +79,6 @@ .guestbook .messages { margin: 1rem 0; - max-width: 100vw; - overflow-x: auto; - overflow-y: hidden; - white-space: nowrap; - scrollbar-width: none; text-align: center; } @@ -26,7 +91,7 @@ margin: 0 .3rem; min-height: 14rem; min-width: 20rem; - max-width: 25rem; + max-width: 24rem; /* max-width: 700px; */ border: solid .2rem var(--theme-color); border-radius: 1rem; diff --git a/thoughts.html b/thoughts.html index b4249ff..26fafc9 100644 --- a/thoughts.html +++ b/thoughts.html @@ -3,7 +3,7 @@ - + From ebb8568ca107a7c3d81d4307bb2f90c64529b750 Mon Sep 17 00:00:00 2001 From: Hamza Nasher-Alneam Date: Mon, 5 May 2025 18:15:42 -0400 Subject: [PATCH 2/2] Save theme color across pages --- guestbook.html | 2 +- index.html | 55 ++++---------------------------------------- projects.html | 1 + scripts/copypopup.js | 24 +++++++++++++++++++ scripts/main.js | 8 ++----- scripts/script.js | 11 +++++++++ styles/styles.css | 2 +- thoughts.html | 28 ++-------------------- 8 files changed, 46 insertions(+), 85 deletions(-) create mode 100644 scripts/copypopup.js create mode 100644 scripts/script.js diff --git a/guestbook.html b/guestbook.html index ef37869..dfff6a4 100644 --- a/guestbook.html +++ b/guestbook.html @@ -1,6 +1,5 @@ - @@ -51,6 +50,7 @@
+ diff --git a/index.html b/index.html index 90fc62c..f5f58a6 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,7 @@ Hamza Nasher-Alneam -
-
-
+


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

Change the website color theme

+
-

- - - +

-

+ + diff --git a/scripts/copypopup.js b/scripts/copypopup.js new file mode 100644 index 0000000..56f408a --- /dev/null +++ b/scripts/copypopup.js @@ -0,0 +1,24 @@ +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/main.js b/scripts/main.js index ffbbb8d..17dbcee 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,5 +1,3 @@ -console.log("hello"); - window.addEventListener("scroll", () => { document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); }, false); @@ -20,8 +18,6 @@ function changeThemeHex() { } } -function setThemeColor(color) { - document.documentElement.style.setProperty("--theme-color", color); - let metaThemeColor = document.querySelector("meta[name=theme-color]"); - metaThemeColor.setAttribute("content", color); +function resetTheme() { + setThemeColor("#f69b46"); } \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..6007680 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,11 @@ +// 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/styles.css b/styles/styles.css index c6b0acd..a18f894 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -84,7 +84,7 @@ a { .menu { position: fixed; top: 0; - left: .2rem; + left: .3rem; bottom: 0; width: 10rem; display: flex; diff --git a/thoughts.html b/thoughts.html index 26fafc9..c752b01 100644 --- a/thoughts.html +++ b/thoughts.html @@ -40,31 +40,7 @@
- + + \ No newline at end of file