Character limit on guestbook entries, guestbook takes full space, menu links can be clicked anywhere

guestbook.html

@@ -5,11 +5,10 @@
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
    <meta name="theme-color" content="#f69b46">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
    <link
       href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap"
       rel="stylesheet">
-   <link rel="stylesheet" href="styles/home.css">
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="stylesheet" href="styles/guestbook.css">
    <title>Guestbook | Hamza Nasher-Alneam</title>
@@ -22,14 +21,12 @@
    <br><br>
 
    <div class="content" style="min-height: 60vh">
-      <div class="main-text">
-         <div>
             <!-- Guestbook -->
             <div class="guestbook">
                <h2 class="guestbook-title">Guest book - leave a note!</h2>
                <div class="messages"></div>
                <div class="show-all-messages">
-                  <button onclick="this.remove(); showAll()">Show all messages</button>
+                  <button onclick="this.remove(); getAll()">Show all messages</button>
                </div>
                <br>
                <button class="post-button" onclick="toggleElement('new-message')">Post a message</button>
@@ -39,7 +36,7 @@
                      <form class="new-message-form" method="POST"
                         action="https://guestbook-api.hnasheralneam.dev/message">
                         <label class="message-header" for="message">Your message for the world</label><br>
-                        <textarea type="text" name="message" placeholder="your post"></textarea><br>
+                        <textarea type="text" name="message" placeholder="your post" maxlength="500"></textarea><br>
                         <label class="text-label" for="github">Your GitHub username</label><br>
                         <input class="text" type="text" name="github" placeholder="github username">
                         <input type="submit" value="Post" onclick="checkSubmissionValid(event)">
@@ -48,8 +45,6 @@
                </div>
             </div>
    </div>
-      </div>
-   </div>
 
    <br><br>
    <div w3-include-html="partials/footer.html"></div>

index.html

@@ -4,7 +4,7 @@
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
    <meta name="theme-color" content="#f69b46">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/home.css">
    <link rel="stylesheet" href="styles/styles.css">

partials/menu.html

@@ -1,24 +1,16 @@
 <div class="menu">
    <div>
-      <div class="item">
+      <a class="item" href="index.html" title="home">
-         <a href="index.html" title="home">
          <img src="icons/home.svg" alt="home">
       </a>
-      </div>
+      <a class="item" href="projects.html" title="projects">
-      <div class="item">
-         <a href="projects.html" title="projects">
          <img src="icons/web_stories.svg" alt="projects">
       </a>
-      </div>
+      <a class="item" href="thoughts.html" title="thoughts">
-      <div class="item">
-         <a href="thoughts.html" title="thoughts">
          <img src="icons/rss_feed.svg" alt="thoughts">
       </a>
-      </div>
+      <a class="item" href="guestbook.html" title="guestbook">
-      <div class="item">
-         <a href="guestbook.html" title="guestbook">
          <img src="icons/developer_guide.svg" alt="guestbook">
       </a>
    </div>
-   </div>
 </div>

projects.html

@@ -4,7 +4,7 @@
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
    <meta name="theme-color" content="#f69b46">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
    <link
       href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap"
       rel="stylesheet">

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!";
    }
@@ -59,11 +63,3 @@ function toggleElement(elementName) {
       element.style.pointerEvents = "none";
    }
 }
-
-function showAll() {
-   getAll();
-   let messagesElement = document.querySelector(".messages");
-   messagesElement.style.overflowX = "hidden";
-   messagesElement.style.overflowY = "auto";
-   messagesElement.style.whiteSpace = "wrap";
-}

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;

thoughts.html

@@ -3,7 +3,7 @@
 <head>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/styles.css">