Better look frl

public/posts/20250715.md

@@ -2,7 +2,9 @@ title:170 pixels (sharpening included)
 
 desc:Eradicate all edges. _Or how OEMs reiterate their meaning of portraits._
 
-For years, OEMs have been keen on working with portrait modes on phones, each with their own varieties and quirks. But in the past four years, portrait mode has been redefined from the ground up, prioritizing hardware over software to better separate the subject from the background and maintain compression rates.
+For years, OEMs have been keen on working with portrait modes on phones, each with their own varieties and quirks. But in the past four years, portrait mode has been redefined from the ground up, prioritizing hardware over software to better separate the subject from the background and maintain compression ratios [^first].
+
+[^first]: _The difference in how flattened subject is, related to background, and directly correlating to the final bokeh look._
 
 This shift marks a significant evolution from the early days of portrait photography on phones. Initially, portrait modes heavily relied on software algorithms to create a blurred background effect, but now, the mode relies on both the provided hardware background blur and the supplementary effect from mode. 
 
@@ -20,6 +22,9 @@ With all of that being taken in account, the main source of improvements is now,
 | **Telephoto Camera (3x, primary portrait camera)**| 200MP 1/1.4" 0.56µm (2.24µm @ Hexa-deca-bayer) Samsung S5KHP3 based telephoto | 50MP 1/1.56" 1.0µm (2.0µm @ Quad-bayer) Sony IMX890 based telephoto | 50MP 1/1.95" 0.8µm (1.6µm @ Quad-bayer) Sony IMX882/LYT-600 based telephoto |
 | **EFL & Aperture** | 72mm at ƒ2.6 | 62mm (cropped to 70mm) at ƒ2.6 | 70mm at ƒ2.6 |
 | **Portrait Profiles** | Harcourt-tuned | No portrait profiles provided by Hasselblad | Zeiss-tuned |
+| **Software version**| MagicOS meafnaf[^second] 9.0.0.123 (C185E1R3P2)|ColorOS CN 15.0.0.731(CN01)|OriginOS CN 15.0.31.15|
+
+[^second]: _Middle East, North Africa, Africa. Also common region for Hong Kong units._
 
 ## _Why these three?_
 Because it would be fun to see three different types of hardware stacked against each other, wouldn't it? And to make people speculate whether each of these phones would be above either just based on raw specs.

public/posts/index.json

@@ -1,4 +1,3 @@
 [
-  "20250715.md",
-  "TEST.md"
+  "20250715.md"
 ]

src/App.jsx

@@ -156,54 +156,32 @@ function App() {
   };
 
   const MatingContestants = () => (
-    <div className="space-y-6">
-      <h1 className="text-4xl font-extrabold text-white mb-8 tracking-tight">
-        Posts
-      </h1>
-      {loading ? (
-        <div className="text-center py-20">
-          <svg className="animate-spin h-12 w-12 text-blue-500 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-          <p className="mt-4 text-gray-400">Loading posts...</p>
-        </div>
-      ) : error ? (
-        <div className="text-center text-red-400 font-medium p-8 bg-red-900 rounded-lg border border-red-700">
-          <p>{error}</p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {Object.keys(markdownPosts).map((tensorRelease) => (
-            <div
-              key={tensorRelease}
-              onClick={() => travelToExpress(tensorRelease)}
-              className="group cursor-pointer bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col justify-between h-full"
-            >
-              <div>
-                <h2 className="text-2xl font-semibold text-gray-200 group-hover:text-blue-500 transition-colors duration-200 mb-2">
-                  <div dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].title }} />
-                </h2>
-                {/* <p className="text-gray-400 text-sm">
-                  Public
-                </p> */}
-              </div>
-              <div className="flex-grow mt-4">
-                <div
-                  className="text-gray-300 leading-relaxed"
-                  dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].description }}
-                />
-              </div>
-              <div className="mt-4">
-                <button className="text-blue-500 font-medium hover:underline focus:outline-none">
-                  Read more &rarr;
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  {Object.keys(markdownPosts).map((tensorRelease) => (
+    <div
+      key={tensorRelease}
+      onClick={() => travelToExpress(tensorRelease)}
+      className="group cursor-pointer bg-white border border-gray-200 rounded-xl hover:border-blue-400 transition-colors duration-200 p-6 flex flex-col justify-between h-full"
+    >
+      <div>
+        <h2 className="text-xl font-semibold text-gray-900 group-hover:text-blue-600 transition-colors duration-200 mb-2">
+          <div dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].title }} />
+        </h2>
+      </div>
+      <div className="flex-grow mt-4">
+        <div
+          className="text-gray-600 leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].description }}
+        />
+      </div>
+      <div className="mt-4">
+        <button className="text-blue-600 font-medium hover:underline focus:outline-none">
+          Read more →
+        </button>
+      </div>
     </div>
+  ))}
+</div>
   );
 
   const WiltedFlower = ({ tensorRelease }) => {
@@ -257,65 +235,63 @@ function App() {
 
     return (
       <div className="w-full">
-        <div className="bg-gray-800 text-gray-200 rounded-2xl shadow-xl p-8 md:p-12 lg:p-16">
-          <button
-            onClick={getOut}
-            className="text-gray-400 hover:text-white transition-colors duration-200 mb-6 flex items-center"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
-              <path
-                fillRule="evenodd"
-                d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-            Back to Home
-          </button>
-          <div className="mb-8">
-            <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-2 leading-tight">
-              <div dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].title }} />
-            </h1>
-            <div className="text-xl italic font-light text-gray-400"
-                 dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].description }} />
-          </div>
-          <hr className="border-gray-600 mb-8" />
-          <div
-            className="markdown-content text-gray-300 font-normal leading-relaxed text-lg"
-            dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
-          />
-        </div>
-      </div>
+  <div className="bg-white text-gray-800 border border-gray-200 rounded-xl p-8 md:p-12 lg:p-16">
+    <button
+      onClick={getOut}
+      className="text-gray-500 hover:text-gray-900 transition-colors duration-200 mb-6 flex items-center"
+    >
+      ← Back to Home
+    </button>
+
+    <div className="mb-8">
+      <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2 leading-tight">
+        <div dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].title }} />
+      </h1>
+      <div
+        className="text-lg italic font-light text-gray-500"
+        dangerouslySetInnerHTML={{ __html: markdownPosts[tensorRelease].description }}
+      />
+    </div>
+
+    <hr className="border-gray-200 mb-8" />
+
+    <div
+      className="markdown-content text-gray-700 leading-relaxed text-lg"
+      dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+    />
+  </div>
+</div>
     );
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 font-sans text-gray-200 antialiased flex flex-col">
-  <div className="max-w-7xl mx-auto w-full flex-grow">
-    <header className="py-6 border-b border-gray-700">
-          <div className="text-3xl font-black text-white">
-            <span className="text-blue-500">Goon</span>Blog
-          </div>
-          <nav>
-            <ul className="flex space-x-4">
-              <li>
-                <a
-                  href="#"
-                  onClick={getOut}
-                  className="text-gray-400 hover:text-white transition-colors duration-200 font-medium"
-                >
-                  Home
-                </a>
-              </li>
-            </ul>
-          </nav>
-        </header>
-
-        <main className="py-12 px-4 sm:px-6 lg:px-8">
-          {selectedPost === null ? <MatingContestants /> : <WiltedFlower tensorRelease={selectedPost} />}
-        </main>
-      </div>
+  <div className="min-h-screen bg-white font-sans text-gray-800 antialiased flex flex-col">
+    <div className="max-w-5xl mx-auto w-full flex-grow">
+      <header className="headercontainer py-6 border-b border-gray-200 flex items-center justify-between">
+        <div className="text-2xl font-bold text-gray-900">
+          <span className="text-blue-600">Goon</span>Blog
+        </div>
+        <nav>
+          <ul className="flex space-x-4">
+            <li>
+              <a
+                href="#"
+                onClick={getOut}
+                className="text-gray-600 hover:text-gray-900 transition-colors duration-200 font-medium"
+              >
+                Home
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+
+      <main className="py-10 px-4 sm:px-6 lg:px-8">
+        {selectedPost === null ? <MatingContestants /> : <WiltedFlower tensorRelease={selectedPost} />}
+      </main>
     </div>
-  );
+  </div>
+);
 }
 
 export default App;

src/index.css

@@ -28,7 +28,7 @@ body {
 .markdown-content {
   line-height: 1.7;
   font-size: 1rem;
-  color: #d1d5db; /* gray-300 */
+  color: #000000; /* gray-300 */
 }
 
 /* Headings */
@@ -37,21 +37,21 @@ body {
   font-weight: 800;
   margin-top: 2.5rem;
   margin-bottom: 1rem;
-  color: #fff;
+  color: #000000;
 }
 .markdown-content h2 {
   font-size: 1.75rem;
   font-weight: 700;
   margin-top: 2rem;
   margin-bottom: 1rem;
-  color: #e5e7eb;
+  color: #000000;
 }
 .markdown-content h3 {
   font-size: 1.5rem;
   font-weight: 600;
   margin-top: 1.75rem;
   margin-bottom: 0.75rem;
-  color: #e5e7eb;
+  color: #000000;
 }
 .markdown-content h4,
 .markdown-content h5,
@@ -60,7 +60,7 @@ body {
   font-weight: 600;
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
-  color: #d1d5db;
+  color: #000000;
 }
 
 /* Paragraphs */
@@ -133,6 +133,7 @@ body {
 /* Emphasis */
 .markdown-content em {
   font-style: italic;
+  color: #000000;
 }
 .markdown-content strong {
   font-weight: 700;
@@ -169,7 +170,7 @@ body {
   vertical-align: top;
 }
 .markdown-content th {
-  background-color: #374151; /* gray-700 */
+  background-color: #777777; /* gray-700 */
   font-weight: 600;
   color: #f3f4f6; /* gray-100 */
 }
@@ -181,6 +182,11 @@ body {
   color: #9ca3af; /* gray-400 */
 }
 
+.headercontainer {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 /* Subscript & Superscript */
 .markdown-content sub {
   font-size: 0.8em;
@@ -217,7 +223,7 @@ body {
 .markdown-content dd {
   margin-left: 1.5rem;
   margin-bottom: 1rem;
-  color: #d1d5db;
+  color: #6e6e6e;
 }
 
 /* Abbreviations */
@@ -247,7 +253,7 @@ body {
 }
 
 .markdown-content .info {
-  background-color: #1e3a8a; /* blue-900 */
+  background-color: #8793b54d; /* blue-900 */
   border-left: 4px solid #3b82f6; /* blue-500 */
   padding: 1rem;
   border-radius: 0.5rem;
@@ -255,7 +261,7 @@ body {
 }
 
 .markdown-content .warning {
-  background-color: #78350f; /* amber-900 */
+  background-color: #b398874d; /* amber-900 */
   border-left: 4px solid #f59e0b; /* amber-500 */
   padding: 1rem;
   border-radius: 0.5rem;