Merge pull request #65 from cse210-works-on-my-machine/w3-and-a11y

mobile friendly + meta for SEO + img tag fixes
cse210-works-on-my-machine · Dec 13, 2023 · 664c9db · 664c9db
2 parents 6fdfe19 + fc1e760
commit 664c9db
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="What's happening across the Fediverse">
     <link rel="stylesheet" href="src/styles/common.css">
     <link rel="stylesheet" href="src/styles/index.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -12,7 +13,7 @@
 </head>
 <body>
     <header>
-        <h1>B L E N D</h1>
+        <h1>Blend</h1>
         <button id="refresh">
             <img src="media/refresh.svg" class="icon-large" alt="refresh button icon">
         </button>

diff --git a/settings.html b/settings.html
@@ -3,19 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="What's happening across the Fediverse: settings page">
     <link rel="stylesheet" href="src/styles/common.css">
     <link rel="stylesheet" href="src/styles/settings.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap">
+    </noscript>
+
     <title>Blend | What's happening across the Fediverse</title>
 </head>
 <body>
     <header>
-        <h1>B L E N D</h1>
+        <h1>Blend</h1>
         <div class="flex-spacer"></div>
         <button onclick="location.href='index.html'">
-            <img src="media/feed.svg" class="icon-large"></img>
+            <img src="media/feed.svg" class="icon-large" alt="button icon for returning to feed">
         </button>
     </header>
     <main>
@@ -27,7 +33,7 @@ <h2>Mastodon</h2>
                     <li>
                         <input id="mastodon-add-instance" type="text">
                         <button class="add-instance-btn" data-network="mastodon">
-                            <img src="media/plus.svg" class="icon-small"></img>
+                            <img src="media/plus.svg" class="icon-small" alt="button to add new instance">
                         </button>
                     </li>
 
@@ -40,32 +46,15 @@ <h2>Lemmy</h2>
                     <li>
                         <input id="lemmy-add-instance" type="text">
                         <button class="add-instance-btn" data-network="lemmy">
-                            <img src="media/plus.svg" class="icon-small"></img>
+                            <img src="media/plus.svg" class="icon-small" alt="button to add new instance">
                         </button>
                     </li>
 
                     <li class="instances-reset-button" data-network="lemmy"><button>Reset to default</button></li>
                 </ul>
             </div>
         </section>
-        <h1>Appearance</h1>
-        <section>
-            <div>
-                <label for="themes">Theme:</label>
-                <select name="themes" id="themes" >
-                    <option>Default Light</option>
-                    <option>Default Dark</option>
-                    <option>Retro Light</option>
-                    <option>Retro Dark</option>
-                </select>
-            </div>
-        </section>
-
     </main>
-
-    <footer>
-        Created by [names here], copyright LOLOLOL
-    </footer>
     <script type="module" src="./src/scripts/settings-page.js"></script>
 </body>
 </html>

diff --git a/src/styles/post-element.css b/src/styles/post-element.css
@@ -1,16 +1,31 @@
 :host {
-    width: 80%;
+    width: 90%;
     display: grid;
-    grid-template-columns: auto 1fr;
+    /* picture width is 106px with border, so align date with it */
+    grid-template-columns: 106px 1fr;
     grid-template-rows: max-content max-content max-content;
     gap: 1em;
     padding-bottom: 1em;
     padding-top: 1em;
 }
 
+@media only screen and (min-width: 640px) {
+    :host {
+        width: 70%;
+    }
+}
+
 .post-header {
     display: flex;
-    align-items: center
+    align-items: center;
+    word-break: break-all;
+}
+
+
+@media only screen and (min-width: 640px) {
+    .post-header {
+        word-wrap: normal;
+    }
 }
 
 picture {

diff --git a/src/styles/settings.css b/src/styles/settings.css
@@ -5,7 +5,7 @@ main section {
     align-items: center;
 }
 
-@media only screen and (min-width: 40em) {
+@media only screen and (min-width: 640px) {
     main section {
         flex-direction: row;
     }