Make feeds and row more high contrast

attestate · Nov 24, 2024 · d4091b6 · d4091b6
1 parent df701e0
commit d4091b6
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 44 deletions.
diff --git a/src/public/news.css b/src/public/news.css
@@ -10,6 +10,12 @@
     display: none;
   }
 }
+.content-row {
+  margin-bottom: 17px;
+  background-color: rgba(0,0,0,0.045);
+  border-top: 1px solid rgba(0,0,0,0.3);
+  border-bottom: 1px solid rgba(0,0,0,0.3);
+}
 .inverted-row {
   filter: invert(100%) brightness(175%);
 }
@@ -54,7 +60,7 @@
 .comment-preview:active,
 .bell-button:active {
   touch-action: manipulation;
-  transform: scale(0.88);
+  transform: scale(0.95);
   transition: transform 0.1s ease;
   cursor: pointer;
 }
@@ -376,14 +382,20 @@ body {
   #button-onboarding:hover svg {
     color: black !important;
   }
-  .primary-action-button:hover, #button-onboarding:hover, .buy-button:hover, .friend-buy-button:hover {
+  .primary-action-button:hover,
+  #button-onboarding:hover,
+  .buy-button:hover,
+  .friend-buy-button:hover {
     outline: 1px solid black;
     color: black !important;
     border-color: black !important;
     background-color: white !important;
   }
-  .primary-action-button:active, #button-onboarding:active, .buy-button:active, .friend-buy-button:active {
-    transform: scale(0.96);
+  .primary-action-button:active,
+  #button-onboarding:active,
+  .buy-button:active,
+  .friend-buy-button:active {
+    transform: scale(0.98);
     outline: 1px solid black;
     color: black !important;
     background-color: white !important;
@@ -400,7 +412,7 @@ body {
   }
 
     #hnmain {
-      border: 1px solid #ccc;
+      border: 1px solid rgba(0,0,0,0.2);
       border-top: none;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -417,13 +429,19 @@ body {
 }
 /* mobile device */
  @media only screen and (min-width : 300px) and (max-width : 750px) {
+    .mobile-row-image img {
+      padding-top: 10px;
+    }
+    .content-row-elevated {
+      background-color: rgba(0,0,0,0.065);
+    }
     .elevating-row {
-      background: rgba(246, 246, 239, 0.98);
+      background: rgba(245, 245, 238, 0.98);
       position: relative;
-      margin: -28px 3px 5px 3px;
+      margin: -28px 7px 10px 7px;
       border-radius: 2px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 4px;
     }
     #hnmain {
       border: none;
@@ -695,7 +713,7 @@ body {
       max-width: 45% !important;
     }
     .content-row:hover {
-      background-color: rgba(0,0,0,0.025);
+      background-color: rgba(0,0,0,0.05);
     }
     .feed-button:hover {
       background-color: rgba(0,0,0,0.15) !important;
@@ -710,7 +728,7 @@ body {
       width: 70ch;
       margin-top: 1rem;
       margin-bottom: 1rem;
-      border-top: 1px solid #ccc;
+      border-top: 1px solid rgba(0,0,0,0.2);
       border-radius: 2px;
     }
     #bell {
@@ -797,8 +815,8 @@ body {
     }
     #hnmain {
       border-bottom-right-radius: 2px;
-      border-right: 1px solid #ccc;
-      border-bottom: 1px solid #ccc;
+      border-right: 1px solid rgba(0,0,0,0.2);
+      border-bottom: 1px solid rgba(0,0,0,0.2);
     }
     .svg-container svg {
       width: 1.75rem;
@@ -920,7 +938,7 @@ a.meta-link:hover, span.meta-link:hover {
 }
 .interaction-element:hover {
   cursor:pointer;
-  background-color: rgba(0,0,0,0.1) !important;
+  background-color: rgba(0,0,0,0.15) !important;
 }
 
 .bell-button:hover{

diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -220,7 +220,7 @@ const knownBadOgImages = [
 const row = (
   start = 0,
   path,
-  style = "border-bottom: 1px solid rgba(0,0,0,0.1);",
+  style = "",
   interactive,
   hideCast,
   period,
@@ -262,10 +262,10 @@ const row = (
           <div
             class="${interactive ? "" : "content-row"} ${
       invert ? "inverted-row" : ""
-    }"
-            style="${invert ? "display:none;" : ""} ${
-      i === 0 ? "border-top: 1px solid rgba(0,0,0,0.1);" : ""
-    }${style}"
+    } ${displayMobileImage ? "content-row-elevated" : ""}"
+            style="${i === 0 ? "margin-top: 17px;" : ""} ${
+      invert ? "display:none;" : ""
+    } ${style}"
           >
             ${
               displayMobileImage
@@ -290,7 +290,7 @@ const row = (
             <div 
               class="${displayMobileImage ? "elevating-row" : ""}"
 
-              style="display: flex; align-items: center; padding: 7px 0;">
+              style="display: flex; align-items: center; padding: 3px 0;">
               <div
                 data-title="${DOMPurify.sanitize(story.title)}"
                 data-href="${DOMPurify.sanitize(story.href)}"
@@ -314,7 +314,7 @@ const row = (
                 >
                   <div
                     class="interaction-element"
-                    style="border-radius: 2px; padding: 5px 0; background-color: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; min-width: 45px; margin: 5px 8px 5px 6px; align-self: stretch;"
+                    style="border-radius: 2px; padding: 5px 0; background-color: rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; min-width: 45px; margin: 5px 8px 5px 6px; align-self: stretch;"
                   >
                     <div style="min-height: 40px; display:block;">
                       <div class="votearrowcontainer">
@@ -609,7 +609,7 @@ const row = (
                         href="/stories/${slugify(
                           DOMPurify.sanitize(story.title),
                         )}?index=0x${story.index}"
-                        style="margin: 5px; background-color: #e6e6df; border-radius: 2px; display: ${path ===
+                        style="margin: 5px; background-color: rgba(0,0,0,0.1); border-radius: 2px; display: ${path ===
                         "/stories"
                           ? "none"
                           : "flex"}; justify-content: center; min-width: 45px; align-items: center; flex-direction: column;"
@@ -647,11 +647,11 @@ const row = (
               !invert
                 ? html` <div
                     class="comment-preview comment-preview-0x${story.index}"
-                    style="touch-action: manipulation; user-select: none; cursor: pointer; padding: 9px 5px 14px 6px; display: flex;"
+                    style="touch-action: manipulation; user-select: none; cursor: pointer; display: flex;"
                   >
                     <div
                       onclick="document.querySelector('.comment-preview-0x${story.index}').style.opacity = 0.5, window.addToQueue(new CustomEvent('open-comments-0x${story.index}'));"
-                      style="display: flex;width: 100%; background-color: rgba(0, 0, 0, 0.05);border-radius: 2px;"
+                      style="display: flex;width: 100%; background-color: border-radius: 2px;"
                     >
                       <div style="width:90%; padding: 11px 9px;">
                         <div style="display: inline-flex; align-items: start;">
@@ -680,7 +680,7 @@ const row = (
                         <span> </span>
                       </div>
                       <div
-                        style="width:10%; display: flex; align-items: center; justify-content: end; padding-right: 9px;"
+                        style="width:10%; display: flex; align-items: center; justify-content: end; padding-right: 19px;"
                       >
                         ${expandSVG}
                       </div>

diff --git a/src/views/feed.mjs b/src/views/feed.mjs
@@ -521,13 +521,29 @@ export default async function (trie, theme, page, domain) {
               ${ad && Row(start, "/", "", null, null, null, recentJoiners)(ad)}
               ${stories
                 .slice(3, 8)
-                .map(
-                  Row(start, "/", undefined, null, null, null, recentJoiners),
+                .map((story, i) =>
+                  Row(
+                    start,
+                    "/",
+                    undefined,
+                    null,
+                    null,
+                    null,
+                    recentJoiners,
+                  )(story, i + 3),
                 )}
               ${stories
                 .slice(8)
-                .map(
-                  Row(start, "/", undefined, null, null, null, recentJoiners),
+                .map((story, i) =>
+                  Row(
+                    start,
+                    "/",
+                    undefined,
+                    null,
+                    null,
+                    null,
+                    recentJoiners,
+                  )(story, i + 8),
                 )}
               ${stories.length < totalStories
                 ? ""

diff --git a/src/views/new.mjs b/src/views/new.mjs
@@ -137,16 +137,9 @@ export default async function (trie, theme) {
               <tr>
                 ${SecondHeader(theme, "new")}
               </tr>
-              ${items
-                .slice(0, 8)
-                .map(
-                  Row(null, "/new", undefined, null, null, null, recentJoiners),
-                )}
-              ${items
-                .slice(8)
-                .map(
-                  Row(null, "/new", undefined, null, null, null, recentJoiners),
-                )}
+              ${items.map(
+                Row(null, "/new", undefined, null, null, null, recentJoiners),
+              )}
             </table>
             ${Footer(theme, "/new")}
           </div>

diff --git a/src/views/story.mjs b/src/views/story.mjs
@@ -90,7 +90,9 @@ export async function generateStory(index) {
 export function generateList(profiles, submitter) {
   profiles.shift();
   return html`
-    <ul style="padding: 0.3rem 0 0.65rem 56px; list-style: none; margin: 0;">
+    <ul
+      style="border: 1px solid rgba(0,0,0,0.1); border-radius: 2px; margin: 0 1rem; background-color: rgba(0,0,0,0.1); padding: 0.3rem 0 0.65rem 0.65rem; list-style: none;"
+    >
       <li style="position: relative;">
         <p
           style="display: flex; align-items: center; gap: 3px; flex: 1; margin: 0; padding: 2px 0; font-size: 14px; color: #6b7280;"
@@ -214,7 +216,7 @@ export default async function (trie, theme, index, value, referral) {
   story.displayName = ensData.displayName;
 
   const start = 0;
-  const style = "padding: 1rem 10px 0 10px;";
+  const style = "";
 
   let ogImage = `https://news.kiwistand.com/previews/${index}.jpg`;
   const ogDescription =

diff --git a/src/web/src/ChatBubble.jsx b/src/web/src/ChatBubble.jsx
@@ -49,7 +49,7 @@ const ChatBubble = ({ allowlist, delegations, storyIndex, commentCount }) => {
       style={{
         cursor: isDisabled ? "not-allowed" : "pointer",
         margin: "5px",
-        backgroundColor: "#e6e6df",
+        backgroundColor: "rgba(0,0,0,0.1)",
         borderRadius: "2px",
         display: "flex",
         alignSelf: "stretch",

diff --git a/src/web/src/CommentSection.jsx b/src/web/src/CommentSection.jsx
@@ -23,7 +23,7 @@ const Comment = ({ comment, index }) => {
       style={{
         color: "black",
         border: "1px solid rgba(0,0,0,0.1)",
-        backgroundColor: "#E6E6DF",
+        backgroundColor: "rgba(0,0,0,0.075)",
         padding: "0.55rem 0.75rem",
         borderRadius: "2px",
         display: "block",

diff --git a/src/web/src/Vote.jsx b/src/web/src/Vote.jsx
@@ -146,7 +146,7 @@ const Vote = (props) => {
             className={hasUpvoted ? "" : "interaction-element"}
             style={{
               borderRadius: "2px",
-              backgroundColor: "rgba(0,0,0,0.05)",
+              backgroundColor: "rgba(0,0,0,0.1)",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",